fix(curriculum): update tests to use specific assert methods in city skyline workshop (#59906)

2026-05-28 18:26:54 +00:00 · 2025-04-23 16:16:50 +01:00
parent 3efc708ee8
commit 9dfbd80e8c
26 changed files with 43 additions and 43 deletions
@@ -28,7 +28,7 @@ assert.strictEqual(headElements?.length, 1);
 You should have one void `link` element.

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

 Your `link` element should be within your `head` element.
@@ -20,7 +20,7 @@ assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
 You should use the `border` property to style all the elements.

 ```js
-assert(new __helpers.CSSHelp(document).isPropertyUsed('border'));
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('border'));
 ```

 All elements should have a `1px solid black` border.
@@ -14,14 +14,14 @@ Also add a `box-sizing` of `border-box` to everything. This will make it so the
 You should use the `box-sizing` property.

 ```js
-assert(new __helpers.CSSHelp(document).isPropertyUsed('box-sizing'));
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('box-sizing'));
 ```

 You should make use of the existing `*` selector.

 ```js
 // Two selectors create two CSSStyleRule objects
-assert.equal(new __helpers.CSSHelp(document).getStyleDeclarations('*').length, 1);
+assert.lengthOf(new __helpers.CSSHelp(document).getStyleDeclarations('*'), 1);
 ```

 All elements should have a `box-sizing` of `border-box`.
@@ -20,13 +20,13 @@ assert.exists(document.querySelector('div'));
 Your `div` element should be within the `body`.

 ```js
-assert(document.querySelector('div')?.parentElement?.localName === 'body');
+assert.equal(document.querySelector('div')?.parentElement?.localName, 'body');
 ```

 Your `div` element should have a class of `background-buildings`

 ```js
-assert([...document.querySelector('div')?.classList]?.includes('background-buildings'));
+assert.isTrue([...document.querySelector('div')?.classList]?.includes('background-buildings'));
 ```

 # --seed--
@@ -47,7 +47,7 @@ You should place the new `div` elements in the correct order.
 function __t(a, b) {
  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
 }
-assert(__t('div.bb1a','bb1b') && __t('div.bb1b','bb1c') && __t('div.bb1c','bb1d'));
+assert.isTrue(__t('div.bb1a','bb1b') && __t('div.bb1b','bb1c') && __t('div.bb1c','bb1d'));
 ```

 You should place the new `div` elements within the `.bb1` element.
@@ -14,7 +14,7 @@ Now you have something that is resembling a building. You are ready to create yo
 You should create a new variable named `--building-color1`.

 ```js
-assert(new __helpers.CSSHelp(document).isPropertyUsed('--building-color1'));
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color1'));
 ```

 You should define the `--building-color1` variable within `.bb1`.
@@ -26,7 +26,7 @@ assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue
 You should give `--building-color1` a value of `#999`.

 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#999');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(), '#999');
 ```

 # --seed--
@@ -14,7 +14,7 @@ Change the value of your variable from `#999` to `#aa80ff` and you can see how i
 You should change the value of the `--building-color1` property variable from `#999` to `#aa80ff`.

 ```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#aa80ff');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(), '#aa80ff');
 ```

 # --seed--
@@ -32,13 +32,13 @@ assert.exists(document.querySelector('div.bb4'));
 You should create 3 new `div` elements.

 ```js
-assert.equal(document.querySelectorAll('div')?.length, 9);
+assert.lengthOf(document.querySelectorAll('div'), 9);
 ```

 You should place these `div` elements within the `.background-buildings` element.

 ```js
-assert.equal(document.querySelector('div.background-buildings')?.children?.length, 4);
+assert.lengthOf(document.querySelector('div.background-buildings')?.children, 4);
 ```

 You should place the elements in the correct order.
@@ -47,7 +47,7 @@ You should place the elements in the correct order.
 function __t(a, b) {
  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
 }
-assert(__t('div.bb1','bb2') && __t('div.bb2','bb3') && __t('div.bb3','bb4'));
+assert.isTrue(__t('div.bb1','bb2') && __t('div.bb2','bb3') && __t('div.bb3','bb4'));
 ```

 # --seed--
@@ -15,14 +15,14 @@ You should add two new `div` elements before the `.bb1` element.

 ```js
 const bBuildings = document.querySelector('.background-buildings')?.children;
-assert(![...bBuildings?.[0]?.classList]?.includes('bb1'));
-assert(![...bBuildings?.[1]?.classList]?.includes('bb1'));
+assert.isTrue(![...bBuildings?.[0]?.classList]?.includes('bb1'));
+assert.isTrue(![...bBuildings?.[1]?.classList]?.includes('bb1'));
 ```

 You should add one new `div` element between the `.bb3` and `.bb4` element.

 ```js
-assert(document.querySelector('.bb3')?.nextElementSibling === document.querySelector('.bb4')?.previousElementSibling);
+assert.equal(document.querySelector('.bb3')?.nextElementSibling, document.querySelector('.bb4')?.previousElementSibling);
 ```

 You should add two new `div` elements after the `.bb4` element.
@@ -36,7 +36,7 @@ assert.exists(bb4?.nextElementSibling?.nextElementSibling);
 You should add 5 new `div` elements.

 ```js
-assert.equal(document.querySelectorAll('div')?.length, 14);
+assert.lengthOf(document.querySelectorAll('div'), 14);
 ```

 # --seed--
@@ -14,7 +14,7 @@ The background buildings are starting to look pretty good. Create a new `div` be
 You should create a new `div` element.

 ```js
-assert.equal(document.querySelectorAll('div')?.length, 15);
+assert.lengthOf(document.querySelectorAll('div'), 15);
 ```

 The new `div` should come after the `div.background-buildings` element.
@@ -64,7 +64,7 @@ You should place the new `div` elements in the correct order.
 function __t(a, b) {
  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
 }
-assert(__t('div.fb1','fb2') && __t('div.fb2','fb3') && __t('div.fb3','fb4') && __t('div.fb4', 'fb5') && __t('div.fb5', 'fb6'));
+assert.isTrue(__t('div.fb1','fb2') && __t('div.fb2','fb3') && __t('div.fb3','fb4') && __t('div.fb4', 'fb5') && __t('div.fb5', 'fb6'));
 ```

 # --seed--
@@ -15,14 +15,14 @@ You should add two `div` elements as the first children of `.foreground-building

 ```js
 const bBuildings = document.querySelector('.background-buildings')?.children;
-assert(![...bBuildings?.[0]?.classList]?.includes('fb1'));
-assert(![...bBuildings?.[1]?.classList]?.includes('fb1'));
+assert.isTrue(![...bBuildings?.[0]?.classList]?.includes('fb1'));
+assert.isTrue(![...bBuildings?.[1]?.classList]?.includes('fb1'));
 ```

 You should add one `div` element between `.fb2` and `.fb3`.

 ```js
-assert(document.querySelector('.fb2')?.nextElementSibling === document.querySelector('.fb3')?.previousElementSibling);
+assert.equal(document.querySelector('.fb2')?.nextElementSibling, document.querySelector('.fb3')?.previousElementSibling);
 ```


@@ -37,7 +37,7 @@ assert.exists(fb6?.nextElementSibling?.nextElementSibling);
 You should have added 5 new `div` elements.

 ```js
-assert.equal(document.querySelectorAll('div')?.length, 26);
+assert.lengthOf(document.querySelectorAll('div'), 26);
 ```

 # --seed--
@@ -14,13 +14,13 @@ Your code is starting to get quite long. Add a comment above the `.fb1` class th
 You should add the comment `BACKGROUND BUILDINGS - "bb" stands for "background building"` above the `.bb1` selector.

 ```js
-assert(/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//gi.test(code));
+assert.match(code, /\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//gi);
 ```

 You should add the comment `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` above the `.fb1` selector.

 ```js
-assert(/\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//gi.test(code));
+assert.match(code, /\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//gi);
 ```

 # --seed--
@@ -14,7 +14,7 @@ Create a new variable in `:root` called `--window-color1` and give it a value of
 You should create a new variable in `:root` called `--window-color1`.

 ```js
-assert(new __helpers.CSSHelp(document).isPropertyUsed('--window-color1'));
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--window-color1'));
 ```

 You should give the property variable `--window-color1` a value of `black`.
@@ -23,7 +23,7 @@ In the example, `color1` is solid at the top, `color2` is solid at the bottom, a
 You should apply a `background` to `.bb1a` right after the `background-color`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
 ```

 You should give the `background` a `linear-gradient`.
@@ -14,7 +14,7 @@ Nest two new `div` elements within `.bb2`, give them the classes of `bb2a` and `
 You should add two `div` elements to `.bb2`.

 ```js
-assert.equal(document.querySelector('div.bb2')?.children?.length, 2);
+assert.lengthOf(document.querySelector('div.bb2')?.children, 2);
 ```

 You should give the first `div` a class of `bb2a`.
@@ -14,7 +14,7 @@ On to the next building! Create a new variable called `--window-color3` in `:roo
 You should define a new property variable `--window-color3`.

 ```js
-assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color3"));
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed("--window-color3"));
 ```

 You should give `--window-color3` a value of `#d98cb3`.
@@ -14,7 +14,7 @@ Create a new variable called `--window-color4` in `:root` and give it a value of
 You should define a new property variable `--window-color4`.

 ```js
-assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color4"));
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed("--window-color4"));
 ```

 You should give `--window-color4` a value of `#8cb3d9`.
@@ -14,13 +14,13 @@ Nest four new `div` elements within `.bb4c`, give them all the class of `bb4-win
 You should add four `div` elements to `.bb4c`.

 ```js
-assert.equal(document.querySelector(".bb4c")?.children?.length, 4);
+assert.lengthOf(document.querySelector(".bb4c")?.children, 4);
 ```

 You should give each new `div` a class of `bb4-window`.

 ```js
-assert.equal(document.querySelectorAll("div.bb4c > div.bb4-window")?.length, 4);
+assert.lengthOf(document.querySelectorAll("div.bb4c > div.bb4-window"), 4);
 ```

 # --seed--
@@ -14,7 +14,7 @@ Looks good! On to the foreground buildings! Turn the `.fb1` building into three
 You should add three `div` elements within `.fb1`.

 ```js
-assert.equal(document.querySelector("div.fb1")?.children?.length, 3);
+assert.lengthOf(document.querySelector("div.fb1")?.children, 3);
 ```

 You should give the first new `div` a class of `fb1a`.
@@ -14,14 +14,14 @@ On to the next building! Nest two `div` elements within `.fb2` and give them cla
 You should add two `div` elements within `.fb2`.

 ```js
-assert.equal(document.querySelectorAll("div.fb2 > div")?.length, 2);
+assert.lengthOf(document.querySelectorAll("div.fb2 > div"), 2);
 ```

 You should give the first new `div` a class of `fb2a`.

 ```js
 assert.exists(document.querySelector("div.fb2 > div.fb2a"));
-assert(document.querySelector("div.fb2 > div.fb2a") === document.querySelector("div.fb2")?.firstElementChild);
+assert.equal(document.querySelector("div.fb2 > div.fb2a"), document.querySelector("div.fb2")?.firstElementChild);
 ```

 You should give the second new `div` a class of `fb2b`.
@@ -14,13 +14,13 @@ Nest three `div` elements within `.fb2b` and give them a class of `fb2-window`.
 You should add three `div` elements within `.fb2b`.

 ```js
-assert.equal(document.querySelectorAll("div.fb2b > div")?.length, 3);
+assert.lengthOf(document.querySelectorAll("div.fb2b > div"), 3);
 ```

 You should give the three new `div` elements each a class of `fb2-window`.

 ```js
-assert.equal(document.querySelectorAll("div.fb2-window")?.length, 3);
+assert.lengthOf(document.querySelectorAll("div.fb2-window"), 3);
 ```

 # --seed--
@@ -14,7 +14,7 @@ For the next building, nest four `div` elements within `.fb3` with classes of `f
 You should add four `div` elements within `.fb3`.

 ```js
-assert.equal(document.querySelectorAll("div.fb3 > div")?.length, 4);
+assert.lengthOf(document.querySelectorAll("div.fb3 > div"), 4);
 ```

 You should give the first new `div` a class of `fb3a`.
@@ -14,13 +14,13 @@ Nest three new `div` elements in the first `.fb3a` element. Give them each a cla
 You should add three `div` elements within the first `.fb3a` element.

 ```js
-assert.equal(document.querySelectorAll("div.fb3a > div")?.length, 3);
+assert.lengthOf(document.querySelectorAll("div.fb3a > div"), 3);
 ```

 You should give each new `div` a class of `fb3-window`.

 ```js
-assert.equal(document.querySelectorAll("div.fb3-window")?.length, 3)
+assert.lengthOf(document.querySelectorAll("div.fb3-window"), 3)
 ```

 # --seed--
@@ -14,7 +14,7 @@ Only three more buildings to go. Nest two new `div` elements within the `.fb4` e
 You should add two `div` elements within `.fb4`.

 ```js
-assert.equal(document.querySelectorAll("div.fb4 > div")?.length, 2);
+assert.lengthOf(document.querySelectorAll("div.fb4 > div"), 2);
 ```

 You should give the first new `div` a class of `fb4a`.
@@ -14,13 +14,13 @@ Nest six `div` elements within `.fb4b` and give them all a class of `fb4-window`
 You should add six `div` elements within `.fb4b`.

 ```js
-assert.equal(document.querySelectorAll("div.fb4b > div")?.length, 6);
+assert.lengthOf(document.querySelectorAll("div.fb4b > div"), 6);
 ```

 You should give each new `div` a class of `fb4-window`.

 ```js
-assert.equal(document.querySelectorAll("div.fb4-window")?.length, 6);
+assert.lengthOf(document.querySelectorAll("div.fb4-window"), 6);
 ```

 # --seed--