test(atomic): add atomic-commerce-numeric-facet tests (#4138)

KIT-3258

---------

Co-authored-by: GitHub Actions Bot <>

packages/atomic/src/components/commerce/facets/atomic-commerce-numeric-facet/atomic-commerce-numeric-facet.new.stories.tsx

@@ -0,0 +1,39 @@
+import {
+  wrapInCommerceInterface,
+  playExecuteFirstSearch,
+  playKeepOnlyFirstFacetOfType,
+} 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 type {Meta, StoryObj as Story} from '@storybook/web-components';
+import {html} from 'lit-html';
+
+const {play, decorator} = wrapInCommerceInterface({skipFirstSearch: true});
+
+const meta: Meta = {
+  component: 'atomic-commerce-numeric-facet',
+  title: 'Atomic-Commerce/NumericFacet',
+  id: 'atomic-commerce-numeric-facet',
+  render: renderComponent,
+  decorators: [decorator],
+  parameters,
+  play,
+};
+
+export default meta;
+
+export const Default: Story = {
+  name: 'atomic-commerce-numeric-facet',
+  decorators: [
+    (_) => {
+      return html`<div id="code-root">
+        <atomic-commerce-facets></atomic-commerce-facets>
+      </div>`;
+    },
+  ],
+  play: async (context) => {
+    await play(context);
+    await playExecuteFirstSearch(context);
+    playKeepOnlyFirstFacetOfType('atomic-commerce-numeric-facet', context);
+  },
+};

packages/atomic/src/components/commerce/facets/atomic-commerce-numeric-facet/e2e/atomic-commerce-numeric-facet.e2e.ts

@@ -0,0 +1,59 @@
+import {test, expect} from './fixture';
+
+test.describe('default', () => {
+  test.beforeEach(async ({numericFacet}) => {
+    await numericFacet.load();
+  });
+
+  test('should be A11y compliant', async ({numericFacet, makeAxeBuilder}) => {
+    await numericFacet.hydrated.waitFor();
+    const accessibilityResults = await makeAxeBuilder().analyze();
+    expect(accessibilityResults.violations).toEqual([]);
+  });
+
+  test('should allow to select and deselect a range', async ({
+    numericFacet,
+  }) => {
+    const facetValueLabel = numericFacet.getFacetValue('12', '4,200');
+    const facetValueBtn = numericFacet.getFacetValueButton('12', '4,200');
+
+    await expect(facetValueBtn).not.toBeChecked();
+    await facetValueLabel.click();
+
+    await expect(facetValueBtn).toBeChecked();
+
+    await facetValueLabel.click();
+    await expect(facetValueBtn).not.toBeChecked();
+  });
+
+  test('should allow to deselect a filter with the clear button', async ({
+    numericFacet,
+  }) => {
+    const facetValueLabel = numericFacet.getFacetValue('12', '4,200');
+
+    await facetValueLabel.click();
+
+    await expect(numericFacet.clearFilter).toBeVisible();
+    await numericFacet.clearFilter.click();
+
+    await expect(numericFacet.clearFilter).toHaveCount(0);
+  });
+
+  test('should allow to filter by entering a valid minimum and maximum value', async ({
+    numericFacet,
+  }) => {
+    await numericFacet.inputMinimum.fill('100');
+    await numericFacet.inputMaximum.fill('200');
+    await numericFacet.inputApply.click();
+    await expect(numericFacet.clearFilter).toBeVisible();
+  });
+
+  test('should prevent from filtering by entering an invalid minimum and maximum value', async ({
+    numericFacet,
+  }) => {
+    await numericFacet.inputMinimum.fill('200');
+    await numericFacet.inputMaximum.fill('100');
+    await numericFacet.inputApply.click();
+    await expect(numericFacet.clearFilter).toHaveCount(0);
+  });
+});

packages/atomic/src/components/commerce/facets/atomic-commerce-numeric-facet/e2e/fixture.ts

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

packages/atomic/src/components/commerce/facets/atomic-commerce-numeric-facet/e2e/page-object.ts

@@ -0,0 +1,38 @@
+import type {Page} from '@playwright/test';
+import {AnyFacetPageObject} from '../../e2e/page-object';
+
+export class NumericFacetPageObject extends AnyFacetPageObject<'atomic-commerce-numeric-facet'> {
+  constructor(page: Page) {
+    super(page, 'atomic-commerce-numeric-facet');
+  }
+
+  get title() {
+    return this.page.getByText('Price');
+  }
+
+  getFacetValueButton(start: string, end: string) {
+    return this.page.getByLabel(`Inclusion filter on ${start} to ${end}`);
+  }
+
+  getFacetValue(start: string, end: string) {
+    return this.page
+      .getByRole('listitem')
+      .filter({hasText: `${start} to ${end}`});
+  }
+
+  get clearFilter() {
+    return this.page.getByRole('button').filter({hasText: /Clear.*filter/});
+  }
+
+  get inputMinimum() {
+    return this.page.getByLabel('Enter a minimum numerical');
+  }
+
+  get inputMaximum() {
+    return this.page.getByLabel('Enter a maximum numerical');
+  }
+
+  get inputApply() {
+    return this.page.getByLabel('Apply custom numerical values');
+  }
+}

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

@@ -2,7 +2,10 @@ import type {Page} from '@playwright/test';
 import {BasePageObject} from '../../../../../playwright-utils/base-page-object';
 
 export class AnyFacetPageObject<
-  FacetType extends 'atomic-commerce-category-facet' | 'atomic-commerce-facet',
+  FacetType extends
+    | 'atomic-commerce-category-facet'
+    | 'atomic-commerce-facet'
+    | 'atomic-commerce-numeric-facet',
 > extends BasePageObject<FacetType> {
   constructor(page: Page, facetType: FacetType) {
     super(page, facetType);