@coveo/quantic 3.11.0 → 3.12.0

package/force-app/main/default/lwc/quanticPager/e2e/{pagerObject.ts → pageObject.ts}

@@ -1,4 +1,4 @@
-import {Locator, Page, Request} from '@playwright/test';
+import type {Locator, Page, Request} from '@playwright/test';
 import {isUaCustomEvent} from '../../../../../../playwright/utils/requests';
 
 export class PagerObject {

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

@@ -0,0 +1,287 @@
+/* eslint-disable jest/no-conditional-expect */
+/* eslint-disable no-import-assign */
+import QuanticTab from '../quanticTab';
+// @ts-ignore
+import {createElement} from 'lwc';
+import * as mockHeadlessLoader from 'c/quanticHeadlessLoader';
+
+jest.mock('c/quanticHeadlessLoader');
+
+let isInitialized = false;
+
+const exampleEngine = {
+  id: 'exampleEngineId',
+};
+
+const defaultOptions = {
+  engineId: exampleEngine.id,
+  label: 'Example Tab',
+  expression: 'exampleExpression',
+  isActive: false,
+};
+
+const selectors = {
+  initializationError: 'c-quantic-component-error',
+  tabButton: 'button',
+};
+
+const defaultSearchStatusState = {
+  hasResults: true,
+  firstSearchExecuted: true,
+};
+let searchStatusState = defaultSearchStatusState;
+
+const defaultTabState = {
+  isActive: false,
+};
+let tabState = defaultTabState;
+
+const functionsMocks = {
+  buildTab: jest.fn(() => ({
+    state: tabState,
+    subscribe: functionsMocks.tabStateSubscriber,
+    select: functionsMocks.select,
+  })),
+  buildSearchStatus: jest.fn(() => ({
+    state: searchStatusState,
+    subscribe: functionsMocks.searchStatusStateSubscriber,
+  })),
+  tabStateSubscriber: jest.fn((cb) => {
+    cb();
+    return functionsMocks.tabStateUnsubscriber;
+  }),
+  searchStatusStateSubscriber: jest.fn((cb) => {
+    cb();
+    return functionsMocks.searchStatusStateUnsubscriber;
+  }),
+  tabStateUnsubscriber: jest.fn(),
+  searchStatusStateUnsubscriber: jest.fn(),
+  exampleTabRendered: jest.fn(),
+  select: jest.fn(),
+};
+
+const expectedActiveTabClass = 'slds-is-active';
+
+function createTestComponent(options = defaultOptions) {
+  const element = createElement('c-quantic-tab', {
+    is: QuanticTab,
+  });
+  for (const [key, value] of Object.entries(options)) {
+    element[key] = value;
+  }
+  document.body.appendChild(element);
+  return element;
+}
+
+function prepareHeadlessState() {
+  // @ts-ignore
+  mockHeadlessLoader.getHeadlessBundle = () => {
+    return {
+      buildTab: functionsMocks.buildTab,
+      buildSearchStatus: functionsMocks.buildSearchStatus,
+    };
+  };
+}
+
+// Helper function to wait until the microtask queue is empty.
+function flushPromises() {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+function mockSuccessfulHeadlessInitialization() {
+  // @ts-ignore
+  mockHeadlessLoader.initializeWithHeadless = (element, _, initialize) => {
+    if (element instanceof QuanticTab && !isInitialized) {
+      isInitialized = true;
+      initialize(exampleEngine);
+    }
+  };
+}
+
+function mockErroneousHeadlessInitialization() {
+  // @ts-ignore
+  mockHeadlessLoader.initializeWithHeadless = (element) => {
+    if (element instanceof QuanticTab) {
+      element.setInitializationError();
+    }
+  };
+}
+
+function setupEventListeners(element) {
+  element.addEventListener(
+    'quantic__tabrendered',
+    functionsMocks.exampleTabRendered
+  );
+}
+
+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-tab', () => {
+  beforeEach(() => {
+    mockSuccessfulHeadlessInitialization();
+    prepareHeadlessState();
+  });
+
+  afterEach(() => {
+    tabState = defaultTabState;
+    searchStatusState = defaultSearchStatusState;
+    cleanup();
+  });
+
+  describe('component initialization', () => {
+    it('should build the tab and search status controllers with the proper parameters', async () => {
+      createTestComponent();
+      await flushPromises();
+
+      expect(functionsMocks.buildTab).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildTab).toHaveBeenCalledWith(exampleEngine, {
+        options: {
+          expression: defaultOptions.expression,
+          id: defaultOptions.label,
+        },
+        initialState: {
+          isActive: defaultOptions.isActive,
+        },
+      });
+      expect(functionsMocks.buildSearchStatus).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildSearchStatus).toHaveBeenCalledWith(
+        exampleEngine
+      );
+    });
+
+    it('should subscribe to the headless tab and search status state changes', async () => {
+      createTestComponent();
+      await flushPromises();
+
+      expect(functionsMocks.tabStateSubscriber).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.searchStatusStateSubscriber).toHaveBeenCalledTimes(
+        1
+      );
+    });
+
+    it('should dispatch the quantic__tabrendered event', async () => {
+      const element = createTestComponent();
+      setupEventListeners(element);
+      await flushPromises();
+
+      expect(functionsMocks.exampleTabRendered).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('when an initialization error occurs', () => {
+    beforeEach(() => {
+      mockErroneousHeadlessInitialization();
+    });
+
+    afterAll(() => {
+      mockSuccessfulHeadlessInitialization();
+    });
+
+    it('should display the initialization error component', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const initializationError = element.shadowRoot.querySelector(
+        selectors.initializationError
+      );
+
+      expect(initializationError).not.toBeNull();
+    });
+  });
+
+  describe('component behavior during the initial search', () => {
+    describe('when the initial search is not yet executed', () => {
+      beforeAll(() => {
+        searchStatusState = {...searchStatusState, firstSearchExecuted: false};
+      });
+
+      it('should not show the tab before the initial search completes', async () => {
+        const element = createTestComponent();
+        await flushPromises();
+
+        const tab = element.shadowRoot.querySelector(selectors.tabButton);
+
+        expect(tab).toBeNull();
+      });
+    });
+
+    describe('when the initial search is executed', () => {
+      beforeAll(() => {
+        searchStatusState = {...searchStatusState, firstSearchExecuted: true};
+      });
+
+      it('should show the tab after the initial search completes', async () => {
+        const element = createTestComponent();
+        await flushPromises();
+
+        const tab = element.shadowRoot.querySelector(selectors.tabButton);
+
+        expect(tab).not.toBeNull();
+        expect(tab.textContent).toBe(defaultOptions.label);
+        expect(tab.title).toEqual(defaultOptions.label);
+        expect(tab.getAttribute('aria-pressed')).toBe('false');
+        expect(tab.getAttribute('aria-label')).toBe(defaultOptions.label);
+      });
+    });
+  });
+
+  describe('when the tab is not active', () => {
+    beforeAll(() => {
+      tabState = {...tabState, isActive: false};
+    });
+
+    it('should not display the tab as an active tab', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const tab = element.shadowRoot.querySelector(selectors.tabButton);
+      expect(tab).not.toBeNull();
+
+      expect(tab.classList).not.toContain(expectedActiveTabClass);
+      expect(element.isActive).toBe(false);
+    });
+  });
+
+  describe('when the tab is active', () => {
+    beforeAll(() => {
+      tabState = {...tabState, isActive: true};
+    });
+
+    it('should display the tab as an active tab', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const tab = element.shadowRoot.querySelector(selectors.tabButton);
+
+      expect(tab.classList).toContain(expectedActiveTabClass);
+      expect(element.isActive).toBe(true);
+    });
+  });
+
+  describe('when the tab is clicked or the select method is called', () => {
+    it('should call the select method of the tab controller', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const tab = element.shadowRoot.querySelector(selectors.tabButton);
+      expect(tab).not.toBeNull();
+
+      await tab.click();
+      await flushPromises();
+
+      expect(functionsMocks.select).toHaveBeenCalledTimes(1);
+
+      await element.select();
+      await flushPromises();
+
+      expect(functionsMocks.select).toHaveBeenCalledTimes(2);
+    });
+  });
+});

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

@@ -0,0 +1,62 @@
+import {TabObject} from './pageObject';
+import {SearchObject} from '../../../../../../playwright/page-object/searchObject';
+import {quanticBase} from '../../../../../../playwright/fixtures/baseFixture';
+import {useCaseEnum} from '../../../../../../playwright/utils/useCase';
+import {InsightSetupObject} from '../../../../../../playwright/page-object/insightSetupObject';
+import {
+  searchRequestRegex,
+  insightSearchRequestRegex,
+} from '../../../../../../playwright/utils/requests';
+
+const pageUrl = 's/quantic-tab';
+
+interface TabOptions {}
+
+type QuanticTabE2EFixtures = {
+  tab: TabObject;
+  search: SearchObject;
+  options: Partial<TabOptions>;
+};
+
+type QuanticTabE2ESearchFixtures = QuanticTabE2EFixtures & {
+  urlHash: string;
+};
+
+type QuanticTabE2EInsightFixtures = QuanticTabE2EFixtures & {
+  insightSetup: InsightSetupObject;
+};
+
+export const testSearch = quanticBase.extend<QuanticTabE2ESearchFixtures>({
+  options: {},
+  urlHash: '',
+  search: async ({page}, use) => {
+    await use(new SearchObject(page, searchRequestRegex));
+  },
+  tab: async ({page, options, configuration, search, urlHash}, use) => {
+    await page.goto(urlHash ? `${pageUrl}#${urlHash}` : pageUrl);
+    configuration.configure(options);
+    await search.waitForSearchResponse();
+
+    await use(new TabObject(page));
+  },
+});
+
+export const testInsight = quanticBase.extend<QuanticTabE2EInsightFixtures>({
+  options: {},
+  search: async ({page}, use) => {
+    await use(new SearchObject(page, insightSearchRequestRegex));
+  },
+  insightSetup: async ({page}, use) => {
+    await use(new InsightSetupObject(page));
+  },
+  tab: async ({page, options, search, configuration, insightSetup}, use) => {
+    await page.goto(pageUrl);
+    configuration.configure({...options, useCase: useCaseEnum.insight});
+    await insightSetup.waitForInsightInterfaceInitialization();
+    await search.performSearch();
+    await search.waitForSearchResponse();
+    await use(new TabObject(page));
+  },
+});
+
+export {expect} from '@playwright/test';

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

@@ -0,0 +1,67 @@
+import type {Locator, Page, Request, Response} from '@playwright/test';
+import {isUaSearchEvent} from '../../../../../../playwright/utils/requests';
+
+export class TabObject {
+  constructor(public page: Page) {
+    this.page = page;
+  }
+
+  get tab(): Locator {
+    return this.page.locator('c-quantic-tab');
+  }
+
+  tabButton(tabLabel): Locator {
+    return this.tab.getByRole('button', {name: new RegExp(`^${tabLabel}$`)});
+  }
+
+  get activeTabLabel(): Promise<string | null> {
+    return this.tab.locator('button.slds-is-active').textContent();
+  }
+
+  async clickTabButton(tabLabel: string): Promise<void> {
+    await this.tabButton(tabLabel).click();
+  }
+
+  async waitForTabSearchUaAnalytics(
+    actionCause,
+    customChecker?: Function
+  ): Promise<Request> {
+    const uaRequest = this.page.waitForRequest((request) => {
+      if (isUaSearchEvent(request)) {
+        const requestBody = request.postDataJSON?.();
+        const {customData} = requestBody;
+
+        const expectedFields = {
+          actionCause: actionCause,
+          originContext: 'Search',
+        };
+        const matchesExpectedFields = Object.keys(expectedFields).every(
+          (key) => requestBody?.[key] === expectedFields[key]
+        );
+
+        return (
+          matchesExpectedFields &&
+          (customChecker ? customChecker(customData) : true)
+        );
+      }
+      return false;
+    });
+    return uaRequest;
+  }
+
+  async waitForTabSelectUaAnalytics(expectedFields: object): Promise<Request> {
+    return this.waitForTabSearchUaAnalytics(
+      'interfaceChange',
+      (customData: object) => {
+        return Object.keys(expectedFields).every(
+          (key) => customData?.[key] === expectedFields[key]
+        );
+      }
+    );
+  }
+
+  extractActionCauseFromSearchResponse(response: Response) {
+    const {analytics} = response.request().postDataJSON();
+    return analytics.actionCause;
+  }
+}

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

@@ -0,0 +1,77 @@
+import {testSearch, testInsight, expect} from './fixture';
+import {
+  useCaseEnum,
+  useCaseTestCases,
+} from '../../../../../../playwright/utils/useCase';
+
+const fixtures = {
+  search: testSearch as typeof testSearch,
+  insight: testInsight as typeof testInsight,
+};
+
+const expectedActionCause = 'interfaceChange';
+const exampleTabs = ['All', 'Case', 'Knowledge'];
+
+useCaseTestCases.forEach((useCase) => {
+  let test;
+  if (useCase.value === useCaseEnum.search) {
+    test = fixtures[useCase.value] as typeof testSearch;
+  } else {
+    test = fixtures[useCase.value] as typeof testInsight;
+  }
+
+  test.describe(`quantic tab ${useCase.label}`, () => {
+    test.describe('when clicking on a tab', () => {
+      test('should trigger a new search and send the correct UA analytics event', async ({
+        tab,
+        search,
+      }) => {
+        const selectedTabIndex = 0;
+        const searchResponsePromise = search.waitForSearchResponse();
+        const uaRequestPromise = tab.waitForTabSelectUaAnalytics({
+          interfaceChangeTo: exampleTabs[selectedTabIndex],
+        });
+        await tab.clickTabButton(exampleTabs[selectedTabIndex]);
+
+        const searchResponse = await searchResponsePromise;
+        await uaRequestPromise;
+
+        const actionCause =
+          tab.extractActionCauseFromSearchResponse(searchResponse);
+        expect(actionCause).toEqual(expectedActionCause);
+      });
+    });
+
+    if (useCase.value === useCaseEnum.search) {
+      test.describe('when loading selected tab from URL', () => {
+        const expectedTab = exampleTabs[2];
+        test.use({
+          urlHash: `tab=${expectedTab}`,
+        });
+
+        test('should make the right tab active', async ({tab}) => {
+          expect(await tab.activeTabLabel).toBe(expectedTab);
+        });
+      });
+    }
+
+    test.describe('when testing accessibility', () => {
+      test('should be accessible to keyboard', async ({tab, page}) => {
+        await tab.clickTabButton(exampleTabs[0]);
+
+        let activeTabLabel = await tab.activeTabLabel;
+        expect(activeTabLabel).toEqual(exampleTabs[0]);
+
+        await page.keyboard.press('Tab');
+        await page.keyboard.press('Enter');
+        activeTabLabel = await tab.activeTabLabel;
+        expect(activeTabLabel).toEqual(exampleTabs[1]);
+
+        await page.keyboard.press('Shift+Tab');
+        await page.keyboard.press('Space');
+        activeTabLabel = await tab.activeTabLabel;
+        expect(activeTabLabel).toEqual(exampleTabs[0]);
+      });
+    });
+  });
+});

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

@@ -7,7 +7,7 @@
     <button
       class={tabClass}
       onclick={select}
-      aria-label={arialLabelText}
+      aria-label={label}
       aria-pressed={isPressed}
       title={label}
     >