fix(curriculum): Use specific assert methods in hotel feedback form (#59867)

2026-05-28 18:26:54 +00:00 · 2025-04-23 19:04:40 -06:00
parent 133f76d7c2
commit 96557d0704
23 changed files with 46 additions and 46 deletions
@@ -30,7 +30,7 @@ assert.isNotNull(document.querySelector('fieldset input'));
 You should not create a new `input` element.

 ```js
-assert.strictEqual(document.querySelectorAll('fieldset input').length, 1);
+assert.lengthOf(document.querySelectorAll('fieldset input'), 1);
 ```

 Your `input` element should have a `type` attribute with the value of `"text"`.
@@ -28,7 +28,7 @@ assert.isNotNull(document.querySelector('fieldset input'));
 You should not create a new `input` element.

 ```js
-assert.strictEqual(document.querySelectorAll('fieldset input').length, 1);
+assert.lengthOf(document.querySelectorAll('fieldset input'), 1);
 ```

 Your `input` element should have a `name` attribute with the value of `"name"`.
@@ -16,7 +16,7 @@ Start by adding a new `label` element with the text `Email address (required):`
 You should have a `label` element.

 ```js
-assert.strictEqual(document.querySelectorAll('fieldset label').length, 2);
+assert.lengthOf(document.querySelectorAll('fieldset label'), 2);
 ```

 Your `label` element should have the text `Email address (required):`.
@@ -18,7 +18,7 @@ The `for` attribute should be set to `"age"`.
 You should have a `label` element.

 ```js
-assert.strictEqual(document.querySelectorAll('fieldset label').length, 3);
+assert.lengthOf(document.querySelectorAll('fieldset label'), 3);
 ```

 Your `label` element should have a `for` attribute set to `"age"`.
@@ -18,13 +18,13 @@ Inside the `fieldset` element, add a `legend` element with the text of `Was this
 You should have a `fieldset` element.

 ```js
-assert.strictEqual(document.querySelectorAll('fieldset').length, 2);
+assert.lengthOf(document.querySelectorAll('fieldset'), 2);
 ```

 You should have a `legend` element inside of your `fieldset` element.

 ```js
-assert.strictEqual(document.querySelectorAll('fieldset legend').length, 2);
+assert.lengthOf(document.querySelectorAll('fieldset legend'), 2);
 ```

 Your `legend` element should have the text of `Was this your first time at our hotel?`.
@@ -29,7 +29,7 @@ Below your `label` element, add a `radio` button with the `id` set to `"yes-opti
 You should have a `label` element below your `legend` element.

 ```js
-assert(document.querySelector('fieldset:nth-of-type(2) legend + label'));
+assert.exists(document.querySelector('fieldset:nth-of-type(2) legend + label'));
 ```

 Your `label` element should have a `for` attribute set to `"yes-option"`.
@@ -47,7 +47,7 @@ assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) legend + labe
 You should have a `radio` button below your `label` element.

 ```js
-assert(document.querySelector('fieldset:nth-of-type(2) label + input[type="radio"]'));
+assert.exists(document.querySelector('fieldset:nth-of-type(2) label + input[type="radio"]'));
 ```

 Your `radio` button should have an `id` attribute set to `"yes-option"`.
@@ -36,7 +36,7 @@ assert.strictEqual(document.querySelector('fieldset:nth-of-type(2) input[type="r
 You should have a second `input` below your second `label` element.

 ```js
-assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(2) label + input').length, 2);
+assert.lengthOf(document.querySelectorAll('fieldset:nth-of-type(2) label + input'), 2);
 ```

 Your `input` should have a `type` of `radio`.
@@ -18,13 +18,13 @@ Inside the `fieldset` element, add a `legend` element with the text `Why did you
 You should a `fieldset` element.

 ```js
-assert.strictEqual(document.querySelectorAll('fieldset').length, 3);
+assert.lengthOf(document.querySelectorAll('fieldset'), 3);
 ```

 You should have a `legend` element inside the `fieldset` element.

 ```js
-assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) legend').length, 1);
+assert.lengthOf(document.querySelectorAll('fieldset:nth-of-type(3) legend'), 1);
 ```

 Your `legend` element should have the text of `Why did you choose to stay at our hotel? (Check all that apply)`. Double check for spelling errors and spacing issues.
@@ -32,7 +32,7 @@ Below your `label` element, add a checkbox input with the `id`, `name` and `valu
 You should have a `label` element below your `legend`.

 ```js
-assert(document.querySelector("fieldset:nth-of-type(3) legend + label"));
+assert.exists(document.querySelector("fieldset:nth-of-type(3) legend + label"));
 ```

 Your `label` element should have the text of `Social Media Ads`.
@@ -34,7 +34,7 @@ assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[type="c
 You should have a checkbox `input` below your `label`.

 ```js
-assert(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(2)[type='checkbox']"));
+assert.exists(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(2)[type='checkbox']"));
 ```

 Your checkbox should have an `id` set to `"recommendation"`.
@@ -32,7 +32,7 @@ assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[2]
 You should have a third checkbox `input` after your `label`.

 ```js 
-assert(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(3)[type='checkbox']"));
+assert.exists(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(3)[type='checkbox']"));
 ```

 Your third checkbox input should have an `id` set to `"location"`.
@@ -68,7 +68,7 @@ assert.strictEqual(document.querySelector('fieldset:nth-of-type(3) input[value="
 You should have a fourth checkbox `input` below your `label`.

 ```js 
-assert(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(4)[type='checkbox']"));
+assert.exists(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(4)[type='checkbox']"));
 ```

 You should have a fourth checkbox `input` with an `id` of `"reputation"`.
@@ -30,7 +30,7 @@ assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(3) label')[4]
 You should have a fifth checkbox `input` below your `label`.

 ```js
-assert(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(5)[type='checkbox']"));
+assert.exists(document.querySelector("fieldset:nth-of-type(3) label + input:nth-of-type(5)[type='checkbox']"));
 ```   

 You should have a checkbox input with an `id` of `"price"`.
@@ -18,13 +18,13 @@ Below the `legend` element, add a `label` element with the text `How was the ser
 You should have a `fieldset` element.

 ```js
-assert.strictEqual(document.querySelectorAll('fieldset').length, 4);
+assert.lengthOf(document.querySelectorAll('fieldset'), 4);
 ```

 Your `fieldset` should have a `legend` element.

 ```js
-assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend').length, 1);
+assert.lengthOf(document.querySelectorAll('fieldset:nth-of-type(4) legend'), 1);
 ```

 Your legend should have the text `Ratings`.
@@ -36,7 +36,7 @@ assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend')[0
 Your `fieldset` should have a `label` element below the `legend`.

 ```js
-assert.strictEqual(document.querySelectorAll('fieldset:nth-of-type(4) legend + label').length, 1);
+assert.lengthOf(document.querySelectorAll('fieldset:nth-of-type(4) legend + label'), 1);
 ```

 Your `label` should have the text `How was the service?`.
@@ -28,19 +28,19 @@ Start by adding a `select` element with the `name` and `id` attributes set to `"
 Your `fieldset` should have a `select` element.

 ```js
-assert(document.querySelector('fieldset:nth-of-type(4) select'));
+assert.exists(document.querySelector('fieldset:nth-of-type(4) select'));
 ```

 Your `select` element should have a `name` attribute set to `"service"`.

 ```js
-assert(document.querySelector('select[name="service"]'));
+assert.exists(document.querySelector('select[name="service"]'));
 ```

 Your `select` element should have an `id` attribute set to `"service"`.

 ```js
-assert(document.querySelector('select[id="service"]'));
+assert.exists(document.querySelector('select[id="service"]'));
 ```

 # --seed--
@@ -30,7 +30,7 @@ Inside your `select` element, add the following five `option` elements with thes
 You should have an `option` element with the value set to `"poor"`.

 ```js
-assert(document.querySelector('option[value="poor"]'));
+assert.exists(document.querySelector('option[value="poor"]'));
 ```

 Your `option` element with the `value` of `"poor"` should have the text `Poor`.
@@ -42,7 +42,7 @@ assert.strictEqual(document.querySelector('option[value="poor"]')?.textContent,
 You should have an `option` element with the `value` set to `"satisfactory"`.

 ```js
-assert(document.querySelector('option[value="satisfactory"]'));
+assert.exists(document.querySelector('option[value="satisfactory"]'));
 ```

 Your `option` element with the `value` of `"satisfactory"` should have the text `Satisfactory`.
@@ -54,7 +54,7 @@ assert.strictEqual(document.querySelector('option[value="satisfactory"]')?.textC
 You should have an `option` element with the `value` set to `"good"`.

 ```js
-assert(document.querySelector('option[value="good"]'));
+assert.exists(document.querySelector('option[value="good"]'));
 ```

 Your `option` element with the `value` of `"good"` should have the text `Good`.
@@ -67,7 +67,7 @@ assert.strictEqual(document.querySelector('option[value="good"]')?.textContent,
 You should have an `option` element with the value set to `"very-good"`.

 ```js
-assert(document.querySelector('option[value="very-good"]'));
+assert.exists(document.querySelector('option[value="very-good"]'));
 ```

 Your `option` element with the `value` of `"very-good"` should have the text `Very Good`.
@@ -79,7 +79,7 @@ assert.strictEqual(document.querySelector('option[value="very-good"]')?.textCont
 You should have an `option` element with the value set to `"excellent"`.

 ```js
-assert(document.querySelector('option[value="excellent"]'));
+assert.exists(document.querySelector('option[value="excellent"]'));
 ```

 Your `option` element with the `value` of `"excellent"` should have the text `Excellent`.
@@ -22,7 +22,7 @@ Inside your `select` element, add the `selected` attribute to the `option` eleme
 Your `option` element with the value of `"excellent"` should have the `selected` attribute.

 ```js
-assert(document.querySelector('option[value="excellent"][selected]'));
+assert.exists(document.querySelector('option[value="excellent"][selected]'));
 ```

 # --seed--
@@ -18,7 +18,7 @@ Below your `label` element, add a `select` element with an `id` and `name` set t
 You should have a `label` element with the `for` attribute set to `"food"`.

 ```js
-assert(document.querySelector('label[for="food"]'));
+assert.exists(document.querySelector('label[for="food"]'));
 ```

 Your `label` should have the text `How was the food?`.
@@ -30,13 +30,13 @@ assert.strictEqual(document.querySelector('label[for="food"]')?.textContent, 'Ho
 You should have a `select` element with the `id` set to `"food"` below your `label`.

 ```js
-assert(document.querySelector('label + select#food'));
+assert.exists(document.querySelector('label + select#food'));
 ```

 Your `select` element should have the `name` attribute set to `"food"`.

 ```js
-assert(document.querySelector('label + select[name="food"]'));
+assert.exists(document.querySelector('label + select[name="food"]'));
 ```

 # --seed--
@@ -33,7 +33,7 @@ Don't forget to add the `selected` attribute to the `option` element with the va
 You should have an `option` element with the value set to `"poor"`.

 ```js
-assert(document.querySelector('fieldset:nth-of-type(4) select#food option[value="poor"]'));
+assert.exists(document.querySelector('fieldset:nth-of-type(4) select#food option[value="poor"]'));
 ```

 Your `option` with the `value` of `"poor"` should have the text `"Poor"`.
@@ -45,7 +45,7 @@ assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food o
 You should have an `option` element with the `value` set to `"satisfactory"`.

 ```js
-assert(document.querySelector('fieldset:nth-of-type(4) select#food option[value="satisfactory"]'));
+assert.exists(document.querySelector('fieldset:nth-of-type(4) select#food option[value="satisfactory"]'));
 ```

 Your `option` with the `value` of `"satisfactory"` should have the text `"Satisfactory"`.
@@ -57,7 +57,7 @@ assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food o
 You should have an `option` element with the `value` set to `"good"`.

 ```js
-assert(document.querySelector('fieldset:nth-of-type(4) select#food option[value="good"]'));
+assert.exists(document.querySelector('fieldset:nth-of-type(4) select#food option[value="good"]'));
 ```

 Your `option` with the `value` of `"good"` should have the text `"Good"`.
@@ -70,7 +70,7 @@ assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food o
 You should have an `option` element with the value set to `"very-good"`.

 ```js
-assert(document.querySelector('fieldset:nth-of-type(4) select#food option[value="very-good"]'));
+assert.exists(document.querySelector('fieldset:nth-of-type(4) select#food option[value="very-good"]'));
 ```

 Your `option` with the `value` of `"very-good"` should have the text `"Very Good"`.
@@ -82,7 +82,7 @@ assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food o
 You should have an `option` element with the value set to `"excellent"`.

 ```js
-assert(document.querySelector('fieldset:nth-of-type(4) select#food option[value="excellent"]'));
+assert.exists(document.querySelector('fieldset:nth-of-type(4) select#food option[value="excellent"]'));
 ```

 Your `option` with the `value` of `"excellent"` should have the text `"Excellent"`.
@@ -95,7 +95,7 @@ assert.strictEqual(document.querySelector('fieldset:nth-of-type(4) select#food o
 You should have an `option` element with the `selected` attribute set to `"excellent"`.

 ```js
-assert(document.querySelector('fieldset:nth-of-type(4) select#food option[value="excellent"][selected]'));
+assert.exists(document.querySelector('fieldset:nth-of-type(4) select#food option[value="excellent"][selected]'));
 ```

 # --seed--
@@ -16,7 +16,7 @@ Start by adding a `label` element with the text of `Other Comments?` and a `for`
 You should have a `label` with a `for` attribute set to `"comments"`.

 ```js
-assert(document.querySelector('label[for="comments"]'));
+assert.exists(document.querySelector('label[for="comments"]'));
 ```

 Your `label` should have the text `Other Comments?`.
@@ -26,7 +26,7 @@ Below your `label` element, add a `textarea` element. In the next step, you will
 You should have a `textarea` element below your label.

 ```js
-assert(document.querySelector('label + textarea'));
+assert.exists(document.querySelector('label + textarea'));
 ```

 # --seed--
@@ -16,25 +16,25 @@ For the `cols` attribute set the value to `30` and for the `rows` attribute set
 Your `textarea` element should have an `id` attribute set to `"comments"`.

 ```js
-assert(document.querySelector('textarea#comments'));
+assert.exists(document.querySelector('textarea#comments'));
 ```

 Your `textarea` element should have a `name` attribute set to `"comments"`.

 ```js
-assert(document.querySelector('textarea[name="comments"]'));
+assert.exists(document.querySelector('textarea[name="comments"]'));
 ```

 Your `textarea` element should have a `cols` attribute set to `"30"`.

 ```js
-assert(document.querySelector('textarea[cols="30"]'));
+assert.exists(document.querySelector('textarea[cols="30"]'));
 ```

 Your `textarea` element should have a `rows` attribute set to `"10"`.

 ```js
-assert(document.querySelector('textarea[rows="10"]'));
+assert.exists(document.querySelector('textarea[rows="10"]'));
 ```

 # --seed--
@@ -20,13 +20,13 @@ And with that, your hotel feedback form is complete!
 You should have a `button` inside your form.

 ```js
-assert(document.querySelector('form button'));
+assert.exists(document.querySelector('form button'));
 ```

 Your button should be set to the `type` of `"submit"`.

 ```js
-assert(document.querySelector('button[type="submit"]'));
+assert.exists(document.querySelector('button[type="submit"]'));
 ```

 Your button should have the text content of `Submit`.
@@ -22,7 +22,7 @@ Add the `checked` attribute to the checkbox input with the `id` of `"reputation"
 Your checkbox input with the `id` of `"reputation"` should have the `checked` attribute.

 ```js
-assert(document.querySelector("input#reputation[checked]"));
+assert.exists(document.querySelector("input#reputation[checked]"));
 ```

 # --seed--