@coveo/quantic 3.33.0 → 3.33.1

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

@@ -0,0 +1,58 @@
+import {TimeframeFacetObject} from './pageObject';
+import {useCaseEnum} from '../../../../../../playwright/utils/useCase';
+import {InsightSetupObject} from '../../../../../../playwright/page-object/insightSetupObject';
+import {
+  searchRequestRegex,
+  insightSearchRequestRegex,
+} from '../../../../../../playwright/utils/requests';
+import {BaseFacetObject} from '../../../../../../playwright/page-object/baseFacetObject';
+import {facetBase} from '../../../../../../playwright/fixtures/baseFacetFixture';
+
+const pageUrl = 's/quantic-timeframe-facet';
+
+interface FacetOptions {
+  withDatePicker?: boolean;
+}
+
+type QuanticFacetE2EFixtures = {
+  facet: TimeframeFacetObject;
+  options: Partial<FacetOptions>;
+  insightSetup?: InsightSetupObject;
+};
+
+export const testSearch = facetBase.extend<QuanticFacetE2EFixtures>({
+  options: {withDatePicker: true},
+  baseFacet: async ({page}, use) => {
+    await use(new BaseFacetObject(page, searchRequestRegex));
+  },
+  facet: async ({page, options, configuration, baseFacet, urlHash}, use) => {
+    await page.goto(`${pageUrl}#${urlHash ? urlHash : ''}`);
+    configuration.configure(options);
+    await baseFacet.waitForSearchResponse();
+
+    await use(new TimeframeFacetObject(page));
+  },
+});
+
+export const testInsight = facetBase.extend<QuanticFacetE2EFixtures>({
+  options: {withDatePicker: true},
+  baseFacet: async ({page}, use) => {
+    await use(new BaseFacetObject(page, insightSearchRequestRegex));
+  },
+  insightSetup: async ({page}, use) => {
+    await use(new InsightSetupObject(page));
+  },
+  facet: async (
+    {page, options, baseFacet, configuration, insightSetup},
+    use
+  ) => {
+    await page.goto(pageUrl);
+    configuration.configure({...options, useCase: useCaseEnum.insight});
+    await insightSetup?.waitForInsightInterfaceInitialization();
+    await baseFacet.performSearch();
+    await baseFacet.waitForSearchResponse();
+    await use(new TimeframeFacetObject(page));
+  },
+});
+
+export {expect} from '@playwright/test';

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

@@ -0,0 +1,43 @@
+import type {Locator, Page} from '@playwright/test';
+
+export class TimeframeFacetObject {
+  constructor(public page: Page) {
+    this.page = page;
+  }
+
+  get facet(): Locator {
+    return this.page.locator('c-quantic-timeframe-facet');
+  }
+
+  get facetValue(): Locator {
+    return this.facet.getByTestId('facet__value');
+  }
+
+  get clearSelectionButton(): Locator {
+    return this.facet.getByRole('button', {name: /Clear filter/i});
+  }
+
+  get filterStartInput(): Locator {
+    return this.facet.getByRole('textbox', {name: 'Start'});
+  }
+
+  get filterEndInput(): Locator {
+    return this.facet.getByRole('textbox', {name: 'End'});
+  }
+
+  get filterApplyButton(): Locator {
+    return this.facet.getByRole('button', {name: /apply/i});
+  }
+
+  async fillFilterStartInput(min: string): Promise<void> {
+    await this.filterStartInput.fill(min);
+  }
+
+  async fillFilterEndInput(max: string): Promise<void> {
+    await this.filterEndInput.fill(max);
+  }
+
+  async clickOnFacetValue(index: number): Promise<void> {
+    await this.facetValue.nth(index).click();
+  }
+}

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

@@ -0,0 +1,160 @@
+import {testSearch, testInsight, expect} from './fixture';
+import {
+  useCaseEnum,
+  useCaseTestCases,
+} from '../../../../../../playwright/utils/useCase';
+
+const fixtures = {
+  search: testSearch,
+  insight: testInsight,
+};
+
+const exampleField = 'Date';
+
+useCaseTestCases.forEach((useCase) => {
+  let test = fixtures[useCase.value];
+  test.describe(`quantic timeframe facet ${useCase.label}`, () => {
+    test.describe('when selecting and deselecting a facet value', () => {
+      test('should trigger a new search and log the corresponding UA analytics events', async ({
+        baseFacet,
+        facet,
+      }) => {
+        const selectedIndex = 0;
+        const expectedStartDate = 'now';
+        const expectedEndDate = 'next-1-year';
+        const expectedFacetData = {
+          facetId: exampleField,
+          facetField: exampleField,
+          facetValue: `${expectedStartDate}..${expectedEndDate}`,
+        };
+        const facetSelectUaRequest =
+          baseFacet.waitForFacetSelectUaAnalytics(expectedFacetData);
+        const firstSearchResponsePromise = baseFacet.waitForSearchResponse();
+
+        await facet.clickOnFacetValue(selectedIndex);
+
+        await facetSelectUaRequest;
+        const firstSearchResponse = await firstSearchResponsePromise;
+        const {analytics: analyticsForFacetSelect} =
+          baseFacet.extractDataFromResponse(firstSearchResponse);
+        expect(analyticsForFacetSelect.actionCause).toEqual('facetSelect');
+        if (useCase.value === useCaseEnum.search) {
+          expect(analyticsForFacetSelect.customData).toEqual(
+            expect.objectContaining(expectedFacetData)
+          );
+        }
+
+        const facetDeselectUaRequest =
+          baseFacet.waitForFacetDeselectUaAnalytics(expectedFacetData);
+        const secondSearchResponsePromise = baseFacet.waitForSearchResponse();
+
+        await facet.clickOnFacetValue(selectedIndex);
+
+        await facetDeselectUaRequest;
+        const secondSearchResponse = await secondSearchResponsePromise;
+        const {analytics: analyticsForFacetDeselect} =
+          baseFacet.extractDataFromResponse(secondSearchResponse);
+        expect(analyticsForFacetDeselect.actionCause).toEqual('facetDeselect');
+      });
+    });
+
+    test.describe('when selecting a facet value and clicking the clear filter button', () => {
+      test('should trigger a new search and log the corresponding UA analytics events', async ({
+        baseFacet,
+        facet,
+      }) => {
+        const selectedIndex = 0;
+        const expectedStartDate = 'now';
+        const expectedEndDate = 'next-1-year';
+        const expectedFacetData = {
+          facetId: exampleField,
+          facetField: exampleField,
+          facetValue: `${expectedStartDate}..${expectedEndDate}`,
+        };
+        const facetSelectUaRequest =
+          baseFacet.waitForFacetSelectUaAnalytics(expectedFacetData);
+        let searchResponsePromise = baseFacet.waitForSearchResponse();
+
+        await facet.clickOnFacetValue(selectedIndex);
+
+        await facetSelectUaRequest;
+        let searchResponse = await searchResponsePromise;
+        const {analytics: analyticsForFacetSelect} =
+          baseFacet.extractDataFromResponse(searchResponse);
+        expect(analyticsForFacetSelect.actionCause).toEqual('facetSelect');
+
+        const clearAllUaRequest = baseFacet.waitForFacetClearAllUaAnalytics({
+          facetId: exampleField,
+          facetField: exampleField,
+        });
+        searchResponsePromise = baseFacet.waitForSearchResponse();
+
+        await facet.clearSelectionButton.click();
+
+        await clearAllUaRequest;
+        searchResponse = await searchResponsePromise;
+        const {analytics: analyticsForFacetDeselect} =
+          baseFacet.extractDataFromResponse(searchResponse);
+        expect(analyticsForFacetDeselect.actionCause).toEqual('facetClearAll');
+      });
+    });
+
+    test.describe('when typing in the facet search box input', () => {
+      test('should fetch facet values according to the query typed', async ({
+        baseFacet,
+        facet,
+      }) => {
+        const exampleStart = '2025-01-01';
+        const exampleEnd = '2025-01-02';
+        const expectedFacetData = {
+          facetId: `${exampleField}_input`,
+          facetField: exampleField,
+          facetValue: `${exampleStart.replaceAll('-', '/')}@00:00:00..${exampleEnd.replaceAll('-', '/')}@23:59:59`,
+        };
+
+        const facetSelectUaRequest =
+          baseFacet.waitForFacetSelectUaAnalytics(expectedFacetData);
+        const searchResponsePromise = baseFacet.waitForSearchResponse();
+
+        await facet.fillFilterStartInput(exampleStart);
+        await facet.fillFilterEndInput(exampleEnd);
+        await facet.filterApplyButton.click();
+
+        await facetSelectUaRequest;
+        const searchResponse = await searchResponsePromise;
+        const {analytics: analyticsForFacetSelect} =
+          baseFacet.extractDataFromResponse(searchResponse);
+        expect(analyticsForFacetSelect.actionCause).toEqual('facetSelect');
+        if (useCase.value === useCaseEnum.search) {
+          expect(analyticsForFacetSelect.customData).toEqual(
+            expect.objectContaining(expectedFacetData)
+          );
+        }
+      });
+    });
+
+    if (useCase.value === useCaseEnum.search) {
+      test.describe('with a selected value in the URL', () => {
+        const selectedIndex = 0;
+        const date = new Date();
+        date.setFullYear(date.getFullYear() + 20);
+        const todayDate = date.toISOString().slice(0, 10);
+        date.setDate(date.getDate() - 1);
+        const yesterdayDate = date.toISOString().slice(0, 10);
+        test.use({
+          urlHash: `df-${exampleField}=${yesterdayDate.replaceAll('-', '/')}@00:00:00..${todayDate.replaceAll('-', '/')}@23:59:59`,
+        });
+
+        test('should select the correct facet value', async ({facet}) => {
+          await expect(facet.facetValue.nth(selectedIndex)).toHaveAttribute(
+            'aria-pressed',
+            'true'
+          );
+          expect(facet.facetValue.nth(selectedIndex)).toHaveText(
+            new RegExp(`${yesterdayDate} - ${todayDate}`)
+          );
+        });
+      });
+    }
+  });
+});

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

@@ -0,0 +1,107 @@
+// @ts-ignore
+import {createElement} from 'lwc';
+import QuanticTooltip from '../quanticTooltip';
+
+const exampleItemOne = document.createElement('div');
+exampleItemOne.innerText = 'Item One';
+const exampleValue = 'Example value';
+const exampleAssignedElements = [exampleItemOne];
+
+const selectors = {
+  tooltip: '.tooltip__content',
+};
+
+const exampleOptions = {
+  value: exampleValue,
+};
+
+function createTestComponent(
+  options = exampleOptions,
+  assignedElements = exampleAssignedElements
+) {
+  mockSlotAssignedNodes(assignedElements);
+
+  const element = createElement('c-quantic-tooltip', {
+    is: QuanticTooltip,
+  });
+
+  for (const [key, value] of Object.entries(options)) {
+    element[key] = value;
+  }
+
+  document.body.appendChild(element);
+  return element;
+}
+
+// Helper function to wait until the microtask queue is empty.
+function flushPromises() {
+  // eslint-disable-next-line @lwc/lwc/no-async-operation
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+/**
+ * Mocks the return value of the assignedNodes method.
+ * @param {Array<Element>} assignedElements
+ */
+function mockSlotAssignedNodes(assignedElements) {
+  HTMLSlotElement.prototype.assignedNodes = function () {
+    return assignedElements;
+  };
+}
+
+describe('c-quantic-tooltip', () => {
+  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();
+  }
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should display the tooltip when the method showTooltip is called', async () => {
+    const element = createTestComponent();
+    await flushPromises();
+
+    const tooltip = element.shadowRoot.querySelector(selectors.tooltip);
+
+    expect(tooltip).not.toBeNull();
+    expect(tooltip.classList.contains('tooltip__content--visible')).toBe(false);
+
+    await element.showTooltip();
+
+    expect(tooltip.classList.contains('tooltip__content--visible')).toBe(true);
+  });
+
+  it('should hide the tooltip when the method hideTooltip method is called', async () => {
+    const element = createTestComponent();
+    await flushPromises();
+    await element.showTooltip();
+
+    const tooltip = element.shadowRoot.querySelector(selectors.tooltip);
+
+    expect(tooltip).not.toBeNull();
+    expect(tooltip.classList.contains('tooltip__content--visible')).toBe(true);
+
+    await element.hideTooltip();
+
+    expect(tooltip.classList.contains('tooltip__content--visible')).toBe(false);
+  });
+
+  it('should not display the tooltip when the slot content is empty', async () => {
+    const element = createTestComponent(exampleOptions, []);
+    await flushPromises();
+
+    const tooltip = element.shadowRoot.querySelector(selectors.tooltip);
+
+    expect(tooltip).not.toBeNull();
+    expect(tooltip.classList.contains('tooltip__content--visible')).toBe(false);
+
+    await element.showTooltip();
+
+    expect(tooltip.classList.contains('tooltip__content--visible')).toBe(false);
+  });
+});