From 99fafdd727be7f576b524dfea14d03f87f813ca4 Mon Sep 17 00:00:00 2001 From: Anna Date: Tue, 19 Nov 2024 11:24:58 -0500 Subject: [PATCH] chore(curriculum): use better asserts lab availability table (#57190) Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com> Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com> --- .../66b36358ed4f261d64840c24.md | 78 ++++++++++++------- 1 file changed, 48 insertions(+), 30 deletions(-) diff --git a/curriculum/challenges/english/25-front-end-development/lab-availability-table/66b36358ed4f261d64840c24.md b/curriculum/challenges/english/25-front-end-development/lab-availability-table/66b36358ed4f261d64840c24.md index 0ef9bc8b40a..8d1c5399bd4 100644 --- a/curriculum/challenges/english/25-front-end-development/lab-availability-table/66b36358ed4f261d64840c24.md +++ b/curriculum/challenges/english/25-front-end-development/lab-availability-table/66b36358ed4f261d64840c24.md @@ -28,13 +28,13 @@ Fulfill the user stories below and get all the tests to pass to complete the lab You should have a `table` element. ```js -assert(!!document.querySelectorAll('table').length); +assert.isNotNull(document.querySelector('table')); ``` You should have only one `table` element. ```js -assert(document.querySelectorAll('table').length === 1); +assert.lengthOf(document.querySelectorAll('table'), 1); ``` Your table should have at least `5` rows. @@ -47,7 +47,7 @@ Your table should have at least `3` columns. ```js const rows = [...document.querySelectorAll('tr')]; -assert(!!rows.length); +assert.isNotEmpty(rows); rows.forEach((row) => { assert.isAtLeast(row.children.length, 3); }) @@ -62,8 +62,8 @@ assert.isAtLeast(document.querySelectorAll('tr:first-child>th').length, 3) The first row in your table should not contain `td` elements. ```js -assert(document.querySelector('tr:first-child')); -assert.lengthOf(document.querySelectorAll('tr:first-child>td'), 0) +assert.isNotNull(document.querySelector('tr:first-child')); +assert.isEmpty(document.querySelectorAll('tr:first-child>td')); ``` You should have at least two rows with the class of `sharp`. @@ -78,14 +78,14 @@ You should have at least two rows with the class of `half`. assert.isAtLeast(document.querySelectorAll('tr[class~="half"]').length, 2); ``` -`th` elements in the first column should have the `class` of `time` and the contain time values. +`th` elements in the first column should have the `class` of `time` and contain time values. ```js const firstColumnData = [...document.querySelectorAll('tr th:first-child')]; -assert(!!firstColumnData.length); +assert.isNotEmpty(firstColumnData); for (let cell of firstColumnData) { if (cell.innerText.match(/\d/)?.length) { - assert(cell.classList.contains('time')); + assert.isTrue(cell.classList.contains('time')); } } ``` @@ -96,7 +96,7 @@ You should have at least four `th` elements with the class of `time` that contai const timeClass = document.querySelectorAll('.time'); assert.isAtLeast(timeClass.length, 4); for (let cell of timeClass) { - assert(cell.innerText.match(/\d/)?.length) + assert.match(cell.innerText, /\d/) } ``` @@ -104,7 +104,7 @@ All your `td` elements should have the `class` of `available-#`, where `#` is a ```js const cells = [...document.querySelectorAll('tr[class="sharp"]>td, tr[class="half"]>td')]; -assert(!!cells.length); +assert.isNotEmpty(cells); for (let cell of cells) { const classString = [...cell.classList].join(' '); assert.lengthOf(classString.match(/(?<=\s|^)available-[0-5](?=\s|$)/gm), 1); @@ -121,126 +121,142 @@ You should define a `--color0` variable in your root selector. ```js const root = new __helpers.CSSHelp(document).getStyle(':root'); -assert(!!root && root.getPropVal('--color0')); +assert.exists(root); +assert.isNotEmpty(root.getPropVal('--color0')) ``` You should define a `--color1` variable in your root selector. ```js const root = new __helpers.CSSHelp(document).getStyle(':root'); -assert(!!root && root.getPropVal('--color1')); +assert.exists(root); +assert.isNotEmpty(root.getPropVal('--color1')) ``` You should define a `--color2` variable in your root selector. ```js const root = new __helpers.CSSHelp(document).getStyle(':root'); -assert(!!root && root.getPropVal('--color2')); +assert.exists(root); +assert.isNotEmpty(root.getPropVal('--color2')) ``` You should define a `--color3` variable in your root selector. ```js const root = new __helpers.CSSHelp(document).getStyle(':root'); -assert(!!root && root.getPropVal('--color3')); +assert.exists(root); +assert.isNotEmpty(root.getPropVal('--color3')); ``` You should define a `--color4` variable in your root selector. ```js const root = new __helpers.CSSHelp(document).getStyle(':root'); -assert(!!root && root.getPropVal('--color4')); +assert.exists(root); +assert.isNotEmpty(root.getPropVal('--color4')); ``` You should define a `--color5` variable in your root selector. ```js const root = new __helpers.CSSHelp(document).getStyle(':root'); -assert(!!root && root.getPropVal('--color5')); +assert.exists(root); +assert.isNotEmpty(root.getPropVal('--color5')); ``` You should use `--color0` to set the background color of `.available-0` elements. ```js const a = new __helpers.CSSHelp(document).getStyle('.available-0'); -assert(!!a && a.backgroundColor === 'var(--color0)'); +assert.exists(a); +assert.strictEqual(a.backgroundColor, 'var(--color0)'); ``` You should use `--color1` to set the background color of `.available-1` elements. ```js const a = new __helpers.CSSHelp(document).getStyle('.available-1'); -assert(!!a && a.backgroundColor === 'var(--color1)'); +assert.exists(a); +assert.strictEqual(a.backgroundColor, 'var(--color1)'); ``` You should use `--color2` to set the background color of `.available-2` elements. ```js const a = new __helpers.CSSHelp(document).getStyle('.available-2'); -assert(!!a && a.backgroundColor === 'var(--color2)'); +assert.exists(a); +assert.strictEqual(a.backgroundColor, 'var(--color2)'); ``` You should use `--color3` to set the background color of `.available-3` elements. ```js const a = new __helpers.CSSHelp(document).getStyle('.available-3'); -assert(!!a && a.backgroundColor === 'var(--color3)'); +assert.exists(a); +assert.strictEqual(a.backgroundColor, 'var(--color3)'); ``` You should use `--color4` to set the background color of `.available-4` elements. ```js const a = new __helpers.CSSHelp(document).getStyle('.available-4'); -assert(!!a && a.backgroundColor === 'var(--color4)'); +assert.exists(a); +assert.strictEqual(a.backgroundColor, 'var(--color4)'); ``` You should use `--color5` to set the background color of `.available-5` elements. ```js const a = new __helpers.CSSHelp(document).getStyle('.available-5'); -assert(!!a && a.backgroundColor === 'var(--color5)'); +assert.exists(a); +assert.strictEqual(a.backgroundColor, 'var(--color5)'); ``` You should define a `--solid-border` variable in your root selector. ```js const root = new __helpers.CSSHelp(document).getStyle(':root'); -assert(!!root && root.getPropVal('--solid-border')); +assert.exists(root); +assert.isNotEmpty(root.getPropVal('--solid-border')); ``` You should define a `--dashed-border` variable in your root selector. ```js const root = new __helpers.CSSHelp(document).getStyle(':root'); -assert(!!root && root.getPropVal('--dashed-border')); +assert.exists(root); +assert.isNotEmpty(root.getPropVal('--dashed-border')); ``` You should target `td` elements that are children of `.sharp` elements. ```js const tds = new __helpers.CSSHelp(document).getStyle('.sharp td') || new __helpers.CSSHelp(document).getStyle('.sharp>td'); -assert(tds); +assert.exists(tds); ``` You should use `--solid-border` to set the `bottom-border` of `td` elements that are children of `.sharp` elements. ```js const tds = new __helpers.CSSHelp(document).getStyle('.sharp td') || new __helpers.CSSHelp(document).getStyle('.sharp>td'); -assert(tds && tds.borderBottom === 'var(--solid-border)'); +assert.exists(tds); +assert.strictEqual(tds.borderBottom, 'var(--solid-border)'); ``` You should target `td` elements that are children of `.half` elements. ```js const tds = new __helpers.CSSHelp(document).getStyle('.half td') || new __helpers.CSSHelp(document).getStyle('.half>td'); -assert(tds); +assert.exists(tds); ``` You should use `--dashed-border` to set the `bottom-border` of `td` elements of `.half` elements. ```js const tds = new __helpers.CSSHelp(document).getStyle('.half td') || new __helpers.CSSHelp(document).getStyle('.half>td'); -assert(tds && tds.borderBottom === 'var(--dashed-border)'); +assert.exists(tds); +assert.strictEqual(tds.borderBottom, 'var(--dashed-border)'); ``` You should have a `div` element with the `id` of `legend`. @@ -265,14 +281,16 @@ You should set the background image of `#legend-gradient` to a linear gradient. ```js const legendGradient = new __helpers.CSSHelp(document).getStyle('#legend-gradient'); -assert(!!legendGradient && legendGradient.backgroundImage.includes('linear-gradient(')) +assert.exists(legendGradient); +assert.include(legendGradient.backgroundImage, "linear-gradient(") ``` You should use two color-stops (expressed in percentage) to make the transition from one color to the following color a hard line for your `#legend-gradient`. Remember to use your `--color#` variables. ```js const legendGradient = new __helpers.CSSHelp(document).getStyle('#legend-gradient'); -assert(!!legendGradient && legendGradient.backgroundImage.match(/var\(\s*--color[0-5]\s*\)\s+\d+%\s+\d+%/g).length === 6) +assert.exists(legendGradient); +assert.lengthOf(legendGradient.backgroundImage.match(/var\(\s*--color[0-5]\s*\)\s+\d+%\s+\d+%/g), 6) ``` # --seed--