fix(curriculum): update tests to use specific assert methods in workshop flexbox photo gallery (#59882)

Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>

curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md

@@ -22,7 +22,7 @@ assert.exists(document.querySelector('body')?.querySelector('header'));
 Your `header` element should have a `class` with `header` as the value.
 
 ```js
-assert(document?.querySelector('body')?.querySelector('header')?.classList?.contains('header'));
+assert.isTrue(document?.querySelector('body')?.querySelector('header')?.classList?.contains('header'));
 ```
 
 Your `header` element should have an `h1` element inside it.
@@ -34,7 +34,7 @@ assert.exists(document.querySelector('.header')?.querySelector('h1'));
 Your `h1` element should have the text `css flexbox photo gallery` inside it.
 
 ```js
-assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'css flexbox photo gallery');
+assert.equal(document?.querySelector('.header')?.querySelector('h1')?.innerText, 'css flexbox photo gallery');
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md

@@ -16,25 +16,25 @@ Inside that `.gallery` element, create nine `img` elements.
 You should create a `div` element in your `body` element.
 
 ```js
-assert(document.querySelector('body')?.querySelectorAll('div')?.length >= 1);
+assert.isAtLeast(document.querySelector('body')?.querySelectorAll('div')?.length, 1);
 ```
 
 Your new `div` element should have a `class` with `gallery` set as the value.
 
 ```js
-assert(document.querySelector('body')?.querySelector('.gallery'));
+assert.exists(document.querySelector('body')?.querySelector('.gallery'));
 ```
 
 Your new `div` element should come after your `.header` element.
 
 ```js
-assert(document.querySelector('header')?.nextElementSibling?.classList?.contains('gallery'));
+assert.exists(document.querySelector('header')?.nextElementSibling?.classList?.contains('gallery'));
 ```
 
 Your `.gallery` element should have nine `img` elements.
 
 ```js
-assert(document.querySelector('.gallery')?.querySelectorAll('img')?.length === 9);
+assert.lengthOf(document.querySelector('.gallery')?.querySelectorAll('img'), 9);
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md

@@ -15,61 +15,61 @@ All nine of your `img` elements should have a `src` attribute.
 
 ```js
 const images = [...document.querySelectorAll('img')];
-assert(images.every(image => image.getAttribute('src')));
+assert.isTrue(images.every(image => image.getAttribute('src')));
 ```
 
 Your first `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg` set as the `src` attribute value.
 
 ```js
-assert(document.querySelectorAll('img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg');
+assert.equal(document.querySelectorAll('img')?.[0]?.getAttribute('src'), 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg');
 ```
 
 Your second `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg` set as the `src` attribute value.
 
 ```js
-assert(document.querySelectorAll('img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg');
+assert.equal(document.querySelectorAll('img')?.[1]?.getAttribute('src'), 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg');
 ```
 
 Your third `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg` set as the `src` attribute value.
 
 ```js
-assert(document.querySelectorAll('img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg');
+assert.equal(document.querySelectorAll('img')?.[2]?.getAttribute('src'), 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg');
 ```
 
 Your fourth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg` set as the `src` attribute value.
 
 ```js
-assert(document.querySelectorAll('img')?.[3]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg');
+assert.equal(document.querySelectorAll('img')?.[3]?.getAttribute('src'), 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg');
 ```
 
 Your fifth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg` set as the `src` attribute value.
 
 ```js
-assert(document.querySelectorAll('img')?.[4]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg');
+assert.equal(document.querySelectorAll('img')?.[4]?.getAttribute('src'), 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg');
 ```
 
 Your sixth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg` set as the `src` attribute value.
 
 ```js
-assert(document.querySelectorAll('img')?.[5]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg');
+assert.equal(document.querySelectorAll('img')?.[5]?.getAttribute('src'), 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg');
 ```
 
 Your seventh `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg` set as the `src` attribute value.
 
 ```js
-assert(document.querySelectorAll('img')?.[6]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg');
+assert.equal(document.querySelectorAll('img')?.[6]?.getAttribute('src'), 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg');
 ```
 
 Your eighth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg` set as the `src` attribute value.
 
 ```js
-assert(document.querySelectorAll('img')?.[7]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg');
+assert.equal(document.querySelectorAll('img')?.[7]?.getAttribute('src'), 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg');
 ```
 
 Your ninth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg` set as the `src` attribute value.
 
 ```js
-assert(document.querySelectorAll('img')?.[8]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg');
+assert.equal(document.querySelectorAll('img')?.[8]?.getAttribute('src'), 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg');
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md

@@ -24,7 +24,7 @@ assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
 Your `.gallery img` selector should have a `width` property set to `100%` as the value.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width, '100%');
 ```
 
 Your `.gallery img` selector should have a `max-width` property set to `350px` as the value.

curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md

@@ -25,7 +25,7 @@ When you are done, set an explicit `flex-direction` of `row` on the `.gallery` e
 Your `.gallery` selector should have a `flex-direction` property set to `row` as the value.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexDirection === 'row');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexDirection, 'row');
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md

@@ -18,7 +18,7 @@ Make it so your flex items wrap to the next row when they run out of space.
 Your `.gallery` selector should have a `flex-wrap` property set to `wrap` as the value.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexWrap === 'wrap');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexWrap, 'wrap');
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md

@@ -16,7 +16,7 @@ Give your `.gallery` selector a `justify-content` property with `center` as the
 Your `.gallery` selector should have a `justify-content` property set to `center` as the value.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.justifyContent === 'center');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.justifyContent, 'center');
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md

@@ -16,7 +16,7 @@ To vertically center your images, give your `.gallery` selector an `align-items`
 Your `.gallery` selector should have an `align-items` property set to `center` as the value.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.alignItems === 'center');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.alignItems, 'center');
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md

@@ -25,7 +25,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingRight,
 Your `.gallery` selector should have a `max-width` property set to `1400px` as the value.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.maxWidth === '1400px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.maxWidth, '1400px');
 ```
 
 Your `.gallery` element should be centered using a `margin` with `0 auto` as the value.

curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md

@@ -16,7 +16,7 @@ Give your `.gallery img` selector the `object-fit` property and set it to `cover
 Your `.gallery img` selector should have an `object-fit` property set to `cover` as the value.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.objectFit === 'cover');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.objectFit, 'cover');
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md

@@ -18,7 +18,7 @@ Give your `.gallery` flex container a `gap` property with `16px` as the value.
 Your `.gallery` selector should have a `gap` property with `16px` set as the value.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.gap === '16px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.gap, '16px');
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md

@@ -14,7 +14,7 @@ Smooth out your images a bit by giving the `.gallery img` selector a `border-rad
 Your `.gallery img` selector should have a `border-radius` property with `10px` set as the value.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.borderRadius === '10px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.borderRadius, '10px');
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md

@@ -25,13 +25,13 @@ Create a new selector using an `::after` pseudo-element on the `.gallery` elemen
 Your `.gallery::after` selector should have an empty string `""` set for the `content` property.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.content === "\"\"");
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.content, "\"\"");
 ```
 
 Your `.gallery::after` selector should have `350px` set for the `width` property.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.width === "350px");
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.width,  "350px");
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md

@@ -19,8 +19,10 @@ All nine of your `img` elements should have a `alt` attribute with text describi
 
 ```js
 const images = [...document.querySelectorAll('img')];
-assert(images.every(image => image.getAttribute('alt')));
-assert(images.every(image => image.getAttribute('alt').length >= 5));
+images.forEach((image) => {
+  const alt = image.getAttribute('alt');
+  assert.isAtLeast(alt?.length, 5);
+});
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md

@@ -33,13 +33,13 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px
 Your `body` selector should have a `font-family` property set to `sans-serif` as the value.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily, 'sans-serif');
 ```
 
 Your `body` selector should have a `background-color` property set to `#f5f6f7` as the value.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor, 'rgb(245, 246, 247)');
 ```
 
 # --seed--