test(atomic): add tests for atomic-commerce-breadbox (#4179)

This PR adds tests for atomic-commerce-breadbox https://coveord.atlassian.net/browse/KIT-3378 --------- Co-authored-by: Frederic Beaudoin <fbeaudoin@coveo.com> Co-authored-by: Louis Bompart <lbompart@coveo.com>
coveo · Jul 30, 2024 · 5fc7c95 · 5fc7c95
1 parent 792ad91
commit 5fc7c95
Show file tree

Hide file tree

Showing 6 changed files with 459 additions and 28 deletions.
diff --git a/...src/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.new.stories.tsx b/...src/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.new.stories.tsx
@@ -4,15 +4,39 @@ import {
 } from '@coveo/atomic/storybookUtils/commerce-interface-wrapper';
 import {parameters} from '@coveo/atomic/storybookUtils/common-meta-parameters';
 import {renderComponent} from '@coveo/atomic/storybookUtils/render-component';
-import {userEvent, waitFor, expect} from '@storybook/test';
+import {
+  CommerceEngineConfiguration,
+  getSampleCommerceEngineConfiguration,
+} from '@coveo/headless/commerce';
 import type {Meta, StoryObj as Story} from '@storybook/web-components';
 import {html} from 'lit/static-html.js';
-import {within} from 'shadow-dom-testing-library';
 
-const {decorator, play} = wrapInCommerceInterface({skipFirstSearch: true});
+const {context, ...restOfConfiguration} =
+  getSampleCommerceEngineConfiguration();
+
+const productListingEngineConfiguration: Partial<CommerceEngineConfiguration> =
+  {
+    context: {
+      ...context,
+      country: 'US',
+      currency: 'USD',
+      language: 'en',
+      view: {
+        url: context.view.url + '/browse/promotions/ui-kit-testing',
+      },
+    },
+    ...restOfConfiguration,
+  };
+
+const {decorator, play} = wrapInCommerceInterface({
+  engineConfig: productListingEngineConfiguration,
+  skipFirstSearch: true,
+  type: 'product-listing',
+});
+
 const meta: Meta = {
   component: 'atomic-commerce-breadbox',
-  title: 'Atomic-commerce/Breadbox',
+  title: 'Atomic-commerce/Interface Components/atomic-commerce-breadbox',
   id: 'atomic-commerce-breadbox',
   render: renderComponent,
   decorators: [decorator],
@@ -38,26 +62,5 @@ export const Default: Story = {
   play: async (context) => {
     await play(context);
     await playExecuteFirstSearch(context);
-    const {canvasElement, step} = context;
-    const canvas = within(canvasElement);
-    await step('Wait for the facet values to render', async () => {
-      await waitFor(
-        () => expect(canvas.getByShadowTitle('People')).toBeInTheDocument(),
-        {
-          timeout: 30e3,
-        }
-      );
-    });
-    await step('Select a facet value', async () => {
-      const facet = canvas.getByShadowTitle('People');
-      await userEvent.click(facet);
-      await waitFor(
-        () =>
-          expect(
-            canvas.getByShadowTitle('Object type: People')
-          ).toBeInTheDocument(),
-        {timeout: 30e3}
-      );
-    });
   },
 };
diff --git a/...ages/atomic/src/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.tsx b/...ages/atomic/src/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.tsx
@@ -12,6 +12,9 @@ import {
   Breadcrumb,
   CategoryFacetValue,
   BreadcrumbValue,
+  Context,
+  ContextState,
+  buildContext,
 } from '@coveo/headless/commerce';
 import {Component, h, State, Element, Prop} from '@stencil/core';
 import {FocusTargetController} from '../../../utils/accessibility-utils';
@@ -30,7 +33,10 @@ import {BreadcrumbShowLess} from '../../common/breadbox/breadcrumb-show-less';
 import {BreadcrumbShowMore} from '../../common/breadbox/breadcrumb-show-more';
 import {Breadcrumb as BreadboxBreadcrumb} from '../../common/breadbox/breadcrumb-types';
 import {formatHumanReadable} from '../../common/facets/numeric-facet/formatter';
-import {defaultNumberFormatter} from '../../common/formats/format-common';
+import {
+  defaultCurrencyFormatter,
+  defaultNumberFormatter,
+} from '../../common/formats/format-common';
 import {Hidden} from '../../common/hidden';
 import {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';
 
@@ -78,6 +84,9 @@ export class AtomicCommerceBreadbox
 
   @Element() private host!: HTMLElement;
 
+  public context!: Context;
+  @BindStateToController('context') contextState!: ContextState;
+
   public searchOrListing!: Search | ProductListing;
 
   @BindStateToController('breadcrumbManager')
@@ -117,6 +126,8 @@ export class AtomicCommerceBreadbox
       this.searchOrListing = buildSearch(this.bindings.engine);
     }
 
+    this.context = buildContext(this.bindings.engine);
+
     this.breadcrumbManager = this.searchOrListing.breadcrumbManager();
 
     if (window.ResizeObserver) {
@@ -237,6 +248,13 @@ export class AtomicCommerceBreadbox
     );
   }
 
+  private getNumberFormatter(field: string) {
+    if (field === 'ec_price' || field === 'ec_promo_price') {
+      return defaultCurrencyFormatter(this.contextState.currency);
+    }
+    return defaultNumberFormatter;
+  }
+
   private valueForFacetType = (
     type: string,
     field: string,
@@ -251,7 +269,7 @@ export class AtomicCommerceBreadbox
             i18n: this.bindings.i18n,
             field: field,
             manualRanges: [],
-            formatter: defaultNumberFormatter,
+            formatter: this.getNumberFormatter(field),
           }),
         ];
       case 'dateRange':