mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-03-10 01:01:16 -04:00
fix(curriculum): update tests to specific methods cafe menu steps 1-13 (#59901)
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
@@ -14,31 +14,31 @@ Add a `head` element within the `html` element, so you can add a `title` element
|
||||
You should have an opening `<head>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>/i));
|
||||
assert.match(code, /<head>/i);
|
||||
```
|
||||
|
||||
You should have a closing `</head>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>/i));
|
||||
assert.match(code, /<head>/i);
|
||||
```
|
||||
|
||||
You should have an opening `<title>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<title>/i));
|
||||
assert.match(code, /<title>/i);
|
||||
```
|
||||
|
||||
You should have a closing `</title>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/title>/i));
|
||||
assert.match(code, /<\/title>/i);
|
||||
```
|
||||
|
||||
Your `title` element should be nested in your `head` element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>\s*<title>.*<\/title>\s*<\/head>/si));
|
||||
assert.match(code, /<head>\s*<title>.*<\/title>\s*<\/head>/si);
|
||||
```
|
||||
|
||||
Your `title` element should have the text `Cafe Menu`. You may need to check your spelling.
|
||||
|
||||
@@ -14,26 +14,26 @@ To prepare to create some actual content, add a `body` element below the `head`
|
||||
You should have an opening `<body>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<body>/i));
|
||||
assert.match(code, /<body>/i);
|
||||
```
|
||||
|
||||
You should have a closing `</body>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body>/i));
|
||||
assert.match(code, /<\/body>/i);
|
||||
```
|
||||
|
||||
You should not change your `head` element. Make sure you did not delete your closing tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>/i));
|
||||
assert(code.match(/<\/head>/i));
|
||||
assert.match(code, /<head>/i);
|
||||
assert.match(code, /<\/head>/i);
|
||||
```
|
||||
|
||||
Your `body` element should come after your `head` element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head>[.\n\s]*<body>/im));
|
||||
assert.match(code, /<\/head>[.\n\s]*<body>/im);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -14,13 +14,13 @@ It's time to add some menu content. Add a `main` element within the existing `bo
|
||||
Your code should have an opening `<main>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<main>/i));
|
||||
assert.match(code, /<main>/i);
|
||||
```
|
||||
|
||||
Your code should have a closing `</main>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/main>/i));
|
||||
assert.match(code, /<\/main>/i);
|
||||
```
|
||||
|
||||
You should not change your `body` element. Make sure you don't accidentally delete your closing tag.
|
||||
@@ -33,7 +33,7 @@ Your `main` tag should be within your `body` tag.
|
||||
|
||||
```js
|
||||
const main = document.querySelector('main');
|
||||
assert(main.parentElement.tagName === 'BODY');
|
||||
assert.equal(main.parentElement.tagName, 'BODY');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -14,13 +14,13 @@ The name of the cafe is `CAMPER CAFE`. So, add an `h1` element within your `main
|
||||
You should have an opening `<h1>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1>/i));
|
||||
assert.match(code, /<h1>/i);
|
||||
```
|
||||
|
||||
You should have a closing `</h1>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/h1>/i));
|
||||
assert.match(code, /<\/h1>/i);
|
||||
```
|
||||
|
||||
You should not change your existing `main` element.
|
||||
@@ -38,7 +38,7 @@ assert.equal(document.querySelector('h1')?.parentElement?.tagName, "MAIN");
|
||||
Your `h1` element should have the text `CAMPER CAFE`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1>CAMPER CAFE<\/h1>/));
|
||||
assert.match(code, /<h1>CAMPER CAFE<\/h1>/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -14,13 +14,13 @@ To let visitors know the cafe was founded in `2020`, add a `p` element below the
|
||||
You should have an opening `<p>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<p>/i));
|
||||
assert.match(code, /<p>/i);
|
||||
```
|
||||
|
||||
You should have a closing `</p>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/p>/i));
|
||||
assert.match(code, /<\/p>/i);
|
||||
```
|
||||
|
||||
You should not change your existing `h1` element. Make sure you did not delete the closing tag.
|
||||
@@ -38,7 +38,7 @@ assert.equal(document.querySelector('p')?.previousElementSibling?.tagName, 'H1')
|
||||
Your `p` element should have the text `Est. 2020`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector("p").innerText === "Est. 2020");
|
||||
assert.equal(document.querySelector("p").innerText, "Est. 2020");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -23,21 +23,21 @@ You should have an `h1` selector in your `style` element.
|
||||
|
||||
```js
|
||||
const hasSelector = new __helpers.CSSHelp(document).getStyle('h1');
|
||||
assert(hasSelector);
|
||||
assert.exists(hasSelector);
|
||||
```
|
||||
|
||||
Your `text-align` property should have a value of `center`.
|
||||
|
||||
```js
|
||||
const hasTextAlign = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['text-align'] === 'center');
|
||||
assert(hasTextAlign);
|
||||
assert.isTrue(hasTextAlign);
|
||||
```
|
||||
|
||||
Your `h1` selector should set the `text-align` property to `center`.
|
||||
|
||||
```js
|
||||
const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align');
|
||||
assert(h1TextAlign === 'center');
|
||||
assert.equal(h1TextAlign, 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -14,19 +14,19 @@ Until now, you've had limited control over the presentation and appearance of yo
|
||||
Your code should have an opening `<style>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<style\s*>/i));
|
||||
assert.match(code, /<style\s*>/i);
|
||||
```
|
||||
|
||||
Your code should have a closing `</style>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/style\s*>/));
|
||||
assert.match(code, /<\/style\s*>/);
|
||||
```
|
||||
|
||||
Your `style` element should be nested in your `head` element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>[\w\W\s]*<style\s*>[\w\W\s]*<\/style\s*>[\w\W\s]*<\/head\s*>/i))
|
||||
assert.match(code, /<head\s*>[\w\W\s]*<style\s*>[\w\W\s]*<\/style\s*>[\w\W\s]*<\/head\s*>/i)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -14,13 +14,13 @@ Create an `h2` element in the `section` element and give it the text `Coffee`.
|
||||
You should have an opening `<h2>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<h2\s*>/i));
|
||||
assert.match(code, /<h2\s*>/i);
|
||||
```
|
||||
|
||||
You should have a closing `</h2>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/h2\s*>/i));
|
||||
assert.match(code, /<\/h2\s*>/i);
|
||||
```
|
||||
|
||||
You should not change your existing `section` element. Make sure you did not delete the closing tag.
|
||||
@@ -33,14 +33,14 @@ Your `h2` element should be within your `section` element.
|
||||
|
||||
```js
|
||||
const h2 = document.querySelector('h2');
|
||||
assert(h2.parentElement.tagName === 'SECTION');
|
||||
assert.equal(h2.parentElement.tagName, 'SECTION');
|
||||
```
|
||||
|
||||
Your `h2` element should have the text `Coffee`.
|
||||
|
||||
```js
|
||||
const h2 = document.querySelector('h2');
|
||||
assert(h2.innerText === 'Coffee');
|
||||
assert.equal(h2.innerText, 'Coffee');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -14,13 +14,13 @@ There will be two sections on the menu, one for coffees and one for desserts. Ad
|
||||
You should have an opening `<section>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<section\s*>/i));
|
||||
assert.match(code, /<section\s*>/i);
|
||||
```
|
||||
|
||||
You should have a closing `</section>` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/section\s*>/i));
|
||||
assert.match(code, /<\/section\s*>/i);
|
||||
```
|
||||
|
||||
You should not change your existing `main` element. Make sure you didn't delete the closing tag.
|
||||
@@ -34,7 +34,7 @@ Your `section` element should be within your `main` element.
|
||||
```js
|
||||
const main = document.querySelector('main');
|
||||
const section = document.querySelector('section');
|
||||
assert(section.parentElement === main);
|
||||
assert.strictEqual(section.parentElement, main);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -23,14 +23,14 @@ You should use a single type selector for all three elements, `h1, h2, p`. Be su
|
||||
|
||||
```js
|
||||
const hasSelector = new __helpers.CSSHelp(document).getStyle('h1, h2, p');
|
||||
assert(hasSelector);
|
||||
assert.exists(hasSelector);
|
||||
```
|
||||
|
||||
You should only have one selector in your `style` element.
|
||||
|
||||
```js
|
||||
const selectors = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.selectorText)
|
||||
assert(selectors.length === 1);
|
||||
assert.equal(selectors.length, 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -15,7 +15,7 @@ You should not change the existing `h1` selector.
|
||||
|
||||
```js
|
||||
const hasH1 = new __helpers.CSSHelp(document).getStyle('h1');
|
||||
assert(hasH1);
|
||||
assert.exists(hasH1);
|
||||
```
|
||||
|
||||
You should not add a new `style` tag. Add the new CSS rules to the existing `style` tag.
|
||||
@@ -28,35 +28,35 @@ You should add a new `h2` selector.
|
||||
|
||||
```js
|
||||
const hasH2 = new __helpers.CSSHelp(document).getStyle('h2');
|
||||
assert(hasH2);
|
||||
assert.exists(hasH2);
|
||||
```
|
||||
|
||||
You should add a new `p` selector.
|
||||
|
||||
```js
|
||||
const hasP = new __helpers.CSSHelp(document).getStyle('p');
|
||||
assert(hasP);
|
||||
assert.exists(hasP);
|
||||
```
|
||||
|
||||
Your `h1` element should have a `text-align` of `center`.
|
||||
|
||||
```js
|
||||
const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align');
|
||||
assert(h1TextAlign === 'center');
|
||||
assert.equal(h1TextAlign, 'center');
|
||||
```
|
||||
|
||||
Your `h2` element should have a `text-align` of `center`.
|
||||
|
||||
```js
|
||||
const h2TextAlign = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('text-align');
|
||||
assert(h2TextAlign === 'center');
|
||||
assert.equal(h2TextAlign, 'center');
|
||||
```
|
||||
|
||||
Your `p` element should have a `text-align` of `center`.
|
||||
|
||||
```js
|
||||
const pTextAlign = new __helpers.CSSHelp(document).getStyle('p')?.getPropertyValue('text-align');
|
||||
assert(pTextAlign === 'center');
|
||||
assert.equal(pTextAlign, 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
Reference in New Issue
Block a user