From fe481c8fda6ae877cab368a953931584897553df Mon Sep 17 00:00:00 2001 From: Anna Date: Thu, 21 Nov 2024 00:49:06 -0500 Subject: [PATCH] chore(curriculum): update book inventory app tests (#57193) Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com> --- .../66a207974c806a19d6607073.md | 59 +++++++++---------- 1 file changed, 28 insertions(+), 31 deletions(-) diff --git a/curriculum/challenges/english/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md b/curriculum/challenges/english/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md index 3ed4d8cd26c..677ad8fd425 100644 --- a/curriculum/challenges/english/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md +++ b/curriculum/challenges/english/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md @@ -100,12 +100,9 @@ Each table row except the heading row should have either the class `read`, `to-r const rows = document.querySelectorAll('tr'); assert.isAtLeast(rows.length, 4); for (let i = 1; i < rows.length; i++) { - assert( - ( - rows[i].classList).contains('read') - || (rows[i].classList).contains('to-read') - || (rows[i].classList).contains('in-progress') - ); + const classList = [...rows[i].classList]; + const currentProgress = classList[0]; + assert.oneOf(currentProgress, ['read', 'to-read', "in-progress"]); } ``` @@ -125,7 +122,7 @@ Each `span` element of the `Status` column should have the class of `status`. const statusSpans = document.querySelectorAll('tr td:nth-child(4) :first-child'); assert.isAbove(statusSpans.length, 0); for (let e of statusSpans) { - assert(e.classList.contains('status')); + assert.isTrue(e.classList.contains('status')); } ``` @@ -138,16 +135,16 @@ assert.isAbove(statusSpans.length, 0); for (let i = 0; i < rows.length; i++) { switch (statusSpans[i]?.innerText) { case 'Read': - assert(rows[i].classList.contains('read')); + assert.isTrue(rows[i].classList.contains('read')); break; case 'To Read': - assert(rows[i].classList.contains('to-read')); + assert.isTrue(rows[i].classList.contains('to-read')); break; case 'In Progress': - assert(rows[i].classList.contains('in-progress')); + assert.isTrue(rows[i].classList.contains('in-progress')); break; default: - assert(false); + assert.fail(); } } ``` @@ -192,7 +189,7 @@ for (let e of rateSpans) { const readBooksRates = document.querySelectorAll('.read .rate'); assert.isAbove(readBooksRates.length, 0); for (let e of readBooksRates) { - assert(['one', 'two', 'three'].includes(e.classList[1])); + assert.oneOf(e.classList[1], ['one', 'two', 'three']); } ``` @@ -247,13 +244,13 @@ assert.exists(new __helpers.CSSHelp(document).getStyle('tr[class="to-read"] span You should use an attribute selector to target the `span` elements with the class of `status` that are descendants of `tr` elements with the class of `to-read` and set their `border` property. ```js -assert(new __helpers.CSSHelp(document).getStyle('tr[class="to-read"] span[class="status"]')?.border); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('tr[class="to-read"] span[class="status"]')?.border); ``` You should use an attribute selector to target the `span` elements with the class of `status` that are descendants of `tr` elements with the class of `to-read` and set their `background-image` property. ```js -assert(new __helpers.CSSHelp(document).getStyle('tr[class="to-read"] span[class="status"]')?.backgroundImage); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('tr[class="to-read"] span[class="status"]')?.backgroundImage); ``` You should have an attribute selector to target the `span` elements with the class of `status` that are descendants of `tr` elements with the class of `read`. @@ -265,13 +262,13 @@ assert.exists(new __helpers.CSSHelp(document).getStyle('tr[class="read"] span[cl You should use an attribute selector to target the `span` elements with the class of `status` that are descendants of `tr` elements with the class of `read` and set their `border` property. ```js -assert(new __helpers.CSSHelp(document).getStyle('tr[class="read"] span[class="status"]')?.border); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('tr[class="read"] span[class="status"]')?.border); ``` You should use an attribute selector to target the `span` elements with the class of `status` that are descendants of `tr` elements with the class of `read` and set their `background-image` property. ```js -assert(new __helpers.CSSHelp(document).getStyle('tr[class="read"] span[class="status"]')?.backgroundImage); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('tr[class="read"] span[class="status"]')?.backgroundImage); ``` You should have an attribute selector to target the `span` elements with the class of `status` that are descendants of `tr` elements with the class of `in-progress`. @@ -283,13 +280,13 @@ assert.exists(new __helpers.CSSHelp(document).getStyle('tr[class="in-progress"] You should use an attribute selector to target the `span` elements with the class of `status` that are descendants of `tr` elements with the class of `in-progress` and set their `border` property. ```js -assert(new __helpers.CSSHelp(document).getStyle('tr[class="in-progress"] span[class="status"]')?.border); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('tr[class="in-progress"] span[class="status"]')?.border); ``` You should use an attribute selector to target the `span` elements with the class of `status` that are descendants of `tr` elements with the class of `in-progress` and set their `background-image` property. ```js -assert(new __helpers.CSSHelp(document).getStyle('tr[class="in-progress"] span[class="status"]')?.backgroundImage); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('tr[class="in-progress"] span[class="status"]')?.backgroundImage); ``` You should have an attribute selector to target the `span` elements with the class of `status` and the `span` elements with the class value starting with `rate`. @@ -305,7 +302,7 @@ You should use an attribute selector to target the `span` elements with the clas ```js const selector1 = new __helpers.CSSHelp(document).getStyle('span[class="status"], span[class^="rate"]'); const selector2 = new __helpers.CSSHelp(document).getStyle('span[class^="rate"], span[class="status"]'); -assert(selector1?.height || selector2?.height); +assert.isNotEmpty(selector1?.height || selector2?.height); ``` You should use an attribute selector to target the `span` elements with the class of `status` and the `span` elements with the class value starting with `rate` and set their `width` property. @@ -313,7 +310,7 @@ You should use an attribute selector to target the `span` elements with the clas ```js const selector1 = new __helpers.CSSHelp(document).getStyle('span[class="status"], span[class^="rate"]'); const selector2 = new __helpers.CSSHelp(document).getStyle('span[class^="rate"], span[class="status"]'); -assert(selector1?.width || selector2?.width); +assert.isNotEmpty(selector1?.width || selector2?.width); ``` You should use an attribute selector to target the `span` elements with the class of `status` and the `span` elements with the class value starting with `rate` and set their `padding` property. @@ -321,7 +318,7 @@ You should use an attribute selector to target the `span` elements with the clas ```js const selector1 = new __helpers.CSSHelp(document).getStyle('span[class="status"], span[class^="rate"]'); const selector2 = new __helpers.CSSHelp(document).getStyle('span[class^="rate"], span[class="status"]'); -assert(selector1?.padding || selector2?.padding); +assert.isNotEmpty(selector1?.padding || selector2?.padding); ``` You should have an attribute selector to target the `span` elements which are direct children of `span` elements with the `class` value starting with `rate`. @@ -333,37 +330,37 @@ assert.exists(new __helpers.CSSHelp(document).getStyle('span[class^="rate"] > sp You should use an attribute selector to target the `span` elements which are direct children of `span` elements with the `class` value starting with `rate` and set their `border` property. ```js -assert(new __helpers.CSSHelp(document).getStyle('span[class^="rate"] > span')?.getPropVal('border')); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('span[class^="rate"] > span')?.getPropVal('border')); ``` You should use an attribute selector to target the `span` elements which are direct children of `span` elements with the `class` value starting with `rate` and set their `border-radius` property. ```js -assert(new __helpers.CSSHelp(document).getStyle('span[class^="rate"] > span')?.getPropVal('border-radius')); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('span[class^="rate"] > span')?.getPropVal('border-radius')); ``` You should use an attribute selector to target the `span` elements which are direct children of `span` elements with the `class` value starting with `rate` and set their `margin` property. ```js -assert(new __helpers.CSSHelp(document).getStyle('span[class^="rate"] > span')?.getPropVal('margin')); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('span[class^="rate"] > span')?.getPropVal('margin')); ``` You should use an attribute selector to target the `span` elements which are direct children of `span` elements with the `class` value starting with `rate` and set their `height` property. ```js -assert(new __helpers.CSSHelp(document).getStyle('span[class^="rate"] > span')?.getPropVal('height')); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('span[class^="rate"] > span')?.getPropVal('height')); ``` You should use an attribute selector to target the `span` elements which are direct children of `span` elements with the `class` value starting with `rate` and set their `width` property. ```js -assert(new __helpers.CSSHelp(document).getStyle('span[class^="rate"] > span')?.getPropVal('width')); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('span[class^="rate"] > span')?.getPropVal('width')); ``` You should use an attribute selector to target the `span` elements which are direct children of `span` elements with the `class` value starting with `rate` and set their `background-color` property. ```js -assert(new __helpers.CSSHelp(document).getStyle('span[class^="rate"] > span')?.getPropVal('background-color')); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('span[class^="rate"] > span')?.getPropVal('background-color')); ``` You should have an attribute selector to target the first descendant of `span` elements that have `one` as a part of their `class` value. @@ -379,7 +376,7 @@ You should use an attribute selector to target the first descendant of `span` el ```js const selector1 = new __helpers.CSSHelp(document).getStyle('span[class~="one"] :first-child'); const selector2 = new __helpers.CSSHelp(document).getStyle('span[class~="one"] :nth-child(1)'); -assert(selector1?.getPropVal('background-image').includes('linear-gradient(') || selector2?.getPropVal('background-image').includes('linear-gradient(')); +assert.isTrue(selector1?.getPropVal('background-image').includes('linear-gradient(') || selector2?.getPropVal('background-image').includes('linear-gradient(')); ``` You should have an attribute selector to target the first two descendants of `span` elements that have `two` as a part of their `class` value. @@ -400,13 +397,13 @@ const selector2 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] : const selector3 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :first-child, span[class~="two"] :nth-child(2)'); const selector4 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :nth-child(2), span[class~="two"] :first-child'); const selectors = [selector1, selector2, selector3, selector4]; -let isTrue = false; +let containsSelector = false; for (let selector of selectors) { if (selector?.backgroundImage.includes('linear-gradient(')) { - isTrue = true; + containsSelector = true; } } -assert(isTrue); +assert.isTrue(containsSelector); ``` You should have an attribute selector to target the `span` elements that are descendants of `span` elements that have `three` as a part of their `class` value.