test(atomic): add tests for atomic-product-numeric-field-value (#4779)

This PR adds tests for `atomic-product-numeric-field-value`

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

packages/atomic/src/components/commerce/product-template-components/atomic-product-numeric-field-value/atomic-product-numeric-field-value.new.stories.tsx

@@ -0,0 +1,55 @@
+import {wrapInCommerceInterface} from '@coveo/atomic-storybook-utils/commerce/commerce-interface-wrapper';
+import {wrapInCommerceProductList} from '@coveo/atomic-storybook-utils/commerce/commerce-product-list-wrapper';
+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';
+
+const {
+  decorator: commerceInterfaceDecorator,
+  play: initializeCommerceInterface,
+} = wrapInCommerceInterface({
+  skipFirstSearch: false,
+  type: 'product-listing',
+  engineConfig: {
+    context: {
+      view: {
+        url: 'https://sports.barca.group/browse/promotions/ui-kit-testing',
+      },
+      language: 'en',
+      country: 'US',
+      currency: 'USD',
+    },
+  },
+});
+const {decorator: commerceProductListDecorator} = wrapInCommerceProductList();
+const {decorator: productTemplateDecorator} = wrapInProductTemplate();
+
+const meta: Meta = {
+  component: 'atomic-product-numeric-field-value',
+  title: 'Atomic-Commerce/Product Template Components/ProductNumericFieldValue',
+  id: 'atomic-product-numeric-field-value',
+  render: renderComponent,
+  decorators: [
+    productTemplateDecorator,
+    commerceProductListDecorator,
+    commerceInterfaceDecorator,
+  ],
+  parameters,
+  play: initializeCommerceInterface,
+  args: {
+    'attributes-field': 'ec_rating',
+  },
+  argTypes: {
+    'attributes-field': {
+      name: 'field',
+      type: 'string',
+    },
+  },
+};
+
+export default meta;
+
+export const Default: Story = {
+  name: 'atomic-product-numeric-field-value',
+};

packages/atomic/src/components/commerce/product-template-components/atomic-product-numeric-field-value/e2e/atomic-product-numeric-field-value.e2e.ts

@@ -0,0 +1,36 @@
+import {test, expect} from './fixture';
+
+test.describe('atomic-product-numeric-field-value', () => {
+  test.beforeEach(async ({numericFieldValue}) => {
+    await numericFieldValue.load();
+    await numericFieldValue.hydrated.first().waitFor({state: 'visible'});
+  });
+
+  test('should be a11y compliant', async ({
+    numericFieldValue,
+    makeAxeBuilder,
+  }) => {
+    await numericFieldValue.hydrated.first().waitFor();
+    const accessibilityResults = await makeAxeBuilder().analyze();
+    expect(accessibilityResults.violations).toEqual([]);
+  });
+
+  test('should render the value', async ({numericFieldValue}) => {
+    const value = numericFieldValue.value.first();
+    await expect(value).toBeVisible();
+  });
+
+  test('should apply custom formatter', async ({page}) => {
+    const element = page.locator('atomic-product-numeric-field-value').first();
+
+    await element.evaluate((el) => {
+      const event = new CustomEvent('atomic/numberFormat', {
+        detail: (value: number) => `Formatted: ${value}`,
+      });
+      el.dispatchEvent(event);
+    });
+
+    const textContent = await element.textContent();
+    expect(textContent).toContain('Formatted:');
+  });
+});

packages/atomic/src/components/commerce/product-template-components/atomic-product-numeric-field-value/e2e/fixture.ts

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

packages/atomic/src/components/commerce/product-template-components/atomic-product-numeric-field-value/e2e/page-object.ts

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