Work on tests

coveo · Sep 27, 2024 · 787cc39 · 787cc39
1 parent f5cadfe
commit 787cc39
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 11 deletions.
diff --git a/...omponents/atomic-product-multi-value-text/atomic-product-multi-value-text.new.stories.tsx b/...omponents/atomic-product-multi-value-text/atomic-product-multi-value-text.new.stories.tsx
@@ -54,17 +54,26 @@ export const BeforeFirstRequest: Story = {
   play: playSkipFirstSearch,
 };
 
-export const WithMaxValuesToDisplay: Story = {
-  name: 'With max values to display',
+export const WithMaxValuesToDisplaySetToMinimum: Story = {
+  name: 'With max values to display set to minimum',
   args: {
     'attributes-field': 'cat_available_sizes',
     'attributes-max-values-to-display': 1,
   },
   decorators: [productDecorator],
 };
 
-export const InPage: Story = {
-  name: 'In a page',
+export const WithMaxValuesToDisplaySetToTotalNumberOfValues: Story = {
+  name: 'With max values to display set to total number of values',
+  args: {
+    'attributes-field': 'cat_available_sizes',
+    'attributes-max-values-to-display': 5,
+  },
+  decorators: [productDecorator],
+};
+
+export const InAPageWithTheCorrespondingFacet: Story = {
+  name: 'In a page with the corresponding facet',
   args: {
     'attributes-field': 'cat_available_sizes',
   },

diff --git a/...ate-components/atomic-product-multi-value-text/e2e/atomic-product-multi-value-text.e2e.ts b/...ate-components/atomic-product-multi-value-text/e2e/atomic-product-multi-value-text.e2e.ts
@@ -8,21 +8,122 @@ test.describe('default', () => {
   test('should be accessible', async ({
     productMultiValueText,
     makeAxeBuilder,
+  }) => {
+    await productMultiValueText.hydrated.first().isVisible();
+
+    const res = await makeAxeBuilder().analyze();
+
+    expect(res.violations.length).toBe(0);
+  });
+
+  test('should render 3 values and 3 separators', async ({
+    productMultiValueText,
+  }) => {
+    await expect(productMultiValueText.values).toHaveCount(3);
+    await expect(productMultiValueText.separators).toHaveCount(3);
+  });
+
+  test('should render indicator that 2 more values are available', async ({
+    productMultiValueText,
+  }) => {
+    await expect(productMultiValueText.moreValuesIndicator(2)).toBeVisible();
+  });
+});
+
+test.describe('with max-values-to-display set to 1', () => {
+  test.beforeEach(async ({productMultiValueText}) => {
+    await productMultiValueText.load({
+      story: 'with-max-values-to-display-set-to-minimum',
+    });
+  });
+
+  test('should be a11y compliant', async ({
+    productMultiValueText,
+    makeAxeBuilder,
+  }) => {
+    await expect(productMultiValueText.hydrated.first()).toBeVisible();
+
+    expect((await makeAxeBuilder().analyze()).violations.length).toBe(0);
+  });
+
+  test('should render 1 value and 1 separator', async ({
+    productMultiValueText,
+  }) => {
+    await expect(productMultiValueText.values).toHaveCount(1);
+    await expect(productMultiValueText.separators).toHaveCount(1);
+  });
+
+  test('should render indicator that 4 more values are available', async ({
+    productMultiValueText,
+  }) => {
+    await expect(productMultiValueText.moreValuesIndicator(4)).toBeVisible();
+  });
+});
+
+test.describe('with #max-values-to-display set to 5', () => {
+  test.beforeEach(async ({productMultiValueText}) => {
+    await productMultiValueText.load({
+      story: 'with-max-values-to-display-set-to-total-number-of-values',
+    });
+  });
+
+  test('should be a11y compliant', async ({
+    productMultiValueText,
+    makeAxeBuilder,
   }) => {
     await expect(productMultiValueText.hydrated.first()).toBeVisible();
 
     expect((await makeAxeBuilder().analyze()).violations.length).toBe(0);
   });
 
-  test('with default max-values-to-display, renders 3 values', async () => {});
+  test('should render 5 values and 4 separators', async ({
+    productMultiValueText,
+  }) => {
+    await expect(productMultiValueText.values).toHaveCount(5);
+    await expect(productMultiValueText.separators).toHaveCount(4);
+  });
+
+  test('should not render an indicator that more values are available', async ({
+    productMultiValueText,
+  }) => {
+    expect(productMultiValueText.moreValuesIndicator()).not.toBeVisible();
+  });
+});
+
+test.describe('in a page with the corresponding facet', () => {
+  test.beforeEach(async ({productMultiValueText}) => {
+    await productMultiValueText.load({
+      story: 'in-a-page-with-the-corresponding-facet',
+    });
+  });
+  test('with a selected value in the corresponding facet, should render that value first', async ({
+    page,
+    productMultiValueText,
+  }) => {
+    await expect(productMultiValueText.values.first()).toHaveText('XS');
 
-  test('with a max-values-to-display of 1, render 1 value', async () => {});
+    await page.getByLabel('Inclusion filter on L; 45 results').click();
 
-  test('with a correct delimiter, renders 3 values', async () => {});
+    await expect(productMultiValueText.values.first()).toHaveText('L');
+  });
 
-  test('with an incorrect delimiter, renders no values', async () => {});
+  test('with 3 selected values in the corresponding facet, renders those values in alphabetical order', async ({
+    productMultiValueText,
+    page,
+  }) => {
+    await expect(productMultiValueText.values.first()).toHaveText('XS');
+    await expect(productMultiValueText.values.nth(1)).toHaveText('S');
+    await expect(productMultiValueText.values.nth(2)).toHaveText('M');
 
-  test('with a selected value in the corresponding facet, renders that value first', async () => {});
+    await page.getByLabel('Inclusion filter on M; 45 results').click();
+    await expect(page.getByText('Clear filter')).toBeVisible();
+    await page.getByLabel('Inclusion filter on L; 45 results').click();
+    await expect(page.getByText('Clear 2 filters')).toBeVisible();
+    await page.getByLabel('Inclusion filter on XL; 45 results').click();
+    await expect(page.getByText('Clear 3 filters')).toBeVisible();
 
-  test('with 3 selected values in the corresponding facet, renders those values in alphabetical order', async () => {});
+    await expect(productMultiValueText.values.first()).toHaveText('L');
+    await expect(productMultiValueText.values.nth(1)).toHaveText('M');
+    await expect(productMultiValueText.values.nth(2)).toHaveText('XL');
+  });
 });
diff --git a/...nents/commerce/product-template-components/atomic-product-multi-value-text/e2e/fixture.ts b/...nents/commerce/product-template-components/atomic-product-multi-value-text/e2e/fixture.ts
@@ -1,7 +1,7 @@
 import {test as base} from '@playwright/test';
 import {
-  makeAxeBuilder,
   AxeFixture,
+  makeAxeBuilder,
 } from '../../../../../../playwright-utils/base-fixture';
 import {ProductMultiValueTextPageObject} from './page-object';
 

diff --git a/...s/commerce/product-template-components/atomic-product-multi-value-text/e2e/page-object.ts b/...s/commerce/product-template-components/atomic-product-multi-value-text/e2e/page-object.ts
@@ -5,4 +5,22 @@ export class ProductMultiValueTextPageObject extends BasePageObject<'atomic-prod
   constructor(page: Page) {
     super(page, 'atomic-product-multi-value-text');
   }
+
+  get values() {
+    return this.hydrated
+      .first()
+      .locator('li[part="product-multi-value-text-value"]');
+  }
+
+  get separators() {
+    return this.hydrated.first().locator('li[class="separator"]');
+  }
+
+  moreValuesIndicator(expectedNumber?: number) {
+    return this.hydrated
+      .first()
+      .getByText(
+        `${expectedNumber ? expectedNumber.toString() + ' ' : ''}more...`
+      );
+  }
 }