@coveo/quantic 3.33.0 → 3.33.1

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

@@ -0,0 +1,371 @@
+import {
+  getNavigateCalledWith,
+  getGenerateUrlCalledWith,
+} from 'lightning/navigation';
+// @ts-ignore
+import {createElement} from 'lwc';
+import QuanticCitation from '../quanticCitation';
+
+const functionsMocks = {
+  eventHandler: jest.fn((event) => event),
+  exampleSelect: jest.fn(() => {}),
+  exampleBeginDelayedSelect: jest.fn(() => {}),
+  exampleCancelPendingSelect: jest.fn(() => {}),
+};
+
+const exampleCitation = {
+  index: '1',
+  id: '123',
+  title: 'Example title 1',
+  uri: 'https://example.com/',
+  clickUri: 'https://example.com/',
+  permanentid: '1',
+  text: 'text 01',
+  fields: {
+    filetype: 'html',
+  },
+};
+
+const exampleSalesforceCitation = {
+  ...exampleCitation,
+  fields: {
+    filetype: 'SalesforceItem',
+    sfid: '123',
+  },
+};
+const exampleSalesforceKnowledgeArticleCitation = {
+  ...exampleCitation,
+  fields: {
+    ...exampleCitation.fields,
+    sfid: '123',
+    sfkbid: 'foo',
+    sfkavid: 'bar',
+  },
+};
+const exampleSalesforceLink = 'https://www.example-salesforce.com';
+const urlFragment = '#:~:text=text%2001';
+const exampleCitationUrl = 'https://example.com/';
+
+const defaultOptions = {
+  citation: exampleCitation,
+  interactiveCitation: {
+    select: () => functionsMocks.exampleSelect(),
+    beginDelayedSelect: () => functionsMocks.exampleBeginDelayedSelect(),
+    cancelPendingSelect: () => functionsMocks.exampleCancelPendingSelect(),
+  },
+  disableCitationAnchoring: false,
+};
+
+const selectors = {
+  citation: '.citation',
+  citationLink: '.citation__link',
+  citationTitle: '.citation__title',
+  citationTooltip: 'c-quantic-tooltip',
+  citationTooltipUrl: '[data-testid="citation__tooltip-uri"]',
+};
+
+function createTestComponent(options = defaultOptions) {
+  const element = createElement('c-quantic-citation', {
+    is: QuanticCitation,
+  });
+
+  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.
+async function flushPromises() {
+  return Promise.resolve();
+}
+
+const bindingsMap = {
+  contextmenu: functionsMocks.exampleSelect,
+  click: functionsMocks.exampleSelect,
+  mouseup: functionsMocks.exampleSelect,
+  mousedown: functionsMocks.exampleSelect,
+  touchstart: functionsMocks.exampleBeginDelayedSelect,
+  touchend: functionsMocks.exampleCancelPendingSelect,
+};
+
+function setupEventDispatchTest(eventName) {
+  const handler = (event) => {
+    functionsMocks.eventHandler(event?.detail);
+    document.removeEventListener(eventName, handler);
+  };
+  document.addEventListener(eventName, handler);
+}
+
+describe('c-quantic-citation', () => {
+  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();
+  });
+
+  it('should properly display the citation', async () => {
+    const element = createTestComponent();
+    await flushPromises();
+
+    const citation = element.shadowRoot.querySelector(selectors.citation);
+    const citationLink = element.shadowRoot.querySelector(
+      selectors.citationLink
+    );
+    const citationTitle = element.shadowRoot.querySelector(
+      selectors.citationTitle
+    );
+    const citationTooltip = element.shadowRoot.querySelector(
+      selectors.citationTooltip
+    );
+
+    expect(citation).not.toBeNull();
+    expect(citationLink).not.toBeNull();
+    expect(citationTitle).not.toBeNull();
+    expect(citationTooltip).not.toBeNull();
+
+    expect(citationLink.href).toBe(`${exampleCitationUrl}${urlFragment}`);
+    expect(citationLink.target).toBe('_blank');
+    expect(citationTitle.textContent).toBe(exampleCitation.title);
+  });
+
+  describe('the analytics bindings of the link within the citation', () => {
+    for (const [eventName, action] of Object.entries(bindingsMap)) {
+      it(`should execute the proper action when the ${eventName} is triggered on the link`, async () => {
+        const element = createTestComponent();
+        await flushPromises();
+
+        const link = element.shadowRoot.querySelector(selectors.citationLink);
+        link.dispatchEvent(new CustomEvent(eventName));
+
+        expect(action).toHaveBeenCalledTimes(1);
+      });
+    }
+  });
+
+  describe('hovering over the citation', () => {
+    beforeAll(() => {
+      jest.useFakeTimers();
+    });
+
+    afterAll(() => {
+      jest.useRealTimers();
+    });
+
+    it('should dispatch a citation hover event after hovering over the the citation for more than 1200ms, 200ms debounce duration before hover + 1000ms minimum hover duration', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+      setupEventDispatchTest('quantic__citationhover');
+
+      const citationLink = element.shadowRoot.querySelector(
+        selectors.citationLink
+      );
+      expect(citationLink).not.toBeNull();
+
+      await citationLink.dispatchEvent(
+        new CustomEvent('mouseenter', {bubbles: true})
+      );
+      jest.advanceTimersByTime(1200);
+      await citationLink.dispatchEvent(
+        new CustomEvent('mouseleave', {bubbles: true})
+      );
+
+      expect(functionsMocks.eventHandler).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.eventHandler).toHaveBeenCalledWith({
+        citationHoverTimeMs: 1000,
+      });
+    });
+
+    it('should not dispatch a citation hover event after hovering over the the citation for more than 1200ms', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+      setupEventDispatchTest('quantic__citationhover');
+
+      const citationLink = element.shadowRoot.querySelector(
+        selectors.citationLink
+      );
+      expect(citationLink).not.toBeNull();
+
+      await citationLink.dispatchEvent(
+        new CustomEvent('mouseenter', {bubbles: true})
+      );
+      jest.advanceTimersByTime(500);
+      await citationLink.dispatchEvent(
+        new CustomEvent('mouseleave', {bubbles: true})
+      );
+
+      expect(functionsMocks.eventHandler).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  describe('when citation anchoring is enabled', () => {
+    describe('when the citation source is of type Salesforce', () => {
+      it('should not prevent default behavior and not call the navigation mixin to open the link', async () => {
+        const element = createTestComponent({
+          ...defaultOptions,
+          citation: exampleSalesforceCitation,
+        });
+        await flushPromises();
+
+        const link = element.shadowRoot.querySelector(selectors.citationLink);
+        link.click();
+
+        const {pageReference} = getNavigateCalledWith();
+        expect(pageReference).toBeUndefined();
+
+        expect(link.href).toBe(`${exampleSalesforceLink}/${urlFragment}`);
+        expect(link.target).toBe('_blank');
+      });
+    });
+
+    describe('when the citation filetype is HTML', () => {
+      it('should generate a text fragment URL', async () => {
+        const element = createTestComponent({
+          ...defaultOptions,
+          citation: {
+            ...exampleCitation,
+            fields: {
+              ...exampleCitation.fields,
+              filetype: 'html',
+            },
+          },
+        });
+        await flushPromises();
+
+        const link = element.shadowRoot.querySelector(selectors.citationLink);
+        expect(link.href).toBe(`${exampleCitationUrl}${urlFragment}`);
+      });
+    });
+
+    describe('when the citation filetype is not HTML', () => {
+      it('should not generate a text fragment URL', async () => {
+        const element = createTestComponent({
+          ...defaultOptions,
+          citation: {
+            ...exampleCitation,
+            fields: {
+              ...exampleCitation.fields,
+              filetype: 'pdf',
+            },
+          },
+        });
+        await flushPromises();
+
+        const link = element.shadowRoot.querySelector(selectors.citationLink);
+        expect(link.href).toBe(exampleCitationUrl);
+      });
+    });
+
+    describe('when the citation does not contain text', () => {
+      it('should not generate a text fragment URL', async () => {
+        const element = createTestComponent({
+          ...defaultOptions,
+          citation: {
+            ...exampleCitation,
+            text: '',
+          },
+        });
+        await flushPromises();
+
+        const link = element.shadowRoot.querySelector(selectors.citationLink);
+        expect(link.href).toBe(exampleCitationUrl);
+      });
+    });
+  });
+
+  describe('when citation anchoring is disabled', () => {
+    describe('when the citation source is not of type Salesforce', () => {
+      it('should leave the hrefValue as the citation uri', async () => {
+        const element = createTestComponent({
+          ...defaultOptions,
+          disableCitationAnchoring: true,
+        });
+        await flushPromises();
+
+        const link = element.shadowRoot.querySelector(selectors.citationLink);
+        expect(link.href).toBe(element.citation.uri);
+      });
+    });
+
+    describe('when the citation source is of type Salesforce', () => {
+      it('should call the navigation mixin to get the Salesforce record URL', async () => {
+        const element = createTestComponent({
+          ...defaultOptions,
+          citation: exampleSalesforceCitation,
+          disableCitationAnchoring: true,
+        });
+        await flushPromises();
+
+        const link = element.shadowRoot.querySelector(selectors.citationLink);
+        const {pageReference} = getGenerateUrlCalledWith();
+
+        expect(pageReference.attributes.recordId).toBe(
+          exampleSalesforceCitation.fields.sfid
+        );
+        expect(link.href).toBe(`${exampleSalesforceLink}/`);
+      });
+
+      it('should open the citation link inside Salesforce', async () => {
+        const element = createTestComponent({
+          ...defaultOptions,
+          citation: exampleSalesforceCitation,
+          disableCitationAnchoring: true,
+        });
+        await flushPromises();
+
+        const link = element.shadowRoot.querySelector(selectors.citationLink);
+        link.click();
+
+        const {pageReference} = getNavigateCalledWith();
+
+        expect(pageReference.attributes.recordId).toBe(
+          exampleSalesforceCitation.fields.sfid
+        );
+      });
+
+      it('should display the salesforce link inside the tooltip url', async () => {
+        const element = createTestComponent({
+          ...defaultOptions,
+          citation: exampleSalesforceCitation,
+          disableCitationAnchoring: true,
+        });
+        await flushPromises();
+
+        const citationTooltipUrl = element.shadowRoot.querySelector(
+          selectors.citationTooltipUrl
+        );
+        expect(citationTooltipUrl).not.toBeNull();
+        expect(citationTooltipUrl.textContent).toBe(exampleSalesforceLink);
+      });
+
+      describe('when the result is a knowledge article', () => {
+        it('should open the citation link inside Salesforce', async () => {
+          const element = createTestComponent({
+            ...defaultOptions,
+            citation: exampleSalesforceKnowledgeArticleCitation,
+            disableCitationAnchoring: true,
+          });
+          await flushPromises();
+
+          const link = element.shadowRoot.querySelector(selectors.citationLink);
+          link.click();
+
+          const {pageReference} = getNavigateCalledWith();
+
+          expect(pageReference.attributes.recordId).toBe(
+            exampleSalesforceKnowledgeArticleCitation.fields.sfkavid
+          );
+          expect(link.href).toBe(`${exampleSalesforceLink}/`);
+        });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,212 @@
+// @ts-ignore
+import {createElement} from 'lwc';
+import QuanticColoredResultBadge from '../quanticColoredResultBadge';
+
+const badgeSelector = '.result-badge';
+const resultFieldSelector = 'c-quantic-result-field';
+const errorSelector = '.error-message';
+
+const defaultPrimaryColor = '#FFF7BA';
+const defaultSecondaryColor = 'black';
+const exampleLabel = 'Document';
+const exampleColor = '#FFFFFF';
+const defaultOptions = {
+  color: exampleColor,
+  label: exampleLabel,
+  result: {
+    raw: {
+      testField: 'test value',
+    },
+  },
+  field: 'testField',
+  type: 'string',
+};
+
+const coloredResultBadgeError =
+  'The c-quantic-colored-result-badge requires a label or result and a field to be specified.';
+const coloredResultBadgeWarning =
+  'The color property has not been specified, the default colors will be used.';
+const coloredResultBadgeColorError = (color) =>
+  `The "${color}" color is not a valid HEX color.`;
+
+function createTestComponent(options = defaultOptions) {
+  const element = createElement('c-quantic-colored-result-badge', {
+    is: QuanticColoredResultBadge,
+  });
+
+  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() {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+describe('c-quantic-colored-result-badge', () => {
+  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);
+    }
+  }
+
+  beforeEach(() => {
+    console.error = jest.fn();
+    console.warn = jest.fn();
+    // @ts-ignore
+    global.Bueno = {
+      isString: jest
+        .fn()
+        .mockImplementation(
+          (value) => Object.prototype.toString.call(value) === '[object String]'
+        ),
+      isNumber: jest
+        .fn()
+        .mockImplementation(
+          (value) => typeof value === 'number' && !isNaN(value)
+        ),
+    };
+  });
+
+  afterEach(() => {
+    cleanup();
+    jest.clearAllMocks();
+  });
+
+  describe('when the badge is used to display a label', () => {
+    describe('when a label is given', () => {
+      it('should display the colored badge with the correct label and color', async () => {
+        const element = createTestComponent({
+          ...defaultOptions,
+          result: null,
+          field: null,
+        });
+        await flushPromises();
+
+        const badge = element.shadowRoot.querySelector(badgeSelector);
+
+        expect(badge).not.toBeNull();
+        expect(badge.textContent).toBe(exampleLabel);
+        expect(badge.style._values['--primaryColor']).toBe(exampleColor);
+        expect(badge.style._values['--secondaryColor']).toBe('black');
+      });
+    });
+
+    describe('when no label is given', () => {
+      it('should show an error', async () => {
+        const element = createTestComponent({
+          ...defaultOptions,
+          label: null,
+          result: null,
+          field: null,
+        });
+        await flushPromises();
+
+        const errorMessage = element.shadowRoot.querySelector(errorSelector);
+
+        expect(errorMessage).not.toBeNull();
+        expect(console.error).toHaveBeenCalledWith(coloredResultBadgeError);
+      });
+    });
+  });
+
+  describe('when the badge is used to display a result field', () => {
+    describe('when a result and a field are provided', () => {
+      it('should display the colored badge with the correct result field', async () => {
+        const element = createTestComponent({
+          ...defaultOptions,
+          label: undefined,
+        });
+        await flushPromises();
+
+        const badge = element.shadowRoot.querySelector(badgeSelector);
+        const resultField =
+          element.shadowRoot.querySelector(resultFieldSelector);
+
+        expect(badge).not.toBeNull();
+        expect(resultField).not.toBeNull();
+        expect(resultField.result).toEqual(defaultOptions.result);
+        expect(resultField.field).toEqual(defaultOptions.field);
+        expect(resultField.type).toEqual(defaultOptions.type);
+        expect(badge.style._values['--primaryColor']).toBe(exampleColor);
+        expect(badge.style._values['--secondaryColor']).toBe('black');
+      });
+    });
+
+    describe('when no result is given', () => {
+      it('should show an error', async () => {
+        const element = createTestComponent({
+          ...defaultOptions,
+          label: null,
+          result: null,
+        });
+        await flushPromises();
+
+        const errorMessage = element.shadowRoot.querySelector(errorSelector);
+
+        expect(errorMessage).not.toBeNull();
+        expect(console.error).toHaveBeenCalledWith(coloredResultBadgeError);
+      });
+    });
+
+    describe('when no field is given', () => {
+      it('should show an error', async () => {
+        const element = createTestComponent({
+          ...defaultOptions,
+          label: null,
+          field: null,
+        });
+        await flushPromises();
+
+        const errorMessage = element.shadowRoot.querySelector(errorSelector);
+
+        expect(errorMessage).not.toBeNull();
+        expect(console.error).toHaveBeenCalledWith(coloredResultBadgeError);
+      });
+    });
+  });
+
+  describe('when no color is given', () => {
+    it('should display the colored badge with the default colors', async () => {
+      const element = createTestComponent({
+        ...defaultOptions,
+        color: null,
+      });
+      await flushPromises();
+
+      const badge = element.shadowRoot.querySelector(badgeSelector);
+
+      expect(badge).not.toBeNull();
+      expect(badge.textContent).toBe(exampleLabel);
+      expect(badge.style._values['--primaryColor']).toBe(defaultPrimaryColor);
+      expect(badge.style._values['--secondaryColor']).toBe(
+        defaultSecondaryColor
+      );
+      expect(console.warn).toHaveBeenCalledWith(coloredResultBadgeWarning);
+    });
+  });
+
+  describe('when an invalid color is given', () => {
+    it('should show an error', async () => {
+      const invalidColor = 'invalid color';
+      const element = createTestComponent({
+        ...defaultOptions,
+        color: invalidColor,
+      });
+      await flushPromises();
+
+      const errorMessage = element.shadowRoot.querySelector(errorSelector);
+
+      expect(errorMessage).not.toBeNull();
+      expect(console.error).toHaveBeenCalledWith(
+        coloredResultBadgeColorError(invalidColor)
+      );
+    });
+  });
+});