@coveo/quantic 3.33.0 → 3.33.1

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/quanticSearchBox/__tests__/quanticSearchBox.test.js

@@ -0,0 +1,487 @@
+/* eslint-disable no-import-assign */
+import QuanticSearchBox from 'c/quanticSearchBox';
+// @ts-ignore
+import {cleanup, flushPromises, buildCreateTestComponent} from 'c/testUtils';
+import * as mockHeadlessLoader from 'c/quanticHeadlessLoader';
+
+jest.mock('c/quanticHeadlessLoader');
+
+let isInitialized = false;
+const initialSearchBoxState = {
+  value: '',
+  suggestions: [],
+  isLoading: false,
+  searchBoxId: 'searchBoxId',
+};
+
+let searchBoxState = initialSearchBoxState;
+
+const initialRecentQueriesState = {
+  queries: [],
+};
+
+let recentQueriesState = initialRecentQueriesState;
+
+const functionsMocks = {
+  buildSearchBox: jest.fn(() => ({
+    state: searchBoxState,
+    subscribe: functionsMocks.searchBoxSubscriber,
+    submit: functionsMocks.submit,
+    updateText: functionsMocks.updateText,
+    showSuggestions: functionsMocks.showSuggestions,
+    selectSuggestion: functionsMocks.selectSuggestion,
+  })),
+  buildRecentQueriesList: jest.fn(() => ({
+    state: recentQueriesState,
+    subscribe: functionsMocks.recentQueriesSubscriber,
+    clear: functionsMocks.clearRecentQueries,
+    executeRecentQuery: functionsMocks.executeRecentQuery,
+  })),
+
+  loadQuerySuggestActions: jest.fn(() => ({
+    clearQuerySuggest: functionsMocks.clearQuerySuggest,
+  })),
+  searchBoxSubscriber: jest.fn((cb) => {
+    cb();
+    return functionsMocks.unsubscribe;
+  }),
+  recentQueriesSubscriber: jest.fn((cb) => {
+    cb();
+    return functionsMocks.unsubscribe;
+  }),
+  unsubscribe: jest.fn(() => {}),
+  dispatch: jest.fn(() => {}),
+  clearQuerySuggest: jest.fn((id) => {
+    return {
+      id,
+    };
+  }),
+  submit: jest.fn(() => {}),
+  updateText: jest.fn((newValue) => newValue),
+  showSuggestions: jest.fn(() => {}),
+  selectSuggestion: jest.fn((selectedSuggestion) => selectedSuggestion),
+  clearRecentQueries: jest.fn(() => {}),
+  executeRecentQuery: jest.fn((index) => index),
+};
+
+const exampleEngine = {
+  id: 'exampleEngineId',
+  dispatch: functionsMocks.dispatch,
+};
+
+const defaultOptions = {
+  engineId: exampleEngine.id,
+  placeholder: 'Search',
+  withoutSubmitButton: false,
+  numberOfSuggestions: 7,
+  textarea: false,
+  disableRecentQueries: false,
+  keepFiltersOnSearch: false,
+};
+
+const selectors = {
+  initializationError: 'c-quantic-component-error',
+  searchBoxInput: 'c-quantic-search-box-input',
+};
+
+const createTestComponent = buildCreateTestComponent(
+  QuanticSearchBox,
+  'c-quantic-search-box',
+  defaultOptions
+);
+
+function prepareHeadlessState() {
+  // @ts-ignore
+  mockHeadlessLoader.getHeadlessBundle = () => {
+    return {
+      buildSearchBox: functionsMocks.buildSearchBox,
+      buildRecentQueriesList: functionsMocks.buildRecentQueriesList,
+      loadQuerySuggestActions: functionsMocks.loadQuerySuggestActions,
+    };
+  };
+}
+
+function mockSuccessfulHeadlessInitialization() {
+  // @ts-ignore
+  mockHeadlessLoader.initializeWithHeadless = (element, _, initialize) => {
+    if (element instanceof QuanticSearchBox && !isInitialized) {
+      isInitialized = true;
+      initialize(exampleEngine);
+    }
+  };
+}
+
+function mockErroneousHeadlessInitialization() {
+  // @ts-ignore
+  mockHeadlessLoader.initializeWithHeadless = (element) => {
+    if (element instanceof QuanticSearchBox) {
+      element.setInitializationError();
+    }
+  };
+}
+
+describe('c-quantic-search-box', () => {
+  afterEach(() => {
+    cleanup();
+    isInitialized = false;
+    searchBoxState = initialSearchBoxState;
+    recentQueriesState = initialRecentQueriesState;
+  });
+
+  describe('controller initialization', () => {
+    beforeAll(() => {
+      mockSuccessfulHeadlessInitialization();
+      prepareHeadlessState();
+    });
+
+    it('should build the searchbox controller with the proper parameters and subscribe to its state', async () => {
+      createTestComponent();
+      await flushPromises();
+
+      expect(functionsMocks.buildSearchBox).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildSearchBox).toHaveBeenCalledWith(
+        exampleEngine,
+        expect.objectContaining({
+          options: expect.objectContaining({
+            numberOfSuggestions: 7,
+            highlightOptions: {
+              notMatchDelimiters: {
+                open: '<b>',
+                close: '</b>',
+              },
+            },
+            clearFilters: true,
+          }),
+        })
+      );
+      expect(functionsMocks.searchBoxSubscriber).toHaveBeenCalledTimes(1);
+    });
+
+    it('should build the recent queries controller with the right maxLength value and subscribe to its state', async () => {
+      createTestComponent();
+      await flushPromises();
+
+      expect(functionsMocks.buildRecentQueriesList).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildRecentQueriesList).toHaveBeenCalledWith(
+        exampleEngine,
+        expect.objectContaining({
+          options: expect.objectContaining({
+            maxLength: 20,
+          }),
+        })
+      );
+      expect(functionsMocks.recentQueriesSubscriber).toHaveBeenCalledTimes(1);
+    });
+
+    it('should properly load query suggest actions', async () => {
+      createTestComponent();
+      await flushPromises();
+
+      expect(functionsMocks.loadQuerySuggestActions).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.loadQuerySuggestActions).toHaveBeenCalledWith(
+        exampleEngine
+      );
+    });
+
+    describe('the #keepFiltersOnSearch property', () => {
+      it('should build the controllers with clear filters enabled when keepFiltersOnSearch is false (default)', async () => {
+        createTestComponent();
+        await flushPromises();
+
+        expect(functionsMocks.buildSearchBox).toHaveBeenCalledTimes(1);
+        expect(functionsMocks.buildSearchBox).toHaveBeenCalledWith(
+          exampleEngine,
+          expect.objectContaining({
+            options: expect.objectContaining({clearFilters: true}),
+          })
+        );
+        expect(functionsMocks.buildRecentQueriesList).toHaveBeenCalledTimes(1);
+        expect(functionsMocks.buildRecentQueriesList).toHaveBeenCalledWith(
+          exampleEngine,
+          expect.objectContaining({
+            options: expect.objectContaining({clearFilters: true}),
+          })
+        );
+      });
+
+      it('should build the controllers with clear filters disabled when keepFiltersOnSearch is true', async () => {
+        createTestComponent({
+          ...defaultOptions,
+          keepFiltersOnSearch: true,
+        });
+        await flushPromises();
+
+        expect(functionsMocks.buildSearchBox).toHaveBeenCalledTimes(1);
+        expect(functionsMocks.buildSearchBox).toHaveBeenCalledWith(
+          exampleEngine,
+          expect.objectContaining({
+            options: expect.objectContaining({clearFilters: false}),
+          })
+        );
+        expect(functionsMocks.buildRecentQueriesList).toHaveBeenCalledTimes(1);
+        expect(functionsMocks.buildRecentQueriesList).toHaveBeenCalledWith(
+          exampleEngine,
+          expect.objectContaining({
+            options: expect.objectContaining({clearFilters: false}),
+          })
+        );
+      });
+    });
+
+    describe('when the #disableRecentQueries property is true', () => {
+      it('should not build the recent queries controller', async () => {
+        createTestComponent({
+          ...defaultOptions,
+          disableRecentQueries: true,
+        });
+        await flushPromises();
+
+        expect(functionsMocks.buildRecentQueriesList).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('with a custom #numberOfSuggestions value', () => {
+      it('should build the searchbox controller with the custom number of suggestions', async () => {
+        const customNumberOfSuggestions = 10;
+        createTestComponent({
+          ...defaultOptions,
+          numberOfSuggestions: customNumberOfSuggestions,
+        });
+        await flushPromises();
+
+        expect(functionsMocks.buildSearchBox).toHaveBeenCalledTimes(1);
+        expect(functionsMocks.buildSearchBox).toHaveBeenCalledWith(
+          exampleEngine,
+          expect.objectContaining({
+            options: expect.objectContaining({
+              numberOfSuggestions: customNumberOfSuggestions,
+            }),
+          })
+        );
+      });
+    });
+  });
+
+  describe('when an initialization error occurs', () => {
+    beforeEach(() => {
+      mockErroneousHeadlessInitialization();
+    });
+
+    it('should display the error component', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const initializationError = element.shadowRoot.querySelector(
+        selectors.initializationError
+      );
+
+      expect(initializationError).not.toBeNull();
+    });
+  });
+
+  describe('when the component is initialized', () => {
+    beforeAll(() => {
+      mockSuccessfulHeadlessInitialization();
+      prepareHeadlessState();
+    });
+
+    it('should not display the error component', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const initializationError = element.shadowRoot.querySelector(
+        selectors.initializationError
+      );
+      expect(initializationError).toBeNull();
+    });
+
+    it('should render the searchbox input with the default options', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const searchBoxInput = element.shadowRoot.querySelector(
+        selectors.searchBoxInput
+      );
+
+      expect(searchBoxInput).not.toBeNull();
+      expect(searchBoxInput.inputValue).toBe('');
+      expect(searchBoxInput.textarea).toBe(defaultOptions.textarea);
+      expect(searchBoxInput.withoutSubmitButton).toBe(
+        defaultOptions.withoutSubmitButton
+      );
+      expect(searchBoxInput.placeholder).toBe(defaultOptions.placeholder);
+      expect(searchBoxInput.maxNumberOfSuggestions).toBe(
+        defaultOptions.numberOfSuggestions
+      );
+    });
+
+    describe('event handling', () => {
+      it('should call the #submit controller function when receiving a #quantic__submitsearch event', async () => {
+        const element = createTestComponent();
+        await flushPromises();
+
+        const searchBoxInput = element.shadowRoot.querySelector(
+          selectors.searchBoxInput
+        );
+
+        searchBoxInput.dispatchEvent(
+          new CustomEvent('quantic__submitsearch', {
+            bubbles: true,
+            composed: true,
+          })
+        );
+
+        expect(functionsMocks.submit).toHaveBeenCalledTimes(1);
+      });
+
+      describe('when receiving a #quantic__inputvaluechange event', () => {
+        it('should call the #updateText controller function with a new value', async () => {
+          const element = createTestComponent();
+          await flushPromises();
+
+          const searchBoxInput = element.shadowRoot.querySelector(
+            selectors.searchBoxInput
+          );
+
+          searchBoxInput.dispatchEvent(
+            new CustomEvent('quantic__inputvaluechange', {
+              bubbles: true,
+              composed: true,
+              detail: {value: 'new value'},
+            })
+          );
+
+          expect(functionsMocks.updateText).toHaveBeenCalledTimes(1);
+          expect(functionsMocks.updateText).toHaveBeenCalledWith('new value');
+        });
+
+        it('should not call the #updateText controller function with the same value', async () => {
+          const sameValue = 'same value';
+          searchBoxState.value = sameValue;
+          const element = createTestComponent();
+          await flushPromises();
+
+          const searchBoxInput = element.shadowRoot.querySelector(
+            selectors.searchBoxInput
+          );
+
+          searchBoxInput.dispatchEvent(
+            new CustomEvent('quantic__inputvaluechange', {
+              bubbles: true,
+              composed: true,
+              detail: {value: sameValue},
+            })
+          );
+
+          expect(functionsMocks.updateText).not.toHaveBeenCalledTimes(1);
+          expect(functionsMocks.updateText).not.toHaveBeenCalledWith(sameValue);
+        });
+      });
+
+      it('should call the #showSuggestions controller function when receiving a #quantic__showsuggestions event', async () => {
+        const element = createTestComponent();
+        await flushPromises();
+
+        const searchBoxInput = element.shadowRoot.querySelector(
+          selectors.searchBoxInput
+        );
+
+        searchBoxInput.dispatchEvent(
+          new CustomEvent('quantic__showsuggestions', {
+            bubbles: true,
+            composed: true,
+          })
+        );
+
+        expect(functionsMocks.showSuggestions).toHaveBeenCalledTimes(1);
+      });
+
+      describe('when receiving a #quantic__selectsuggestion event', () => {
+        it('should call the #selectSuggestion controller function when a suggestion is clicked', async () => {
+          const selectedSuggestion = {
+            rawValue: 'selected value',
+            highlightedValue: 'selected value',
+          };
+          const element = createTestComponent();
+          await flushPromises();
+
+          const searchBoxInput = element.shadowRoot.querySelector(
+            selectors.searchBoxInput
+          );
+
+          searchBoxInput.dispatchEvent(
+            new CustomEvent('quantic__selectsuggestion', {
+              bubbles: true,
+              composed: true,
+              detail: {selectedSuggestion: {value: selectedSuggestion}},
+            })
+          );
+
+          expect(functionsMocks.selectSuggestion).toHaveBeenCalledTimes(1);
+          expect(functionsMocks.selectSuggestion).toHaveBeenCalledWith(
+            selectedSuggestion
+          );
+        });
+
+        it('should call the #clear controller function when #isClearRecentQueryButton is true', async () => {
+          const element = createTestComponent();
+          await flushPromises();
+
+          const searchBoxInput = element.shadowRoot.querySelector(
+            selectors.searchBoxInput
+          );
+
+          searchBoxInput.dispatchEvent(
+            new CustomEvent('quantic__selectsuggestion', {
+              bubbles: true,
+              composed: true,
+              detail: {
+                selectedSuggestion: {value: {}, isClearRecentQueryButton: true},
+              },
+            })
+          );
+
+          expect(functionsMocks.clearRecentQueries).toHaveBeenCalledTimes(1);
+        });
+
+        it('should call the #executeRecentQuery controller function when #isRecentQuery is true and dispatch a #clearQuerySuggest action', async () => {
+          recentQueriesState = {
+            queries: [
+              {rawValue: 'query 1', highlightedValue: 'query 1'},
+              {rawValue: 'query 2', highlightedValue: 'query 2'},
+            ],
+          };
+          const selectedRecentQuery = recentQueriesState.queries[0];
+          const element = createTestComponent();
+          await flushPromises();
+
+          const searchBoxInput = element.shadowRoot.querySelector(
+            selectors.searchBoxInput
+          );
+
+          searchBoxInput.dispatchEvent(
+            new CustomEvent('quantic__selectsuggestion', {
+              bubbles: true,
+              composed: true,
+              detail: {
+                selectedSuggestion: {
+                  value: selectedRecentQuery,
+                  isRecentQuery: true,
+                },
+              },
+            })
+          );
+
+          expect(functionsMocks.executeRecentQuery).toHaveBeenCalledTimes(1);
+          expect(functionsMocks.executeRecentQuery).toHaveBeenCalledWith(0);
+          expect(functionsMocks.clearQuerySuggest).toHaveBeenCalledTimes(1);
+          expect(functionsMocks.clearQuerySuggest).toHaveBeenCalledWith(
+            expect.objectContaining({
+              id: 'searchBoxId',
+            })
+          );
+        });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,84 @@
+import {SearchBoxObject} from './pageObject';
+import {quanticBase} from '../../../../../../playwright/fixtures/baseFixture';
+import {SearchObject} from '../../../../../../playwright/page-object/searchObject';
+import {
+  searchRequestRegex,
+  insightSearchRequestRegex,
+} from '../../../../../../playwright/utils/requests';
+import {AnalyticsModeEnum} from '../../../../../../playwright/utils/analyticsMode';
+import {InsightSetupObject} from '../../../../../../playwright/page-object/insightSetupObject';
+import {useCaseEnum} from '../../../../../../playwright/utils/useCase';
+
+const pageUrl = 's/quantic-search-box';
+
+interface SearchBoxOptions {
+  engineId: string;
+  placeholder: string;
+  withoutSubmitButton: boolean;
+  numberOfSuggestions: number;
+  textarea: boolean;
+  disableRecentQueries: boolean;
+  keepFiltersOnSearch: boolean;
+}
+
+type QuanticSearchBoxE2EFixtures = {
+  searchBox: SearchBoxObject;
+  search: SearchObject;
+  options: Partial<SearchBoxOptions>;
+};
+
+type QuanticSearchBoxE2ESearchFixtures = QuanticSearchBoxE2EFixtures & {
+  urlHash: string;
+};
+
+type QuanticSearchBoxE2EInsightFixtures = QuanticSearchBoxE2ESearchFixtures & {
+  insightSetup: InsightSetupObject;
+};
+
+export const testSearch = quanticBase.extend<QuanticSearchBoxE2ESearchFixtures>(
+  {
+    pageUrl: pageUrl,
+    options: {},
+    urlHash: '',
+    analyticsMode: AnalyticsModeEnum.legacy,
+    search: async ({page}, use) => {
+      await use(new SearchObject(page, searchRequestRegex));
+    },
+    searchBox: async (
+      {page, options, configuration, search, urlHash, analytics},
+      use
+    ) => {
+      await page.goto(urlHash ? `${pageUrl}#${urlHash}` : pageUrl);
+
+      configuration.configure(options);
+      await search.waitForSearchResponse();
+
+      await use(new SearchBoxObject(page, analytics));
+    },
+  }
+);
+
+export const testInsight =
+  quanticBase.extend<QuanticSearchBoxE2EInsightFixtures>({
+    pageUrl: pageUrl,
+    options: {},
+    analyticsMode: AnalyticsModeEnum.legacy,
+    search: async ({page}, use) => {
+      await use(new SearchObject(page, insightSearchRequestRegex));
+    },
+    insightSetup: async ({page}, use) => {
+      await use(new InsightSetupObject(page));
+    },
+    searchBox: async (
+      {page, options, configuration, insightSetup, analytics},
+      use
+    ) => {
+      await page.goto(pageUrl);
+
+      configuration.configure({...options, useCase: useCaseEnum.insight});
+      await insightSetup.waitForInsightInterfaceInitialization();
+      await use(new SearchBoxObject(page, analytics));
+    },
+  });
+
+export {expect} from '@playwright/test';