add tests with custom sort

https://coveord.atlassian.net/browse/KIT-3528
coveo · Nov 18, 2024 · d4fc3da · d4fc3da
1 parent 03567aa
commit d4fc3da
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 1 deletion.
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
@@ -3,6 +3,7 @@ import {facetDecorator} from '@coveo/atomic-storybook-utils/common/facets-decora
 import {renderComponent} from '@coveo/atomic-storybook-utils/common/render-component';
 import {wrapInSearchInterface} from '@coveo/atomic-storybook-utils/search/search-interface-wrapper';
 import type {Meta, StoryObj as Story} from '@storybook/web-components';
+import {html} from 'lit-html';
 
 const {decorator, play} = wrapInSearchInterface();
 
@@ -58,3 +59,25 @@ export const monthFacet: Story = {
   },
   decorators: [facetDecorator],
 };
+
+export const CustomSort: Story = {
+  tags: ['test'],
+  args: {
+    'attributes-field': 'cat_available_sizes',
+    'attributes-custom-sort': '["XL", "L", "M", "S"]',
+    'attributes-sort-criteria': 'alphanumeric',
+    'attributes-number-of-values': 4,
+  },
+  decorators: [
+    facetDecorator,
+    (_Story, context) => {
+      console.log(context);
+      return html`<atomic-facet
+        field=${context.args['attributes-field']}
+        custom-sort=${context.args['attributes-custom-sort']}
+        sort-criteria=${context.args['attributes-sort-criteria']}
+        number-of-values=${context.args['attributes-number-of-values']}
+      ></atomic-facet>`;
+    },
+  ],
+};
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
@@ -178,7 +178,7 @@ const sortCriteriaTests: {
   },
 ];
 
-test.describe('Sort Criteria', () => {
+test.describe.serial('Sort Criteria', () => {
   sortCriteriaTests.forEach(({criteria, sortFunction}) => {
     test.describe(`when sort criteria is set to "${criteria}"`, () => {
       test.beforeEach(async ({facet}) => {
@@ -201,6 +201,40 @@ test.describe('Sort Criteria', () => {
         const sortedValues = sortFunction(values);
         expect(values).toEqual(sortedValues);
       });
+
+      test.describe('when a custom sort order is set', () => {
+        test.beforeEach(async ({facet}) => {
+          await facet.load({
+            story: 'custom-sort',
+            args: {
+              sortCriteria: criteria,
+              field: 'cat_available_sizes',
+              numberOfValues: 30,
+            },
+          });
+          await facet.hydrated.waitFor();
+          await expect
+            .poll(async () => await facet.facetValue.count())
+            .toBe(30);
+        });
+
+        test('should have facet values sorted by custom order first, and then by ${criteria}', async ({
+          facet,
+        }) => {
+          const values = await facet.facetValueLabel.allTextContents();
+
+          const customSort = new Set(['XL', 'L', 'M', 'S']);
+
+          const customSortedValues = values.filter((value) =>
+            customSort.has(value)
+          );
+          const remainingValues = sortFunction(
+            values.filter((value) => !customSort.has(value))
+          );
+
+          expect(values).toEqual([...customSortedValues, ...remainingValues]);
+        });
+      });
     });
   });