more complete test suite

https://coveord.atlassian.net/browse/KIT-3578
coveo · Sep 27, 2024 · 656b41b · 656b41b
1 parent 665cb18
commit 656b41b
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 25 deletions.
diff --git a/packages/atomic/src/components/search/facets/atomic-facet/atomic-facet.new.stories.tsx b/packages/atomic/src/components/search/facets/atomic-facet/atomic-facet.new.stories.tsx
@@ -50,7 +50,7 @@ export const monthFacet: Story = {
   args: {
     'attributes-field': 'month',
     'attributes-label': 'Month',
-    'attributes-number-of-values': 12,
+    'attributes-number-of-values': 2,
   },
   decorators: [facetDecorator],
 };
diff --git a/packages/atomic/src/components/search/facets/atomic-facet/e2e/atomic-facet.e2e.ts b/packages/atomic/src/components/search/facets/atomic-facet/e2e/atomic-facet.e2e.ts
@@ -1,6 +1,6 @@
 import {test, expect} from './fixture';
 
-test.describe('when clicking facet search "More matches for"', () => {
+test.describe('when selecting the facet search "More matches for" button', () => {
   test.beforeEach(async ({facet}) => {
     await facet.load({story: 'low-facet-values'});
   });
@@ -29,49 +29,125 @@ test.describe('when clicking facet search "More matches for"', () => {
   });
 });
 
-test.describe('when selecting the "Show more" button', () => {
+test.describe('when the "Show more" button has not been selected', () => {
   test.beforeEach(async ({facet}) => {
-    await facet.load({story: 'low-facet-values'});
-    await facet.showMoreButton.click();
+    await facet.load({story: 'month-facet'});
+    await facet.hydrated.waitFor();
   });
 
   test('should be accessible', async ({makeAxeBuilder}) => {
     const accessibilityResults = await makeAxeBuilder().analyze();
     expect(accessibilityResults.violations.length).toEqual(0);
   });
 
-  test('should still display the "Show more" button', async ({facet}) => {
-    await expect(facet.showMoreButton).toBeVisible();
+  test('should not display the "Show less" button', async ({facet}) => {
+    await expect(facet.showLessButton).toBeHidden();
+  });
+
+  test.describe('when additional facet values are available', () => {
+    test('should display the "Show more" button', async ({facet}) => {
+      await expect(facet.showMoreButton).toBeVisible();
+    });
+
+    test('should have the configured number of facet values', async ({
+      facet,
+    }) => {
+      await expect.poll(async () => await facet.facetValue.count()).toBe(2);
+    });
+  });
+
+  test.describe('when no additional facet values are available', () => {
+    test.beforeEach(async ({facet}) => {
+      await facet.showMoreButton.click();
+      await facet.showMoreButton.click();
+      await facet.showMoreButton.click();
+      await facet.showMoreButton.click();
+      await facet.showMoreButton.click();
+    });
+
+    test('should not display the "Show more" button', async ({facet}) => {
+      await expect(facet.showMoreButton).toBeHidden();
+    });
+
+    test('should have as many as the configured number of facet values', async ({
+      facet,
+    }) => {
+      await expect.poll(async () => await facet.facetValue.count()).toBe(12);
+    });
   });
+});
 
-  test('should display the "Show less" button', async ({facet}) => {
-    await expect(facet.showLessButton).toBeVisible();
+test.describe('when the "Show more" button has been selected', () => {
+  test.beforeEach(async ({facet}) => {
+    await facet.load({story: 'month-facet'});
+    await facet.showMoreButton.click();
   });
 
-  test('should have values sorted alphabetically', async ({facet}) => {
+  test('should be accessible', async ({makeAxeBuilder}) => {
+    const accessibilityResults = await makeAxeBuilder().analyze();
+    expect(accessibilityResults.violations.length).toEqual(0);
+  });
+
+  test('should have facet values sorted alphabetically', async ({facet}) => {
     await expect.poll(async () => await facet.facetValue.count()).toBe(4);
     const values = await facet.facetValue.allTextContents();
-
     const sortedValues = [...values].sort();
     expect(values).toEqual(sortedValues);
   });
 
-  test('should increment and decrement the right amount of facet values', async ({
-    facet,
-  }) => {
-    await expect.poll(async () => await facet.facetValue.count()).toBe(4);
-    await facet.showMoreButton.click();
-    await expect.poll(async () => await facet.facetValue.count()).toBe(6);
+  test.describe('when additional facet values are available', () => {
+    test('should display the "Show more" button', async ({facet}) => {
+      await expect(facet.showMoreButton).toBeVisible();
+    });
 
-    await facet.showLessButton.click();
-    await expect.poll(async () => await facet.facetValue.count()).toBe(2);
-    await expect(facet.showLessButton).toBeHidden();
+    test('should have the configured number of facet values * (1 + the number of times the button was selected)', async ({
+      facet,
+    }) => {
+      await facet.showMoreButton.click();
+      await expect.poll(async () => await facet.facetValue.count()).toBe(6);
+    });
   });
-});
 
-test('when there\'s no more "Show more" button', async ({facet}) => {
-  await facet.load({story: 'month-facet'});
+  test.describe('when no additional facet values are available', () => {
+    test.beforeEach(async ({facet}) => {
+      await facet.showMoreButton.click();
+      await facet.showMoreButton.click();
+      await facet.showMoreButton.click();
+      await facet.showMoreButton.click();
+    });
+
+    test('should have the total number of available facet values', async ({
+      facet,
+    }) => {
+      await expect.poll(async () => await facet.facetValue.count()).toBe(12);
+    });
 
-  await expect(facet.showMoreButton).toBeHidden();
-  await expect(facet.showLessButton).toBeHidden();
+    test('should not display the "Show more" button', async ({facet}) => {
+      await expect(facet.showMoreButton).toBeHidden();
+    });
+
+    test('should display the "Show less" button', async ({facet}) => {
+      await expect(facet.showLessButton).toBeVisible();
+    });
+  });
+
+  test.describe('when the "Show less" button is selected', () => {
+    test.beforeEach(async ({facet}) => {
+      await facet.showLessButton.click();
+    });
+
+    test('should not display the "Show less" button', async ({facet}) => {
+      await expect(facet.showLessButton).toBeHidden();
+    });
+
+    test('should display the "Show more" button', async ({facet}) => {
+      await expect(facet.showMoreButton).toBeVisible();
+    });
+
+    test('should have the configured number of facet values', async ({
+      facet,
+    }) => {
+      await expect.poll(async () => await facet.facetValue.count()).toBe(2);
+    });
+  });
 });