@coveo/quantic 3.16.0 → 3.16.1-pre.1a6fc4649f

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

@@ -1,287 +0,0 @@
-/* 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

@@ -1,62 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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]);
-      });
-    });
-  });
-});