@coveo/quantic 3.44.1 → 3.44.2

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

@@ -1,331 +0,0 @@
-/* eslint-disable no-import-assign */
-import QuanticTabBar from '../quanticTabBar';
-// @ts-ignore
-import {createElement} from 'lwc';
-
-const tabSlotWidth = 100;
-const moreButtonWidth = 50;
-let mockContainerWidth = 200;
-let exampleTabSlots = [];
-
-jest.mock('@salesforce/label/c.quantic_More', () => ({default: 'More'}), {
-  virtual: true,
-});
-
-jest.mock('c/quanticUtils', () => ({
-  getAbsoluteWidth: jest.fn((element) => {
-    if (element?.tagName === 'C-QUANTIC-TAB') {
-      return tabSlotWidth;
-    } else if (element?.dataset?.testid === 'tab-bar_more-section') {
-      return moreButtonWidth;
-    }
-    return mockContainerWidth;
-  }),
-}));
-
-const defaultOptions = {
-  lightTheme: false,
-};
-
-const selectors = {
-  tabBarContainer: '.tab-bar_container',
-  moreTabsSection: '[data-testid="tab-bar_more-section"]',
-  moreTabsButton: '[data-testid="tab-bar_more-button"]',
-  tabsDropdown: '.slds-dropdown-trigger',
-  tabItemsInDropdown: '.slds-dropdown__list li button',
-};
-
-const functionMocks = {
-  select: jest.fn(),
-};
-
-function createExampleTabSlots(numberOfSlots) {
-  const tabSlots = [];
-
-  for (let i = 0; i < numberOfSlots; i++) {
-    const exampleSlot = document.createElement('c-quantic-tab');
-    const value = `tab ${i + 1}`;
-    // @ts-ignore
-    exampleSlot.getBoundingClientRect = () => ({right: (i + 1) * tabSlotWidth});
-    // @ts-ignore
-    exampleSlot.label = value;
-    // @ts-ignore
-    exampleSlot.expression = value;
-    // @ts-ignoreF
-    exampleSlot.select = () => {
-      functionMocks.select(i);
-    };
-
-    exampleSlot.dataset.role = 'tab';
-    exampleSlot.dataset.value = value;
-    exampleSlot.dataset.label = value;
-
-    tabSlots.push(exampleSlot);
-  }
-
-  return tabSlots;
-}
-
-/**
- * Mocks the return value of the assignedNodes method.
- * @param {Array<Element>} assignedElements
- */
-function mockSlotAssignedElements(assignedElements) {
-  HTMLSlotElement.prototype.assignedElements = function () {
-    return assignedElements;
-  };
-}
-
-function createTestComponent(options = defaultOptions, assignedElements = []) {
-  mockSlotAssignedElements(assignedElements);
-
-  const element = createElement('c-quantic-tab-bar', {
-    is: QuanticTabBar,
-  });
-  for (const [key, value] of Object.entries(options)) {
-    element[key] = value;
-  }
-
-  document.body.appendChild(element);
-
-  // mocking the positioning of the tab bar container.
-  const tabBarContainer = element.shadowRoot.querySelector(
-    selectors.tabBarContainer
-  );
-  tabBarContainer.getBoundingClientRect = () => ({right: mockContainerWidth});
-
-  window.dispatchEvent(new CustomEvent('resize'));
-  return element;
-}
-
-// Helper function to wait until the microtask queue is empty.
-function flushPromises() {
-  return new Promise((resolve) => setTimeout(resolve, 0));
-}
-
-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();
-}
-
-describe('c-quantic-tab-bar', () => {
-  afterEach(() => {
-    cleanup();
-  });
-
-  describe("when the total tabs width is lower than the container's width", () => {
-    beforeEach(() => {
-      const numberOfTabs = 2;
-      exampleTabSlots = createExampleTabSlots(numberOfTabs);
-    });
-
-    it('should display the tabs without displaying the more tabs section', async () => {
-      const element = createTestComponent(defaultOptions, exampleTabSlots);
-      await flushPromises();
-
-      const moreTabsSection = element.shadowRoot.querySelector(
-        selectors.moreTabsSection
-      );
-      expect(moreTabsSection).not.toBeNull();
-      const moreTabsSectionIsHidden = moreTabsSection.style.display === 'none';
-      expect(moreTabsSectionIsHidden).toBe(true);
-
-      const expectedNumberOfTabsToBeVisible = 2;
-      for (let i = 0; i < expectedNumberOfTabsToBeVisible - 1; i++) {
-        const tabIsVisible = exampleTabSlots[i].style.visibility === 'visible';
-        expect(tabIsVisible).toBe(true);
-      }
-    });
-
-    describe('reactivity to window resize', () => {
-      afterAll(() => {
-        mockContainerWidth = 200;
-      });
-
-      it('should display the more tab section when the window is resized to a smaller width', async () => {
-        const element = createTestComponent(defaultOptions, exampleTabSlots);
-        await flushPromises();
-
-        const moreTabsSection = element.shadowRoot.querySelector(
-          selectors.moreTabsSection
-        );
-        expect(moreTabsSection).not.toBeNull();
-        const moreTabsSectionIsHidden =
-          moreTabsSection.style.display === 'none';
-        expect(moreTabsSectionIsHidden).toBe(true);
-
-        mockContainerWidth = 100;
-        // mocking the positioning of the tab bar container.
-        const tabBarContainer = element.shadowRoot.querySelector(
-          selectors.tabBarContainer
-        );
-        tabBarContainer.getBoundingClientRect = () => ({
-          right: mockContainerWidth,
-        });
-        window.dispatchEvent(new CustomEvent('resize'));
-        await flushPromises();
-
-        const moreTabsSectionIsVisible =
-          moreTabsSection.style.display === 'block';
-        expect(moreTabsSectionIsVisible).toBe(true);
-      });
-
-      it('should hide the more tab section when the window is resized to a bigger width', async () => {
-        const element = createTestComponent(defaultOptions, exampleTabSlots);
-        await flushPromises();
-
-        const moreTabsSection = element.shadowRoot.querySelector(
-          selectors.moreTabsSection
-        );
-        expect(moreTabsSection).not.toBeNull();
-        const moreTabsSectionIsVisible =
-          moreTabsSection.style.display === 'block';
-        expect(moreTabsSectionIsVisible).toBe(true);
-
-        mockContainerWidth = 300;
-        // mocking the positioning of the tab bar container.
-        const tabBarContainer = element.shadowRoot.querySelector(
-          selectors.tabBarContainer
-        );
-        tabBarContainer.getBoundingClientRect = () => ({
-          right: mockContainerWidth,
-        });
-        window.dispatchEvent(new CustomEvent('resize'));
-        await flushPromises();
-
-        const moreTabsSectionIsHidden =
-          moreTabsSection.style.display === 'none';
-        expect(moreTabsSectionIsHidden).toBe(true);
-      });
-    });
-  });
-
-  describe("when the total tabs width is higher than the container's width", () => {
-    beforeEach(() => {
-      const numberOfTabs = 3;
-      exampleTabSlots = createExampleTabSlots(numberOfTabs);
-    });
-
-    it('should only display a sub set of tabs and display the more tabs button', async () => {
-      const element = createTestComponent(defaultOptions, exampleTabSlots);
-      await flushPromises();
-
-      const moreTabsSection = element.shadowRoot.querySelector(
-        selectors.moreTabsSection
-      );
-      expect(moreTabsSection).not.toBeNull();
-      const moreTabsSectionIsVisible =
-        moreTabsSection.style.display === 'block';
-      expect(moreTabsSectionIsVisible).toBe(true);
-
-      const expectedNumberOfTabsToBeVisible = 1;
-      const visibleTabs = exampleTabSlots.filter(
-        (tab) => tab.style.visibility === 'visible'
-      );
-      expect(visibleTabs.length).toBe(expectedNumberOfTabsToBeVisible);
-
-      const expectedNumberOfTabsToBeHidden = 2;
-      const hiddenTabs = exampleTabSlots.filter(
-        (tab) => tab.style.visibility === 'hidden'
-      );
-      expect(hiddenTabs.length).toBe(expectedNumberOfTabsToBeHidden);
-    });
-
-    it('should display the correct tabs in the tabs dropdown list', async () => {
-      const element = createTestComponent(defaultOptions, exampleTabSlots);
-      await flushPromises();
-
-      const tabItemsInDropdown = element.shadowRoot.querySelectorAll(
-        selectors.tabItemsInDropdown
-      );
-
-      const expectedNumberOfTabsToBeVisible = 1;
-      const expectedNumberOfTabsToBeHidden = 2;
-
-      expect(tabItemsInDropdown.length).toBe(expectedNumberOfTabsToBeHidden);
-      const tabsInDropdownLabels = Array.from(tabItemsInDropdown).map(
-        (tab) => tab.textContent
-      );
-      const expectedTabsInDropdownLabels = exampleTabSlots
-        .slice(expectedNumberOfTabsToBeVisible)
-        .map((tab) => tab.label);
-      expect(tabsInDropdownLabels).toEqual(expectedTabsInDropdownLabels);
-    });
-
-    it('should open and close the tabs dropdown list after clicking the more tabs button', async () => {
-      const element = createTestComponent(defaultOptions, exampleTabSlots);
-      await flushPromises();
-
-      const moreTabsButton = element.shadowRoot.querySelector(
-        selectors.moreTabsButton
-      );
-      const tabsDropdown = element.shadowRoot.querySelector(
-        selectors.tabsDropdown
-      );
-      const expectedOpentabsDropdownCSSClass = 'slds-is-open';
-
-      expect(moreTabsButton).not.toBeNull();
-      expect(tabsDropdown).not.toBeNull();
-      expect(tabsDropdown.classList).not.toContain(
-        expectedOpentabsDropdownCSSClass
-      );
-
-      await moreTabsButton.click();
-      expect(tabsDropdown.classList).toContain(
-        expectedOpentabsDropdownCSSClass
-      );
-
-      await moreTabsButton.click();
-      expect(tabsDropdown.classList).not.toContain(
-        expectedOpentabsDropdownCSSClass
-      );
-    });
-
-    it('should call the select method of a tab when selecting it from the tabs dropdown list', async () => {
-      const element = createTestComponent(defaultOptions, exampleTabSlots);
-      await flushPromises();
-
-      const expectedNumberOfTabsToBeVisible = 1;
-      const expectedNumberOfTabsToBeHidden = 2;
-
-      const tabItemsInDropdown = element.shadowRoot.querySelectorAll(
-        selectors.tabItemsInDropdown
-      );
-
-      const exampleIndex = 0;
-      await tabItemsInDropdown[exampleIndex].click();
-      expect(tabItemsInDropdown.length).toBe(expectedNumberOfTabsToBeHidden);
-      expect(functionMocks.select).toHaveBeenCalledTimes(1);
-      expect(functionMocks.select).toHaveBeenCalledWith(
-        expectedNumberOfTabsToBeVisible + exampleIndex
-      );
-    });
-  });
-
-  describe('the lightTheme property', () => {
-    it('should display the component with the light theme styles when lightTheme is true', async () => {
-      const expectedDarkThemeClass = 'slds-theme_shade';
-      const element = createTestComponent({lightTheme: true});
-      await flushPromises();
-
-      const tabBarContainer = element.shadowRoot.querySelector(
-        selectors.tabBarContainer
-      );
-      expect(tabBarContainer.classList).not.toContain(expectedDarkThemeClass);
-    });
-
-    it('should display the component with the dark theme styles when lightTheme is false', async () => {
-      const expectedDarkThemeClass = 'slds-theme_shade';
-      const element = createTestComponent({lightTheme: false});
-      await flushPromises();
-
-      const tabBarContainer = element.shadowRoot.querySelector(
-        selectors.tabBarContainer
-      );
-      expect(tabBarContainer.classList).toContain(expectedDarkThemeClass);
-    });
-  });
-});

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

@@ -1,65 +0,0 @@
-import {TabBarObject} 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 pageUrl = 's/quantic-tab-bar';
-
-interface TabBarOptions {
-  lightTheme: boolean;
-}
-
-type QuanticTabBarE2EFixtures = {
-  tabBar: TabBarObject;
-  search: SearchObject;
-  options: Partial<TabBarOptions>;
-};
-
-type QuanticTabBarE2ESearchFixtures = QuanticTabBarE2EFixtures;
-
-type QuanticTabBarE2EInsightFixtures = QuanticTabBarE2ESearchFixtures & {
-  insightSetup: InsightSetupObject;
-};
-
-export const testSearch = quanticBase.extend<QuanticTabBarE2ESearchFixtures>({
-  options: {},
-  search: async ({page}, use) => {
-    await use(new SearchObject(page, searchRequestRegex));
-  },
-  tabBar: async ({page, options, configuration, search}, use) => {
-    await search.mockSearchWithBaseResponse();
-    await page.goto(pageUrl);
-    configuration.configure(options);
-    await search.waitForSearchResponse();
-
-    await use(new TabBarObject(page));
-  },
-});
-
-export const testInsight = quanticBase.extend<QuanticTabBarE2EInsightFixtures>({
-  options: {},
-  search: async ({page}, use) => {
-    await use(new SearchObject(page, insightSearchRequestRegex));
-  },
-  insightSetup: async ({page}, use) => {
-    await use(new InsightSetupObject(page));
-  },
-  tabBar: async ({page, options, search, configuration, insightSetup}, use) => {
-    await search.mockSearchWithBaseResponse();
-    await page.goto(pageUrl);
-    configuration.configure({...options, useCase: useCaseEnum.insight});
-    await insightSetup.waitForInsightInterfaceInitialization();
-    await Promise.all([
-      search.waitForSearchResponse(),
-      search.performSearch(),
-    ]);
-    await use(new TabBarObject(page));
-  },
-});
-
-export {expect} from '@playwright/test';

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

@@ -1,80 +0,0 @@
-import type {Locator, Page, Request} from '@playwright/test';
-import {isUaSearchEvent} from '../../../../../../playwright/utils/requests';
-
-export class TabBarObject {
-  constructor(public page: Page) {
-    this.page = page;
-  }
-
-  get tabBar(): Locator {
-    return this.page.locator('c-quantic-tab-bar');
-  }
-
-  get allTabs(): Locator {
-    return this.tabBar.locator('c-quantic-tab');
-  }
-
-  get allVisibleTabs(): Locator {
-    return this.tabBar.locator('c-quantic-tab').filter({
-      has: this.page.locator(':visible'),
-    });
-  }
-
-  get activeTab(): Locator {
-    return this.tabBar.locator('c-quantic-tab').filter({
-      has: this.page.locator('.slds-is-active'),
-    });
-  }
-
-  get moreButton(): Locator {
-    return this.tabBar.getByTestId('tab-bar_more-button');
-  }
-
-  get dropdownContainer(): Locator {
-    return this.page.getByTestId('tab-bar_dropdown-container');
-  }
-
-  get allDropdownOptions(): Locator {
-    return this.page.getByTestId('tab-bar_dropdown-item');
-  }
-
-  get tabBarContainer(): Locator {
-    return this.page.locator('.tab-bar_container');
-  }
-
-  get tabBarDropdown(): Locator {
-    return this.tabBar.locator('.tab-bar_dropdown');
-  }
-
-  async clickMoreButton(): Promise<void> {
-    await this.moreButton.click();
-  }
-
-  async clickDropdownOption(optionIndex: number): Promise<void> {
-    await this.allDropdownOptions.nth(optionIndex).click();
-  }
-
-  async clickComponentContainer(): Promise<void> {
-    await this.tabBarContainer.click();
-  }
-
-  async waitForTabUaAnalytics(actionCause): Promise<Request> {
-    const uaRequest = this.page.waitForRequest((request) => {
-      if (isUaSearchEvent(request)) {
-        const requestBody = request.postDataJSON?.();
-        const expectedFields = {
-          actionCause: actionCause,
-        };
-        return Object.keys(expectedFields).every(
-          (key) => requestBody?.[key] === expectedFields[key]
-        );
-      }
-      return false;
-    });
-    return uaRequest;
-  }
-
-  async waitForDropdownOptionSelectUaAnalytics(): Promise<Request> {
-    return this.waitForTabUaAnalytics('interfaceChange');
-  }
-}

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

@@ -1,172 +0,0 @@
-import {testSearch, testInsight, expect} from './fixture';
-import {useCaseTestCases} from '../../../../../../playwright/utils/useCase';
-
-const fixtures = {
-  search: testSearch,
-  insight: testInsight,
-};
-
-const extraSmallViewportWidth = 200;
-const smallViewportWidth = 260;
-const mediumViewportWidth = 300;
-const standardViewportHeight = 1080;
-const expectedNumberOfTabs = 4;
-
-const viewportTests = [
-  {
-    testDescribe: 'when the viewport is resized to a extra small width',
-    viewportWidth: extraSmallViewportWidth,
-    testLabel:
-      'should display only the selected tab and the more button without a label, the other tabs are in the dropdown',
-    expectedNumberOfTabsDisplayed: 1,
-    expectedMoreButtonLabel: '',
-  },
-  {
-    testDescribe: 'when the viewport is resized to a small width',
-    viewportWidth: smallViewportWidth,
-    testLabel:
-      'should display only the selected tab and the more button with a label, the other tabs are in the dropdown',
-    expectedNumberOfTabsDisplayed: 1,
-    expectedMoreButtonLabel: 'More',
-  },
-  {
-    testDescribe: 'when the viewport is resized to a medium width',
-    viewportWidth: mediumViewportWidth,
-    testLabel:
-      'should display only the first two tabs and the more button with a label, the other tabs are in the dropdown',
-    expectedNumberOfTabsDisplayed: 2,
-    expectedMoreButtonLabel: 'More',
-  },
-];
-
-useCaseTestCases.forEach((useCase) => {
-  let test = fixtures[useCase.value];
-  test.describe(`quantic tab bar ${useCase.label}`, () => {
-    test.describe("when the container's width can fit all the tabs", () => {
-      test('should display all the tabs without displaying the dropdown list', async ({
-        tabBar,
-      }) => {
-        const tabBarElement = tabBar.tabBar;
-        await tabBarElement.scrollIntoViewIfNeeded();
-        const tabs = tabBar.allTabs;
-        expect(tabs).not.toBeNull();
-        expect(await tabs.count()).toEqual(expectedNumberOfTabs);
-
-        const isMoreDropdownVisible =
-          await tabBar.dropdownContainer.isVisible();
-        expect(isMoreDropdownVisible).toBe(false);
-      });
-    });
-
-    // Test different behaviors based on the viewport width.
-    viewportTests.forEach(
-      ({
-        testDescribe,
-        viewportWidth,
-        testLabel,
-        expectedNumberOfTabsDisplayed,
-        expectedMoreButtonLabel,
-      }) => {
-        test.describe(testDescribe, () => {
-          test.use({
-            viewport: {width: viewportWidth, height: standardViewportHeight},
-          });
-          test(testLabel, async ({tabBar}) => {
-            const dropdownContainer = tabBar.dropdownContainer;
-            await dropdownContainer.scrollIntoViewIfNeeded();
-
-            const displayedTabs = tabBar.allVisibleTabs;
-            expect(displayedTabs).not.toBeNull();
-            expect(await displayedTabs.count()).toEqual(
-              expectedNumberOfTabsDisplayed
-            );
-
-            expect(await dropdownContainer.isVisible()).toBe(true);
-
-            await tabBar.clickMoreButton();
-
-            const tabsInDropdown = tabBar.allDropdownOptions;
-            expect(tabsInDropdown).not.toBeNull();
-            expect(await tabsInDropdown.count()).toEqual(
-              expectedNumberOfTabs - expectedNumberOfTabsDisplayed
-            );
-
-            expect(await tabBar.moreButton.textContent()).toEqual(
-              expectedMoreButtonLabel
-            );
-          });
-        });
-      }
-    );
-
-    test.describe('when the more button is clicked', () => {
-      // Using medium width (300px), 2 tabs should be displayed and 2 should be in the dropdown.
-      test.use({
-        viewport: {width: mediumViewportWidth, height: standardViewportHeight},
-      });
-
-      test.describe('when a tab is selected from the dropdown list', () => {
-        test('should make the tab active, trigger a new search and send the correct analytics event', async ({
-          tabBar,
-          search,
-        }) => {
-          const expectedSelectedTabLabel = 'Tab 4';
-          const expectedNumberOfDropdownOptions = 2;
-          const expectedActionCause = 'interfaceChange';
-          const expectedTabValue = 'Tab 4';
-
-          const searchResponsePromise = search.waitForSearchResponse();
-          const uaRequestPromise =
-            tabBar.waitForDropdownOptionSelectUaAnalytics();
-
-          await tabBar.clickMoreButton();
-          const dropdownOptionsCount = await tabBar.allDropdownOptions.count();
-          expect(dropdownOptionsCount).not.toBeNull();
-          expect(dropdownOptionsCount).toEqual(expectedNumberOfDropdownOptions);
-          await tabBar.clickDropdownOption(1);
-
-          const activeTab = await tabBar.activeTab.textContent();
-
-          expect(activeTab).not.toBeNull();
-          expect(activeTab).toEqual(expectedSelectedTabLabel);
-
-          const searchResponse = await searchResponsePromise;
-          const searchResponseBody = searchResponse.request().postDataJSON();
-
-          expect(searchResponseBody).toEqual(
-            expect.objectContaining({
-              analytics: expect.objectContaining({
-                actionCause: expectedActionCause,
-              }),
-              tab: expectedTabValue,
-            })
-          );
-
-          const uaRequest = await uaRequestPromise;
-          const requestBody = uaRequest.postDataJSON?.();
-
-          expect(requestBody).not.toBeNull();
-          expect(requestBody.actionCause).toEqual(expectedActionCause);
-          expect(requestBody.customData.interfaceChangeTo).toEqual(
-            expectedTabValue
-          );
-        });
-      });
-    });
-
-    test.describe('when the dropdown loses focus', () => {
-      test.use({
-        viewport: {width: mediumViewportWidth, height: standardViewportHeight},
-      });
-      test('should automatically close the dropdown list', async ({tabBar}) => {
-        await tabBar.clickMoreButton();
-
-        expect(await tabBar.tabBarDropdown.isVisible()).toBe(true);
-
-        await tabBar.clickComponentContainer();
-
-        expect(await tabBar.tabBarDropdown.isVisible()).toBe(false);
-      });
-    });
-  });
-});