add all tests definitions

https://coveord.atlassian.net/browse/KIT-3268
coveo · Oct 1, 2024 · aac4d92 · aac4d92
1 parent b786c5a
commit aac4d92
Show file tree

Hide file tree

Showing 5 changed files with 369 additions and 139 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,13 @@ 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';
+import type {Decorator} from '@storybook/web-components';
+import {html} from 'lit-html';
+
+const styledDivDecorator: Decorator = (story) => {
+  return html`<div style="max-width: 700px">${story()}</div>`;
+};
 
 const {
   decorator: commerceInterfaceDecorator,
@@ -14,7 +20,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',
@@ -34,62 +40,29 @@ const meta: Meta = {
     productTemplateDecorator,
     commerceProductListDecorator,
     commerceInterfaceDecorator,
+    styledDivDecorator,
   ],
   parameters,
   play: initializeCommerceInterface,
 };
 
 export default meta;
 
-// 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 Default: Story = {
+  name: 'atomic-product-image',
+};
 
-// 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 withAFallbackImage: Story = {
+  name: 'With a fallback image',
+  args: {
+    'attributes-fallback': 'https://sports.barca.group/logos/barca.svg',
+  },
+};
 
-// 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);
-//   },
-// };
+export const withAnAltTextField: Story = {
+  tags: ['test'],
+  name: 'With an alt text field',
+  args: {
+    'attributes-image-alt-field': 'custom_alt_field',
+  },
+};
diff --git a/...onents/commerce/product-template-components/atomic-product-image/atomic-product-image.tsx b/...onents/commerce/product-template-components/atomic-product-image/atomic-product-image.tsx
@@ -171,6 +171,10 @@ export class AtomicProductImage implements InitializableComponent<Bindings> {
         this.product,
         this.imageAltField
       );
+      // KIT-3620
+      // if (isNullOrUndefined(value)) {
+      //   return null;
+      // }
 
       if (Array.isArray(value)) {
         return value.map((v) => `${v}`.trim());
@@ -209,9 +213,9 @@ export class AtomicProductImage implements InitializableComponent<Bindings> {
     });
     if (this.images.length === 0) {
       this.validateUrl(this.fallback);
-
       return (
         <img
+          // class="aspect-square" KIT-3619
           alt={this.bindings.i18n.t('image-not-found-alt')}
           src={this.fallback}
           loading="eager"