e2e

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

packages/atomic/src/components/common/facets/facet-header/facet-header.tsx

@@ -34,7 +34,7 @@ export const FacetHeader: FunctionalComponent<FacetHeaderProps> = (props) => {
       style="text-transparent"
       part="label-button"
       class="flex font-bold justify-between w-full py-1 px-2 text-lg rounded-none"
-      title={props.isCollapsed ? expandFacet : collapseFacet}
+      ariaLabel={props.isCollapsed ? expandFacet : collapseFacet}
       onClick={() => props.onToggleCollapse()}
       ariaExpanded={(!props.isCollapsed).toString()}
       ref={props.headerRef}

packages/atomic/src/components/search/atomic-refine-modal/e2e/page-object.ts

@@ -0,0 +1,12 @@
+import type {Page} from '@playwright/test';
+import {BasePageObject} from '../../../../../playwright-utils/base-page-object';
+
+export class RefineModalPageObject extends BasePageObject<'atomic-refine-toggle'> {
+  constructor(page: Page) {
+    super(page, 'atomic-refine-toggle');
+  }
+
+  get modal() {
+    return this.page.getByRole('dialog', {name: 'Sort & Filter'});
+  }
+}

packages/atomic/src/components/search/atomic-refine-toggle/e2e/atomic-refine-toggle.e2e.ts

@@ -0,0 +1,33 @@
+import {test, expect} from './fixture';
+
+test.describe('atomic-refine-toggle', () => {
+  test.beforeEach(async ({refineToggle, page}) => {
+    await refineToggle.load({
+      story: 'with-atomic-externals',
+    });
+    await page.setViewportSize({width: 400, height: 845});
+  });
+  test.describe('when the button is clicked', () => {
+    test.beforeEach(async ({refineToggle}) => {
+      await refineToggle.button.click();
+    });
+
+    test('should open the refine modal', async ({refineModal}) => {
+      await expect(refineModal.modal).toBeVisible();
+    });
+
+    test('should display the facets in the right order', async ({facet}) => {
+      await expect(facet.expandButtons).toHaveText([
+        'facet1',
+        'facet2',
+        'facet3',
+        'facet4',
+        'facet5',
+        'facet6',
+        'facet7',
+        'facet8',
+        'facet9',
+      ]);
+    });
+  });
+});

packages/atomic/src/components/search/atomic-refine-toggle/e2e/fixture.ts

@@ -0,0 +1,29 @@
+import {test as base} from '@playwright/test';
+import {
+  AxeFixture,
+  makeAxeBuilder,
+} from '../../../../../playwright-utils/base-fixture';
+import {RefineModalPageObject} from '../../atomic-refine-modal/e2e/page-object';
+import {AtomicFacetPageObject} from '../../facets/atomic-facet/e2e/page-object';
+import {RefineTogglePageObject} from './page-object';
+
+type MyFixtures = {
+  refineToggle: RefineTogglePageObject;
+  refineModal: RefineModalPageObject;
+  facet: AtomicFacetPageObject;
+};
+
+export const test = base.extend<MyFixtures & AxeFixture>({
+  makeAxeBuilder,
+  refineToggle: async ({page}, use) => {
+    await use(new RefineTogglePageObject(page));
+  },
+  refineModal: async ({page}, use) => {
+    await use(new RefineModalPageObject(page));
+  },
+  facet: async ({page}, use) => {
+    await use(new AtomicFacetPageObject(page));
+  },
+});
+
+export {expect} from '@playwright/test';

packages/atomic/src/components/search/atomic-refine-toggle/e2e/page-object.ts

@@ -0,0 +1,11 @@
+import type {Page} from '@playwright/test';
+import {BasePageObject} from '../../../../../playwright-utils/base-page-object';
+
+export class RefineTogglePageObject extends BasePageObject<'atomic-refine-toggle'> {
+  constructor(page: Page) {
+    super(page, 'atomic-refine-toggle');
+  }
+  get button() {
+    return this.page.getByRole('button', {name: 'Sort & Filter'});
+  }
+}

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

@@ -6,6 +6,10 @@ export class AtomicFacetPageObject extends BasePageObject<'atomic-facet'> {
     super(page, 'atomic-facet');
   }
 
+  get expandButtons() {
+    return this.page.getByRole('button', {name: /Expand the \w* facet/});
+  }
+
   get getFacetSearch() {
     return this.page.getByLabel('Search');
   }