@coveo/quantic 3.13.0 → 3.14.0

package/force-app/main/default/lwc/quanticResultsPerPage/__tests__/quanticResultsPerPage.test.js

@@ -0,0 +1,404 @@
+/* eslint-disable no-import-assign */
+import QuanticResultsPerPage from 'c/quanticResultsPerPage';
+import {createElement} from 'lwc';
+import * as mockHeadlessLoader from 'c/quanticHeadlessLoader';
+
+const initialResultsPerPageState = {numberOfResults: 10};
+let resultsPerPageState = initialResultsPerPageState;
+
+const initialSearchStatusState = {hasResults: true};
+let searchStatusState = initialSearchStatusState;
+
+const initialStoreState = {};
+let storeState = initialStoreState;
+
+const functionsMocks = {
+  buildResultsPerPage: jest.fn(() => ({
+    state: resultsPerPageState,
+    subscribe: functionsMocks.resultsPerPageStateSubscriber,
+    set: functionsMocks.set,
+  })),
+  resultsPerPageStateSubscriber: jest.fn((cb) => {
+    cb();
+    return functionsMocks.resultsPerPageStateUnsubscriber;
+  }),
+  resultsPerPageStateUnsubscriber: jest.fn(),
+  buildSearchStatus: jest.fn(() => ({
+    state: searchStatusState,
+    subscribe: functionsMocks.searchStatusStateSubscriber,
+  })),
+  searchStatusStateSubscriber: jest.fn((cb) => {
+    cb();
+    return functionsMocks.searchStatusStateUnsubscriber;
+  }),
+  searchStatusStateUnsubscriber: jest.fn(),
+  set: jest.fn(),
+};
+
+const selectors = {
+  componentError: 'c-quantic-component-error',
+  resultsPerPage: '[data-testid="results-per-page"]',
+  resultsPerPageOption: 'c-quantic-number-button',
+  selectedResultsPerPageOption:
+    'c-quantic-number-button button.slds-button_brand',
+};
+
+const exampleEngine = {
+  id: 'exampleEngine',
+};
+let isInitialized = false;
+
+function createTestComponent(options = {}) {
+  const element = createElement('c-quantic-results-per-page', {
+    is: QuanticResultsPerPage,
+  });
+  Object.assign(element, options);
+  document.body.appendChild(element);
+  return element;
+}
+
+function prepareHeadlessState() {
+  // @ts-ignore
+  mockHeadlessLoader.getHeadlessBundle = () => {
+    return {
+      buildResultsPerPage: functionsMocks.buildResultsPerPage,
+      buildSearchStatus: functionsMocks.buildSearchStatus,
+    };
+  };
+}
+
+function mockStoreState() {
+  // @ts-ignore
+  mockHeadlessLoader.getFromStore = () => {
+    return storeState;
+  };
+}
+
+// Helper function to wait until the microtask queue is empty.
+function flushPromises() {
+  // eslint-disable-next-line @lwc/lwc/no-async-operation
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+function mockSuccessfulHeadlessInitialization() {
+  // @ts-ignore
+  mockHeadlessLoader.initializeWithHeadless = (element, _, initialize) => {
+    if (element instanceof QuanticResultsPerPage && !isInitialized) {
+      isInitialized = true;
+      initialize(exampleEngine);
+    }
+  };
+}
+
+function mockErroneousHeadlessInitialization() {
+  // @ts-ignore
+  mockHeadlessLoader.initializeWithHeadless = (element) => {
+    if (element instanceof QuanticResultsPerPage) {
+      element.setInitializationError();
+    }
+  };
+}
+
+function cleanup() {
+  // The jsdom instance is shared across test cases in a single file so reset the DOM
+  while (document.body.firstChild) {
+    document.body.removeChild(document.body.firstChild);
+  }
+  jest.clearAllMocks();
+  isInitialized = false;
+}
+
+describe('c-quantic-results-per-page', () => {
+  const defaultInitialChoice = 10;
+  const defaultChoices = [10, 25, 50, 100];
+
+  beforeEach(() => {
+    mockSuccessfulHeadlessInitialization();
+    prepareHeadlessState();
+    mockStoreState();
+  });
+
+  afterEach(() => {
+    resultsPerPageState = initialResultsPerPageState;
+    storeState = initialStoreState;
+    cleanup();
+  });
+
+  describe('when an initialization error occurs', () => {
+    beforeEach(() => {
+      mockErroneousHeadlessInitialization();
+    });
+
+    it('should display the initialization error component', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const initializationError = element.shadowRoot.querySelector(
+        selectors.componentError
+      );
+      expect(initializationError).not.toBeNull();
+    });
+  });
+
+  describe('controller initialization', () => {
+    beforeEach(() => {
+      mockSuccessfulHeadlessInitialization();
+      prepareHeadlessState();
+    });
+
+    it('should build the results per page and search status controllers and subscribe to state', async () => {
+      createTestComponent();
+      await flushPromises();
+
+      expect(functionsMocks.buildResultsPerPage).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildResultsPerPage).toHaveBeenCalledWith(
+        exampleEngine,
+        {
+          initialState: {
+            numberOfResults: 10,
+          },
+        }
+      );
+      expect(functionsMocks.buildSearchStatus).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildSearchStatus).toHaveBeenCalledWith(
+        exampleEngine
+      );
+    });
+  });
+
+  describe('with default options', () => {
+    it('should properly render with the default choice selected', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const resultsPerPage = element.shadowRoot.querySelector(
+        selectors.resultsPerPage
+      );
+      expect(resultsPerPage).not.toBeNull();
+
+      const resultsPerPageOptions = Array.from(
+        element.shadowRoot.querySelectorAll(selectors.resultsPerPageOption)
+      );
+      expect(resultsPerPageOptions).toHaveLength(defaultChoices.length);
+
+      resultsPerPageOptions.forEach((option, index) => {
+        expect(option.number).toEqual(defaultChoices[index]);
+        expect(option.selected).toBe(
+          defaultChoices[index] === defaultInitialChoice
+        );
+      });
+    });
+
+    it('should update the state when the results per page is clicked', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const resultsPerPage = element.shadowRoot.querySelector(
+        selectors.resultsPerPage
+      );
+      expect(resultsPerPage).not.toBeNull();
+
+      const resultsPerPageOptions = Array.from(
+        element.shadowRoot.querySelectorAll(selectors.resultsPerPageOption)
+      );
+
+      resultsPerPageOptions[1].dispatchEvent(
+        new CustomEvent('quantic__select', {
+          detail: defaultChoices[1],
+        })
+      );
+
+      expect(functionsMocks.set).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.set).toHaveBeenCalledWith(defaultChoices[1]);
+    });
+
+    describe('the numberOfResults headless state', () => {
+      const expectedValueSelected = 100;
+      beforeEach(() => {
+        resultsPerPageState = {
+          ...resultsPerPageState,
+          numberOfResults: expectedValueSelected,
+        };
+      });
+
+      test('should reflect the headless state and select the right option', async () => {
+        const element = createTestComponent();
+        await flushPromises();
+
+        const resultsPerPage = element.shadowRoot.querySelector(
+          selectors.resultsPerPage
+        );
+        expect(resultsPerPage).not.toBeNull();
+
+        const resultsPerPageOptions = Array.from(
+          element.shadowRoot.querySelectorAll(selectors.resultsPerPageOption)
+        );
+
+        resultsPerPageOptions.forEach((option) => {
+          expect(option.selected).toBe(expectedValueSelected === option.number);
+        });
+      });
+    });
+  });
+
+  describe('with a custom #choicesDisplayed option', () => {
+    beforeEach(() => {
+      console.error = jest.fn();
+    });
+
+    it('should properly render with the choices displayed', async () => {
+      const customChoices = [100, 250, 500];
+      const element = createTestComponent({
+        choicesDisplayed: customChoices.join(','),
+      });
+      await flushPromises();
+
+      expect(functionsMocks.buildResultsPerPage).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildResultsPerPage).toHaveBeenCalledWith(
+        exampleEngine,
+        {
+          initialState: {
+            numberOfResults: customChoices[0],
+          },
+        }
+      );
+
+      const resultsPerPage = element.shadowRoot.querySelector(
+        selectors.resultsPerPage
+      );
+      expect(resultsPerPage).not.toBeNull();
+
+      const resultsPerPageOptions = Array.from(
+        element.shadowRoot.querySelectorAll(selectors.resultsPerPageOption)
+      );
+      expect(resultsPerPageOptions).toHaveLength(customChoices.length);
+
+      resultsPerPageOptions.forEach((option, index) => {
+        expect(option.number).toEqual(customChoices[index]);
+      });
+    });
+
+    it('should log an error if the choices displayed are not numbers', async () => {
+      const customChoices = ['foo', 'bar', 'baz'];
+      const element = createTestComponent({
+        choicesDisplayed: customChoices.join(','),
+      });
+      await flushPromises();
+
+      const initializationError = element.shadowRoot.querySelector(
+        selectors.componentError
+      );
+      expect(initializationError).not.toBeNull();
+
+      expect(console.error).toHaveBeenCalledTimes(customChoices.length);
+      customChoices.forEach((choice, index) => {
+        expect(console.error).toHaveBeenNthCalledWith(
+          index + 1,
+          `The choice value "${choice}" from the "choicesDisplayed" option is not a number.`
+        );
+      });
+    });
+  });
+
+  describe('with a custom #initialChoice option', () => {
+    const customInitialChoiceIndex = 2;
+    const customInitialChoice = defaultChoices[customInitialChoiceIndex];
+
+    beforeEach(() => {
+      console.error = jest.fn();
+      resultsPerPageState = {
+        ...resultsPerPageState,
+        numberOfResults: customInitialChoice,
+      };
+    });
+
+    it('should properly render with the initial choice selected', async () => {
+      const element = createTestComponent({
+        initialChoice: customInitialChoice,
+      });
+      await flushPromises();
+
+      expect(functionsMocks.buildResultsPerPage).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildResultsPerPage).toHaveBeenCalledWith(
+        exampleEngine,
+        {
+          initialState: {
+            numberOfResults: customInitialChoice,
+          },
+        }
+      );
+
+      const resultsPerPageOptions = Array.from(
+        element.shadowRoot.querySelectorAll(selectors.resultsPerPageOption)
+      );
+      expect(resultsPerPageOptions).toHaveLength(defaultChoices.length);
+
+      resultsPerPageOptions.forEach((option, index) => {
+        expect(option.selected).toBe(index === customInitialChoiceIndex);
+      });
+    });
+    it('should log an error if the initial choice is not included in the choices displayed but not display it to users', async () => {
+      const customInvalidInitialChoice = 123;
+      const element = createTestComponent({
+        initialChoice: customInvalidInitialChoice,
+      });
+      await flushPromises();
+
+      expect(functionsMocks.buildResultsPerPage).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildResultsPerPage).toHaveBeenCalledWith(
+        exampleEngine,
+        {
+          initialState: {
+            numberOfResults: defaultChoices[0],
+          },
+        }
+      );
+
+      const initializationError = element.shadowRoot.querySelector(
+        selectors.componentError
+      );
+      expect(initializationError).toBeNull();
+
+      expect(console.error).toHaveBeenCalledTimes(1);
+      expect(console.error).toHaveBeenCalledWith(
+        `The "initialChoice" option value "${customInvalidInitialChoice}" is not included in the "choicesDisplayed" option "${defaultChoices}". Defaulting to the first value of the choices.`
+      );
+    });
+  });
+
+  describe('when you omit the #initialChoice option', () => {
+    const mockNumberOfResults = 100;
+
+    beforeEach(() => {
+      resultsPerPageState = {
+        ...resultsPerPageState,
+        numberOfResults: mockNumberOfResults,
+      };
+    });
+    it('should default to the first choice', async () => {
+      const customChoices = [100, 250, 500];
+      const element = createTestComponent({
+        choicesDisplayed: customChoices.join(','),
+      });
+      await flushPromises();
+
+      expect(functionsMocks.buildResultsPerPage).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildResultsPerPage).toHaveBeenCalledWith(
+        exampleEngine,
+        {
+          initialState: {
+            numberOfResults: customChoices[0],
+          },
+        }
+      );
+
+      const resultsPerPageOptions = Array.from(
+        element.shadowRoot.querySelectorAll(selectors.resultsPerPageOption)
+      );
+      expect(resultsPerPageOptions).toHaveLength(customChoices.length);
+      resultsPerPageOptions.forEach((option, index) => {
+        expect(option.selected).toBe(index === 0);
+      });
+    });
+  });
+});

package/force-app/main/default/lwc/quanticResultsPerPage/e2e/fixture.ts

@@ -0,0 +1,74 @@
+import {ResultsPerPageObject} from './pageObject';
+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 resultsPerPageUrl = 's/quantic-results-per-page';
+
+interface ResultsPerPageOptions {
+  initialChoice: number;
+  choicesDisplayed: string;
+}
+
+type QuanticResultsPerPageE2EFixtures = {
+  resultsPerPage: ResultsPerPageObject;
+  search: SearchObject;
+  options: Partial<ResultsPerPageOptions>;
+};
+
+type QuanticResultsPerPageE2ESearchFixtures =
+  QuanticResultsPerPageE2EFixtures & {
+    urlHash: string;
+  };
+
+type QuanticResultsPerPageE2EInsightFixtures =
+  QuanticResultsPerPageE2ESearchFixtures & {
+    insightSetup: InsightSetupObject;
+  };
+
+export const testSearch =
+  quanticBase.extend<QuanticResultsPerPageE2ESearchFixtures>({
+    options: {},
+    urlHash: '',
+    search: async ({page}, use) => {
+      await use(new SearchObject(page, searchRequestRegex));
+    },
+    resultsPerPage: async (
+      {page, options, configuration, search, urlHash},
+      use
+    ) => {
+      await page.goto(
+        urlHash ? `${resultsPerPageUrl}#${urlHash}` : resultsPerPageUrl
+      );
+      configuration.configure(options);
+      await search.waitForSearchResponse();
+      await use(new ResultsPerPageObject(page));
+    },
+  });
+
+export const testInsight =
+  quanticBase.extend<QuanticResultsPerPageE2EInsightFixtures>({
+    options: {},
+    search: async ({page}, use) => {
+      await use(new SearchObject(page, insightSearchRequestRegex));
+    },
+    insightSetup: async ({page}, use) => {
+      await use(new InsightSetupObject(page));
+    },
+    resultsPerPage: async (
+      {page, options, search, configuration, insightSetup},
+      use
+    ) => {
+      await page.goto(resultsPerPageUrl);
+      configuration.configure({...options, useCase: useCaseEnum.insight});
+      await insightSetup.waitForInsightInterfaceInitialization();
+      await search.performSearch();
+      await search.waitForSearchResponse();
+      await use(new ResultsPerPageObject(page));
+    },
+  });

package/force-app/main/default/lwc/quanticResultsPerPage/e2e/pageObject.ts

@@ -0,0 +1,85 @@
+import type {Locator, Page, Request} from '@playwright/test';
+import {isUaCustomEvent} from '../../../../../../playwright/utils/requests';
+
+const resultsPerPageElementsSelectors = {
+  component: 'c-quantic-results-per-page',
+  componentError: 'c-quantic-component-error',
+  resultsPerPageTestId: 'results-per-page',
+  resultsPerPageOptionButton: 'c-quantic-number-button',
+  selectedResultsPerPageOptionButton: 'button.slds-button_brand',
+};
+
+export class ResultsPerPageObject {
+  constructor(public page: Page) {
+    this.page = page;
+  }
+
+  get component(): Locator {
+    return this.page.getByTestId(
+      resultsPerPageElementsSelectors.resultsPerPageTestId
+    );
+  }
+
+  get allResultsPerPageOptionsButtons(): Locator {
+    return this.component.locator(
+      resultsPerPageElementsSelectors.resultsPerPageOptionButton
+    );
+  }
+
+  get selectedResultsPerPageOption(): Locator {
+    return this.allResultsPerPageOptionsButtons.filter({
+      has: this.page.locator(
+        resultsPerPageElementsSelectors.selectedResultsPerPageOptionButton
+      ),
+    });
+  }
+
+  getResultPerPageOptionByValue(value: number): Locator {
+    return this.allResultsPerPageOptionsButtons.getByText(value.toString());
+  }
+
+  async clickResultsPerPageOptionByValue(value: number): Promise<void> {
+    await this.getResultPerPageOptionByValue(value).click();
+  }
+
+  async waitForResultsPerPageClickUA(
+    customChecker?: Function
+  ): Promise<Request> {
+    const uaRequest = this.page.waitForRequest((request) => {
+      if (isUaCustomEvent(request)) {
+        const requestBody = request.postDataJSON?.();
+        const {customData} = requestBody;
+
+        const expectedFields = {
+          eventType: 'getMoreResults',
+          eventValue: 'pagerResize',
+        };
+        const matchesExpectedFields = Object.keys(expectedFields).every(
+          (key) => requestBody?.[key] === expectedFields[key]
+        );
+
+        return (
+          matchesExpectedFields &&
+          (customChecker ? customChecker(customData) : true)
+        );
+      }
+      return false;
+    });
+    return uaRequest;
+  }
+
+  async waitForResultsPerPageUA(
+    expectedCustomFields: Record<string, any>
+  ): Promise<Request> {
+    return this.waitForResultsPerPageClickUA(
+      (customData: Record<string, any>) => {
+        return Object.keys(expectedCustomFields).every((key) =>
+          typeof expectedCustomFields[key] === 'object'
+            ? JSON.stringify(customData?.[key]) ===
+              JSON.stringify(expectedCustomFields[key])
+            : customData?.[key] === expectedCustomFields[key]
+        );
+      }
+    );
+  }
+}

package/force-app/main/default/lwc/quanticResultsPerPage/e2e/quanticResultsPerPage.e2e.ts

@@ -0,0 +1,97 @@
+import {testSearch, testInsight} from './fixture';
+import {
+  useCaseEnum,
+  useCaseTestCases,
+} from '../../../../../../playwright/utils/useCase';
+
+const fixtures = {
+  search: testSearch,
+  insight: testInsight,
+};
+
+const defaultChoices = [10, 25, 50, 100];
+const defaultInitialChoice = 10;
+
+useCaseTestCases.forEach((useCase) => {
+  let test = fixtures[useCase.value];
+
+  test.describe(`quantic results per page ${useCase.label}`, () => {
+    test.describe('with default options', () => {
+      test('should load as expected', async ({resultsPerPage}) => {
+        await test.expect(resultsPerPage.component).toBeVisible();
+        test
+          .expect(await resultsPerPage.allResultsPerPageOptionsButtons.count())
+          .toBe(defaultChoices.length);
+        test
+          .expect(resultsPerPage.selectedResultsPerPageOption)
+          .toHaveText(defaultInitialChoice.toString());
+      });
+
+      test.describe('when selecting a new results per page option', () => {
+        test('should trigger a new search and log analytics', async ({
+          resultsPerPage,
+          search,
+        }) => {
+          const newChoice = 25;
+
+          const searchResponsePromise = search.waitForSearchResponse();
+          const resultsPerPageAnalyticsPromise =
+            resultsPerPage.waitForResultsPerPageUA({
+              currentResultsPerPage: newChoice,
+            });
+
+          await resultsPerPage.clickResultsPerPageOptionByValue(newChoice);
+
+          const searchResponse = await searchResponsePromise;
+          await resultsPerPageAnalyticsPromise;
+
+          test
+            .expect(resultsPerPage.selectedResultsPerPageOption)
+            .toHaveText(newChoice.toString());
+          test
+            .expect(searchResponse.request().postDataJSON()?.numberOfResults)
+            .toBe(newChoice);
+        });
+      });
+    });
+
+    test.describe('with custom options', () => {
+      const customChoices = [20, 40, 80];
+      test.use({
+        options: {
+          choicesDisplayed: customChoices.join(','),
+        },
+      });
+
+      test('should load as expected', async ({resultsPerPage}) => {
+        await test.expect(resultsPerPage.component).toBeVisible();
+        test
+          .expect(await resultsPerPage.allResultsPerPageOptionsButtons.count())
+          .toBe(customChoices.length);
+      });
+    });
+
+    if (useCase.value === useCaseEnum.search) {
+      test.describe('when loading from URL hash', () => {
+        const expectedResultsPerPage = 50;
+        test.use({
+          urlHash: `numberOfResults=${expectedResultsPerPage}`,
+        });
+
+        test('should load the right number of results per page', async ({
+          resultsPerPage,
+        }) => {
+          await test.expect(resultsPerPage.component).toBeVisible();
+          test
+            .expect(
+              await resultsPerPage.allResultsPerPageOptionsButtons.count()
+            )
+            .toBe(defaultChoices.length);
+          test
+            .expect(resultsPerPage.selectedResultsPerPageOption)
+            .toHaveText(expectedResultsPerPage.toString());
+        });
+      });
+    }
+  });
+});

package/force-app/main/default/lwc/quanticResultsPerPage/quanticResultsPerPage.html

@@ -5,7 +5,7 @@
   </template>
   <template lwc:else>
     <template if:true={hasResults}>
-      <div class="slds-float_right">
+      <div class="slds-float_right" data-testid="results-per-page">
         <template for:each={choicesObjects} for:item="choice">
           <c-quantic-number-button
             key={choice.value}