fix(curriculum): use specific assert methods in workshop cafe menu steps 66-78 (#59985)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>

curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f3f26fa39591db45e5cd7a0.md

@@ -17,21 +17,21 @@ You should use the `hr` selector.
 
 ```js
 const hasHr = new __helpers.CSSHelp(document).getStyle('hr');
-assert(hasHr);
+assert.exists(hasHr);
 ```
 
 You should set the `height` property to `3px`.
 
 ```js
 const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '3px');
-assert(hasHeight);
+assert.isTrue(hasHeight);
 ```
 
 Your `hr` element should have a height of `3px`.
 
 ```js
 const hrHeight = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('height');
-assert(hrHeight === '3px');
+assert.equal(hrHeight, '3px');
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f459225127805351a6ad057.md

@@ -15,13 +15,14 @@ You should set the value of the `background-color` property to `brown`.
 
 ```js
 const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'brown');
+assert.isTrue(hasBackgroundColor);
 ```
 
 Your `hr` element should have a `background-color` of `brown`.
 
 ```js
 const hrBackgroundColor = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('background-color');
-assert(hrBackgroundColor === 'brown');
+assert.equal(hrBackgroundColor, 'brown');
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f459a7ceb8b5c446656d88b.md

@@ -17,14 +17,14 @@ You should set the `border-color` property to `brown`.
 
 ```js
 const hasBorderColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-color'] === 'brown');
-assert(hasBorderColor);
+assert.isTrue(hasBorderColor);
 ```
 
 Your `hr` element should have a `border-color` of `brown`.
 
 ```js
 const hrBorderColor = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('border-color');
-assert(hrBorderColor === 'brown');
+assert.equal(hrBorderColor, 'brown');
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f459cf202c2a3472fae6a9f.md

@@ -17,14 +17,14 @@ You should set the `height` property to `2px`.
 
 ```js
 const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '2px');
-assert(hasHeight);
+assert.isTrue(hasHeight);
 ```
 
 Your `hr` element should have a `height` of `2px`.
 
 ```js
 const hrHeight = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('height');
-assert(hrHeight === '2px');
+assert.equal(hrHeight, '2px');
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45a05977e2fa49d9119437.md

@@ -14,14 +14,14 @@ To create a little more room around the menu, add `20px` of space on the inside
 You should set the `padding` property to `20px`.
 
 ```js
-assert(code.match(/padding:\s*20px;?/i));
+assert.isTrue(new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '20px' && x.selectorText != '.menu'));
 ```
 
 Your `body` element should have a `padding` of `20px`.
 
 ```js
 const bodyPadding = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('padding');
-assert(bodyPadding === '20px');
+assert.equal(bodyPadding, '20px');
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45a276c093334f0f6e9df4.md

@@ -17,49 +17,49 @@ You should set the `margin-top` property to `5px`.
 
 ```js
 const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '5px');
-assert(hasMarginTop);
+assert.isTrue(hasMarginTop);
 ```
 
 You should set the `margin-bottom` property to `5px`.
 
 ```js
 const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '5px');
-assert(hasMarginBottom);
+assert.isTrue(hasMarginBottom);
 ```
 
 You should use the existing `.item p` selector.
 
 ```js
 const hasOneSelector = new __helpers.CSSHelp(document).getStyleDeclarations('.item p');
-assert(hasOneSelector.length === 1);
+assert.lengthOf(hasOneSelector, 1);
 ```
 
 Your `p` elements nested in your `.item` elements should have a `margin-top` of `5px`.
 
 ```js
 const itemPMarginTop = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('margin-top');
-assert(itemPMarginTop === '5px');
+assert.equal(itemPMarginTop, '5px');
 ```
 
 Your `p` elements nested in your `.item` elements should have a `margin-bottom` of `5px`.
 
 ```js
 const itemPMarginBottom = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('margin-bottom');
-assert(itemPMarginBottom === '5px');
+assert.equal(itemPMarginBottom, '5px');
 ```
 
 Your `p` elements nested in your `.item` elements should not have a `margin-left` set.
 
 ```js
 const itemPMarginLeft = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('margin-left');
-assert(!itemPMarginLeft);
+assert.isEmpty(itemPMarginLeft);
 ```
 
 Your `p` elements nested in your `.item` elements should not have a `margin-right` set.
 
 ```js
 const itemPMarginRight = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('margin-right');
-assert(!itemPMarginRight);
+assert.isEmpty(itemPMarginRight);
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45a5a7c49a8251f0bdb527.md

@@ -15,21 +15,21 @@ You should set the `font-size` property to `18px`.
 
 ```js
 const hasFontSize = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-size'] === '18px');
-assert(hasFontSize);
+assert.isTrue(hasFontSize);
 ```
 
 You should use the existing `.item p` selector.
 
 ```js
 const hasOneSelector = new __helpers.CSSHelp(document).getStyleDeclarations('.item p');
-assert(hasOneSelector.length === 1);
+assert.lengthOf(hasOneSelector, 1);
 ```
 
 Your `p` elements nested in your `.item` elements should have a `font-size` of `18px`.
 
 ```js
 const itemPFontSize = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('font-size');
-assert(itemPFontSize === '18px');
+assert.equal(itemPFontSize, '18px');
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46ede1ff8fec5ba656b44c.md

@@ -14,7 +14,7 @@ Next, you are going to be styling the `footer` element. To keep the CSS organize
 You should have a CSS comment with the text `FOOTER`.
 
 ```js
-assert(code.match(/\/\*\s*FOOTER\s*\*\//i));
+assert.match(code, /\/\*\s*FOOTER\s*\*\//i);
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md

@@ -17,21 +17,21 @@ You should add a `.bottom-line` selector.
 
 ```js
 const hasBottomLine = new __helpers.CSSHelp(document).getStyle('.bottom-line');
-assert(hasBottomLine);
+assert.exists(hasBottomLine);
 ```
 
 You should set the `margin-top` property to `25px`.
 
 ```js
 const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '25px');
-assert(hasMarginTop);
+assert.isTrue(hasMarginTop);
 ```
 
 Your `.bottom-line` selector should have a `margin-top` of `25px`.
 
 ```js
 const bottomLineMargin = new __helpers.CSSHelp(document).getStyle('.bottom-line')?.getPropertyValue('margin-top');
-assert(bottomLineMargin === '25px');
+assert.equal(bottomLineMargin, '25px');
 ```
 
 # --seed--