chore: update piano workshop tests to current standards (#59837)

2026-05-28 18:26:54 +00:00 · 2025-04-24 03:00:03 +02:00
parent ef6d965d55
commit 133f76d7c2
29 changed files with 81 additions and 79 deletions
@@ -23,14 +23,14 @@ Your `div` should be within your `body` element.

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

 Your `div` should have the `id` set to `piano`.

 ```js
 const div = document.querySelector('div');
-assert(div?.getAttribute('id') === 'piano');
+assert.equal(div?.getAttribute('id'), 'piano');
 ```

 # --seed--
@@ -15,22 +15,22 @@ You should create a second `div` element.

 ```js
 const divDiv = document.querySelectorAll('div');
-assert(divDiv?.length === 2);
+assert.lengthOf(divDiv, 2);
 ```

 Your new `div` element should be within your existing `div` element.

 ```js
 const div = document.querySelector('div');
-assert(div?.children?.length === 1);
-assert(div?.children?.[0]?.localName === 'div');
+assert.lengthOf(div?.children, 1);
+assert.equal(div?.children?.[0]?.localName, 'div');
 ```

 Your new `div` element should have the `class` set to `keys`.

 ```js
 const div = document.querySelector('div');
-assert(div?.children?.[0]?.className === 'keys');
+assert.equal(div?.children?.[0]?.className, 'keys');
 ```

 # --seed--
@@ -15,22 +15,24 @@ You should create seven new `div` elements.

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

 Your seven new `div` elements should be within your `.keys` element.

 ```js
 const keys = document.querySelector('.keys');
-assert([...keys?.children].length === 7);
-assert([...keys?.children].every(child => child?.tagName === 'DIV'));
+assert.lengthOf([...keys?.children], 7);
+[...keys?.children].forEach(
+  child => assert.equal(child.tagName, 'DIV')
+)
 ```

 Your seven new `div` elements should all have the `class` set to `key`.

 ```js
 const keys = document.querySelector('.keys');
-assert([...keys?.children].every(child => child?.classList?.contains('key')));
+[...keys?.children].forEach(child => assert.isTrue(child?.classList.contains('key')));
 ```

 # --seed--
@@ -14,50 +14,50 @@ Remember, a `class` attribute can hold multiple values. To differentiate between
 Your second `.key` element should also have a `class` of `black--key`.

 ```js
-const key = document.querySelectorAll('.key')?.[1];
-assert(key?.className?.includes('black--key'));
+const key = document.querySelectorAll('.key')[1];
+assert.isTrue(key?.className.includes('black--key'));
 ```

 Your third `.key` should have `black--key` in the `class`.

 ```js
 const third = document.querySelectorAll('.key')?.[2];
-assert(third?.classList?.contains('black--key'));
+assert.isTrue(third?.classList?.contains('black--key'));
 ```

 Your fifth `.key` should have `black--key` in the `class`.

 ```js
 const fifth = document.querySelectorAll('.key')?.[4];
-assert(fifth?.classList?.contains('black--key'));
+assert.isTrue(fifth?.classList?.contains('black--key'));
 ```

 Your sixth `.key` should have `black--key` in the `class`.

 ```js
 const sixth = document.querySelectorAll('.key')?.[5];
-assert(sixth?.classList?.contains('black--key'));
+assert.isTrue(sixth?.classList.contains('black--key'));
 ```

 Your seventh `.key` should have `black--key` in the `class`.

 ```js
 const seventh = document.querySelectorAll('.key')?.[6];
-assert(seventh?.classList?.contains('black--key'));
+assert.isTrue(seventh?.classList?.contains('black--key'));
 ```

 You should have five `.black--key` elements.

 ```js
 const blackKeys = document.querySelectorAll('.black--key');
-assert(blackKeys?.length === 5);
+assert.lengthOf(blackKeys, 5);
 ```

 You should have seven `.key` elements.

 ```js
 const keys = document.querySelectorAll('.key');
-assert(keys?.length === 7);
+assert.lengthOf(keys, 7);
 ```

 # --seed--
@@ -15,28 +15,28 @@ You should have 21 `.key` elements.

 ```js
 const keys = document.querySelectorAll('.key');
-assert(keys?.length === 21);
+assert.lengthOf(keys, 21);
 ```

 You should have 15 `.black--key` elements.

 ```js
 const blackKeys = document.querySelectorAll('.black--key');
-assert(blackKeys?.length === 15);
+assert.lengthOf(blackKeys, 15);
 ```

 All `.key` elements should be within your `.keys` element.

 ```js
 const keys = document.querySelector('.keys');
-assert(keys?.querySelectorAll('.key')?.length === 21);
+assert.lengthOf(keys?.querySelectorAll('.key'), 21);
 ```

 All `.black--key` elements should be within your `.keys` element.

 ```js
 const keys = document.querySelector('.keys');
-assert(keys?.querySelectorAll('.black--key')?.length === 15);
+assert.lengthOf(keys?.querySelectorAll('.black--key'), 15);
 ```

 # --seed--
@@ -16,13 +16,13 @@ Add an `html` rule selector to your CSS file, and set the `box-sizing` property
 You should have an `html` selector.

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

 Your `html` selector should have the `box-sizing` property set to `border-box`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box');
+assert.equal(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing, 'border-box');
 ```

 # --seed--
@@ -14,25 +14,25 @@ Now target your `#piano` element with an `id` selector. Set its `background-colo
 You should have a `#piano` selector.

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

 Your `#piano` selector should have the `background-color` property set to `#00471b`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#piano')?.backgroundColor === 'rgb(0, 71, 27)');
+assert.equal(new __helpers.CSSHelp(document).getStyle('#piano')?.backgroundColor, 'rgb(0, 71, 27)');
 ```

 Your `#piano` selector should have a `width` property set to `992px`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#piano')?.width === '992px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('#piano')?.width, '992px');
 ```

 Your `#piano` selector should have the `height` set to `290px`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#piano')?.height === '290px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('#piano')?.height, '290px');
 ```

 # --seed--
@@ -14,7 +14,7 @@ Set the `margin` of the `#piano` to `80px auto`.
 Your `#piano` selector should have the `margin` property set to `80px auto`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#piano')?.margin === '80px auto');
+assert.equal(new __helpers.CSSHelp(document).getStyle('#piano')?.margin, '80px auto');
 ```

 # --seed--
@@ -14,25 +14,25 @@ Time to style the keys. Below the `#piano` rule, target the `.keys` element with
 You should have a `.keys` selector.

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

 Your `.keys` selector should have a `background-color` property set to `#040404`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.keys')?.backgroundColor === 'rgb(4, 4, 4)');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.keys')?.backgroundColor, 'rgb(4, 4, 4)');
 ```

 Your `.keys` selector should have the `width` property set to `949px`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.keys')?.width === '949px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.keys')?.width, '949px');
 ```

 Your `.keys` selector should have a `height` property set to `180px`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.keys')?.height === '180px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.keys')?.height, '180px');
 ```

 # --seed--
@@ -14,7 +14,7 @@ Give the `.keys` a `padding-left` of `2px`.
 Your `.keys` selector should have a `padding-left` property set to `2px`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.keys')?.paddingLeft === '2px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.keys')?.paddingLeft, '2px');
 ```

 # --seed--
@@ -14,7 +14,7 @@ Move the keys into position by adjusting the `#piano` selector. Set the `padding
 Your `#piano` selector should have the `padding` property set to `90px 20px 0 20px`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#piano')?.padding === '90px 20px 0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('#piano')?.padding, '90px 20px 0px');
 ```

 # --seed--
@@ -14,31 +14,31 @@ Time to style the keys themselves. Create a `class` selector for the `.key` elem
 You should have a `.key` selector.

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

 Your `.key` selector should have a `background-color` property set to `#ffffff`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.key')?.backgroundColor === 'rgb(255, 255, 255)');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.key')?.backgroundColor, 'rgb(255, 255, 255)');
 ```

 Your `.key` selector should have the `position` property set to `relative`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.key')?.position === 'relative');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.key')?.position,'relative');
 ```

 Your `.key` selector should have a `width` property set to `41px`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.key')?.width === '41px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.key')?.width, '41px');
 ```

 Your `.key` selector should have a `height` property set to `175px`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.key')?.height === '175px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.key')?.height, '175px');
 ```


@@ -14,13 +14,13 @@ Give the `.key` a `margin` of `2px` and a `float` property set to `left`.
 Your `.key` selector should have a `margin` property set to `2px`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.key')?.margin === '2px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.key')?.margin, '2px');
 ```

 Your `.key` selector should have a `float` property set to `left`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.key')?.float === 'left');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.key')?.float, 'left');
 ```

 # --seed--
@@ -20,19 +20,19 @@ If you would like to experiment, try removing the `background-color` property an
 You should have a `.key.black--key::after` selector.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after'));
+assert.exists(new __helpers.CSSHelp(document).getStyle('.key.black--key::after'));
 ```

 Your `.key.black--key::after` selector should have a `background-color` property set to `#1d1e22`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.backgroundColor === 'rgb(29, 30, 34)');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.backgroundColor, 'rgb(29, 30, 34)');
 ```

 Your `.key.black--key::after` selector should have a `content` property set to `""`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.content === '""');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.content, '""');
 ```

 # --seed--
@@ -14,13 +14,13 @@ Give the `.key.black--key::after` a `position` property set to `absolute` and a
 Your `.key.black--key::after` selector should have a `position` property set to `absolute`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.position === 'absolute');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.position, 'absolute');
 ```

 Your `.key.black--key::after` selector should have a `left` property set to `-18px`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.left === '-18px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.left, '-18px');
 ```

 # --seed--
@@ -14,13 +14,13 @@ For the `.key.black--key::after`, set the `width` to `32px` and the `height` to
 Your `.key.black--key::after` should have a `width` property set to `32px`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.width === '32px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.width, '32px');
 ```

 Your `.key.black--key::after` should have a `height` property set to `100px`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.height === '100px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.height, '100px');
 ```

 # --seed--
@@ -16,41 +16,41 @@ Add an `img` element before your `.keys` element. Give the `img` a `class` of `l
 You should add a new `img` element.

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

 Your `img` element should come before your first `.keys` element.

 ```js
 const img = document.querySelector('img');
-assert(img?.nextElementSibling?.className === 'keys');
-assert(img?.previousElementSibling === null);
+assert.equal(img?.nextElementSibling?.className, 'keys');
+assert.isNull(img?.previousElementSibling);
 ```

 Your `img` element should have a `class` set to `logo`.

 ```js
 const img = document.querySelector('img');
-assert(img?.className === 'logo');
+assert.equal(img?.className, 'logo');
 ```

 Your `img` element should have a `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`.

 ```js
 const img = document.querySelector('img');
-assert(img?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg');
+assert.equal(img?.getAttribute('src'), 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg');
 ```

 Your `img` element should have an `alt` attribute set to `freeCodeCamp Logo`.

 ```js
-assert(document.querySelector('img')?.getAttribute('alt')?.toLowerCase() === 'freecodecamp logo');
+assert.equal(document.querySelector('img')?.getAttribute('alt')?.toLowerCase(), 'freecodecamp logo');
 ```

 Remember that casing and spelling matter.

 ```js
-assert(document.querySelector('img')?.getAttribute('alt') === 'freeCodeCamp Logo');
+assert.equal(document.querySelector('img')?.getAttribute('alt'), 'freeCodeCamp Logo');
 ```

 # --seed--
@@ -14,25 +14,25 @@ Start styling the logo by creating a `.logo` selector. Set the `width` to `200px
 You should have a `.logo` selector.

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

 Your `.logo` selector should have a `width` property set to `200px`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.logo')?.width === '200px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.logo')?.width, '200px');
 ```

 Your `.logo` selector should have a `position` property set to `absolute`.

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

 Your `.logo` selector should have a `top` property set to `23px`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.logo')?.top === '23px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.logo')?.top, '23px');
 ```

 # --seed--
@@ -14,7 +14,7 @@ The `img` element needs its parent to have a `position` set as a point of refere
 Your `#piano` selector should have a `position` property set to `relative`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#piano')?.position === 'relative');
+assert.equal(new __helpers.CSSHelp(document).getStyle('#piano')?.position, 'relative');
 ```

 # --seed--
@@ -14,7 +14,7 @@ To soften the sharp edges of the piano and its keys, start by giving the `#piano
 Your `#piano` selector should have a `border-radius` property set to `10px`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('#piano')?.borderRadius === '10px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('#piano')?.borderRadius, '10px');
 ```

 # --seed--
@@ -14,7 +14,7 @@ Give the `.key` selector a `border-radius` value of `0 0 3px 3px`.
 Your `.key` selector should have a `border-radius` property set to `0 0 3px 3px`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.key')?.borderRadius === '0px 0px 3px 3px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.key')?.borderRadius, '0px 0px 3px 3px');
 ```

 # --seed--
@@ -14,7 +14,7 @@ Give the `.key.black--key::after` selector a `border-radius` of `0 0 3px 3px` to
 Your `.key.black--key::after` selector should have a `border-radius` property set to `0 0 3px 3px`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.borderRadius === '0px 0px 3px 3px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.borderRadius, '0px 0px 3px 3px');
 ```

 # --seed--
@@ -26,13 +26,13 @@ Add a media query that will be applied when the viewport is `768px` wide and bel
 You should add a new `@media` query.

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

 Your `@media` query should have a `max-width` of `768px`.

 ```js
-assert(new __helpers.CSSHelp(document).getCSSRules('media')[0]?.media?.mediaText === '(max-width: 768px)');
+assert.equal(new __helpers.CSSHelp(document).getCSSRules('media')[0]?.media?.mediaText, '(max-width: 768px)');
 ```

 # --seed--
@@ -16,7 +16,7 @@ Your `@media` rule should have a `#piano` selector.
 ```js
 const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
 const piano = rules?.find(rule => rule.selectorText === '#piano');
-assert(piano);
+assert.isDefined(piano);
 ```

 Your new `#piano` selector should have a `width` of `358px`.
@@ -24,7 +24,7 @@ Your new `#piano` selector should have a `width` of `358px`.
 ```js
 const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
 const piano = rules?.find(rule => rule.selectorText === '#piano');
-assert(piano?.style.width === '358px');
+assert.equal(piano?.style.width, '358px');
 ```

 # --seed--
@@ -17,7 +17,7 @@ Your `@media` rule should have a `.keys` selector.
 ```js
 const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
 const keys = rules?.find(rule => rule.selectorText === '.keys');
-assert(keys);
+assert.isDefined(keys);
 ```

 Your new `.keys` selector should have a `width` of `318px`.
@@ -25,7 +25,7 @@ Your new `.keys` selector should have a `width` of `318px`.
 ```js
 const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
 const keys = rules?.find(rule => rule.selectorText === '.keys');
-assert(keys?.style.width === '318px');
+assert.equal(keys?.style.width, '318px');
 ```

 # --seed--
@@ -16,7 +16,7 @@ Your `@media` rule should have a `.logo` selector.
 ```js
 const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
 const logo = rules?.find(rule => rule.selectorText === '.logo');
-assert(logo);
+assert.isDefined(logo);
 ```

 Your new `.logo` selector should have a `width` of `150px`.
@@ -24,7 +24,7 @@ Your new `.logo` selector should have a `width` of `150px`.
 ```js
 const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
 const logo = rules?.find(rule => rule.selectorText === '.logo');
-assert(logo?.style.width === '150px');
+assert.equal(logo?.style.width, '150px');
 ```

 # --seed--
@@ -14,7 +14,7 @@ You may have noticed that the keys collapse when the browser window is smaller t
 Your original `.keys` selector should have the `overflow` property set to `hidden`.

 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.keys')?.overflow === 'hidden');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.keys')?.overflow, 'hidden');
 ```

 # --seed--
@@ -24,14 +24,14 @@ Add another `@media` rule to apply if the browser window is wider than `769px` b
 You should add a new `@media` query.

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

 Your `@media` query should have a `min-width` of `769px` and a `max-width` of `1199px`.

 ```js
 const mediaText = new __helpers.CSSHelp(document).getCSSRules('media')[1]?.media?.mediaText;
-assert(mediaText === '(max-width: 1199px) and (min-width: 769px)' || mediaText === '(min-width: 769px) and (max-width: 1199px)');
+assert.oneOf(mediaText, ['(max-width: 1199px) and (min-width: 769px)', '(min-width: 769px) and (max-width: 1199px)']);
 ```


@@ -18,7 +18,7 @@ Your second `@media` rule should have a `#piano` selector.
 ```js
 const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
 const piano = rules?.find(rule => rule.selectorText === '#piano');
-assert(piano);
+assert.isDefined(piano);
 ```

 Your new `#piano` selector should have a `width` of `675px`.
@@ -26,7 +26,7 @@ Your new `#piano` selector should have a `width` of `675px`.
 ```js
 const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
 const piano = rules?.find(rule => rule.selectorText === '#piano');
-assert(piano?.style.width === '675px');
+assert.equal(piano?.style.width, '675px');
 ```

 Your second `@media` rule should have a `.keys` selector.
@@ -34,7 +34,7 @@ Your second `@media` rule should have a `.keys` selector.
 ```js
 const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
 const keys = rules?.find(rule => rule.selectorText === '.keys');
-assert(keys);
+assert.isDefined(keys);
 ```

 Your new `.keys` selector should have a `width` of `633px`.
@@ -42,7 +42,7 @@ Your new `.keys` selector should have a `width` of `633px`.
 ```js
 const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
 const keys = rules?.find(rule => rule.selectorText === '.keys');
-assert(keys?.style.width === '633px');
+assert.equal(keys?.style.width, '633px');
 ```

 # --seed--