chore(curriculum): update ferris workshop tests (#57154)

Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>
2026-05-28 18:26:54 +00:00 · 2024-11-18 17:31:32 -05:00
parent 3f62648aeb
commit 7f830a128e
28 changed files with 95 additions and 99 deletions
@@ -21,7 +21,7 @@ assert.match(code, /<link/);
 You should have one `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.
@@ -17,41 +17,41 @@ You should create a new `div` within your `body` element.

 ```js
 const divs = [...document.querySelector('body')?.children].filter(child => child?.localName === 'div');
-assert(divs?.length === 1);
+assert.lengthOf(divs, 1);
 ```

 Your `div` within your `body` element should have a `class` of `wheel`.

 ```js
-assert(document.querySelector('body div')?.classList?.contains('wheel'));
+assert.isTrue(document.querySelector('body div')?.classList?.contains('wheel'));
 ```

 Your `.wheel` element should have six `span` elements within.

 ```js
-assert(document.querySelectorAll('.wheel span')?.length === 6);
+assert.lengthOf(document.querySelectorAll('.wheel span'), 6);
 ```

 Your six `span` elements within the `.wheel` element should have a `class` of `line`.

 ```js
 const spans = [...document.querySelectorAll('.wheel span')];
-assert(spans?.every(span => span?.classList?.contains('line')));
-assert(document.querySelectorAll('.line')?.length === 6);
+assert.isTrue(spans?.every(span => span?.classList?.contains('line')));
+assert.lengthOf(document.querySelectorAll('.line'), 6);
 ```

 Your `.wheel` element should have six `div` elements within.

 ```js
-assert(document.querySelectorAll('.wheel div')?.length === 6);
+assert.lengthOf(document.querySelectorAll('.wheel div'), 6);
 ```

 Your six `div` elements within the `.wheel` element should have a `class` of `cabin`.

 ```js
 const divs = [...document.querySelectorAll('.wheel div')];
-assert(divs?.every(div => div?.classList?.contains('cabin')));
-assert(document.querySelectorAll('.cabin')?.length === 6);
+assert.isTrue(divs?.every(div => div?.classList?.contains('cabin')));
+assert.lengthOf(document.querySelectorAll('.cabin'), 6);
 ```

 # --seed--
@@ -14,25 +14,25 @@ Create a selector for your `.wheel` element. Start by setting the `border` to `2
 You should have a `.wheel` selector.

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

 Your `.wheel` selector should have a `border` property set to `2px solid black`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.border === '2px solid black');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.wheel')?.border, '2px solid black');
 ```

 Your `.wheel` selector should have a `border-radius` property set to `50%`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.borderRadius === '50%');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.wheel')?.borderRadius, '50%');
 ```

 Your `.wheel` selector should have a `margin-left` property set to `50px`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.marginLeft === '50px');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.wheel')?.marginLeft, '50px');
 ```

 # --seed--
@@ -14,19 +14,19 @@ Set the `position` property of the `.wheel` selector to `absolute`. Set the `hei
 Your `.wheel` selector should have a `position` property set to `absolute`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.position === 'absolute');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.wheel')?.position, 'absolute');
 ```

 Your `.wheel` selector should have a `height` property set to `55vw`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.height === '55vw');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.wheel')?.height, '55vw');
 ```

 Your `.wheel` selector should have a `width` property set to `55vw`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.width === '55vw');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.wheel')?.width, '55vw');
 ```

 # --seed--
@@ -14,25 +14,25 @@ Create a selector for your `.line` elements. Start by setting the `background-co
 You should have a `.line` selector.

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

 Your `.line` selector should have a `background-color` property set to `black`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.line')?.backgroundColor === "black");
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.line')?.backgroundColor, "black");
 ```

 Your `.line` selector should have a `width` property set to `50%`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.line')?.width === "50%");
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.line')?.width, "50%");
 ```

 Your `.line` selector should have a `height` property set to `2px`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.line')?.height === "2px");
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.line')?.height, "2px");
 ```

 # --seed--
@@ -14,19 +14,19 @@ Set the `.line` selector's `position` property to `absolute`, the `left` propert
 Your `.line` selector should have a `position` property set to `absolute`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.line')?.position === 'absolute');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.line')?.position, 'absolute');
 ```

 Your `.line` selector should have a `left` property set to `50%`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.line')?.left === '50%');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.line')?.left, '50%');
 ```

 Your `.line` selector should have a `top` property set to `50%`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.line')?.top === '50%');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.line')?.top, '50%');
 ```

 # --seed--
@@ -17,7 +17,7 @@ Your `.line` selector should have a `transform-origin` property set to `0% 0%`.

 ```js
 const transformOrigin = new __helpers.CSSHelp(document).getStyle('.line')?.transformOrigin;
-assert(transformOrigin === '0% 0%' || transformOrigin === '0% 0% 0px');
+assert.oneOf(transformOrigin, ['0% 0%', '0% 0% 0px']);
 ```

 # --seed--
@@ -16,13 +16,13 @@ Remember that the `transform` property allows you to manipulate the shape of an
 You should create a `.line:nth-of-type(2)` selector.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)'));
+assert.exists(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)'));
 ```

 Your `.line:nth-of-type(2)` selector should have a `transform` property set to `rotate(60deg)`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)')?.transform === 'rotate(60deg)');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)')?.transform, 'rotate(60deg)');
 ```

 # --seed--
@@ -16,49 +16,49 @@ Set the `transform` property for the third `.line` to `rotate(120deg)`, the four
 You should create a `.line:nth-of-type(3)` selector.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(3)'));
+assert.exists(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(3)'));
 ```

 Your `.line:nth-of-type(3)` selector should have a `transform` property set to `rotate(120deg)`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(3)')?.transform === 'rotate(120deg)');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(3)')?.transform, 'rotate(120deg)');
 ```

 You should create a `.line:nth-of-type(4)` selector.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(4)'));
+assert.exists(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(4)'));
 ```

 Your `.line:nth-of-type(4)` selector should have a `transform` property set to `rotate(180deg)`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(4)')?.transform === 'rotate(180deg)');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(4)')?.transform, 'rotate(180deg)');
 ```

 You should create a `.line:nth-of-type(5)` selector.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(5)'));
+assert.exists(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(5)'));
 ```

 Your `.line:nth-of-type(5)` selector should have a `transform` property set to `rotate(240deg)`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(5)')?.transform === 'rotate(240deg)');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(5)')?.transform, 'rotate(240deg)');
 ```

 You should create a `.line:nth-of-type(6)` selector.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)'));
+assert.exists(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)'));
 ```

 Your `.line:nth-of-type(6)` selector should have a `transform` property set to `rotate(300deg)`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)')?.transform === 'rotate(300deg)');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)')?.transform, 'rotate(300deg)');
 ```


@@ -14,25 +14,25 @@ Create a `.cabin` selector. Set the `background-color` to `red`, the `width` to
 You should have a `.cabin` selector.

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

 Your `.cabin` selector should have a `background-color` property set to `red`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.backgroundColor === 'red');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cabin')?.backgroundColor, 'red');
 ```

 Your `.cabin` selector should have a `width` property set to `20%`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.width === '20%');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cabin')?.width, '20%');
 ```

 Your `.cabin` selector should have a `height` property set to `20%`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.height === '20%');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cabin')?.height, '20%');
 ```

 # --seed--
@@ -14,13 +14,13 @@ Give the `.cabin` a `position` of `absolute`, and a `border` of `2px solid`.
 Your `.cabin` selector should have a `position` property set to `absolute`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.position === 'absolute');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cabin')?.position, 'absolute');
 ```

 Your `.cabin` selector should have a `border` property set to `2px solid`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.border === '2px solid');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cabin')?.border, '2px solid');
 ```

 # --seed--
@@ -15,7 +15,7 @@ Your `.cabin` selector should have a `transform-origin` property set to `50% 0%`

 ```js
 const transformOrigin = new __helpers.CSSHelp(document).getStyle('.cabin')?.transformOrigin;
-assert(transformOrigin === '50% 0%' || transformOrigin === '50% 0% 0px');
+assert.oneOf(transformOrigin, ['50% 0%', '50% 0% 0px']);
 ```

 # --seed--
@@ -20,80 +20,80 @@ Continuing the pattern, select the following `.cabin` elements and apply the spe
 You should have a `.cabin:nth-of-type(2)` selector.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)'));
+assert.exists(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)'));
 ```

 Your `.cabin:nth-of-type(2)` selector should have a `right` property set to `17%`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)')?.right === '17%');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)')?.right, '17%');
 ```

 Your `.cabin:nth-of-type(2)` selector should have a `top` property set to `93.5%`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)')?.top === '93.5%');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)')?.top, '93.5%');
 ```

 You should have a `.cabin:nth-of-type(3)` selector.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)'));
+assert.exists(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)'));
 ```

 Your `.cabin:nth-of-type(3)` selector should have a `right` property set to `67%`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)')?.right === '67%');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)')?.right,'67%');
 ```

 Your `.cabin:nth-of-type(3)` selector should have a `top` property set to `93.5%`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)')?.top === '93.5%');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)')?.top, '93.5%');
 ```

 You should have a `.cabin:nth-of-type(4)` selector.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)'));
+assert.exists(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)'));
 ```

 Your `.cabin:nth-of-type(4)` selector should have a `left` property set to `-8.5%`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)')?.left === '-8.5%');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)')?.left, '-8.5%');
 ```

 Your `.cabin:nth-of-type(4)` selector should have a `top` property set to `50%`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)')?.top === '50%');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)')?.top, '50%');
 ```

 You should have a `.cabin:nth-of-type(5)` selector.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)'));
+assert.exists(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)'));
 ```

 Your `.cabin:nth-of-type(5)` selector should have a `left` property set to `17%`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)')?.left === '17%');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)')?.left, '17%');
 ```

 Your `.cabin:nth-of-type(5)` selector should have a `top` property set to `7%`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)')?.top === '7%');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)')?.top, '7%');
 ```

 You should have a `.cabin:nth-of-type(6)` selector.

 ```js
 const def = (s) => new __helpers.CSSHelp(document).getStyle(s)
-assert(def('.cabin:nth-of-type(6)') || def('.cabin:last-of-type'));
+assert.exists(def('.cabin:nth-of-type(6)') || def('.cabin:last-of-type'));
 ```

 Your `.cabin:nth-of-type(6)` selector should have a `right` property set to `17%`.
@@ -18,13 +18,13 @@ Time to start animating. Create a `@keyframes` rule named `wheel`.
 You should have a `@keyframes` rule.

 ```js
-assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.length === 1);
+assert.lengthOf(new __helpers.CSSHelp(document).getCSSRules('keyframes'), 1);
 ```

 Your new `@keyframes` rule should be named `wheel`.

 ```js
-assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name === 'wheel');
+assert.strictEqual(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name, 'wheel');
 ```

 # --seed--
@@ -24,7 +24,7 @@ As an example, this would be a `12%` rule:
 Your `@keyframes wheel` rule should have a `0%` selector.

 ```js
-assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.keyText === '0%');
+assert.strictEqual(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.keyText, '0%');
 ```

 # --seed--
@@ -14,7 +14,7 @@ Give the `0%` rule a `transform` property set to `rotate(0deg)`. This will start
 Your `0%` selector should have a `transform` property set to `rotate(0deg)`.

 ```js
-assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.style?.transform === 'rotate(0deg)');
+assert.strictEqual(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.style?.transform, 'rotate(0deg)');
 ```

 # --seed--
@@ -15,19 +15,19 @@ Your `@keyframes wheel` rule should have a `100%` selector.

 ```js
 const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules
-assert(rules?.[0]?.keyText === '100%' || rules?.[1]?.keyText === '100%');
+assert.isTrue(rules?.[0]?.keyText === '100%' || rules?.[1]?.keyText === '100%');
 ```

 Your `100%` selector should come after your `0%` selector.

 ```js
-assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.keyText === '100%')
+assert.strictEqual(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.keyText, '100%')
 ```

 Your `100%` selector should have a `transform` property set to `rotate(360deg)`.

 ```js
-assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.style?.transform === 'rotate(360deg)')
+assert.strictEqual(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.style?.transform, 'rotate(360deg)')
 ```


@@ -16,13 +16,13 @@ The `animation-duration` property is used to set how long the animation should s
 Your `.wheel` selector should have an `animation-name` property set to `wheel`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationName === 'wheel');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationName, 'wheel');
 ```

 Your `.wheel` selector should have an `animation-duration` property set to `10s`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationDuration === '10s');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationDuration, '10s');
 ```

 # --seed--
@@ -16,13 +16,13 @@ The `animation-timing-function` property sets how the animation should progress
 Your `.wheel` selector should have an `animation-iteration-count` property set to `infinite`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationIterationCount === 'infinite');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationIterationCount, 'infinite');
 ```

 Your `.wheel` selector should have an `animation-timing-function` property set to `linear`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationTimingFunction === 'linear');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationTimingFunction, 'linear');
 ```

 # --seed--
@@ -14,57 +14,57 @@ Create another `@keyframes` rule with the name `cabins`. Use the same properties
 You should have a `@keyframes` rule.

 ```js
-assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.length === 2);
+assert.lengthOf(new __helpers.CSSHelp(document).getCSSRules('keyframes'), 2);
 ```

 Your new `@keyframes` rule should be named `cabins`.

 ```js
 const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes');
-assert(rules?.[0]?.name === 'cabins' || rules?.[1]?.name === 'cabins');
+assert.isTrue(rules?.[0]?.name === 'cabins' || rules?.[1]?.name === 'cabins');
 ```

 Your new `@keyframes` rule should come after your `@keyframes wheel` rule.

 ```js
-assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.name === 'cabins');
+assert.strictEqual(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.name, 'cabins');
 ```

 You should not change the name of your `@keyframes wheel` rule.

 ```js
-assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name === 'wheel');
+assert.strictEqual(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name, 'wheel');
 ```

 Your `@keyframes cabins` rule should have a `0%` selector.

 ```js
-assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.keyText === '0%');
+assert.strictEqual(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.keyText, '0%');
 ```

 Your `0%` selector should have a `transform` property set to `rotate(0deg)`.

 ```js
-assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.transform === 'rotate(0deg)');
+assert.strictEqual(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.transform, 'rotate(0deg)');
 ```

 Your `@keyframes cabins` rule should have a `100%` selector.

 ```js
 const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules
-assert(rules?.[0]?.keyText === '100%' || rules?.[1]?.keyText === '100%');
+assert.isTrue(rules?.[0]?.keyText === '100%' || rules?.[1]?.keyText === '100%');
 ```

 Your `100%` selector should come after your `0%` selector.

 ```js
-assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '100%')
+assert.strictEqual(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText, '100%')
 ```

 Your `100%` selector should have a `transform` property set to `rotate(-360deg)`.

 ```js
-assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.transform === 'rotate(-360deg)')
+assert.strictEqual(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.transform, 'rotate(-360deg)')
 ```


@@ -17,12 +17,10 @@ Your `.cabin` selector should have an `animation` property set to `cabins 10s li

 ```js
 const cabinElementStyles = new __helpers.CSSHelp(document).getStyle('.cabin');
-assert(
-  cabinElementStyles?.animationName === "cabins" &&
-    cabinElementStyles?.animationDuration === "10s" &&
-    cabinElementStyles?.animationTimingFunction === "linear" &&
-    cabinElementStyles?.animationIterationCount === "infinite"
-);
+assert.strictEqual(cabinElementStyles?.animationName, "cabins");
+assert.strictEqual(cabinElementStyles?.animationDuration, "10s")
+assert.strictEqual(cabinElementStyles?.animationTimingFunction, "linear")
+assert.strictEqual(cabinElementStyles?.animationIterationCount, "infinite");
 ```

 # --seed--
@@ -17,12 +17,10 @@ Your `.cabin` selector should have an `animation` property set to `cabins 10s ea

 ```js
 const cabinElementStyles = new __helpers.CSSHelp(document).getStyle('.cabin');
-assert(
-  cabinElementStyles?.animationName === "cabins" &&
-    cabinElementStyles?.animationDuration === "10s" &&
-    cabinElementStyles?.animationTimingFunction === "ease-in-out" &&
-    cabinElementStyles?.animationIterationCount === "infinite"
-);
+assert.strictEqual(cabinElementStyles?.animationName, "cabins");
+assert.strictEqual(cabinElementStyles?.animationDuration, "10s");
+assert.strictEqual(cabinElementStyles?.animationTimingFunction, "ease-in-out");
+assert.strictEqual(cabinElementStyles?.animationIterationCount, "infinite");
 ```


@@ -14,7 +14,7 @@ You can use `@keyframes` rules to control more than just the transformation of a
 Your `0%` selector should have a `background-color` property set to `yellow`.

 ```js
-assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.backgroundColor === 'yellow');
+assert.strictEqual(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.backgroundColor, 'yellow');
 ```

 # --seed--
@@ -15,19 +15,19 @@ You should create a new `50%` selector in your `@keyframes cabins` rule.

 ```js
 const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules;
-assert(rules?.[0]?.keyText === '50%' || rules?.[1]?.keyText === '50%' || rules?.[2]?.keyText === '50%'); 
+assert.isTrue(rules?.[0]?.keyText === '50%' || rules?.[1]?.keyText === '50%' || rules?.[2]?.keyText === '50%'); 
 ```

 Your `50%` selector should be between your `0%` and `100%` selectors.

 ```js
-assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '50%');
+assert.strictEqual(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText, '50%');
 ```

 Your `50%` selector should have a `background-color` property set to `purple`.

 ```js
-assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.backgroundColor === 'purple');
+assert.strictEqual(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.backgroundColor, 'purple');
 ```

 # --seed--
@@ -16,7 +16,7 @@ To start fixing this, remove the `background-color` from your `0%` selector.
 Your `0%` selector should not have a `background-color` property.

 ```js
-assert(!new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.backgroundColor);
+assert.isEmpty(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.backgroundColor);
 ```

 # --seed--
@@ -15,19 +15,19 @@ You should create a new `25%` selector in your `@keyframes cabins` rule.

 ```js
 const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules;
-assert(rules?.[0]?.keyText === '25%' || rules?.[1]?.keyText === '25%' || rules?.[2]?.keyText === '25%' || rules?.[3]?.keyText === '25%');
+assert.isTrue(rules?.[0]?.keyText === '25%' || rules?.[1]?.keyText === '25%' || rules?.[2]?.keyText === '25%' || rules?.[3]?.keyText === '25%');
 ```

 Your `25%` selector should be between your `0%` and `50%` selectors.

 ```js
-assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '25%');
+assert.strictEqual(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText , '25%');
 ```

 Your `25%` selector should have a `background-color` property set to `yellow`.

 ```js
-assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.backgroundColor === 'yellow');
+assert.strictEqual(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.backgroundColor , 'yellow');
 ```

 # --seed--
@@ -17,19 +17,19 @@ You should create a new `75%` selector in your `@keyframes cabins` rule.

 ```js
 const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules;
-assert(rules?.[0]?.keyText === '75%' || rules?.[1]?.keyText === '75%' || rules?.[2]?.keyText === '75%' || rules?.[3]?.keyText === '75%' || rules?.[4]?.keyText === '75%');
+assert.isTrue(rules?.[0]?.keyText === '75%' || rules?.[1]?.keyText === '75%' || rules?.[2]?.keyText === '75%' || rules?.[3]?.keyText === '75%' || rules?.[4]?.keyText === '75%');
 ```

 Your `75%` selector should be between your `50%` and `100%` selectors.

 ```js
-assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.keyText === '75%');
+assert.strictEqual(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.keyText, '75%');
 ```

 Your `75%` selector should have a `background-color` property set to `yellow`.

 ```js
-assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.style?.backgroundColor === 'yellow');
+assert.strictEqual(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.style?.backgroundColor, 'yellow');
 ```

 # --seed--
@@ -14,13 +14,13 @@ Give your `.wheel` selector a `max-height` and `max-width` property both set to
 Your `.wheel` selector should have a `max-height` property set to `500px`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.maxHeight === '500px');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.wheel')?.maxHeight, '500px');
 ```

 Your `.wheel` selector should have a `max-width` property set to `500px`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.maxWidth === '500px');
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.wheel')?.maxWidth, '500px');
 ```

 # --seed--