test(commerce): add tests for atomic-commerce-text (#4061)

TODO:
- [x] Test for pluralization

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

---------

Co-authored-by: GitHub Actions Bot <>
Co-authored-by: Alex Prudhomme <[email protected]>

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts

@@ -21,6 +21,7 @@ AtomicCommerceQuerySummary,
 AtomicCommerceRefineModal,
 AtomicCommerceRefineToggle,
 AtomicCommerceSearchBox,
+AtomicCommerceText,
 AtomicComponentError,
 AtomicDidYouMean,
 AtomicExternal,
@@ -129,6 +130,7 @@ AtomicCommerceQuerySummary,
 AtomicCommerceRefineModal,
 AtomicCommerceRefineToggle,
 AtomicCommerceSearchBox,
+AtomicCommerceText,
 AtomicComponentError,
 AtomicDidYouMean,
 AtomicExternal,

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts

@@ -380,6 +380,28 @@ Example:
 }
 
 
+@ProxyCmp({
+  inputs: ['count', 'value']
+})
+@Component({
+  selector: 'atomic-commerce-text',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['count', 'value'],
+})
+export class AtomicCommerceText {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface AtomicCommerceText extends Components.AtomicCommerceText {}
+
+
 @ProxyCmp({
   inputs: ['element', 'error']
 })

packages/atomic/src/components.d.ts

@@ -709,9 +709,13 @@ export namespace Components {
      */
     interface AtomicCommerceSortDropdown {
     }
+    /**
+     * @alpha The `atomic-commerce-text` component leverages the I18n translation module through the atomic-commerce-interface.
+     */
     interface AtomicCommerceText {
         /**
           * The count value used for plurals.
+          * @type {number}
          */
         "count"?: number;
         /**
@@ -3784,6 +3788,9 @@ declare global {
         prototype: HTMLAtomicCommerceSortDropdownElement;
         new (): HTMLAtomicCommerceSortDropdownElement;
     };
+    /**
+     * @alpha The `atomic-commerce-text` component leverages the I18n translation module through the atomic-commerce-interface.
+     */
     interface HTMLAtomicCommerceTextElement extends Components.AtomicCommerceText, HTMLStencilElement {
     }
     var HTMLAtomicCommerceTextElement: {
@@ -6187,9 +6194,13 @@ declare namespace LocalJSX {
      */
     interface AtomicCommerceSortDropdown {
     }
+    /**
+     * @alpha The `atomic-commerce-text` component leverages the I18n translation module through the atomic-commerce-interface.
+     */
     interface AtomicCommerceText {
         /**
           * The count value used for plurals.
+          * @type {number}
          */
         "count"?: number;
         /**
@@ -9062,6 +9073,9 @@ declare module "@stencil/core" {
              * The `atomic-commerce-sort-dropdown` component renders a dropdown that the end user can interact with to select the criteria to use when sorting products.
              */
             "atomic-commerce-sort-dropdown": LocalJSX.AtomicCommerceSortDropdown & JSXBase.HTMLAttributes<HTMLAtomicCommerceSortDropdownElement>;
+            /**
+             * @alpha The `atomic-commerce-text` component leverages the I18n translation module through the atomic-commerce-interface.
+             */
             "atomic-commerce-text": LocalJSX.AtomicCommerceText & JSXBase.HTMLAttributes<HTMLAtomicCommerceTextElement>;
             /**
              * A facet is a list of values for a certain field occurring in the results.

packages/atomic/src/components/commerce/atomic-commerce-text/atomic-commerce-text.new.stories.tsx

@@ -0,0 +1,54 @@
+import {wrapInCommerceInterface} 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 {within} from '@storybook/test';
+import type {Meta, StoryObj as Story} from '@storybook/web-components';
+
+const {decorator, play} = wrapInCommerceInterface({skipFirstSearch: true});
+
+const meta: Meta = {
+  component: 'atomic-commerce-text',
+  title: 'Atomic-Commerce/Product Template Components/Text',
+  id: 'atomic-commerce-text',
+  render: renderComponent,
+  decorators: [decorator],
+  parameters,
+  play,
+};
+
+export default meta;
+
+export const Default: Story = {
+  name: 'atomic-commerce-text',
+  args: {
+    'attributes-value': 'Atomic Commerce Text',
+  },
+};
+
+export const WithTranslations: Story = {
+  name: 'With translations',
+  play: async (context) => {
+    await play(context);
+    const canvas = within(context.canvasElement);
+    const commerceInterface =
+      await canvas.findByTestId<HTMLAtomicCommerceInterfaceElement>(
+        'root-interface'
+      );
+
+    await context.step('Load translations', () => {
+      commerceInterface.i18n.addResourceBundle('en', 'translation', {
+        // "translation-key": "A single product"
+        [context.args['attributes-value']]: context.args.translationValue,
+        // "translation-key_other": "{{count}} products"
+        [context.args['attributes-value'] + '_other']:
+          context.args.translationValueOther,
+      });
+    });
+  },
+  args: {
+    'attributes-value': 'translation-key',
+    'attributes-count': 1,
+    translationValue: 'A single product',
+    translationValueOther: '{{count}} products',
+  },
+};

packages/atomic/src/components/commerce/atomic-commerce-text/atomic-commerce-text.tsx

@@ -6,7 +6,7 @@ import {
 import {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';
 
 /**
- * @internal
+ * @alpha
  * The `atomic-commerce-text` component leverages the I18n translation module through the atomic-commerce-interface.
  */
 @Component({
@@ -32,6 +32,7 @@ export class AtomicCommerceText
   @Prop({reflect: true}) public value!: string;
   /**
    * The count value used for plurals.
+   * @type {number}
    */
   @Prop({reflect: true}) public count?: number;
 

packages/atomic/src/components/commerce/atomic-commerce-text/e2e/atomic-commerce-text.e2e.ts

@@ -0,0 +1,36 @@
+import {expect, test} from './fixture';
+
+test.describe('default', () => {
+  test('should show text', async ({text}) => {
+    await text.load();
+
+    await expect(text.getText).toHaveText('Atomic Commerce Text');
+  });
+
+  test('should be A11y compliant', async ({text, makeAxeBuilder}) => {
+    await text.load();
+
+    await text.hydrated.waitFor();
+    const accessibilityResults = await makeAxeBuilder().analyze();
+    expect(accessibilityResults.violations).toEqual([]);
+  });
+
+  test('should translate text', async ({text}) => {
+    await text.load({story: 'with-translations'});
+
+    await text.hydrated.waitFor();
+
+    await expect(text.getText).toHaveText('A single product');
+  });
+
+  test('should translate text with count', async ({text}) => {
+    await text.load({
+      args: {count: 2, value: 'translation-key'},
+      story: 'with-translations',
+    });
+
+    await text.hydrated.waitFor();
+
+    await expect(text.getText).toHaveText('2 products');
+  });
+});

packages/atomic/src/components/commerce/atomic-commerce-text/e2e/fixture.ts

@@ -0,0 +1,18 @@
+import {test as base} from '@playwright/test';
+import {
+  AxeFixture,
+  makeAxeBuilder,
+} from '../../../../../playwright-utils/base-fixture';
+import {AtomicCommerceText as Text} from './page-object';
+
+type MyFixtures = {
+  text: Text;
+};
+
+export const test = base.extend<MyFixtures & AxeFixture>({
+  makeAxeBuilder,
+  text: async ({page}, use) => {
+    await use(new Text(page));
+  },
+});
+export {expect} from '@playwright/test';

packages/atomic/src/components/commerce/atomic-commerce-text/e2e/page-object.ts

@@ -0,0 +1,12 @@
+import type {Page} from '@playwright/test';
+import {BasePageObject} from '../../../../../playwright-utils/base-page-object';
+
+export class AtomicCommerceText extends BasePageObject<'atomic-commerce-text'> {
+  constructor(page: Page) {
+    super(page, 'atomic-commerce-text');
+  }
+
+  get getText() {
+    return this.page.locator('atomic-commerce-text');
+  }
+}