diff --git a/curriculum/challenges/english/blocks/lab-book-inventory-app/66a207974c806a19d6607073.md b/curriculum/challenges/english/blocks/lab-book-inventory-app/66a207974c806a19d6607073.md index 5b29f8e5a8d..0b0dd45e79e 100644 --- a/curriculum/challenges/english/blocks/lab-book-inventory-app/66a207974c806a19d6607073.md +++ b/curriculum/challenges/english/blocks/lab-book-inventory-app/66a207974c806a19d6607073.md @@ -42,23 +42,27 @@ assert.equal(document.querySelector('h1')?.innerText.trim(), 'Book Inventory'); You should have only one `h1` element. ```js -assert.equal(document.querySelectorAll('h1')?.length, 1); +assert.lengthOf(document.querySelectorAll('h1'), 1); ``` You should have a `table` element. ```js -assert.equal(document.querySelectorAll('table')?.length, 1); +assert.lengthOf(document.querySelectorAll('table'), 1); ``` -Your `table` element should have five columns. +You should have one `thead` element and one `tbody` element inside `table`. ```js -const rows = document.querySelectorAll('tr'); -assert.isNotEmpty(rows); -for (const row of rows) { - assert.equal(row.children.length, 5); -} +assert.lengthOf(document.querySelectorAll("table > thead"), 1); +assert.lengthOf(document.querySelectorAll("table > tbody"), 1); +``` + +Inside the `thead` there should be one `tr` with 5 `th` elements. + +```js +assert.lengthOf(document.querySelectorAll("table > thead > tr"), 1); +assert.lengthOf(document.querySelectorAll("table > thead > tr > th"), 5); ``` Your first column should have the text `Title` as the heading. @@ -98,11 +102,21 @@ const rows = document.querySelectorAll('tr'); assert.isAtLeast(rows.length, 4); ``` +Each row should always have 5 columns. + +```js +const rows = document.querySelectorAll('tbody tr'); +assert.isNotEmpty(rows); +for (const row of rows) { + assert.lengthOf(row.children, 5); +} +``` + Each table row except the heading row should have either the class `read`, `to-read`, or `in-progress`. ```js const rows = document.querySelectorAll('tr'); -assert.isAtLeast(rows.length, 4); +assert.isNotEmpty(rows); for (let i = 1; i < rows.length; i++) { const classList = [...rows[i].classList]; const currentProgress = classList[0]; @@ -114,7 +128,7 @@ for (let i = 1; i < rows.length; i++) { ```js const statusColumnData = document.querySelectorAll('td:nth-child(4)'); -assert.isAbove(statusColumnData.length, 0); +assert.isNotEmpty(statusColumnData); for (let e of statusColumnData) { assert.equal(e?.children[0]?.tagName, 'SPAN'); } @@ -124,7 +138,7 @@ Each `span` element of the `Status` column should have the class of `status`. ```js const statusSpans = document.querySelectorAll('tr td:nth-child(4) :first-child'); -assert.isAbove(statusSpans.length, 0); +assert.isNotEmpty(statusSpans); for (let e of statusSpans) { assert.isTrue(e.classList.contains('status')); } @@ -135,7 +149,7 @@ Each `.status` element should have the text `Read`, `To Read`, or `In Progress`, ```js const statusSpans = document.querySelectorAll('tr td:nth-child(4) :first-child'); const rows = Array.from(document.querySelectorAll('tr')).slice(1); -assert.isAbove(statusSpans.length, 0); +assert.isNotEmpty(statusSpans); for (let i = 0; i < rows.length; i++) { switch (statusSpans[i]?.innerText.trim()) { case 'Read': @@ -157,7 +171,7 @@ for (let i = 0; i < rows.length; i++) { ```js const rateColumnData = document.querySelectorAll('tr td:last-child'); -assert.isAbove(rateColumnData.length, 0); +assert.isNotEmpty(rateColumnData); for (let e of rateColumnData) { assert.equal(e.children[0]?.tagName, 'SPAN') } @@ -167,7 +181,7 @@ Each `span` element which is a direct child of a `td` element of the `Rate` colu ```js const rateSpans = document.querySelectorAll('tr td:last-child > span:first-child'); -assert.isAbove(rateSpans.length, 0); +assert.isNotEmpty(rateSpans); for (let e of rateSpans) { assert.equal(e.classList[0], 'rate'); } @@ -177,7 +191,7 @@ Each `.rate` element should contain three empty `span` elements. ```js const rateSpans = document.getElementsByClassName('rate'); -assert.isAbove(rateSpans.length, 0); +assert.isNotEmpty(rateSpans); for (let e of rateSpans) { assert.equal(e.children.length, 3); for (let child of e.children) { @@ -191,7 +205,7 @@ for (let e of rateSpans) { ```js const readBooksRates = document.querySelectorAll('.read .rate'); -assert.isAbove(readBooksRates.length, 0); +assert.isNotEmpty(readBooksRates); for (let e of readBooksRates) { assert.oneOf(e.classList[1], ['one', 'two', 'three']); }