fix(curriculum): update tests to better catch common errors (freeCodeCamp#55605)

Co-authored-by: Naomi the Technomancer <[email protected]>

Author: lasjorg

curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md

@@ -9,73 +9,88 @@ dashedName: step-56
 
 There's another way to associate an `input` element's text with the element itself. You can nest the text within a `label` element and add a `for` attribute with the same value as the `input` element's `id` attribute.
 
-Here is an example of using the `for` attribute to associate a `label` with an `input` element:
+Given an `input` element as below:
 
 ```html
-<label for="breakfast"> Breakfast </label>
 <input id="breakfast" type="radio" name="meal" value="breakfast">
 ```
 
+An example of a `label` element that is associated to this `input` element is:
+
+```html
+<label for="breakfast">Breakfast</label>
+```
+
 Associate the text `Loving` with the checkbox by nesting only the text `Loving` in a `label` element and giving it an appropriate `for` attribute.
 
 # --hints--
 
-You should make sure the checkbox is still present.
+You should make sure the checkbox element is still present, and you did not make any changes to it. It should stay as it was in the starting code.
 
 ```js
-assert($('input[type="checkbox"]')[0]);
+const checkboxElementRegex = /\s*<input\s+id\s*=\s*"loving"\s*type\s*=\s*"checkbox"\s*>/;
+assert.match(code, checkboxElementRegex);
 ```
 
 Your checkbox should still have an `id` attribute with the value `loving`.  Expected `--fcc-expected--`, but found `--fcc-actual--`.
 
 ```js
-assert.equal($('input[type="checkbox"]')[0].id, 'loving');
+const checkboxElementId = document.querySelector('input[type="checkbox"]')?.getAttribute('id');
+assert.strictEqual(checkboxElementId, 'loving');
 ```
 
-The text `Loving` should be wrapped in a `label` element.
+You should add a new `label` element after the checkbox element. Make sure it has both an opening and closing tag.
 
 ```js
-const checkboxInputElem = $('input[type="checkbox"]')[0];
-assert(
-  /Loving/i.test(checkboxInputElem.nextElementSibling.innerText.replace(/\s+/g, ' '))
-);
+assert.lengthOf(document.querySelectorAll('label'), 3);
+assert.lengthOf(code.match(/<\/label\>/g), 3);
 ```
 
-You will need to add a new `label` element in which to nest the text `Loving`. Make sure it has both an opening and closing tag.
+Your `label` element should be located after your checkbox.
 
 ```js
-assert(
-  document.querySelectorAll('label').length === 3 &&
-    code.match(/<\/label\>/g).length === 3
-);
+const checkboxElement = document.querySelector('input[type="checkbox"]');
+const checkboxSiblingElement = checkboxElement?.nextElementSibling?.nodeName;
+assert.strictEqual(checkboxSiblingElement, 'LABEL');
 ```
 
-The new `label` element should be located directly to the right of your checkbox. Make sure there is a space between the two elements.
+Your `label` element should have the text `Loving`.
 
 ```js
-const checkboxInputElem = $('input[type="checkbox"]')[0];
-assert(checkboxInputElem.nextElementSibling.nodeName === 'LABEL');
+const checkboxElement = document.querySelector('input[type="checkbox"]');
+const checkboxSiblingElementText = checkboxElement?.nextElementSibling?.innerText;
+
+assert.strictEqual(checkboxSiblingElementText, 'Loving');
 ```
 
-The new `label` element does not have a `for` attribute. Check that there is a space after the opening tag's name.
+The label text `Loving` should only be inside your new `label` element. Make sure you did not duplicate the text outside the `label` element.
 
 ```js
-const labelElem = $('input[type="checkbox"]')[0].nextElementSibling;
-assert(labelElem.hasAttribute('for'));
+const checkboxElement = document.querySelector('input[type="checkbox"]');
+const checkboxSiblingNode = checkboxElement?.nextSibling?.nodeValue ?? '';
+const labelElement = checkboxElement?.nextElementSibling;
+const labelSiblingNode = labelElement?.nextSibling?.nodeValue ?? '';
+
+assert.notInclude(checkboxSiblingNode, 'Loving');
+assert.notInclude(labelSiblingNode, 'Loving');
 ```
 
-The new `label` element should have a `for` attribute with the value `loving`.  Expected `--fcc-expected--`, but found `--fcc-actual--`.
+Your `label` element does not have a `for` attribute. Make sure there is a space between the opening `label` tag name and the `for` attribute.
 
 ```js
-const labelElem = $('input[type="checkbox"]')[0].nextElementSibling;
-assert.equal(labelElem.getAttribute('for'), 'loving');
+const checkboxElement = document.querySelector('input[type="checkbox"]');
+const checkboxSiblingElementAttr = checkboxElement?.nextElementSibling?.getAttribute('for');
+
+assert.isNotNull(checkboxSiblingElementAttr);
 ```
 
-The text `Loving` should be nested within the new `label` element. You have either omitted the text or have a typo.
+Your `label` element should have a `for` attribute with the value `loving`.  Expected `--fcc-expected--`, but found `--fcc-actual--`.
 
 ```js
-const labelElem = document.querySelector('label[for="loving"]');
-assert(labelElem.textContent.replace(/\s/g, '').match(/Loving/i));
+const checkboxElement = document.querySelector('input[type="checkbox"]');
+const checkboxSiblingElementAttr = checkboxElement?.nextElementSibling?.getAttribute('for');
+
+assert.strictEqual(checkboxSiblingElementAttr, 'loving');
 ```
 
 There should be a space between your checkbox and your new `label` element.