@coveo/quantic 3.32.0 → 3.33.1

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

@@ -0,0 +1,113 @@
+import type {Locator, Page, Request} from '@playwright/test';
+import {
+  AnalyticsMode,
+  AnalyticsModeEnum,
+} from '../../../../../../playwright/utils/analyticsMode';
+import {AnalyticsObject} from '../../../../../../playwright/page-object/analytics';
+
+export class SearchBoxSuggestionsListObject {
+  private analyticsMode: AnalyticsMode;
+
+  constructor(
+    public page: Page,
+    private analytics: AnalyticsObject
+  ) {
+    this.page = page;
+    this.analytics = analytics;
+    this.analyticsMode = this.analytics.analyticsMode;
+  }
+
+  get searchBoxSuggestionsList(): Locator {
+    return this.page.locator('c-quantic-search-box-suggestions-list');
+  }
+
+  get searchBoxInput(): Locator {
+    return this.page.getByTestId('search-box-input');
+  }
+
+  get suggestionsList(): Locator {
+    return this.searchBoxSuggestionsList.getByRole('listbox');
+  }
+
+  get firstSuggestion(): Locator {
+    return this.suggestionsList.getByRole('option').first();
+  }
+
+  get suggestionCount(): Promise<number> {
+    return this.suggestionsList.getByRole('option').count();
+  }
+
+  get clearRecentQueriesButton(): Locator {
+    return this.page.getByTestId('clear-recent-queries-button');
+  }
+
+  getSuggestionAtIndex(index: number): Locator {
+    return this.suggestionsList.getByRole('option').nth(index);
+  }
+
+  getSuggestionByText(text: string): Locator {
+    return this.suggestionsList.getByRole('option').filter({
+      hasText: text,
+    });
+  }
+
+  async focusOutsideSearchBox(): Promise<void> {
+    await this.page.locator('body').click();
+  }
+
+  async waitForQuerySuggestSearchLegacyAnalytics(
+    expectedFields: Record<string, any>
+  ): Promise<Request> {
+    if (this.analyticsMode === AnalyticsModeEnum.legacy) {
+      return this.analytics.waitForSearchUaAnalytics(
+        'omniboxAnalytics',
+        (data: Record<string, any>) => {
+          return Object.keys(expectedFields).every(
+            (key) => data?.[key] === expectedFields[key]
+          );
+        }
+      );
+    }
+    throw new Error(
+      `Analytics mode ${this.analyticsMode} is not supported for clear recent queries analytics`
+    );
+  }
+
+  async waitForRecentQuerySearchLegacyAnalytics(
+    expectedFields: Record<string, any>
+  ): Promise<Request> {
+    if (this.analyticsMode === AnalyticsModeEnum.legacy) {
+      return this.analytics.waitForSearchUaAnalytics(
+        'recentQueriesClick',
+        (data: Record<string, any>) => {
+          return Object.keys(expectedFields).every(
+            (key) => data?.[key] === expectedFields[key]
+          );
+        }
+      );
+    }
+    throw new Error(
+      `Analytics mode ${this.analyticsMode} is not supported for clear recent queries analytics`
+    );
+  }
+
+  async waitForClearRecentQueriesAnalytics(
+    expectedFields: Record<string, any>
+  ): Promise<Request> {
+    if (this.analyticsMode === AnalyticsModeEnum.legacy) {
+      return this.analytics.waitForCustomUaAnalytics(
+        {
+          eventType: 'recentQueries',
+          eventValue: 'clearRecentQueries',
+        },
+        (event) =>
+          Object.keys(expectedFields).every(
+            (key) => event?.[key] === expectedFields[key]
+          )
+      );
+    }
+    throw new Error(
+      `Analytics mode ${this.analyticsMode} is not supported for clear recent queries analytics`
+    );
+  }
+}

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

@@ -0,0 +1,299 @@
+import {testSearch, testInsight} from './fixture';
+import {
+  useCaseTestCases,
+  useCaseEnum,
+} from '../../../../../../playwright/utils/useCase';
+import {
+  AnalyticsModeEnum,
+  analyticsModeTest,
+} from '../../../../../../playwright/utils/analyticsMode';
+
+const fixtures = {
+  search: testSearch,
+  insight: testInsight,
+};
+
+const mockRecentQueries = [
+  'recent query 1',
+  'recent query 2',
+  'recent query 3',
+];
+
+// The events tested by these tests are only legacy analytics events.
+// There's no need to test the next analytics mode for this test suite.
+const supportedAnalyticsModes = analyticsModeTest.filter(
+  (analyticsProtocol) => analyticsProtocol.mode === AnalyticsModeEnum.legacy
+);
+
+useCaseTestCases.forEach((useCase) => {
+  let test = fixtures[useCase.value];
+  test.describe(`quantic search box suggestions list ${useCase.label}`, () => {
+    supportedAnalyticsModes.forEach((analytics) => {
+      test.describe(analytics.label, () => {
+        test.use({
+          analyticsMode: analytics.mode,
+        });
+
+        test.describe('search box input interactions', () => {
+          test('should display suggestions on input focus', async ({
+            searchBoxSuggestionsList,
+            querySuggest,
+          }) => {
+            const mockQuerySuggestions = [
+              'Suggestion 1',
+              'Suggestion 2',
+              'Suggestion 3',
+            ];
+            querySuggest.mockQuerySuggestResponse(mockQuerySuggestions);
+            const querySuggestResponsePromise =
+              querySuggest.waitForQuerySuggestResponse();
+            const searchBoxInput = searchBoxSuggestionsList.searchBoxInput;
+            await searchBoxInput.focus();
+            await querySuggestResponsePromise;
+
+            const suggestionsList = searchBoxSuggestionsList.suggestionsList;
+            test.expect(await suggestionsList.isVisible()).toBeTruthy();
+            const suggestionCount =
+              await searchBoxSuggestionsList.suggestionCount;
+            test.expect(suggestionCount).toBe(mockQuerySuggestions.length);
+          });
+
+          test('should hide suggestions on input blur', async ({
+            searchBoxSuggestionsList,
+            querySuggest,
+          }) => {
+            const mockQuerySuggestions = [
+              'Suggestion 1',
+              'Suggestion 2',
+              'Suggestion 3',
+            ];
+            querySuggest.mockQuerySuggestResponse(mockQuerySuggestions);
+            const querySuggestResponsePromise =
+              querySuggest.waitForQuerySuggestResponse();
+            const searchBoxInput = searchBoxSuggestionsList.searchBoxInput;
+            await searchBoxInput.focus();
+            await querySuggestResponsePromise;
+
+            const suggestionsList = searchBoxSuggestionsList.suggestionsList;
+            test.expect(await suggestionsList.isVisible()).toBeTruthy();
+
+            await searchBoxSuggestionsList.focusOutsideSearchBox();
+            test.expect(await suggestionsList.isVisible()).toBeFalsy();
+          });
+        });
+
+        test.describe('using the mouse', () => {
+          test.describe('when clicking on a suggestion', () => {
+            test('should send a search request and analytics with the suggestion as query', async ({
+              searchBoxSuggestionsList,
+              querySuggest,
+              search,
+            }) => {
+              const mockQuerySuggestions = [
+                'Suggestion 1',
+                'Suggestion 2',
+                'Suggestion 3',
+              ];
+              querySuggest.mockQuerySuggestResponse(mockQuerySuggestions);
+              const querySuggestResponsePromise =
+                querySuggest.waitForQuerySuggestResponse();
+              const searchBoxInput = searchBoxSuggestionsList.searchBoxInput;
+              await searchBoxInput.focus();
+              await querySuggestResponsePromise;
+
+              const searchAnalyticsPromise =
+                searchBoxSuggestionsList.waitForQuerySuggestSearchLegacyAnalytics(
+                  {
+                    queryText: mockQuerySuggestions[0],
+                  }
+                );
+              const searchRequestPromise = search.waitForSearchRequest();
+              const firstSuggestion = searchBoxSuggestionsList.firstSuggestion;
+              await firstSuggestion.click();
+              const requestBody = (await searchRequestPromise).postDataJSON();
+              test.expect(requestBody.q).toBe(mockQuerySuggestions[0]);
+              await searchAnalyticsPromise;
+            });
+          });
+
+          test.describe('when clicking on a recent query', () => {
+            test.skip(
+              useCase.value === useCaseEnum.insight,
+              'Recent queries are not available in Insight use case'
+            );
+            test.use({
+              recentQueries: mockRecentQueries,
+            });
+            test('should send a search request and analytics with the recent query as query', async ({
+              searchBoxSuggestionsList,
+              querySuggest,
+              search,
+            }) => {
+              const querySuggestResponsePromise =
+                querySuggest.waitForQuerySuggestResponse();
+              const searchBoxInput = searchBoxSuggestionsList.searchBoxInput;
+              await searchBoxInput.focus();
+              await querySuggestResponsePromise;
+
+              const searchAnalyticsPromise =
+                searchBoxSuggestionsList.waitForRecentQuerySearchLegacyAnalytics(
+                  {
+                    queryText: mockRecentQueries[0],
+                  }
+                );
+              const searchRequestPromise = search.waitForSearchRequest();
+              const secondSuggestion =
+                searchBoxSuggestionsList.getSuggestionAtIndex(1); // The first item is the clear recent queries button.
+              await secondSuggestion.click();
+              const searchRequestBody = (
+                await searchRequestPromise
+              ).postDataJSON();
+              test.expect(searchRequestBody.q).toBe(mockRecentQueries[0]);
+              test
+                .expect(searchRequestBody?.analytics?.actionCause)
+                .toBe('recentQueriesClick');
+              await searchAnalyticsPromise;
+            });
+          });
+
+          test.describe('when clicking on the clear recent queries button', () => {
+            test.skip(
+              useCase.value === useCaseEnum.insight,
+              'Recent queries are not available in Insight use case'
+            );
+            test.use({
+              recentQueries: mockRecentQueries,
+            });
+            test('should clear recent queries and send analytics', async ({
+              searchBoxSuggestionsList,
+              querySuggest,
+            }) => {
+              const querySuggestResponsePromise =
+                querySuggest.waitForQuerySuggestResponse();
+              const searchBoxInput = searchBoxSuggestionsList.searchBoxInput;
+              await searchBoxInput.focus();
+              await querySuggestResponsePromise;
+
+              const clearRecentQueriesAnalyticsPromise =
+                searchBoxSuggestionsList.waitForClearRecentQueriesAnalytics({});
+              const firstSuggestion =
+                searchBoxSuggestionsList.getSuggestionAtIndex(0); // The first item is the clear recent queries button.
+              await firstSuggestion.click();
+              await clearRecentQueriesAnalyticsPromise;
+              const recentQueriesFromLocalStorage =
+                await querySuggest.getRecentQueriesFromLocalStorage();
+              test.expect(recentQueriesFromLocalStorage).toEqual([]);
+            });
+          });
+        });
+
+        test.describe('when using the keyboard', () => {
+          test.describe('when selecting a suggestion', () => {
+            test('should send a search request and analytics with the suggestion as query', async ({
+              searchBoxSuggestionsList,
+              querySuggest,
+              search,
+            }) => {
+              const mockQuerySuggestions = [
+                'Suggestion 1',
+                'Suggestion 2',
+                'Suggestion 3',
+              ];
+              querySuggest.mockQuerySuggestResponse(mockQuerySuggestions);
+              const querySuggestResponsePromise =
+                querySuggest.waitForQuerySuggestResponse();
+              const searchBoxInput = searchBoxSuggestionsList.searchBoxInput;
+              await searchBoxInput.focus();
+              await querySuggestResponsePromise;
+
+              const searchAnalyticsPromise =
+                searchBoxSuggestionsList.waitForQuerySuggestSearchLegacyAnalytics(
+                  {
+                    queryText: mockQuerySuggestions[1],
+                  }
+                );
+              const searchRequestPromise = search.waitForSearchRequest();
+              // Navigate to the second suggestion using keyboard
+              await searchBoxInput.press('ArrowDown');
+              await searchBoxInput.press('ArrowDown');
+              await searchBoxInput.press('Enter');
+              const requestBody = (await searchRequestPromise).postDataJSON();
+              test.expect(requestBody.q).toBe(mockQuerySuggestions[1]);
+              await searchAnalyticsPromise;
+            });
+          });
+
+          test.describe('when selecting a recent query', () => {
+            test.skip(
+              useCase.value === useCaseEnum.insight,
+              'Recent queries are not available in Insight use case'
+            );
+            test.use({
+              recentQueries: mockRecentQueries,
+            });
+            test('should send a search request and analytics with the recent as query', async ({
+              searchBoxSuggestionsList,
+              querySuggest,
+              search,
+            }) => {
+              const querySuggestResponsePromise =
+                querySuggest.waitForQuerySuggestResponse();
+              const searchBoxInput = searchBoxSuggestionsList.searchBoxInput;
+              await searchBoxInput.focus();
+              await querySuggestResponsePromise;
+
+              const searchAnalyticsPromise =
+                searchBoxSuggestionsList.waitForRecentQuerySearchLegacyAnalytics(
+                  {
+                    queryText: mockRecentQueries[0],
+                  }
+                );
+              const searchRequestPromise = search.waitForSearchRequest();
+              // Navigate to the second suggestion using keyboard
+              await searchBoxInput.press('ArrowDown');
+              await searchBoxInput.press('ArrowDown');
+              await searchBoxInput.press('Enter');
+              const searchRequestBody = (
+                await searchRequestPromise
+              ).postDataJSON();
+              test.expect(searchRequestBody.q).toBe(mockRecentQueries[0]);
+              test
+                .expect(searchRequestBody?.analytics?.actionCause)
+                .toBe('recentQueriesClick');
+              await searchAnalyticsPromise;
+            });
+          });
+
+          test.describe('when selecting the clear recent queries button', () => {
+            test.skip(
+              useCase.value === useCaseEnum.insight,
+              'Recent queries are not available in Insight use case'
+            );
+            test.use({
+              recentQueries: mockRecentQueries,
+            });
+            test('should clear recent queries and send analytics', async ({
+              searchBoxSuggestionsList,
+              querySuggest,
+            }) => {
+              const querySuggestResponsePromise =
+                querySuggest.waitForQuerySuggestResponse();
+              const searchBoxInput = searchBoxSuggestionsList.searchBoxInput;
+              await searchBoxInput.focus();
+              await querySuggestResponsePromise;
+
+              const clearRecentQueriesAnalyticsPromise =
+                searchBoxSuggestionsList.waitForClearRecentQueriesAnalytics({});
+              await searchBoxInput.press('ArrowDown');
+              await searchBoxInput.press('Enter');
+              await clearRecentQueriesAnalyticsPromise;
+              const recentQueriesFromLocalStorage =
+                await querySuggest.getRecentQueriesFromLocalStorage();
+              test.expect(recentQueriesFromLocalStorage).toEqual([]);
+            });
+          });
+        });
+      });
+    });
+  });
+});