@coveo/quantic 3.33.0 → 3.33.2

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

@@ -0,0 +1,309 @@
+/* eslint-disable no-import-assign */
+// @ts-ignore
+import QuanticNotifications from 'c/quanticNotifications';
+import * as mockHeadlessLoader from 'c/quanticHeadlessLoader';
+import {AriaLiveRegion} from 'c/quanticUtils';
+import {buildCreateTestComponent, cleanup, flushPromises} from 'c/testUtils';
+
+jest.mock('c/quanticHeadlessLoader');
+jest.mock('c/quanticUtils');
+
+const exampleNotifications = ['notification1', 'notification2'];
+
+let notificationsState = {
+  notifications: exampleNotifications,
+};
+let isInitialized = false;
+
+const exampleEngine = {
+  id: 'mock engine',
+};
+
+const mockSearchStatusState = {
+  hasResults: true,
+  hasError: false,
+};
+
+const functionsMocks = {
+  buildNotifyTrigger: jest.fn(() => ({
+    state: notificationsState,
+    subscribe: functionsMocks.subscribe,
+  })),
+  dispatchMessage: jest.fn(() => {}),
+  buildSearchStatus: jest.fn(() => ({
+    state: mockSearchStatusState,
+    subscribe: jest.fn((callback) => {
+      functionsMocks.subscribe.callback = callback;
+      return functionsMocks.unsubscribeSearchStatus;
+    }),
+  })),
+  subscribe: jest.fn((callback) => {
+    callback();
+    return functionsMocks.unsubscribe;
+  }),
+  unsubscribe: jest.fn(() => {}),
+  unsubscribeSearchStatus: jest.fn(() => {}),
+};
+
+// @ts-ignore
+AriaLiveRegion.mockImplementation(() => {
+  return {
+    dispatchMessage: functionsMocks.dispatchMessage,
+  };
+});
+
+const selectors = {
+  notifications: '[data-testid="notification"]',
+  initializationError: 'c-quantic-component-error',
+  notificationCloseButton: 'lightning-button-icon',
+};
+
+const defaultOptions = {
+  engineId: 'exampleEngineId',
+};
+
+const createTestComponent = buildCreateTestComponent(
+  QuanticNotifications,
+  'c-quantic-notifications',
+  defaultOptions
+);
+
+function prepareHeadlessState() {
+  // @ts-ignore
+  mockHeadlessLoader.getHeadlessBundle = () => {
+    return {
+      buildNotifyTrigger: functionsMocks.buildNotifyTrigger,
+      buildSearchStatus: functionsMocks.buildSearchStatus,
+    };
+  };
+}
+
+function mockSuccessfulHeadlessInitialization() {
+  // @ts-ignore
+  mockHeadlessLoader.initializeWithHeadless = (element, _, initialize) => {
+    if (element instanceof QuanticNotifications && !isInitialized) {
+      isInitialized = true;
+      initialize(exampleEngine);
+    }
+  };
+}
+
+function mockErroneousHeadlessInitialization() {
+  // @ts-ignore
+  mockHeadlessLoader.initializeWithHeadless = (element) => {
+    if (element instanceof QuanticNotifications) {
+      element.setInitializationError();
+    }
+  };
+}
+
+describe('c-quantic-notifications', () => {
+  beforeEach(() => {
+    mockSuccessfulHeadlessInitialization();
+    prepareHeadlessState();
+  });
+
+  afterEach(() => {
+    cleanup();
+    isInitialized = false;
+    notificationsState = {
+      notifications: exampleNotifications,
+    };
+  });
+
+  describe('when an error occurs during initialization', () => {
+    beforeEach(() => {
+      mockErroneousHeadlessInitialization();
+    });
+
+    it('should display the initialization error component', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const initializationError = element.shadowRoot.querySelector(
+        selectors.initializationError
+      );
+
+      const notification = element.shadowRoot.querySelector(
+        selectors.notifications
+      );
+
+      expect(initializationError).not.toBeNull();
+      expect(notification).toBeNull();
+    });
+  });
+
+  describe('component initialization', () => {
+    it('should build the notifyTrigger and searchStatus controllers with the proper parameters', async () => {
+      createTestComponent();
+      await flushPromises();
+
+      expect(functionsMocks.buildNotifyTrigger).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildNotifyTrigger).toHaveBeenCalledWith(
+        exampleEngine
+      );
+      expect(functionsMocks.buildSearchStatus).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildSearchStatus).toHaveBeenCalledWith(
+        exampleEngine
+      );
+    });
+
+    it('should subscribe to the headless notify trigger state changes', async () => {
+      createTestComponent();
+      await flushPromises();
+
+      expect(functionsMocks.subscribe).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call AriaLiveRegion with the right parameters', async () => {
+      await createTestComponent();
+      await flushPromises();
+
+      expect(AriaLiveRegion).toHaveBeenCalledTimes(1);
+      expect(AriaLiveRegion).toHaveBeenCalledWith(
+        'notifications',
+        expect.anything()
+      );
+    });
+  });
+
+  describe('when the component is initialized successfully', () => {
+    describe('when some notifications are present in the state', () => {
+      it('should render the notifications component', async () => {
+        const element = createTestComponent();
+        await flushPromises();
+
+        const notifications = element.shadowRoot.querySelectorAll(
+          selectors.notifications
+        );
+
+        expect(notifications).not.toBeNull();
+        expect(notifications.length).toBe(exampleNotifications.length);
+        notifications.forEach((notification, index) => {
+          expect(notification.textContent).toEqual(exampleNotifications[index]);
+        });
+      });
+
+      it('should call dispatchMessage with the correct message', async () => {
+        await createTestComponent();
+        await flushPromises();
+
+        const expectedMessage =
+          ' Notification 1: notification1 Notification 2: notification2';
+
+        expect(functionsMocks.dispatchMessage).toHaveBeenCalledTimes(1);
+        expect(functionsMocks.dispatchMessage).toHaveBeenCalledWith(
+          expectedMessage
+        );
+      });
+    });
+
+    describe('when no notifications are present in the state', () => {
+      beforeEach(() => {
+        notificationsState = {
+          notifications: [],
+        };
+      });
+
+      it('should not render the notifications component', async () => {
+        const element = createTestComponent();
+        await flushPromises();
+
+        const notifications = element.shadowRoot.querySelectorAll(
+          selectors.notifications
+        );
+
+        expect(notifications.length).toEqual(0);
+      });
+    });
+
+    describe('when there is an error following a search', () => {
+      it('should not render the notifications component', async () => {
+        const element = createTestComponent();
+        mockSearchStatusState.hasError = true;
+        functionsMocks.subscribe.callback();
+        await flushPromises();
+
+        const notifications = element.shadowRoot.querySelectorAll(
+          selectors.notifications
+        );
+
+        expect(notifications.length).toEqual(0);
+      });
+    });
+  });
+
+  describe('when clicking on a notification close button', () => {
+    it('should properly dismiss that notification', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const notificationsBeforeClose = element.shadowRoot.querySelectorAll(
+        selectors.notifications
+      );
+
+      const firstNotificationCloseButton =
+        notificationsBeforeClose[0].querySelector(
+          selectors.notificationCloseButton
+        );
+      firstNotificationCloseButton.click();
+      await flushPromises();
+
+      const notificationsAfterClose = element.shadowRoot.querySelectorAll(
+        selectors.notifications
+      );
+
+      expect(notificationsAfterClose.length).toEqual(
+        exampleNotifications.length - 1
+      );
+      expect(notificationsAfterClose[0].textContent).toEqual(
+        exampleNotifications[1]
+      );
+    });
+
+    describe('when triggering another search with the same query', () => {
+      it('should reset the visibility of the notifications', async () => {
+        const element = createTestComponent();
+        await flushPromises();
+
+        const notificationsBeforeClose = element.shadowRoot.querySelectorAll(
+          selectors.notifications
+        );
+
+        expect(notificationsBeforeClose.length).toEqual(
+          exampleNotifications.length
+        );
+
+        const firstNotificationCloseButton =
+          notificationsBeforeClose[0].querySelector(
+            selectors.notificationCloseButton
+          );
+        firstNotificationCloseButton.click();
+        await flushPromises();
+
+        const notificationsAfterClose = element.shadowRoot.querySelectorAll(
+          selectors.notifications
+        );
+
+        expect(notificationsAfterClose.length).toEqual(
+          exampleNotifications.length - 1
+        );
+
+        mockSearchStatusState.hasError = false;
+        functionsMocks.subscribe.callback();
+        await flushPromises();
+
+        const notificationsAfterSearch = element.shadowRoot.querySelectorAll(
+          selectors.notifications
+        );
+
+        expect(notificationsAfterSearch.length).toEqual(
+          exampleNotifications.length
+        );
+        notificationsAfterSearch.forEach((notification, index) => {
+          expect(notification.textContent).toEqual(exampleNotifications[index]);
+        });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,58 @@
+import {NotificationsObject} from './pageObject';
+import {quanticBase} from '../../../../../../playwright/fixtures/baseFixture';
+import {
+  insightSearchRequestRegex,
+  searchRequestRegex,
+} from '../../../../../../playwright/utils/requests';
+import {InsightSetupObject} from '../../../../../../playwright/page-object/insightSetupObject';
+
+import {useCaseEnum} from '../../../../../../playwright/utils/useCase';
+import {SearchObjectWithNotifyTrigger} from '../../../../../../playwright/page-object/searchObjectWithNotificationsTriggers';
+
+const pageUrl = 's/quantic-notifications';
+
+type QuanticNotificationsE2ESearchFixtures = {
+  notifications: NotificationsObject;
+  search: SearchObjectWithNotifyTrigger;
+};
+
+type QuanticNotificationsE2EInsightFixtures =
+  QuanticNotificationsE2ESearchFixtures & {
+    insightSetup: InsightSetupObject;
+  };
+
+export const testSearch =
+  quanticBase.extend<QuanticNotificationsE2ESearchFixtures>({
+    search: async ({page}, use) => {
+      await use(new SearchObjectWithNotifyTrigger(page, searchRequestRegex));
+    },
+    notifications: async ({page, configuration, search}, use) => {
+      await page.goto(pageUrl);
+      configuration.configure();
+      await search.waitForSearchResponse();
+      await use(new NotificationsObject(page));
+    },
+  });
+
+export const testInsight =
+  quanticBase.extend<QuanticNotificationsE2EInsightFixtures>({
+    notificationsMessages: [],
+    search: async ({page}, use) => {
+      await use(
+        new SearchObjectWithNotifyTrigger(page, insightSearchRequestRegex)
+      );
+    },
+    insightSetup: async ({page}, use) => {
+      await use(new InsightSetupObject(page));
+    },
+    notifications: async ({page, search, configuration, insightSetup}, use) => {
+      await page.goto(pageUrl);
+      configuration.configure({useCase: useCaseEnum.insight});
+      await insightSetup.waitForInsightInterfaceInitialization();
+      await search.performSearch();
+      await search.waitForSearchResponse();
+      await use(new NotificationsObject(page));
+    },
+  });
+
+export {expect} from '@playwright/test';

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

@@ -0,0 +1,55 @@
+import type {Locator, Page, Request} from '@playwright/test';
+import {isUaCustomEvent} from '../../../../../../playwright/utils/requests';
+
+export class NotificationsObject {
+  constructor(public page: Page) {
+    this.page = page;
+  }
+
+  get notifications(): Promise<Array<Locator>> {
+    return this.page.getByTestId('notification').all();
+  }
+
+  getNotification(index: number): Locator {
+    return this.page.getByTestId('notification').nth(index);
+  }
+
+  async waitForNotifyTriggerCustomAnalytics(
+    expectedNotifications?: string[]
+  ): Promise<Request> {
+    return this.waitForCustomUARequest(
+      'queryPipelineTriggers',
+      'notify',
+      expectedNotifications
+    );
+  }
+
+  async waitForCustomUARequest(
+    eventType: string,
+    eventValue: string,
+    expectedNotifications?: string[]
+  ): Promise<Request> {
+    const uaRequest = this.page.waitForRequest((request) => {
+      if (isUaCustomEvent(request)) {
+        const requestBody = request.postDataJSON?.();
+        const {customData} = requestBody;
+        const expectedFields: Record<string, any> = {
+          eventType,
+          eventValue,
+        };
+        const matchesExpectedFields = Object.keys(expectedFields).every(
+          (key) => requestBody?.[key] === expectedFields[key]
+        );
+        const matchesNotifications = Array.isArray(expectedNotifications)
+          ? expectedNotifications.every((notification) =>
+              customData?.notifications?.includes(notification)
+            )
+          : true;
+
+        return matchesExpectedFields && matchesNotifications;
+      }
+      return false;
+    });
+    return uaRequest;
+  }
+}

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

@@ -0,0 +1,47 @@
+import {useCaseTestCases} from '../../../../../../playwright/utils/useCase';
+import {testInsight, testSearch, expect} from './fixture';
+
+const fixtures = {
+  search: testSearch,
+  insight: testInsight,
+};
+
+useCaseTestCases.forEach((useCase) => {
+  let test = fixtures[useCase.value];
+
+  test.describe(`quantic notifications trigger ${useCase.label}`, () => {
+    test.describe('when we have a notifications trigger', () => {
+      test('should display the notifications trigger component and send the analytics', async ({
+        notifications,
+        search,
+      }) => {
+        const notificationsMessages = ['Notification 1'];
+
+        await search.mockSearchWithNotifyTriggerResponse(notificationsMessages);
+        const expectedUaRequest =
+          notifications.waitForNotifyTriggerCustomAnalytics(
+            notificationsMessages
+          );
+        await search.triggerSearchWithInput(notificationsMessages[0]);
+        await expectedUaRequest;
+
+        expect((await notifications.notifications).length).toBe(1);
+        const firstNotification = notifications.getNotification(0);
+        await expect(firstNotification).toContainText(notificationsMessages[0]);
+      });
+    });
+
+    test.describe('without a notifications trigger', () => {
+      test('should not display the notifications trigger component', async ({
+        notifications,
+        search,
+      }) => {
+        await search.triggerSearchWithInput('');
+
+        expect((await notifications.notifications).length).toBe(0);
+        const firstNotification = notifications.getNotification(0);
+        await expect(firstNotification).not.toBeVisible();
+      });
+    });
+  });
+});