fix(atomic): field sort should be applied when selected

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

packages/atomic/src/components/search/atomic-sort-dropdown/atomic-sort-dropdown.new.stories.tsx

@@ -29,6 +29,14 @@ export const Default: Story = {
         label="most-recent"
         expression="date descending"
       ></atomic-sort-expression>
+      <atomic-sort-expression
+        label="Price ascending"
+        expression="sncost ascending"
+      ></atomic-sort-expression>
+      <atomic-sort-expression
+        label="Price ascending & Most recent"
+        expression="sncost ascending, date descending"
+      ></atomic-sort-expression>
     `,
   },
 };

packages/atomic/src/components/search/atomic-sort-dropdown/atomic-sort-dropdown.tsx

@@ -123,10 +123,13 @@ export class AtomicSortDropdown implements InitializableComponent {
     );
     option && this.sort.sortBy(option.criteria);
   }
+
   public componentShouldUpdate(): void {
     if (
       this.options.some(
-        (option) => option.expression === this.sortState.sortCriteria
+        (option) =>
+          option.expression.trim().replace(/\s*,\s*/g, ',') ===
+          this.sortState.sortCriteria.replace(/@/g, '')
       )
     ) {
       return;

packages/atomic/src/components/search/atomic-sort-dropdown/e2e/atomic-sort-dropdown.e2e.ts

@@ -0,0 +1,58 @@
+import {expect, test} from './fixture';
+
+test.describe('default', () => {
+  test.beforeEach(async ({sortDropdown}) => {
+    await sortDropdown.load();
+  });
+
+  test.describe('when selecting a field sort criterion', async () => {
+    test.beforeEach(async ({sortDropdown}) => {
+      await sortDropdown.dropdown.selectOption('sncost ascending');
+    });
+
+    test('should properly reflect the selected sort criteria into the URL', async ({
+      page,
+    }) => {
+      expect(page.url()).toContain('sortCriteria=%40sncost%20ascending');
+    });
+  });
+
+  test.describe('when selecting a composite field sort criterion', async () => {
+    test.beforeEach(async ({sortDropdown}) => {
+      await sortDropdown.dropdown.selectOption(
+        'sncost ascending, date descending'
+      );
+    });
+
+    test('should properly reflect the selected sort criteria into the URL', async ({
+      page,
+    }) => {
+      expect(page.url()).toContain(
+        // eslint-disable-next-line @cspell/spellchecker
+        'sortCriteria=%40sncost%20ascending%2Cdate%20descending'
+      );
+    });
+  });
+
+  test.describe('when selecting a relevance sort criterion', async () => {
+    test.beforeEach(async ({sortDropdown}) => {
+      await sortDropdown.dropdown.selectOption('relevancy');
+    });
+
+    test('should not reflect any sortCriteria in the URL', async ({page}) => {
+      expect(page.url()).not.toContain('sortCriteria=');
+    });
+  });
+
+  test.describe('when selecting a date sort criterion', async () => {
+    test.beforeEach(async ({sortDropdown}) => {
+      await sortDropdown.dropdown.selectOption('date descending');
+    });
+
+    test('should properly reflect the selected sort criteria into the URL', async ({
+      page,
+    }) => {
+      expect(page.url()).toContain('sortCriteria=date%20descending');
+    });
+  });
+});

packages/atomic/src/components/search/atomic-sort-dropdown/e2e/fixture.ts

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

packages/atomic/src/components/search/atomic-sort-dropdown/e2e/page-object.ts

@@ -0,0 +1,12 @@
+import type {Page} from '@playwright/test';
+import {BasePageObject} from '../../../../../playwright-utils/base-page-object';
+
+export class AtomicSortDropdownPageObject extends BasePageObject<'atomic-sort-dropdown'> {
+  constructor(page: Page) {
+    super(page, 'atomic-sort-dropdown');
+  }
+
+  get dropdown() {
+    return this.page.getByLabel('Sort by');
+  }
+}