From 2c98805208798d690853e86184fb46916dd857e3 Mon Sep 17 00:00:00 2001 From: Kris Koishigawa Date: Wed, 15 Dec 2021 17:56:37 +0900 Subject: [PATCH] feat: begin adding tests --- .../step-001.md | 38 +++++++++++++++++- .../step-002.md | 38 +++++++++++++++++- .../step-003.md | 22 ++++++++++- .../step-004.md | 19 ++++++++- .../step-005.md | 17 +++++++- .../step-006.md | 35 ++++++++++++++++- .../step-007.md | 39 +++++++++++++++++-- .../step-008.md | 8 +++- .../step-009.md | 29 +++++++++++++- .../step-010.md | 21 +++++++++- .../step-011.md | 10 ++++- .../step-012.md | 10 ++++- .../step-013.md | 4 +- .../step-014.md | 34 +++++++++++++++- .../step-015.md | 4 +- 15 files changed, 305 insertions(+), 23 deletions(-) diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-001.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-001.md index d37bf4be81..b56b9656ea 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-001.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-001.md @@ -13,10 +13,46 @@ Add a `DOCTYPE html` declaration at the top of the document, and an `html` eleme # --hints-- -Test 1 +Your code should contain the `DOCTYPE` reference. ```js +assert(code.match(/` after the type. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have an opening tag. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have a closing tag. + +```js +assert(code.match(/<\/html\s*>/)); +``` + +Your `html` element should be below the `DOCTYPE` declaration. + +```js +assert(code.match(/(?)/gi)); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-002.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-002.md index 6299104054..20f457eb26 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-002.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-002.md @@ -11,10 +11,46 @@ Nest a `head` element within the `html` element. Just after the `head` element, # --hints-- -Test 1 +You should have an opening `head` tag. ```js +assert(code.match(//i)); +``` +You should have a closing `head` tag. + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +You should have an opening `body` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `body` tag. + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +Your `head` and `body` elements should be siblings. + +```js +assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); +``` + +Your `head` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); +``` + +Your `body` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-003.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-003.md index 10754d0ba0..cc8eeb7c3b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-003.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-003.md @@ -13,10 +13,30 @@ Within the `head` element, nest a `title` element with the text `CSS Color Marke # --hints-- -Test 1 +You should have an opening `title` tag. ```js +assert(code.match(//i)); +``` +You should have a closing `title` tag. + +```js +assert(code.match(/<\/title\s*>/i)); +``` + +Your project should have the title `CSS Color Markers`. + +```js +const title = document.querySelector('title'); +assert.equal(title?.text?.trim()?.toLowerCase(), 'css color markers') +``` + +Remember, the casing and spelling matter for the title text + +```js +const title = document.querySelector('title'); +assert.equal(title?.text?.trim(), 'CSS Color Markers'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-004.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-004.md index 11040b9d2a..a25c4b9f6c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-004.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-004.md @@ -9,14 +9,29 @@ dashedName: step-4 To tell browsers how to encode characters on your page, set the `charset` to `utf-8`. `utf-8` is a universal character set that includes almost every character from all human languages. -Inside the `head` element, nest a `meta` element with the attribute `charset` set to `utf-8`. Remember that `meta` elements are self-closing. +Inside the `head` element, nest a `meta` element with the attribute `charset` set to `utf-8`. Remember that `meta` elements are self-closing, and do not need a closing tag. # --hints-- -Test 1 +You should have one `meta` element. ```js +const meta = document.querySelectorAll('meta'); +assert(meta?.length === 1); +``` +Your `meta` element should be a self-closing element. + +```js +assert(code.match(/<\/meta>/i) === null); +``` + +Your `meta` element should have a `charset` attribute set to `utf-8`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => m?.getAttribute('charset').toLowerCase() === 'utf-8'); +assert.exists(target); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-005.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-005.md index a06cf7d464..b2c758f45b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-005.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-005.md @@ -13,10 +13,25 @@ Nest a self-closing `meta` element with the `head`. Give it a `name` attribute s # --hints-- -Test 1 +You should have two `meta` elements. ```js +const meta = document.querySelectorAll('meta'); +assert(meta?.length === 2); +``` +Your new `meta` element should be a self-closing element. + +```js +assert(code.match(/<\/meta>/i) === null); +``` + +Your new `meta` element should have a `name` attribute set to `viewport`, and a `content` attribute set to `width=device-width, initial-scale=1.0`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0'); +assert.exists(target); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-006.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-006.md index ba09eb8f22..97e7cf60b7 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-006.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-006.md @@ -13,10 +13,43 @@ Within the `body`, nest an `h1` element with the text `CSS Color Markers`. # --hints-- -Test 1 +Your code should have an `h1` element. ```js +const title = document.querySelector('h1'); +assert.exists(title); +``` +You should have an opening `h1` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `h1` tag. + +```js +assert(code.match(/<\/h1\s*>/i)); +``` + +Your `h1` element should be within the `body` element. + +```js +assert(document.querySelector('h1')?.parentElement?.localName === 'body'); +``` + +Your `h1` element should have the text `CSS Color Markers`. + +```js +const h1 = document.querySelector('h1'); +assert.equal(h1?.textContent?.trim()?.toLowerCase(), 'css color markers') +``` + +Remember, the casing and spelling matter for the `h1` text. + +```js +const h1 = document.querySelector('h1'); +assert.equal(h1?.textContent?.trim(), 'CSS Color Markers'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-007.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-007.md index 5551621b53..65e2bd7dc4 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-007.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-007.md @@ -7,16 +7,47 @@ dashedName: step-7 # --description-- -In this project you'll work with an external CSS file to style the page. We've already created a `style.css` file for you. But before you can use it, you'll need to link it to the page. +In this project you'll work with an external CSS file to style the page. We've already created a `styles.css` file for you. But before you can use it, you'll need to link it to the page. Nest a `link` element within the `head`. Give it a `rel` attribute set to `stylesheet`, a `type` attribute set to `text/css`, and an `href` attribute set to `styles.css`. # --hints-- -Test 1 +Your code should have one `link` element. ```js +assert(code.match(//i) === null); +``` + +Your `link` element should be within your `head` element. + +```js +const head = code.match(/(.|\r|\n)*<\/head>/i)?.[0]; +assert(head.match(/ ---fcc-editable-region-- + --fcc-editable-region-- CSS Color Markers ---fcc-editable-region-- + --fcc-editable-region--

CSS Color Markers

diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-008.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-008.md index 026d0412ea..c8c04bb16c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-008.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-008.md @@ -21,10 +21,16 @@ Create a new CSS rule that targets the `h1` element, and set the `text-align` pr # --hints-- -Test 1 +You should create an `h1` selector. ```js +assert(new __helpers.CSSHelp(document).getStyle('h1')); +``` +Your `h1` CSS rule should have a `text-align` property set to `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-009.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-009.md index 3f374ade60..98f4bad10e 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-009.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-009.md @@ -13,10 +13,37 @@ First, within the `body` element, add a `div` element and set its `class` attrib # --hints-- -Test 1 +You should have an opening `div` tag. ```js +assert(code.match(//i)); +``` +You should have a closing `div` tag. + +```js +assert(code.match(/<\/div\s*>/i)); +``` + +Your `div` element should be within your `body` element. + +```js +assert(document.querySelector('div')?.parentElement?.localName === 'body'); +``` + +Your `div` element should be after the `h1` element. + +```js +const bodyElements = [...document.querySelector('body')?.children]; +const h1 = document.querySelector('h1'); +const div = document.querySelector('div'); +assert(bodyElements.indexOf(h1) < bodyElements.indexOf(div)); +``` + +Your `div` element should have a `class` attribute set to `container`. + +```js +assert(document.querySelector('div')?.classList?.contains('container')); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-010.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-010.md index e6540434b3..1e1887f985 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-010.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-010.md @@ -11,10 +11,29 @@ Next, within the `container` `div`, add another `div` element and set its `class # --hints-- -Test 1 +Your new `div` element should have an opening tag. ```js +assert([...code.matchAll(//gi)][1]); +``` +Your new `div` element should have a closing tag. + +```js +assert([...code.matchAll(/<\/div\s*>/gi)][1]); +``` + +Your new `div` element should be within the `container` `div` element. + +```js +assert(document.querySelector('.container')?.children[0]?.localName === 'div'); +``` + +Your new `div` element should have a `class` attribute set to `marker`. + +```js +const containerChildren = [...document.querySelector('.container')?.children]; +assert(containerChildren.every(child => child.classList?.contains('marker'))); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-011.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-011.md index 7521277582..854aad12bb 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-011.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-011.md @@ -9,7 +9,7 @@ dashedName: step-11 It's time to add some color to the page. Remember that one way to add color to an element is to use a color keyword like `black`, `cyan`, or `yellow`. -Use a class selector to target `marker` and apply a background color to it. As a reminder, here's how to target the `class` `freecodecamp`: +Use a `class` selector to target `marker` and apply a background color to it. As a reminder, here's how to target the `class` `freecodecamp`: ```css .freecodecamp { @@ -21,10 +21,16 @@ Create a new CSS rule that targets the `marker` `class`, and set its `background # --hints-- -Test 1 +You should create a `class` selector to target the `marker` `class`. ```js +assert(new __helpers.CSSHelp(document).getStyle('.marker')); +``` +Your `marker` CSS rule should have a `background-color` property set to `red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.marker')?.backgroundColor === 'red'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-012.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-012.md index 420a3c05ee..fde65d750b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-012.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-012.md @@ -7,16 +7,22 @@ dashedName: step-12 # --description-- -Notice that your marker doesn't seem to have any color applied to it. The background color was actually applied, but since the `marker` element is empty, it doesn't have any width or height by default. +Notice that your marker doesn't seem to have any color. The background color was actually applied, but since the `marker` element is empty, it doesn't have any width or height by default. In your `marker` CSS rule, set the `width` property to `200px` and the `height` property to `25px`. # --hints-- -Test 1 +Your `marker` CSS rule should have a `width` property set to `200px`. ```js +assert(new __helpers.CSSHelp(document).getStyle('.marker')?.width === '200px'); +``` +Your `marker` CSS rule should have a `height` property set to `25px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.marker')?.height === '25px'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-013.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-013.md index b427a62521..0da4749b51 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-013.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-013.md @@ -15,10 +15,10 @@ To center your marker on the page, set its `margin` property to `auto`. This set # --hints-- -Test 1 +Your `marker` CSS rule should have a `margin` property set to `auto`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.marker')?.margin === 'auto'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-014.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-014.md index bbb66230c0..5e31dedba2 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-014.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-014.md @@ -13,10 +13,42 @@ In the `container` `div`, add two more `div` elements with the `class` `marker`. # --hints-- -Test 1 +Your first new `div` element should have an opening tag. ```js +assert([...code.matchAll(//gi)][2]); +``` +Your first new `div` element should have a closing tag. + +```js +assert([...code.matchAll(/<\/div\s*>/gi)][2]); +``` + +Your second new `div` element should have an opening tag. + +```js +assert([...code.matchAll(//gi)][3]); +``` + +Your second new `div` element should have a closing tag. + +```js +assert([...code.matchAll(/<\/div\s*>/gi)][3]); +``` + +Your new `div` elements should be within the `container` `div` element. + +```js +const containerChildren = [...document.querySelector('.container')?.children]; +assert(containerChildren.every(child => child?.localName === 'div') && containerChildren.length === 3); +``` + +Your new `div` elements should both have their `class` attributes set to `marker`. + +```js +const containerChildren = [...document.querySelector('.container')?.children]; +assert(containerChildren.every(child => child?.classList?.contains('marker'))); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-015.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-015.md index 09f3fca12e..819a2f9b82 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-015.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-015.md @@ -15,10 +15,10 @@ In your `marker` CSS rule, set the `margin` property to `10px auto`. # --hints-- -Test 1 +Your `marker` CSS rule should have a `margin` property set to `10px auto`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.marker')?.margin === '10px auto'); ``` # --seed--