made notifications reset after search request

coveo · Nov 29, 2024 · 6d1b8c7 · 6d1b8c7
1 parent 0ee1cf4
commit 6d1b8c7
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 0 deletions.
diff --git a/...ic/force-app/main/default/lwc/quanticNotifications/__tests__/quanticNotifications.test.js b/...ic/force-app/main/default/lwc/quanticNotifications/__tests__/quanticNotifications.test.js
@@ -20,17 +20,31 @@ const exampleEngine = {
   id: 'mock engine',
 };
 
+const mockSearchStatusState = {
+  hasResults: true,
+};
+
+const mockSearchStatus = {
+  state: mockSearchStatusState,
+  subscribe: jest.fn((callback) => {
+    mockSearchStatus.callback = callback;
+    return jest.fn();
+  }),
+};
+
 const functionsMocks = {
   buildNotifyTrigger: jest.fn(() => ({
     state: notificationsState,
     subscribe: functionsMocks.subscribe,
   })),
   dispatchMessage: jest.fn(() => {}),
+  buildSearchStatus: jest.fn(() => mockSearchStatus),
   subscribe: jest.fn((cb) => {
     cb();
     return functionsMocks.unsubscribe;
   }),
   unsubscribe: jest.fn(() => {}),
+  unsubscribeSearchStatus: jest.fn(() => {}),
 };
 
 // @ts-ignore
@@ -69,6 +83,7 @@ function prepareHeadlessState() {
   mockHeadlessLoader.getHeadlessBundle = () => {
     return {
       buildNotifyTrigger: functionsMocks.buildNotifyTrigger,
+      buildSearchStatus: functionsMocks.buildSearchStatus,
     };
   };
 }
@@ -260,5 +275,51 @@ describe('c-quantic-notifications', () => {
         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
+        );
+
+        // Simulate a search status update
+        mockSearchStatus.state.hasResults = true;
+        mockSearchStatus.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]);
+        });
+      });
+    });
   });
 });
diff --git a/packages/quantic/force-app/main/default/lwc/quanticNotifications/quanticNotifications.js b/packages/quantic/force-app/main/default/lwc/quanticNotifications/quanticNotifications.js
@@ -7,6 +7,7 @@ import {AriaLiveRegion} from 'c/quanticUtils';
 import {LightningElement, api} from 'lwc';
 
 /** @typedef {import("coveo").SearchEngine} SearchEngine */
+/** @typedef {import("coveo").SearchStatus} SearchStatus */
 /** @typedef {import("coveo").NotifyTrigger} NotifyTrigger */
 /** @typedef {import("coveo").NotifyTriggerState} NotifyTriggerState */
 
@@ -35,6 +36,10 @@ export default class QuanticNotifications extends LightningElement {
   ariaLiveNotificationsRegion;
   /** @type {Array} */
   notifications = [];
+  /** @type {Function} */
+  unsubscribe;
+  /** @type {Function} */
+  unsubscribeSearchStatus;
 
   connectedCallback() {
     registerComponentForInit(this, this.engineId);
@@ -50,12 +55,17 @@ export default class QuanticNotifications extends LightningElement {
   initialize = (engine) => {
     this.headless = getHeadlessBundle(this.engineId);
     this.notifyTrigger = this.headless.buildNotifyTrigger(engine);
+    this.searchStatus = this.headless.buildSearchStatus(engine);
     this.ariaLiveNotificationsRegion = AriaLiveRegion('notifications', this);
     this.unsubscribe = this.notifyTrigger.subscribe(() => this.updateState());
+    this.unsubscribeSearchStatus = this.searchStatus.subscribe(() =>
+      this.updateState()
+    );
   };
 
   disconnectedCallback() {
     this.unsubscribe?.();
+    this.unsubscribeSearchStatus?.();
   }
 
   updateState() {