add tests

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

packages/atomic/src/components/search/facets/atomic-timeframe-facet/atomic-timeframe-facet.new.stories.tsx

@@ -10,7 +10,16 @@ const meta: Meta = {
   component: 'atomic-timeframe-facet',
   title: 'Atomic/TimeframeFacet',
   id: 'atomic-timeframe-facet',
-
+  argTypes: {
+    'attributes-min': {
+      name: 'min',
+      type: 'string',
+    },
+    'attributes-max': {
+      name: 'max',
+      type: 'string',
+    },
+  },
   render: renderComponent,
   decorators: [decorator],
   parameters,

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

@@ -0,0 +1,180 @@
+import {test, expect} from './fixture';
+
+test.describe('default', () => {
+  test.beforeEach(async ({facet}) => {
+    await facet.load({
+      args: {withDatePicker: true},
+    });
+  });
+
+  test.describe('when selecting a start date', () => {
+    test.beforeEach(async ({facet}) => {
+      await facet.facetInputStart.click();
+      await facet.facetInputStart.fill('2021-01-01');
+    });
+
+    test('should limit the end date to the selected start date', async ({
+      facet,
+    }) => {
+      await facet.facetInputEnd.click();
+      await expect(facet.facetInputEnd).toHaveAttribute('min', '2021-01-01');
+    });
+  });
+
+  test.describe('when selecting an end date', () => {
+    test.beforeEach(async ({facet}) => {
+      await facet.facetInputEnd.click();
+      await facet.facetInputEnd.fill('2021-01-01');
+    });
+
+    test('should limit the start date to the selected end date', async ({
+      facet,
+    }) => {
+      await facet.facetInputStart.click();
+      await expect(facet.facetInputStart).toHaveAttribute('max', '2021-01-01');
+    });
+  });
+
+  test.describe('when selecting a start date and an end date', () => {
+    test.beforeEach(async ({facet}) => {
+      await facet.facetInputStart.click();
+      await facet.facetInputStart.fill('2021-01-01');
+      await facet.facetInputEnd.click();
+      await facet.facetInputEnd.fill('2021-01-31');
+    });
+
+    test.describe('when clicking the apply button', () => {
+      test.beforeEach(async ({facet}) => {
+        await facet.facetApplyButton.click();
+        await facet.facetClearFilter.waitFor({state: 'visible'});
+      });
+
+      test.describe('when clicking the clear filter button', () => {
+        test.beforeEach(async ({facet}) => {
+          await facet.facetClearFilter.click();
+        });
+
+        test('should clear the selected dates', async ({facet}) => {
+          await expect(facet.facetInputStart).toHaveValue('');
+          await expect(facet.facetInputEnd).toHaveValue('');
+        });
+
+        test('should reset the min and max values', async ({facet}) => {
+          await facet.facetInputStart.click();
+          await expect(facet.facetInputStart).toHaveAttribute(
+            'min',
+            '1401-01-01'
+          );
+          await facet.facetInputEnd.click();
+          await expect(facet.facetInputEnd).toHaveAttribute('max', '');
+        });
+
+        test('should hide the clear filter button', async ({facet}) => {
+          await expect(facet.facetClearFilter).not.toBeVisible();
+        });
+      });
+    });
+  });
+
+  test('should limit the start date to the default min value', async ({
+    facet,
+  }) => {
+    await facet.facetInputStart.click();
+    await expect(facet.facetInputStart).toHaveAttribute('min', '1401-01-01');
+  });
+
+  test('should not limit the end date', async ({facet}) => {
+    await facet.facetInputEnd.click();
+    await expect(facet.facetInputEnd).not.toHaveAttribute('max');
+  });
+});
+
+test.describe('with min and max values', () => {
+  test.beforeEach(async ({facet}) => {
+    await facet.load({
+      args: {withDatePicker: true, min: '2021-01-01', max: '2021-01-31'},
+    });
+  });
+
+  test.describe('when selecting a start date', () => {
+    test.beforeEach(async ({facet}) => {
+      await facet.facetInputStart.click();
+      await facet.facetInputStart.fill('2021-01-01');
+    });
+
+    test('should limit the end date to the selected start date', async ({
+      facet,
+    }) => {
+      await facet.facetInputEnd.click();
+      await expect(facet.facetInputEnd).toHaveAttribute('min', '2021-01-01');
+    });
+  });
+
+  test.describe('when selecting an end date', () => {
+    test.beforeEach(async ({facet}) => {
+      await facet.facetInputEnd.click();
+      await facet.facetInputEnd.fill('2021-01-01');
+    });
+
+    test('should limit the start date to the selected end date', async ({
+      facet,
+    }) => {
+      await facet.facetInputStart.click();
+      await expect(facet.facetInputStart).toHaveAttribute('max', '2021-01-01');
+    });
+  });
+
+  test.describe('when selecting a start date and an end date', () => {
+    test.beforeEach(async ({facet}) => {
+      await facet.facetInputStart.click();
+      await facet.facetInputStart.fill('2021-01-01');
+      await facet.facetInputEnd.click();
+      await facet.facetInputEnd.fill('2021-01-31');
+    });
+
+    test.describe('when clicking the apply button', () => {
+      test.beforeEach(async ({facet}) => {
+        await facet.facetApplyButton.click();
+        await facet.facetClearFilter.waitFor({state: 'visible'});
+      });
+
+      test.describe('when clicking the clear filter button', () => {
+        test.beforeEach(async ({facet}) => {
+          await facet.facetClearFilter.click();
+        });
+
+        test('should clear the selected dates', async ({facet}) => {
+          await expect(facet.facetInputStart).toHaveValue('');
+          await expect(facet.facetInputEnd).toHaveValue('');
+        });
+
+        test('should reset the min and max values', async ({facet}) => {
+          await facet.facetInputStart.click();
+          await expect(facet.facetInputStart).toHaveAttribute(
+            'min',
+            '2021-01-01'
+          );
+          await facet.facetInputEnd.click();
+          await expect(facet.facetInputEnd).toHaveAttribute(
+            'max',
+            '2021-01-31'
+          );
+        });
+
+        test('should hide the clear filter button', async ({facet}) => {
+          await expect(facet.facetClearFilter).not.toBeVisible();
+        });
+      });
+    });
+  });
+
+  test('should limit the start date to the min value', async ({facet}) => {
+    await facet.facetInputStart.click();
+    await expect(facet.facetInputStart).toHaveAttribute('min', '2021-01-01');
+  });
+
+  test('should limit the end date to the max value', async ({facet}) => {
+    await facet.facetInputEnd.click();
+    await expect(facet.facetInputEnd).toHaveAttribute('max', '2021-01-31');
+  });
+});

packages/atomic/src/components/search/facets/atomic-timeframe-facet/e2e/fixture.ts

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

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

@@ -0,0 +1,38 @@
+import type {Page} from '@playwright/test';
+import {BasePageObject} from '../../../../../../playwright-utils/base-page-object';
+
+export class AtomicTimeframeFacetPageObject extends BasePageObject<'atomic-timeframe-facet'> {
+  constructor(page: Page) {
+    super(page, 'atomic-timeframe-facet');
+  }
+
+  get getFacetSearch() {
+    return this.page.getByLabel('Search');
+  }
+
+  get facetInputStart() {
+    return this.page.getByLabel('Enter a start date for the No label facet');
+  }
+
+  get facetInputEnd() {
+    return this.page.getByLabel('Enter an end date for the No label facet');
+  }
+
+  get facetApplyButton() {
+    return this.page.getByRole('button', {
+      name: 'Apply custom start and end dates for the No label facet',
+    });
+  }
+
+  get facetClearFilter() {
+    return this.page.getByRole('button').filter({hasText: 'Clear filter'});
+  }
+
+  get getFacetValue() {
+    return this.page.locator('[part="value-box"]');
+  }
+
+  get facetSearchMoreMatchesFor() {
+    return this.page.getByRole('button', {name: 'More matches for p'});
+  }
+}