@coveo/quantic 3.33.0 → 3.33.1

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

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

@@ -0,0 +1,61 @@
+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 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 page.goto(pageUrl);
+    configuration.configure({...options, useCase: useCaseEnum.insight});
+    await insightSetup.waitForInsightInterfaceInitialization();
+    await search.performSearch();
+    await search.waitForSearchResponse();
+    await use(new TabBarObject(page));
+  },
+});
+
+export {expect} from '@playwright/test';

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

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

@@ -0,0 +1,171 @@
+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();
+
+          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 tabBar.waitForDropdownOptionSelectUaAnalytics();
+          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);
+      });
+    });
+  });
+});