Pr changes and refactor

Author: mikegron

packages/quantic/force-app/main/default/lwc/quanticDocumentSuggestion/__tests__/quanticDocumentSuggestion.test.js

@@ -29,28 +29,27 @@ const documentSuggestionListMock = {
   }),
 };
 
-// @ts-ignore
-global.CoveoHeadlessCaseAssist = {
+const functionsMocks = {
+  fetchDocumentSuggestions: jest.fn(),
+  logDocumentSuggestionClick: jest.fn(),
+  logDocumentSuggestionRating: jest.fn(),
+};
+
+const headlessCaseAssistMock = {
   buildDocumentSuggestionList: jest
     .fn()
     .mockReturnValue(documentSuggestionListMock),
   loadCaseAssistAnalyticsActions: jest.fn().mockReturnValue({}),
   loadDocumentSuggestionActions: jest.fn().mockReturnValue({
-    fetchDocumentSuggestions: jest
-      .fn()
-      .mockReturnValue('mockedFetchDocumentSuggestions'),
-    logDocumentSuggestionClick: jest.fn((id) => [
-      'mockedLogDocumentSuggestionClick',
-      id,
-    ]),
-    logDocumentSuggestionRating: jest.fn((id, score) => [
-      'mockedLogDocumentSuggestionRating',
-      id,
-      score,
-    ]),
+    fetchDocumentSuggestions: functionsMocks.fetchDocumentSuggestions,
+    logDocumentSuggestionClick: functionsMocks.logDocumentSuggestionClick,
+    logDocumentSuggestionRating: functionsMocks.logDocumentSuggestionRating,
   }),
 };
 
+// @ts-ignore
+global.CoveoHeadlessCaseAssist = headlessCaseAssistMock;
+
 const createTestComponent = buildCreateTestComponent(
   QuanticDocumentSuggestion,
   'c-quantic-document-suggestion',
@@ -69,6 +68,16 @@ const selectors = {
   componentError: 'c-quantic-component-error',
 };
 
+function mockErroneousHeadlessInitialization() {
+  headlessLoaderMock.initializeWithHeadless.mockImplementation(
+    async (element) => {
+      if (element instanceof QuanticDocumentSuggestion) {
+        element.setInitializationError();
+      }
+    }
+  );
+}
+
 function checkElement(element, selector, shouldExist) {
   if (shouldExist) {
     expect(element.shadowRoot.querySelector(selector)).toBeTruthy();
@@ -89,6 +98,30 @@ describe('c-quantic-document-suggestion', () => {
     cleanup();
   });
 
+  describe('on initialization', () => {
+    it('should initialize the component and subscribe to the controller', async () => {
+      createTestComponent();
+
+      expect(headlessLoaderMock.registerComponentForInit).toHaveBeenCalled();
+      expect(headlessLoaderMock.initializeWithHeadless).toHaveBeenCalled();
+      expect(
+        headlessCaseAssistMock.buildDocumentSuggestionList
+      ).toHaveBeenCalledTimes(1);
+      expect(
+        headlessCaseAssistMock.buildDocumentSuggestionList
+      ).toHaveBeenCalledWith(engineMock);
+      expect(
+        headlessCaseAssistMock.loadCaseAssistAnalyticsActions
+      ).toHaveBeenCalledTimes(1);
+      expect(
+        headlessCaseAssistMock.loadDocumentSuggestionActions
+      ).toHaveBeenCalledTimes(1);
+      expect(engineMock.dispatch).not.toHaveBeenCalled();
+      expect(documentSuggestionListMock.subscribe).toHaveBeenCalledTimes(1);
+      expect(updateSuggestions).toBeDefined();
+    });
+  });
+
   describe('when loading suggestions', () => {
     it('should render the loading holder only', async () => {
       const element = createTestComponent();
@@ -107,8 +140,6 @@ describe('c-quantic-document-suggestion', () => {
       const element = createTestComponent();
       await updateSuggestions();
 
-      expect(engineMock.dispatch).not.toHaveBeenCalled();
-      expect(headlessLoaderMock.registerComponentForInit).toHaveBeenCalled();
       checkElement(element, selectors.accordion, false);
       checkElement(element, selectors.noSuggestions, true);
     });
@@ -121,9 +152,7 @@ describe('c-quantic-document-suggestion', () => {
       });
       await flushPromises();
 
-      expect(engineMock.dispatch).toHaveBeenCalledWith(
-        'mockedFetchDocumentSuggestions'
-      );
+      expect(functionsMocks.fetchDocumentSuggestions).toHaveBeenCalledTimes(1);
     });
   });
 
@@ -148,82 +177,97 @@ describe('c-quantic-document-suggestion', () => {
     it('should render the component and all parts with default options', async () => {
       const element = createTestComponent();
       await flushPromises();
+      expect(functionsMocks.fetchDocumentSuggestions).not.toHaveBeenCalled();
+      expect(headlessLoaderMock.registerComponentForInit).toHaveBeenCalled();
 
       checkElement(element, selectors.accordion, false);
       checkElement(element, selectors.noSuggestions, true);
       checkElement(element, selectors.componentError, false);
 
       await updateSuggestions();
 
-      expect(engineMock.dispatch).not.toHaveBeenCalled();
-      expect(headlessLoaderMock.registerComponentForInit).toHaveBeenCalled();
-
       checkElement(element, selectors.noSuggestions, false);
       checkElement(element, selectors.container, true);
       checkElement(element, selectors.accordion, true);
       const sections = element.shadowRoot.querySelectorAll(
         selectors.accordionSection
       );
       expect(sections.length).toBe(2);
-      expect(sections[0].getAttribute('data-id')).toBe('ego');
-      checkElement(element, selectors.quickview, true);
+      sections.forEach((section, index) => {
+        expect(section.label).toBe(
+          documentSuggestionListMock.state.documents[index].title
+        );
+        const uniqueId =
+          documentSuggestionListMock.state.documents[index].uniqueId;
+        expect(section.getAttribute('data-id')).toBe(uniqueId);
+        expect(section.querySelector(selectors.quickview)).toBeTruthy();
+        expect(
+          section
+            .querySelector('slot[name="actions"]')
+            .getAttribute('data-doc-id')
+        ).toBe(uniqueId);
+        expect(
+          section
+            .querySelector('slot[name="rating"]')
+            .getAttribute('data-doc-id')
+        ).toBe(uniqueId);
+      });
     });
 
     it('should not render quick view button when withoutQuickview is set to true', async () => {
       const element = createTestComponent({
         withoutQuickview: true,
-        fetchOnInit: true,
       });
-      await flushPromises();
+      await updateSuggestions();
 
       expect(element.shadowRoot.querySelector(selectors.quickview)).toBeFalsy();
     });
 
     it('should log a suggestion click if not opened', async () => {
-      const element = createTestComponent({
-        fetchOnInit: true,
-      });
+      const element = createTestComponent();
       await updateSuggestions();
 
-      const accordion = element.shadowRoot.querySelector(selectors.accordion);
       const sections = element.shadowRoot.querySelectorAll(
         selectors.accordionSection
       );
+      const accordion = element.shadowRoot.querySelector(selectors.accordion);
 
-      // Should not log click when opening first
+      // First document is already opened and will be collapsed, no click event logged.
       sections[0].click();
-      expect(engineMock.dispatch).not.toHaveBeenCalledWith(
-        'mockedLogDocumentSuggestionClick'
+      expect(functionsMocks.logDocumentSuggestionClick).toHaveBeenCalledTimes(
+        0
       );
-
       accordion.activeSectionName = sections[1].name;
+
       sections[1].click();
-      expect(engineMock.dispatch).toHaveBeenCalledWith([
-        'mockedLogDocumentSuggestionClick',
-        sections[1].name,
-      ]);
+      await flushPromises();
+      expect(functionsMocks.logDocumentSuggestionClick).toHaveBeenCalledTimes(
+        1
+      );
+      expect(functionsMocks.logDocumentSuggestionClick).toHaveBeenCalledWith(
+        documentSuggestionListMock.state.documents[1].uniqueId
+      );
     });
 
     it('should handle document rating event', async () => {
-      const element = createTestComponent({
-        fetchOnInit: true,
-      });
+      const element = createTestComponent();
       await updateSuggestions();
 
       const customEvent = new CustomEvent('quantic__rating', {
         detail: {id: 'mastercraft', score: 2},
       });
       element.shadowRoot.dispatchEvent(customEvent);
-      expect(engineMock.dispatch).toHaveBeenCalledWith([
-        'mockedLogDocumentSuggestionRating',
+      expect(functionsMocks.logDocumentSuggestionRating).toHaveBeenCalledTimes(
+        1
+      );
+      expect(functionsMocks.logDocumentSuggestionRating).toHaveBeenCalledWith(
         'mastercraft',
-        2,
-      ]);
+        2
+      );
     });
 
-    it('should truncate documents to maxDocuments', async () => {
+    it('should truncate documents to maxDocuments if the state contains more', async () => {
       const element = createTestComponent({
-        fetchOnInit: true,
         maxDocuments: 1,
       });
       await updateSuggestions();
@@ -253,6 +297,46 @@ describe('c-quantic-document-suggestion', () => {
     });
   });
 
+  describe('when two document suggestions have a similar title', () => {
+    it('should open the right document suggestion when clicked', async () => {
+      documentSuggestionListMock.state.documents = [
+        {
+          title: 'dewalt',
+          uniqueId: 'dw745',
+          fields: {
+            uri: 'table saw',
+          },
+        },
+        {
+          title: 'dewalt',
+          uniqueId: 'dw560',
+          fields: {
+            uri: 'router',
+          },
+        },
+      ];
+
+      const element = createTestComponent();
+      await updateSuggestions();
+
+      const sectionToClick = element.shadowRoot.querySelectorAll(
+        selectors.accordionSection
+      )[1];
+      const accordion = element.shadowRoot.querySelector(selectors.accordion);
+      accordion.activeSectionName = sectionToClick.name;
+      sectionToClick.click();
+      expect(sectionToClick.name).toBe(
+        documentSuggestionListMock.state.documents[1].uniqueId
+      );
+      expect(functionsMocks.logDocumentSuggestionClick).toHaveBeenCalledTimes(
+        1
+      );
+      expect(functionsMocks.logDocumentSuggestionClick).toHaveBeenCalledWith(
+        sectionToClick.name
+      );
+    });
+  });
+
   describe('with invalid options', () => {
     it('should set an error message if maxDocuments is invalid', async () => {
       const element = createTestComponent({
@@ -271,4 +355,17 @@ describe('c-quantic-document-suggestion', () => {
       checkElement(element, selectors.componentError, true);
     });
   });
+
+  describe('when an initialization error occurs', () => {
+    beforeEach(() => {
+      mockErroneousHeadlessInitialization();
+    });
+
+    it('should display the initialization error component', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      checkElement(element, selectors.componentError, true);
+    });
+  });
 });