@coveo/quantic 3.33.0 → 3.33.2

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

@@ -0,0 +1,194 @@
+/* eslint-disable jest/no-conditional-expect */
+/* eslint-disable no-import-assign */
+import QuanticInsightInterface from 'c/quanticInsightInterface';
+import * as mockHeadlessLoader from 'c/quanticHeadlessLoader';
+import {cleanup, buildCreateTestComponent, flushPromises} from 'c/testUtils';
+
+jest.mock('c/quanticUtils', () => ({
+  generateFacetDependencyConditions: jest.fn(),
+  regexEncode: jest.fn(),
+  Store: {
+    facetTypes: {
+      FACETS: 'facets',
+    },
+  },
+  I18nUtils: {
+    format: jest.fn(),
+    getLabelNameWithCount: jest.fn(),
+  },
+}));
+jest.mock('c/quanticHeadlessLoader');
+jest.mock(
+  '@salesforce/apex/InsightController.getHeadlessConfiguration',
+  () => {
+    return {
+      default: () =>
+        new Promise((resolve) => {
+          resolve(
+            JSON.stringify({
+              locale: 'en-US',
+              timezone: 'America/New_York',
+              insightId: 'dummyInsightId',
+            })
+          );
+        }),
+    };
+  },
+  {virtual: true}
+);
+
+const initialInsightInterfaceState = {
+  values: [],
+  enabled: true,
+};
+let insightInterfaceState = initialInsightInterfaceState;
+
+let isInitialized = false;
+
+const exampleEngine = {
+  id: 'example engine id',
+};
+const exampleInsightId = 'example insight id';
+
+const defaultOptions = {
+  engineId: exampleEngine.id,
+  insightId: exampleInsightId,
+};
+
+const functionsMocks = {
+  buildInsightInterface: jest.fn(() => ({
+    state: insightInterfaceState,
+    subscribe: functionsMocks.insightInterfaceStateSubscriber,
+  })),
+  buildInsightEngine: jest.fn(() => ({
+    executeFirstSearch: functionsMocks.executeFirstSearch,
+  })),
+  insightInterfaceStateSubscriber: jest.fn((cb) => {
+    cb();
+    return functionsMocks.insightInterfaceStateUnsubscriber;
+  }),
+  executeFirstSearch: jest.fn(() => {}),
+  insightInterfaceStateUnsubscriber: jest.fn(),
+  eventListener: jest.fn(),
+};
+
+const CoveoHeadlessStub = {
+  buildInsightEngine: function () {
+    return {
+      executeFirstSearch: jest.fn(() => {}),
+    };
+  },
+  buildInsightInterface: functionsMocks.buildInsightInterface,
+};
+
+const createTestComponent = buildCreateTestComponent(
+  QuanticInsightInterface,
+  'c-quantic-insight-interface',
+  defaultOptions
+);
+
+function prepareHeadlessState() {
+  jest
+    .spyOn(mockHeadlessLoader, 'getHeadlessBundle')
+    .mockImplementation(() => ({
+      buildFacet: functionsMocks.buildFacet,
+    }));
+  jest.spyOn(mockHeadlessLoader, 'loadDependencies').mockImplementation(
+    () =>
+      new Promise((resolve) => {
+        resolve();
+      })
+  );
+  jest
+    .spyOn(mockHeadlessLoader, 'setInitializedCallback')
+    .mockImplementation((callback) => {
+      callback();
+    });
+  jest.spyOn(mockHeadlessLoader, 'getHeadlessBindings').mockReturnValue({
+    engine: exampleEngine,
+  });
+}
+
+function mockSuccessfulHeadlessInitialization() {
+  // @ts-ignore
+  mockHeadlessLoader.initializeWithHeadless = (element, _, initialize) => {
+    if (element instanceof QuanticInsightInterface && !isInitialized) {
+      isInitialized = true;
+      initialize(exampleEngine);
+    }
+  };
+}
+
+describe('c-quantic-insight-interface', () => {
+  beforeAll(() => {
+    document.addEventListener(
+      'quantic__insightinterfaceinitialized',
+      functionsMocks.eventListener,
+      {once: true}
+    );
+  });
+
+  beforeEach(() => {
+    // @ts-ignore
+    global.CoveoHeadlessInsight = CoveoHeadlessStub;
+    mockSuccessfulHeadlessInitialization();
+    prepareHeadlessState();
+  });
+
+  afterEach(() => {
+    cleanup();
+    insightInterfaceState = initialInsightInterfaceState;
+    isInitialized = false;
+  });
+
+  describe('when the insight interface is loading', () => {
+    beforeEach(() => {
+      insightInterfaceState = {
+        ...initialInsightInterfaceState,
+        loading: true,
+        config: {},
+      };
+    });
+
+    it('should not dispatch the insight interface initialized event', async () => {
+      createTestComponent();
+      await flushPromises();
+
+      expect(functionsMocks.eventListener).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when the insight config is null', () => {
+    beforeEach(() => {
+      insightInterfaceState = {
+        ...initialInsightInterfaceState,
+        loading: false,
+        config: null,
+      };
+    });
+
+    it('should not dispatch the insight interface initialized event', async () => {
+      createTestComponent();
+      await flushPromises();
+
+      expect(functionsMocks.eventListener).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when the insight interface is not loading and the insight config is defined', () => {
+    beforeEach(() => {
+      insightInterfaceState = {
+        ...initialInsightInterfaceState,
+        loading: false,
+        config: {},
+      };
+    });
+
+    it('should dispatch the insight interface initialized event', async () => {
+      createTestComponent();
+      await flushPromises();
+
+      expect(functionsMocks.eventListener).toHaveBeenCalledTimes(1);
+    });
+  });
+});

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

@@ -0,0 +1,230 @@
+/* eslint-disable no-import-assign */
+import QuanticInsightSummary from '../quanticInsightSummary';
+import * as mockHeadlessLoader from 'c/quanticHeadlessLoader';
+import {cleanup, flushPromises, buildCreateTestComponent} from 'c/testUtils';
+
+const initialSummaryLabel = 'Insights related to this cases';
+
+let isInitialized = false;
+
+jest.mock('c/quanticHeadlessLoader');
+jest.mock(
+  '@salesforce/label/c.quantic_InsightRelatedToThisCase',
+  () => ({default: initialSummaryLabel}),
+  {
+    virtual: true,
+  }
+);
+
+const initialSearchBoxState = {
+  value: '',
+};
+let searchBoxState = initialSearchBoxState;
+
+const initialQuerySummaryState = {hasError: false};
+let querySummaryState = initialQuerySummaryState;
+
+const exampleEngine = {
+  id: 'example engine',
+};
+
+const defaultOptions = {
+  engineId: exampleEngine.id,
+};
+
+const functionsMocks = {
+  buildSearchBox: jest.fn(() => ({
+    state: searchBoxState,
+    subscribe: functionsMocks.searchBoxStateSubscriber,
+  })),
+  buildQuerySummary: jest.fn(() => ({
+    state: querySummaryState,
+    subscribe: functionsMocks.querySummaryStateSubscriber,
+  })),
+  searchBoxStateSubscriber: jest.fn((cb) => {
+    cb();
+    return functionsMocks.searchBoxStateUnsubscriber;
+  }),
+  querySummaryStateSubscriber: jest.fn((cb) => {
+    cb();
+    return functionsMocks.querySummaryStateUnsubscriber;
+  }),
+  searchBoxStateUnsubscriber: jest.fn(),
+  querySummaryStateUnsubscriber: jest.fn(),
+};
+
+const selectors = {
+  initializationError: 'c-quantic-component-error',
+  initialSummaryMessage: '[data-testid="initial-summary-message"]',
+  quanticSummary: 'c-quantic-summary',
+};
+
+function prepareHeadlessState() {
+  // @ts-ignore
+  mockHeadlessLoader.getHeadlessBundle = () => {
+    return {
+      buildSearchBox: functionsMocks.buildSearchBox,
+      buildQuerySummary: functionsMocks.buildQuerySummary,
+    };
+  };
+}
+
+function mockSuccessfulHeadlessInitialization() {
+  // @ts-ignore
+  mockHeadlessLoader.initializeWithHeadless = (element, _, initialize) => {
+    if (element instanceof QuanticInsightSummary && !isInitialized) {
+      isInitialized = true;
+      initialize(exampleEngine);
+    }
+  };
+}
+
+function mockErroneousHeadlessInitialization() {
+  // @ts-ignore
+  mockHeadlessLoader.initializeWithHeadless = (element) => {
+    if (element instanceof QuanticInsightSummary) {
+      element.setInitializationError();
+    }
+  };
+}
+
+const createTestComponent = buildCreateTestComponent(
+  QuanticInsightSummary,
+  'c-quantic-insight-summary',
+  {defaultOptions}
+);
+
+describe('c-quantic-insight-summary', () => {
+  beforeEach(() => {
+    mockSuccessfulHeadlessInitialization();
+    prepareHeadlessState();
+  });
+
+  afterEach(() => {
+    cleanup();
+    searchBoxState = initialSearchBoxState;
+    querySummaryState = initialQuerySummaryState;
+    isInitialized = false;
+  });
+
+  describe('component initialization', () => {
+    it('should initialize the search box and query summary headless controllers', async () => {
+      createTestComponent();
+      await flushPromises();
+
+      expect(functionsMocks.buildSearchBox).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildSearchBox).toHaveBeenCalledWith(exampleEngine);
+      expect(functionsMocks.buildQuerySummary).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildQuerySummary).toHaveBeenCalledWith(
+        exampleEngine
+      );
+    });
+
+    it('should subscribe the search box and query summary state changes', async () => {
+      createTestComponent();
+      await flushPromises();
+
+      expect(functionsMocks.searchBoxStateSubscriber).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.querySummaryStateSubscriber).toHaveBeenCalledTimes(
+        1
+      );
+    });
+  });
+
+  describe('component disconnection', () => {
+    it('should unsubscribe from the search box and query summary state changes', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      document.body.removeChild(element);
+
+      expect(functionsMocks.searchBoxStateUnsubscriber).toHaveBeenCalledTimes(
+        1
+      );
+      expect(
+        functionsMocks.querySummaryStateUnsubscriber
+      ).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('when an initialization error occurs', () => {
+    beforeEach(() => {
+      mockErroneousHeadlessInitialization();
+    });
+
+    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('when the searchbox state query value is empty', () => {
+    it('should display the default insight summary message', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const initialSummaryMessage = element.shadowRoot.querySelector(
+        selectors.initialSummaryMessage
+      );
+      const quanticQuerySummary = element.shadowRoot.querySelector(
+        selectors.quanticSummary
+      );
+
+      expect(initialSummaryMessage).not.toBeNull();
+      expect(initialSummaryMessage.textContent).toBe(initialSummaryLabel);
+      expect(quanticQuerySummary).toBeNull();
+    });
+  });
+
+  describe('when the searchbox state query value is not empty', () => {
+    beforeEach(() => {
+      searchBoxState = {
+        value: 'test',
+      };
+    });
+
+    it('should display the quantic summary component', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const initialSummaryMessage = await element.shadowRoot.querySelector(
+        selectors.initialSummaryMessage
+      );
+      const quanticQuerySummary = await element.shadowRoot.querySelector(
+        selectors.quanticSummary
+      );
+
+      expect(quanticQuerySummary).not.toBeNull();
+      expect(initialSummaryMessage).toBeNull();
+    });
+  });
+
+  describe('when there is a query error', () => {
+    beforeEach(() => {
+      querySummaryState = {
+        hasError: true,
+      };
+    });
+
+    it('should not display the Insight Summary component', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const title = await element.shadowRoot.querySelector(
+        selectors.initialSummaryMessage
+      );
+      const quanticQuerySummary = await element.shadowRoot.querySelector(
+        selectors.quanticSummary
+      );
+
+      expect(quanticQuerySummary).toBeNull();
+      expect(title).toBeNull();
+    });
+  });
+});

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

@@ -0,0 +1,205 @@
+// @ts-ignore
+import QuanticModal from 'c/quanticModal';
+import {getFirstFocusableElement} from 'c/quanticUtils';
+import {buildCreateTestComponent, cleanup, flushPromises} from 'c/testUtils';
+
+jest.mock('c/quanticUtils', () => {
+  return {
+    getFirstFocusableElement: jest.fn(),
+    getLastFocusableElement: jest.fn(),
+  };
+});
+
+const createTestComponent = buildCreateTestComponent(
+  QuanticModal,
+  'c-quantic-modal'
+);
+
+const selectors = {
+  modal: '.modal',
+  modalHeader: '.modal__header',
+  modalContent: '.modal__content',
+  modalFooter: '.modal__footer',
+  renderingError: '.error-message',
+  headerSlot: 'slot[name="header"]',
+};
+
+describe('c-quantic-modal', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('when using default options', () => {
+    it('should not display the modal by default', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+      const modal = element.shadowRoot.querySelector(selectors.modal);
+      expect(modal.classList.contains('modal_hidden')).toBe(true);
+    });
+
+    it('should have slide-to-top animation class by default', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const modal = element.shadowRoot.querySelector(selectors.modal);
+      expect(modal.classList.contains('hidden-modal_slide-to-top')).toBe(true);
+    });
+
+    it('should display the modal when openModal is called', async () => {
+      const element = createTestComponent();
+      element.openModal();
+      await flushPromises();
+
+      const modal = element.shadowRoot.querySelector(selectors.modal);
+      expect(modal.classList.contains('modal_hidden')).toBe(false);
+
+      expect(
+        element.shadowRoot.querySelector(selectors.modalHeader)
+      ).not.toBeNull();
+      expect(
+        element.shadowRoot.querySelector(selectors.modalContent)
+      ).not.toBeNull();
+      expect(
+        element.shadowRoot.querySelector(selectors.modalFooter)
+      ).not.toBeNull();
+
+      expect(modal.classList.contains('full-screen')).toBe(false);
+      expect(modal.classList.contains('part-screen')).toBe(true);
+    });
+
+    it('should hide the modal when closeModal is called', async () => {
+      const element = createTestComponent();
+      element.openModal();
+      await flushPromises();
+      element.closeModal();
+      await flushPromises();
+      const modal = element.shadowRoot.querySelector(selectors.modal);
+      expect(modal.classList.contains('modal_hidden')).toBe(true);
+    });
+
+    describe('when the modal is opened', () => {
+      beforeAll(() => {
+        jest.useFakeTimers();
+      });
+      afterAll(() => {
+        jest.useRealTimers();
+      });
+
+      it('should focus on first focusable element when modal opens', async () => {
+        const mockFirstFocusableElement = {focus: jest.fn()};
+        // @ts-ignore
+        getFirstFocusableElement.mockImplementation(
+          () => mockFirstFocusableElement
+        );
+
+        const element = createTestComponent();
+
+        const headerSlot = element.shadowRoot.querySelector(
+          selectors.headerSlot
+        );
+
+        const headerSlotSpy = jest
+          .spyOn(headerSlot, 'assignedElements')
+          .mockImplementation(() => [document.createElement('div')]);
+
+        element.openModal();
+        jest.runAllTimers();
+        expect(getFirstFocusableElement).toHaveBeenCalled();
+        expect(mockFirstFocusableElement.focus).toHaveBeenCalled();
+
+        headerSlotSpy.mockRestore();
+      });
+    });
+  });
+
+  describe('when using slide to left animation', () => {
+    it('should have slide-to-left animation class', async () => {
+      const element = createTestComponent({animation: 'slideToLeft'});
+      await flushPromises();
+
+      const modal = element.shadowRoot.querySelector(selectors.modal);
+      expect(modal.classList.contains('hidden-modal_slide-to-left')).toBe(true);
+    });
+
+    it('should display the modal with slide-to-left animation when opened', async () => {
+      const element = createTestComponent({animation: 'slideToLeft'});
+      await flushPromises();
+      element.openModal();
+      await flushPromises();
+
+      const modal = element.shadowRoot.querySelector(selectors.modal);
+      expect(modal.classList.contains('modal_hidden')).toBe(false);
+      expect(modal.classList.contains('part-screen')).toBe(true);
+    });
+  });
+
+  describe('when fullScreen is set to true', () => {
+    it('should apply full-screen class to the modal', async () => {
+      const element = createTestComponent({fullScreen: true});
+      await flushPromises();
+      const modal = element.shadowRoot.querySelector(selectors.modal);
+      expect(modal.classList.contains('full-screen')).toBe(true);
+    });
+
+    it('should display the modal in full screen when opened', async () => {
+      const element = createTestComponent({fullScreen: true});
+      await flushPromises();
+      element.openModal();
+      await flushPromises();
+      const modal = element.shadowRoot.querySelector(selectors.modal);
+      expect(modal.classList.contains('modal_hidden')).toBe(false);
+      expect(modal.classList.contains('full-screen')).toBe(true);
+    });
+  });
+
+  describe('when setting an invalid animation', () => {
+    it('should display an error message', async () => {
+      const invalidAnimation = 'invalid animation';
+      const element = createTestComponent({animation: invalidAnimation});
+      await flushPromises();
+
+      const errorElement = element.shadowRoot.querySelector(
+        selectors.renderingError
+      );
+      expect(errorElement).not.toBeNull();
+      expect(errorElement.textContent).toContain(
+        `"${invalidAnimation}" is an invalid value for the animation property`
+      );
+    });
+  });
+
+  describe('when setting an invalid fullscreen value', () => {
+    it('should display an error message', async () => {
+      const element = createTestComponent({fullScreen: 'patate'});
+      await flushPromises();
+
+      const errorElement = element.shadowRoot.querySelector(
+        selectors.renderingError
+      );
+      expect(errorElement).not.toBeNull();
+      expect(errorElement.textContent).toContain(
+        `"patate" is an invalid value for the full-screen property`
+      );
+    });
+  });
+
+  describe('focus management and accessibility', () => {
+    it('should set appropriate ARIA attributes', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+      element.openModal();
+      await flushPromises();
+
+      const modalElement = element.shadowRoot.querySelector('[role="dialog"]');
+
+      expect(modalElement).not.toBeNull();
+      expect(modalElement.getAttribute('aria-modal')).toBe('true');
+
+      const labelledBy = modalElement.getAttribute('aria-labelledby');
+      expect(labelledBy).toMatch(/^modal-heading/);
+
+      const describedBy = modalElement.getAttribute('aria-describedby');
+      expect(describedBy).toMatch(/^modal-content/);
+    });
+  });
+});