@coveo/quantic 3.33.0 → 3.33.1

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

@@ -0,0 +1,54 @@
+import type {Locator, Page} from '@playwright/test';
+
+export class StandaloneSearchBoxObject {
+  constructor(public page: Page) {
+    this.page = page;
+  }
+  get component(): Locator {
+    return this.page.locator('c-quantic-standalone-search-box');
+  }
+
+  get searchBoxInput(): Locator {
+    return this.component.getByTestId('quantic-search-box-input');
+  }
+
+  get searchButton(): Locator {
+    return this.searchBoxInput.getByTestId('search-box-submit-button');
+  }
+
+  get searchIcon(): Locator {
+    return this.component.locator(
+      'c-quantic-search-box-input [data-testid="search-box-search-icon"]'
+    );
+  }
+
+  get clearButton(): Locator {
+    return this.component.locator(
+      'c-quantic-search-box-input [data-testid="search-box-clear-button"]'
+    );
+  }
+
+  get suggestionsList(): Locator {
+    return this.component.getByTestId('suggestion-list');
+  }
+
+  get suggestions(): Locator {
+    return this.component.getByTestId('suggestions-option');
+  }
+
+  getSearchInputElement(isTextarea: boolean): Locator {
+    return isTextarea
+      ? this.searchBoxInput.getByTestId('search-box-textarea')
+      : this.searchBoxInput.getByTestId('search-box-input');
+  }
+
+  async getLocalStorageData() {
+    await this.page.getByTestId('localstorage-input').locator('input').fill('');
+    await this.page.getByTestId('localstorage-get-button').click();
+    const content = await this.page
+      .getByTestId('localstorage-output')
+      .textContent();
+
+    return content ? JSON.parse(content) : null;
+  }
+}

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

@@ -0,0 +1,72 @@
+import {testStandaloneSearchBox as test, expect} from './fixture';
+
+const variants = [
+  {variantName: 'default', isTextArea: false},
+  {variantName: 'expandable', isTextArea: true},
+];
+
+test.describe('quantic-standalone-search-box', () => {
+  variants.forEach(({variantName, isTextArea}) => {
+    test.describe(`variant ${variantName} with default options`, () => {
+      test.use({
+        options: {
+          textarea: isTextArea,
+        },
+      });
+
+      test('should display suggestions and redirect on click', async ({
+        searchBox,
+        page,
+        querySuggest,
+      }) => {
+        querySuggest.mockQuerySuggestResponse(['test', 'test 2']);
+
+        const searchInputElement = searchBox.getSearchInputElement(isTextArea);
+        await expect(searchInputElement).toBeVisible();
+        await expect(searchBox.searchButton).toBeVisible();
+        await expect(searchInputElement).toHaveAttribute(
+          'placeholder',
+          'Search'
+        );
+        await expect(searchBox.searchBoxInput).toHaveAttribute(
+          'is-initialized',
+          'true'
+        );
+        await searchInputElement.focus();
+
+        await expect(searchBox.suggestionsList).toBeVisible();
+        await expect((await searchBox.suggestions.all()).length).toBe(2);
+
+        await searchBox.suggestions.first().click();
+        await expect(page).toHaveURL(/\/global-search\/%40uri#q=test/);
+
+        await page.goBack();
+        const storage = await searchBox.getLocalStorageData();
+        await expect(storage).toMatchObject({
+          analytics: {
+            cause: 'omniboxFromLink',
+            metadata: {suggestions: ['test', 'test 2']},
+          },
+          value: 'test',
+        });
+      });
+
+      test('should redirect on submitting query', async ({searchBox, page}) => {
+        const query = 'another query';
+        await searchBox.getSearchInputElement(isTextArea).fill(query);
+        await expect(searchBox.clearButton).toBeVisible();
+        await searchBox.searchButton.click();
+        await expect(page).toHaveURL(
+          new RegExp(`/global-search/%40uri#q=${encodeURIComponent(query)}`)
+        );
+
+        await page.goBack();
+        const storage = await searchBox.getLocalStorageData();
+        await expect(storage).toMatchObject({
+          analytics: {cause: 'searchFromLink'},
+          value: query,
+        });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,222 @@
+// @ts-ignore
+import {createElement} from 'lwc';
+import QuanticStatefulButton from '../quanticStatefulButton';
+
+const functionsMocks = {
+  exampleHandleSelect: jest.fn(),
+  exampleHandleDeselect: jest.fn(),
+};
+
+const exampleLabel = 'Example label';
+const exampleIcon = 'utility:clear';
+const exampleTooltip = 'Example tooltip';
+
+const selectors = {
+  statefulButton: '.stateful-button',
+  icon: '.stateful-button__container lightning-icon',
+  tooltip: '.stateful-button__container > c-quantic-tooltip',
+  tooltipContent:
+    '.stateful-button__container > c-quantic-tooltip > div[slot="content"]',
+};
+
+function setupEventListeners(element) {
+  element.addEventListener(
+    'quantic__select',
+    functionsMocks.exampleHandleSelect
+  );
+  element.addEventListener(
+    'quantic__deselect',
+    functionsMocks.exampleHandleDeselect
+  );
+}
+
+const exampleOptions = {
+  label: exampleLabel,
+  iconName: exampleIcon,
+  tooltip: exampleTooltip,
+  selected: false,
+};
+
+function createTestComponent(options = exampleOptions) {
+  const element = createElement('c-quantic-stateful-button', {
+    is: QuanticStatefulButton,
+  });
+
+  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));
+}
+
+describe('c-quantic-stateful-button', () => {
+  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();
+  });
+
+  describe('when the stateful button is in the selected state', () => {
+    it('should properly display the selected stateful button', async () => {
+      const element = createTestComponent({...exampleOptions, selected: true});
+      await flushPromises();
+
+      const button = element.shadowRoot.querySelector(selectors.statefulButton);
+      const icon = element.shadowRoot.querySelector(selectors.icon);
+      const tooltip = element.shadowRoot.querySelector(selectors.tooltip);
+      const tooltipContent = element.shadowRoot.querySelector(
+        selectors.tooltipContent
+      );
+
+      expect(button).not.toBeNull();
+      expect(icon).not.toBeNull();
+      expect(tooltip).not.toBeNull();
+      expect(tooltipContent).not.toBeNull();
+      expect(button.ariaLabel).toBe(exampleTooltip);
+      expect(button.textContent).toBe(exampleLabel);
+      expect(icon.iconName).toBe(exampleIcon);
+      expect(button.classList.contains('stateful-button--selected')).toBe(true);
+      expect(button.classList.contains('stateful-button--unselected')).toBe(
+        false
+      );
+      expect(
+        button.classList.contains('stateful-button--without-borders')
+      ).toBe(false);
+      expect(tooltipContent.textContent).toBe(exampleTooltip);
+    });
+
+    describe('when the selected stateful button is clicked', () => {
+      it('should dispatch the "unselect" event', async () => {
+        const element = createTestComponent({
+          ...exampleOptions,
+          selected: true,
+        });
+        setupEventListeners(element);
+        await flushPromises();
+
+        const button = element.shadowRoot.querySelector(
+          selectors.statefulButton
+        );
+        await button.click();
+
+        expect(functionsMocks.exampleHandleDeselect).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe('when the withoutBorders property is set to true', () => {
+      it('should display the button without border', async () => {
+        const element = createTestComponent({
+          ...exampleOptions,
+          selected: true,
+          withoutBorders: true,
+        });
+        setupEventListeners(element);
+        await flushPromises();
+
+        const button = element.shadowRoot.querySelector(
+          selectors.statefulButton
+        );
+
+        expect(
+          button.classList.contains('stateful-button--without-borders')
+        ).toBe(true);
+      });
+    });
+
+    describe('when a vlue of the selectedStateColor property is provided', () => {
+      it('should display the button with the correct colors', async () => {
+        const exampleColor = '#FFF';
+        const element = createTestComponent({
+          ...exampleOptions,
+          selectedStateColor: exampleColor,
+        });
+        setupEventListeners(element);
+        await flushPromises();
+
+        expect(element.shadowRoot.host?.style?._values).toEqual({
+          '--selected-state-color': exampleColor,
+        });
+      });
+    });
+  });
+
+  describe('when the stateful button is in the unselected state', () => {
+    it('should properly display the unselected stateful button', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const button = element.shadowRoot.querySelector(selectors.statefulButton);
+      const icon = element.shadowRoot.querySelector(selectors.icon);
+      const tooltip = element.shadowRoot.querySelector(selectors.tooltip);
+      const tooltipContent = element.shadowRoot.querySelector(
+        selectors.tooltipContent
+      );
+
+      expect(button).not.toBeNull();
+      expect(icon).not.toBeNull();
+      expect(tooltip).not.toBeNull();
+      expect(tooltipContent).not.toBeNull();
+      expect(button.ariaLabel).toBe(exampleTooltip);
+      expect(button.textContent).toBe(exampleLabel);
+      expect(icon.iconName).toBe(exampleIcon);
+      expect(button.classList.contains('stateful-button--selected')).toBe(
+        false
+      );
+      expect(button.classList.contains('stateful-button--unselected')).toBe(
+        true
+      );
+      expect(
+        button.classList.contains('stateful-button--without-borders')
+      ).toBe(false);
+      expect(tooltipContent.textContent).toBe(exampleTooltip);
+    });
+
+    describe('when the unselected stateful button is clicked', () => {
+      it('should dispatch the "select" event', async () => {
+        const element = createTestComponent();
+        setupEventListeners(element);
+        await flushPromises();
+
+        const button = element.shadowRoot.querySelector(
+          selectors.statefulButton
+        );
+        await button.click();
+
+        expect(functionsMocks.exampleHandleSelect).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe('when the withoutBorders property is set to true', () => {
+      it('should display the button without border', async () => {
+        const element = createTestComponent({
+          ...exampleOptions,
+          selected: true,
+          withoutBorders: true,
+        });
+        setupEventListeners(element);
+        await flushPromises();
+
+        const button = element.shadowRoot.querySelector(
+          selectors.statefulButton
+        );
+
+        expect(
+          button.classList.contains('stateful-button--without-borders')
+        ).toBe(true);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,244 @@
+jest.mock('c/quanticHeadlessLoader');
+jest.mock('c/quanticUtils');
+
+import QuanticSummary from 'c/quanticSummary';
+import {buildCreateTestComponent, cleanup, flushPromises} from 'c/testUtils';
+import * as quanticHeadlessLoader from 'c/quanticHeadlessLoader';
+import * as quanticUtils from 'c/quanticUtils';
+
+const headlessLoaderMock = jest.mocked(quanticHeadlessLoader);
+const engineMock = {
+  id: 'mockEngine',
+  dispatch: jest.fn(),
+};
+
+const functionsMocks = {
+  subscribe: jest.fn((cb) => {
+    cb();
+    return functionsMocks.unsubscribe;
+  }),
+  unsubscribe: jest.fn(() => {}),
+};
+
+const summaryControllerMock = {
+  subscribe: functionsMocks.subscribe,
+};
+
+const headlessMock = {
+  buildQuerySummary: jest.fn().mockReturnValue(summaryControllerMock),
+};
+headlessLoaderMock.getHeadlessBundle.mockReturnValue(headlessMock);
+headlessLoaderMock.initializeWithHeadless.mockImplementation(
+  async (element, _, initialize) => {
+    if (element instanceof QuanticSummary) {
+      initialize(engineMock);
+    }
+  }
+);
+
+const quanticUtilsMock = jest.mocked(quanticUtils);
+quanticUtilsMock.AriaLiveRegion.mockReturnValue({
+  dispatchMessage: jest.fn(),
+  registerRegion: undefined,
+});
+quanticUtilsMock.I18nUtils.escapeHTML.mockImplementation((str) => str);
+quanticUtilsMock.I18nUtils.getTextWithDecorator.mockImplementation(
+  (str) => str
+);
+quanticUtilsMock.I18nUtils.format.mockImplementation((str, ...args) =>
+  args.join(' ')
+);
+
+const selectors = {
+  summary: 'lightning-formatted-rich-text',
+  componentError: 'c-quantic-component-error',
+};
+
+const createTestComponent = buildCreateTestComponent(
+  QuanticSummary,
+  'c-quantic-summary',
+  {engineId: engineMock.id}
+);
+
+describe('c-quantic-summary', () => {
+  beforeEach(() => {
+    summaryControllerMock.state = {
+      hasResults: true,
+      hasQuery: false,
+      firstResult: 1,
+      lastResult: 10,
+      total: 100,
+      query: '',
+    };
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should build headless controller and subscribe on initialization', async () => {
+    createTestComponent();
+    await flushPromises();
+
+    expect(headlessLoaderMock.getHeadlessBundle).toHaveBeenCalledWith(
+      engineMock.id
+    );
+    expect(headlessLoaderMock.initializeWithHeadless).toHaveBeenCalledWith(
+      expect.any(QuanticSummary),
+      engineMock.id,
+      expect.any(Function)
+    );
+    expect(headlessMock.buildQuerySummary).toHaveBeenCalledWith(engineMock);
+    expect(summaryControllerMock.subscribe).toHaveBeenCalledWith(
+      expect.any(Function)
+    );
+  });
+
+  it('should not render before results have returned', () => {
+    summaryControllerMock.state.hasResults = false;
+
+    const element = createTestComponent();
+
+    const summary = element.shadowRoot.querySelector(selectors.summary);
+    expect(summary).toBeNull();
+  });
+
+  describe('when loading default summary', () => {
+    it('should render the summary correctly', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const summary = element.shadowRoot.querySelector(selectors.summary);
+      expect(summary).not.toBeNull();
+      expect(summary.value).toBe(
+        `${summaryControllerMock.state.firstResult}-${summaryControllerMock.state.lastResult} ${summaryControllerMock.state.total} `
+      );
+      expect(
+        quanticUtilsMock.I18nUtils.getTextWithDecorator
+      ).toHaveBeenCalledWith(
+        `${summaryControllerMock.state.total}`,
+        '<b class="summary__total">',
+        '</b>'
+      );
+      expect(
+        quanticUtilsMock.I18nUtils.getTextWithDecorator
+      ).toHaveBeenCalledWith(
+        `${summaryControllerMock.state.firstResult}-${summaryControllerMock.state.lastResult}`,
+        '<b class="summary__range">',
+        '</b>'
+      );
+      expect(
+        quanticUtilsMock.I18nUtils.getLabelNameWithCount
+      ).toHaveBeenCalledWith(
+        'showingResultsOf',
+        summaryControllerMock.state.lastResult
+      );
+    });
+  });
+
+  describe('when there is an initialization error', () => {
+    it('should show the error component', async () => {
+      headlessLoaderMock.initializeWithHeadless.mockImplementationOnce(
+        async (element) => {
+          if (element instanceof QuanticSummary) {
+            element.setInitializationError();
+          }
+        }
+      );
+
+      const element = createTestComponent();
+      await flushPromises();
+
+      const error = element.shadowRoot.querySelector(selectors.componentError);
+      expect(error).toBeTruthy();
+    });
+
+    describe('when a query yields no results', () => {
+      it('should not render anything', async () => {
+        summaryControllerMock.state.hasResults = false;
+        const element = createTestComponent();
+        await flushPromises();
+
+        const summary = element.shadowRoot.querySelector(selectors.summary);
+        expect(summary).toBeNull();
+      });
+    });
+
+    describe('when the page changes', () => {
+      it('should display the correct per-page number', async () => {
+        summaryControllerMock.state.firstResult = 11;
+        summaryControllerMock.state.lastResult = 20;
+        summaryControllerMock.state.total = 200;
+
+        createTestComponent();
+        await flushPromises();
+        expect(
+          quanticUtilsMock.I18nUtils.getTextWithDecorator
+        ).toHaveBeenCalledWith(
+          `${summaryControllerMock.state.total}`,
+          '<b class="summary__total">',
+          '</b>'
+        );
+        expect(
+          quanticUtilsMock.I18nUtils.getTextWithDecorator
+        ).toHaveBeenCalledWith(
+          `${summaryControllerMock.state.firstResult}-${summaryControllerMock.state.lastResult}`,
+          '<b class="summary__range">',
+          '</b>'
+        );
+        expect(
+          quanticUtilsMock.I18nUtils.getLabelNameWithCount
+        ).toHaveBeenCalledWith(
+          'showingResultsOf',
+          summaryControllerMock.state.lastResult
+        );
+      });
+    });
+
+    describe('when a query is entered', () => {
+      it('should display the query in the summary', async () => {
+        summaryControllerMock.state.query =
+          'Makita 18V LXT brushless impact driver XDT14Z';
+        summaryControllerMock.state.hasQuery = true;
+        const element = createTestComponent();
+        await flushPromises();
+
+        const summary = element.shadowRoot.querySelector(selectors.summary);
+        expect(summary).not.toBeNull();
+        expect(
+          quanticUtilsMock.I18nUtils.getTextWithDecorator
+        ).toHaveBeenCalledWith(
+          `${summaryControllerMock.state.total}`,
+          '<b class="summary__total">',
+          '</b>'
+        );
+        expect(
+          quanticUtilsMock.I18nUtils.getTextWithDecorator
+        ).toHaveBeenCalledWith(
+          `${summaryControllerMock.state.firstResult}-${summaryControllerMock.state.lastResult}`,
+          '<b class="summary__range">',
+          '</b>'
+        );
+        expect(quanticUtilsMock.I18nUtils.escapeHTML).toHaveBeenCalledWith(
+          summaryControllerMock.state.query
+        );
+        expect(
+          quanticUtilsMock.I18nUtils.getTextWithDecorator
+        ).toHaveBeenCalledWith(
+          summaryControllerMock.state.query,
+          '<b class="summary__query">',
+          '</b>'
+        );
+        expect(
+          quanticUtilsMock.I18nUtils.getLabelNameWithCount
+        ).toHaveBeenCalledWith(
+          'showingResultsOfWithQuery',
+          summaryControllerMock.state.lastResult
+        );
+        expect(summary.value).toBe(
+          `${summaryControllerMock.state.firstResult}-${summaryControllerMock.state.lastResult} ${summaryControllerMock.state.total} ${summaryControllerMock.state.query}`
+        );
+      });
+    });
+  });
+});