add all tests definitions

https://coveord.atlassian.net/browse/KIT-3268

packages/atomic/src/components/commerce/product-template-components/atomic-product-image/atomic-product-image.new.stories.tsx

@@ -3,7 +3,7 @@ import {wrapInCommerceProductList} from '@coveo/atomic-storybook-utils/commerce/
 import {wrapInProductTemplate} from '@coveo/atomic-storybook-utils/commerce/commerce-product-template-wrapper';
 import {parameters} from '@coveo/atomic-storybook-utils/common/common-meta-parameters';
 import {renderComponent} from '@coveo/atomic-storybook-utils/common/render-component';
-import type {Meta} from '@storybook/web-components';
+import type {Meta, StoryObj as Story} from '@storybook/web-components';
 
 const {
   decorator: commerceInterfaceDecorator,
@@ -14,7 +14,7 @@ const {
   engineConfig: {
     context: {
       view: {
-        url: 'https://sports.barca.group/browse/promotions/ui-kit-testing',
+        url: 'https://ui-kit.coveo/atomic/storybook/atomic-product-image',
       },
       language: 'en',
       country: 'US',
@@ -41,16 +41,16 @@ const meta: Meta = {
 
 export default meta;
 
-// export const Default: Story = {
-//   name: 'atomic-product-image',
-//   args: {
-//     'attributes-fallback': '2',
-//     play: async (context) => {
-//       await play(context);
-//       await playExecuteFirstSearch(context);
-//     },
-//   },
-// };
+export const Default: Story = {
+  name: 'atomic-product-image',
+};
+
+export const withAFallbackImage: Story = {
+  name: 'With a fallback image',
+  args: {
+    'attributes-fallback': 'https://sports.barca.group/logos/barca.svg',
+  },
+};
 
 // const {play: playWithMultipleImages} = wrapInCommerceInterface({
 //   engineConfig: {

packages/atomic/src/components/commerce/product-template-components/atomic-product-image/atomic-product-image.tsx

@@ -209,9 +209,9 @@ export class AtomicProductImage implements InitializableComponent<Bindings> {
     });
     if (this.images.length === 0) {
       this.validateUrl(this.fallback);
-
       return (
         <img
+          class="aspect-square"
           alt={this.bindings.i18n.t('image-not-found-alt')}
           src={this.fallback}
           loading="eager"

packages/atomic/src/components/commerce/product-template-components/atomic-product-image/e2e/atomic-product-image.e2e.ts

@@ -1,37 +1,163 @@
-import {test} from './fixture';
+/* eslint-disable @cspell/spellchecker */
+import {test, expect} from './fixture';
 
-// test.describe('default', async () => {
-//   test.describe('when clicking on the next button', async ({productImage}) => {
-//     test.fixme('should navigate to the next image', () => {});
-//     test.fixme('should not open the product', () => {});
-//   });
-//   test.describe('when clicking on the previous button', async ({productImage}) => {
-//     test.fixme('should navigate to the previous image', () => {});
-//     test.fixme('should not open the product', () => {});
-//   });
-// });
+test.describe('default', async () => {
+  test.beforeEach(async ({productImage}) => {
+    await productImage.load();
+    await productImage.hydrated.first().waitFor();
+  });
 
-// default
+  test('should be accessible', async ({makeAxeBuilder}) => {
+    const accessibilityResults = await makeAxeBuilder().analyze();
+    expect(accessibilityResults.violations.length).toEqual(0);
+  });
 
-// accessible
+  test('should render the image', async ({productImage}) => {
+    expect(productImage.noCarouselImage).toBeVisible();
+  });
 
-// image alt field
+  test('should have a default alt text', async ({productImage}) => {
+    const altText = await productImage.noCarouselImage.getAttribute('alt');
+    expect(altText).toEqual('Image 1 out of 1 for Nublu Water Bottle');
+  });
 
-// fallback
+  test('should have a 1:1 aspect ratio', async ({productImage}) => {
+    const aspectRatio =
+      await productImage.noCarouselImage.getAttribute('class');
+    expect(aspectRatio).toEqual('aspect-square');
+  });
+});
+
+test.describe('with a fallback image', async () => {
+  test.describe('when the product image is missing', () => {
+    test.beforeEach(async ({productImage}) => {
+      await productImage.withNoImage();
+      await productImage.load({story: 'with-a-fallback-image'});
+    });
+
+    test('should render the fallback image when the product image is missing', async ({
+      page,
+    }) => {
+      // TODO: Implement test
+      await page.waitForTimeout(11000);
+    });
+
+    test('should have a 1:1 aspect ratio', async ({productImage}) => {
+      const aspectRatio =
+        await productImage.noCarouselImage.getAttribute('class');
+      expect(aspectRatio).toEqual('aspect-square');
+    });
+  });
+
+  test.describe('when the product image is invalid', () => {
+    test.beforeEach(async ({productImage}) => {
+      // await productImage.withInvalidImage();
+      await productImage.load({story: 'with-a-fallback-image'});
+    });
+
+    test('should render the fallback image when the product image is invalid', async ({
+      page,
+    }) => {
+      // TODO: Implement test
+      await page.waitForTimeout(11000);
+    });
 
-// as carousel (cant make a story for this)
+    test('should have a 1:1 aspect ratio', async ({productImage}) => {
+      const aspectRatio =
+        await productImage.noCarouselImage.getAttribute('class');
+      expect(aspectRatio).toEqual('aspect-square');
+    });
+  });
 
-test('as carousel', async ({productImage, page}) => {
-  await productImage.withMoreImages();
-  await productImage.load();
-  await page.waitForTimeout(10000);
+  test.describe('when the product image is not a string', () => {
+    test.beforeEach(async ({productImage}) => {
+      // await productImage.withNonStringImage();
+      await productImage.load({story: 'with-a-fallback-image'});
+    });
+
+    test('should render the fallback image when the product image is not a string', async () => {
+      test('should render the fallback image when the product image is invalid', async ({
+        page,
+      }) => {
+        // TODO: Implement test
+        await page.waitForTimeout(11000);
+      });
+
+      test('should have a 1:1 aspect ratio', async ({productImage}) => {
+        const aspectRatio =
+          await productImage.noCarouselImage.getAttribute('class');
+        expect(aspectRatio).toEqual('aspect-square');
+      });
+    });
+  });
+
+  test('should render the fallback image when the product image is not a string', () => {});
 });
 
-test('when the image url is not valid, should render the component with fallback image & output error message', () => {});
-test('when the image url is not a string, should render the component with fallback image & output error message', () => {});
+test.describe('with an alt text field', async () => {
+  test.describe('when imageAltField is a string', () => {
+    test('should be accessible', async ({makeAxeBuilder}) => {
+      const accessibilityResults = await makeAxeBuilder().analyze();
+      expect(accessibilityResults.violations.length).toEqual(0);
+    });
+
+    test('should use the same alt text for all images', () => {});
+  });
+
+  test.describe('when imageAltField is an array of strings', () => {
+    test('should be accessible', async ({makeAxeBuilder}) => {
+      const accessibilityResults = await makeAxeBuilder().analyze();
+      expect(accessibilityResults.violations.length).toEqual(0);
+    });
+
+    test('should use different alt texts for each image', () => {});
+    test('should correctly assign alt text for the first image', () => {});
+    test('should correctly assign alt text for the last image', () => {});
+    test('should handle missing alt text for one of the images', () => {});
+    test('should handle an array of alt texts shorter than the number of images', () => {});
+    test('should handle an array of alt texts longer than the number of images', () => {});
+  });
+
+  test.describe('when imageAltField is not specified', () => {
+    test('should be accessible', async ({makeAxeBuilder}) => {
+      const accessibilityResults = await makeAxeBuilder().analyze();
+      expect(accessibilityResults.violations.length).toEqual(0);
+    });
+
+    test('should generate default alt text for all images', () => {});
+    test('should generate alt text with correct image index and total count', () => {});
+  });
+
+  test.describe('when imageAltField is invalid or contains non-string values', () => {
+    test('should be accessible', async ({makeAxeBuilder}) => {
+      const accessibilityResults = await makeAxeBuilder().analyze();
+      expect(accessibilityResults.violations.length).toEqual(0);
+    });
+
+    test('should generate fallback alt text when imageAltField is not a string or array', () => {});
+  });
+
+  test.describe('when imageAltField is an empty array', () => {
+    test('', () => {});
+    test('should handle a null or undefined value for imageAltField', () => {});
+  });
+});
+
+test.describe('as a carousel', async () => {
+  test('should be accessible', async ({makeAxeBuilder}) => {
+    const accessibilityResults = await makeAxeBuilder().analyze();
+    expect(accessibilityResults.violations.length).toEqual(0);
+  });
+
+  test('should render the first image by default', () => {});
+
+  test.describe('when clicking the next button', () => {
+    test('should navigate to the next image', () => {});
+    test('should not open the product', () => {});
+  });
 
-test('when rendered as a single image', async ({productImage, page}) => {
-  await productImage.withNoImage();
-  await productImage.load();
-  await page.waitForTimeout(10000);
+  test.describe('when clicking the previous button', () => {
+    test('should navigate to the previous image', () => {});
+    test('should not open the product', () => {});
+  });
 });

packages/atomic/src/components/commerce/product-template-components/atomic-product-image/e2e/fixture.ts

@@ -1,5 +1,4 @@
 import {SortBy} from '@coveo/headless/commerce';
-import {CommerceSuccessResponse} from '@coveo/headless/dist/definitions/api/commerce/common/response';
 import {test as base, Page} from '@playwright/test';
 import {
   AxeFixture,
@@ -63,7 +62,7 @@ export async function setImages(page: Page, urls: string[]) {
           availableSorts: [],
         },
         triggers: [],
-      } as CommerceSuccessResponse),
+      }),
     });
   });
 }

packages/atomic/src/components/commerce/product-template-components/atomic-product-image/e2e/page-object.ts

@@ -6,6 +6,14 @@ export class ProductImageObject extends BasePageObject<'atomic-product-image'> {
     super(page, 'atomic-product-image');
   }
 
+  get noCarouselImage() {
+    return this.page.getByRole('img').nth(0);
+  }
+
+  get carouselImage() {
+    return this.page.getByRole('img').nth(1);
+  }
+
   async withMoreImages() {
     await this.page.route('**/commerce/v2/listing', async (route) => {
       const response = await route.fetch();