merge origin branch

https://coveord.atlassian.net/browse/KIT-3268
coveo · Sep 26, 2024 · d4736d7 · d4736d7
2 parents cae3790 + 839bbb3
commit d4736d7
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 8 deletions.
diff --git a/...rce/product-template-components/atomic-product-image/atomic-product-image.new.stories.tsx b/...rce/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, StoryObj as Story} from '@storybook/web-components';
+import type {Meta} from '@storybook/web-components';
 
 const {
   decorator: commerceInterfaceDecorator,
@@ -41,9 +41,55 @@ const meta: Meta = {
 
 export default meta;
 
-export const Default: Story = {
-  name: 'atomic-product-image',
-  args: {
-    'attributes-fallback': '2',
-  },
-};
+// export const Default: Story = {
+//   name: 'atomic-product-image',
+//   args: {
+//     'attributes-fallback': '2',
+//     play: async (context) => {
+//       await play(context);
+//       await playExecuteFirstSearch(context);
+//     },
+//   },
+// };
+
+// const {play: playWithMultipleImages} = wrapInCommerceInterface({
+//   engineConfig: {
+//     ...engineConfig,
+//     preprocessRequest: (r) => {
+//       const parsed = JSON.parse(r.body as string);
+//       parsed.query = 'https://sports.barca.group/pdp/SP00003_00001';
+//       r.body = JSON.stringify(parsed);
+//       return r;
+//     },
+//   },
+// });
+
+// export const WithMultipleImages: Story = {
+//   name: 'With multiple images',
+//   play: async (context) => {
+//     await playWithMultipleImages(context);
+//   },
+// };
+
+// export const WithNoImage: Story = {
+//   name: 'With no image',
+//   args: {
+//     'attributes-field': 'ec_invalid_image_field',
+//   },
+//   play: async (context) => {
+//     await play(context);
+//     await playExecuteFirstSearch(context);
+//   },
+// };
+
+// export const WitCustomFallbackImage: Story = {
+//   name: 'With custom fallback',
+//   args: {
+//     'attributes-field': 'ec_invalid_image_field',
+//     'attributes-fallback': 'https://sports.barca.group/logos/barca.svg',
+//   },
+//   play: async (context) => {
+//     await play(context);
+//     await playExecuteFirstSearch(context);
+//   },
+// };
diff --git a/...c/src/components/commerce/product-template-components/atomic-product-image/e2e/fixture.ts b/...c/src/components/commerce/product-template-components/atomic-product-image/e2e/fixture.ts
@@ -1,4 +1,6 @@
-import {test as base} from '@playwright/test';
+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,
   makeAxeBuilder,
@@ -16,3 +18,52 @@ export const test = base.extend<TestFixture & AxeFixture>({
   },
 });
 export {expect} from '@playwright/test';
+
+export async function setImages(page: Page, urls: string[]) {
+  await page.route('**/v2/search', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({
+        facets: [],
+        pagination: {
+          page: 0,
+          perPage: 1,
+          totalEntries: 1,
+          totalPages: 1,
+        },
+        products: [
+          {
+            additionalFields: {},
+            children: [],
+            clickUri: '',
+            ec_brand: '',
+            ec_category: [],
+            ec_color: '',
+            ec_description: '',
+            ec_gender: '',
+            ec_images: urls,
+            ec_in_stock: true,
+            ec_item_group_id: '',
+            ec_listing: '',
+            ec_name: 'name',
+            ec_price: 0,
+            ec_product_id: '',
+            ec_promo_price: 0,
+            ec_rating: 0,
+            ec_shortdesc: '',
+            ec_thumbnails: urls,
+            permanentid: 'permanentid',
+            totalNumberOfChildren: 0,
+          },
+        ],
+        responseId: '',
+        sort: {
+          appliedSort: {sortCriteria: SortBy.Relevance},
+          availableSorts: [],
+        },
+        triggers: [],
+      } as CommerceSuccessResponse),
+    });
+  });
+}