test(quantic): SFINT-5832 Sort E2E tests migrate from Cypress to Playwright

packages/quantic/force-app/main/default/lwc/quanticSort/e2e/fixture.ts

@@ -0,0 +1,112 @@
+import {SortObject} from './sortObject';
+import {quanticBase} from '../../../../../../playwright/fixtures/baseFixture';
+import {SearchObject} from '../../../../../../playwright/page-object/searchObject';
+import {
+  searchRequestRegex,
+  insightSearchRequestRegex,
+} from '../../../../../../playwright/utils/requests';
+import {InsightSetupObject} from '../../../../../../playwright/page-object/insightSetupObject';
+import {useCaseEnum} from '../../../../../../playwright/utils/useCase';
+
+const pagerUrl = 's/quantic-sort';
+
+interface SortOptions {}
+
+type QuanticSortE2EFixtures = {
+  sort: SortObject;
+  sortCustom: SortObject;
+  sortInvalid: SortObject;
+  search: SearchObject;
+  options: Partial<SortOptions>;
+};
+
+type QuanticSortE2ESearchFixtures = QuanticSortE2EFixtures & {
+  urlHash: string;
+};
+
+type QuanticSortE2EInsightFixtures = QuanticSortE2ESearchFixtures & {
+  insightSetup: InsightSetupObject;
+};
+
+export const testSearch = quanticBase.extend<QuanticSortE2ESearchFixtures>({
+  options: {},
+  urlHash: '',
+  search: async ({page}, use) => {
+    await use(new SearchObject(page, searchRequestRegex));
+  },
+
+  sort: async ({page, options, configuration, search, urlHash}, use) => {
+    await page.goto(urlHash ? `${pagerUrl}#${urlHash}` : pagerUrl);
+    configuration.configure(options);
+    await search.waitForSearchResponse();
+    await use(new SortObject(page));
+  },
+
+  sortCustom: async ({page, options, configuration, search, urlHash}, use) => {
+    await page.goto(urlHash ? `${pagerUrl}#${urlHash}` : pagerUrl);
+    await page.getByRole('button', {name: 'Add Custom Sort Options'}).click();
+    configuration.configure(options);
+    await search.waitForSearchResponse();
+    await use(new SortObject(page));
+  },
+
+  sortInvalid: async ({page, options, configuration, search, urlHash}, use) => {
+    await page.goto(urlHash ? `${pagerUrl}#${urlHash}` : pagerUrl);
+    await page
+      .getByRole('button', {name: 'Add Invalid Custom Sort Options'})
+      .click();
+    configuration.configure(options);
+    await search.waitForSearchResponse();
+    await use(new SortObject(page));
+  },
+});
+
+export const testInsight = quanticBase.extend<QuanticSortE2EInsightFixtures>({
+  options: {},
+  search: async ({page}, use) => {
+    await use(new SearchObject(page, insightSearchRequestRegex));
+  },
+
+  insightSetup: async ({page}, use) => {
+    await use(new InsightSetupObject(page));
+  },
+
+  sort: async ({page, options, search, configuration, insightSetup}, use) => {
+    await page.goto(pagerUrl);
+    configuration.configure({...options, useCase: useCaseEnum.insight});
+    await insightSetup.waitForInsightInterfaceInitialization();
+    await search.performSearch();
+    await search.waitForSearchResponse();
+    await use(new SortObject(page));
+  },
+
+  sortCustom: async (
+    {page, options, search, configuration, insightSetup},
+    use
+  ) => {
+    await page.goto(pagerUrl);
+    await page.getByRole('button', {name: 'Add Custom Sort Options'}).click();
+    configuration.configure({...options, useCase: useCaseEnum.insight});
+    await insightSetup.waitForInsightInterfaceInitialization();
+    await search.performSearch();
+    await search.waitForSearchResponse();
+    await use(new SortObject(page));
+  },
+
+  sortInvalid: async (
+    {page, options, search, configuration, insightSetup},
+    use
+  ) => {
+    await page.goto(pagerUrl);
+    await page
+      .getByRole('button', {name: 'Add Invalid Custom Sort Options'})
+      .click();
+    configuration.configure({...options, useCase: useCaseEnum.insight});
+    await insightSetup.waitForInsightInterfaceInitialization();
+    await search.performSearch();
+    await search.waitForSearchResponse();
+    await use(new SortObject(page));
+  },
+});
+
+export {expect} from '@playwright/test';

packages/quantic/force-app/main/default/lwc/quanticSort/e2e/quanticSort.e2e.ts

@@ -0,0 +1,74 @@
+import {testSearch, testInsight, expect} from './fixture';
+import {useCaseTestCases} from '../../../../../../playwright/utils/useCase';
+
+const newestDateSort = 'date descending';
+const viewsDescendingSort = '@ytviewcount descending';
+const defaultSortLabels = ['Relevancy', 'Newest', 'Oldest'];
+
+const fixtures = {
+  search: testSearch,
+  insight: testInsight,
+};
+
+useCaseTestCases.forEach((useCase) => {
+  let test = fixtures[useCase.value];
+
+  test.describe(`quantic sort  ${useCase.label}`, () => {
+    test.describe(`when changing sort option to Newest`, () => {
+      test('should trigger a new search and log analytics', async ({
+        sort,
+        search,
+      }) => {
+        const searchResponsePromise = search.waitForSearchResponse();
+        await sort.clickSortDropDown();
+        await sort.clickSortButton('Newest');
+        const searchResponse = await searchResponsePromise;
+        const {sortCriteria} = searchResponse.request().postDataJSON();
+        expect(sortCriteria).toBe(newestDateSort);
+        await sort.waitForSortUaAnalytics(newestDateSort);
+      });
+    });
+
+    test.describe(`when changing custom sort to "Views Descending`, () => {
+      test('should trigger a new search and log analytics', async ({
+        sortCustom,
+        search,
+      }) => {
+        const searchResponsePromise = search.waitForSearchResponse();
+        await sortCustom.clickSortDropDown();
+        await sortCustom.clickSortButton('Views Descending');
+        const searchResponse = await searchResponsePromise;
+        const {sortCriteria} = searchResponse.request().postDataJSON();
+        expect(sortCriteria).toBe(viewsDescendingSort);
+        await sortCustom.waitForSortUaAnalytics(viewsDescendingSort);
+      });
+    });
+
+    test.describe(`when the custom option passed has an invalid property`, () => {
+      test('should display an error message instead of the quanticSort component', async ({
+        sortInvalid,
+      }) => {
+        await sortInvalid.invalidSortMessage();
+      });
+    });
+
+    test.describe('when testing accessibility', () => {
+      test('should be accessible to keyboard', async ({sort}) => {
+        let selectedSortLabel = await sort.sortDropDown.textContent();
+        expect(selectedSortLabel).toEqual(defaultSortLabels[0]);
+
+        // Selecting the next sort using the ArrowDown, then ENTER key
+        await sort.focusSortDropDownEnter();
+        await sort.selectSortButtonKeyboard();
+        selectedSortLabel = await sort.sortDropDown.textContent();
+        expect(selectedSortLabel).toEqual(defaultSortLabels[1]);
+
+        // Selecting the next sort using the ArrowDown, then ENTER key
+        await sort.focusSortDropDownEnter();
+        await sort.selectSortButtonKeyboard();
+        selectedSortLabel = await sort.sortDropDown.textContent();
+        expect(selectedSortLabel).toEqual(defaultSortLabels[2]);
+      });
+    });
+  });
+});

packages/quantic/force-app/main/default/lwc/quanticSort/e2e/sortObject.ts

@@ -0,0 +1,76 @@
+import {Locator, Page, Request} from '@playwright/test';
+import {isUaSearchEvent} from '../../../../../../playwright/utils/requests';
+
+export class SortObject {
+  constructor(public page: Page) {
+    this.page = page;
+  }
+
+  get sortDropDown(): Locator {
+    return this.page.getByRole('combobox', {name: 'Sort by'});
+  }
+
+  get sortPreviewHeader(): Locator {
+    return this.page.getByRole('button', {name: 'Preview'});
+  }
+
+  get invalidMessage(): Locator {
+    return this.page
+      .locator('p')
+      .filter({hasText: 'Custom sort options configuration is invalid.'});
+  }
+
+  sortButton(buttonName: string): Locator {
+    return this.page.getByRole('option', {name: buttonName});
+  }
+
+  async clickSortDropDown(): Promise<void> {
+    await this.sortDropDown.click();
+  }
+
+  async focusSortDropDownEnter(): Promise<void> {
+    await this.sortPreviewHeader.click();
+    await this.page.keyboard.press('Tab');
+  }
+
+  async clickSortButton(buttonName: string): Promise<void> {
+    await this.sortButton(buttonName).click();
+  }
+
+  async selectSortButtonKeyboard(): Promise<void> {
+    await this.page.keyboard.press('Enter');
+    await this.sortButton('Oldest').isVisible();
+    await this.page.waitForTimeout(500);
+    await this.page.keyboard.press('ArrowDown');
+    await this.page.keyboard.press('Enter');
+  }
+
+  async invalidSortMessage(): Promise<void> {
+    await this.invalidMessage.isVisible();
+  }
+
+  async waitForSortUaAnalytics(eventValue: any): Promise<Request> {
+    const uaRequest = this.page.waitForRequest((request) => {
+      if (isUaSearchEvent(request)) {
+        const requestBody = request.postDataJSON();
+        const expectedFields = {
+          actionCause: 'resultsSort',
+          customData: {
+            resultsSortBy: eventValue,
+          },
+        };
+
+        const validateObject = (obj: any, expectedResult: any): boolean =>
+          Object.entries(expectedResult).every(([key, value]) =>
+            value && typeof value === 'object'
+              ? validateObject(obj?.[key], value)
+              : obj?.[key] === value
+          );
+
+        return validateObject(requestBody, expectedFields);
+      }
+      return false;
+    });
+    return uaRequest;
+  }
+}