@coveo/quantic 3.33.0 → 3.33.2

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

@@ -0,0 +1,49 @@
+import type {Locator, Page, Request} from '@playwright/test';
+import {isUaClickEvent} from '../../../../../../playwright/utils/requests';
+
+export class ResultCopyToClipboard {
+  constructor(public page: Page) {
+    this.page = page;
+  }
+
+  get resultCopyToClipboard(): Locator {
+    return this.page.locator('c-quantic-result-copy-to-clipboard');
+  }
+
+  get copyToClipboardButton(): Locator {
+    return this.resultCopyToClipboard.locator('lightning-button-icon-stateful');
+  }
+
+  get copyToClipboardTooltip(): Locator {
+    return this.resultCopyToClipboard.locator('.slds-popover');
+  }
+
+  async waitForCopyToClipboardClickEvent(
+    actionCause: string,
+    customChecker?: Function
+  ): Promise<Request> {
+    const uaRequest = this.page.waitForRequest((request) => {
+      if (isUaClickEvent(request)) {
+        const requestBody = request.postDataJSON?.();
+        const requestData = JSON.parse(requestBody.clickEvent);
+
+        const expectedFields: Record<string, any> = {
+          actionCause,
+        };
+
+        const matchesExpectedFields = Object.keys(expectedFields).every(
+          (key) => requestData?.[key] === expectedFields[key]
+        );
+
+        const customData = requestData?.customData;
+
+        return (
+          matchesExpectedFields &&
+          (customChecker ? customChecker(requestData, customData) : true)
+        );
+      }
+      return false;
+    });
+    return uaRequest;
+  }
+}

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

@@ -0,0 +1,40 @@
+/* eslint-disable jest/no-identical-title */
+import {testInsight, expect} from './fixture';
+
+const exampleTitle = 'Test result';
+const exampleUrl = 'https://test.com';
+const copyToClipboardActionCause = 'copyToClipboard';
+
+let test = testInsight;
+test.describe(`quantic result copy to clipboard`, () => {
+  test.describe('with the default options', () => {
+    test('should correctly copy the result to clipboard and send the copyToClipboard analytics event', async ({
+      resultCopyToClipboard,
+      page,
+    }) => {
+      const copyToClipboardButton = resultCopyToClipboard.copyToClipboardButton;
+      await expect(copyToClipboardButton).toBeVisible();
+      await expect(copyToClipboardButton).not.toBeDisabled();
+
+      // Hack: to have the request payload in the analytics request next. (Sendbeacon issue)
+      await page.route('*analytics*', (route) => {
+        route.continue();
+      });
+
+      const uaRequest = resultCopyToClipboard.waitForCopyToClipboardClickEvent(
+        copyToClipboardActionCause
+      );
+
+      await copyToClipboardButton.click();
+
+      await uaRequest;
+
+      const clipboardText = await resultCopyToClipboard.page.evaluate(
+        'navigator.clipboard.readText()'
+      );
+      const formattedCopiedContent = `${exampleTitle}\n${exampleUrl}`;
+
+      expect(clipboardText).toEqual(formattedCopiedContent);
+    });
+  });
+});

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

@@ -0,0 +1,144 @@
+// @ts-ignore
+import {createElement} from 'lwc';
+import QuanticResultDate from '../quanticResultDate';
+
+const exampleField = 'exampledatefield';
+const exampleFieldValue = 1670118414000;
+const exampleResult = {
+  raw: {
+    [exampleField]: exampleFieldValue,
+  },
+};
+
+const errorSelector = '.error-message';
+
+const defaultOptions = {
+  result: exampleResult,
+  field: exampleField,
+};
+
+function createTestComponent(options = defaultOptions) {
+  const element = createElement('c-quantic-result-date', {
+    is: QuanticResultDate,
+  });
+
+  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-result-date', () => {
+  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();
+  }
+
+  beforeEach(() => {
+    console.error = 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();
+  });
+
+  describe('when no result is given', () => {
+    it('should show an error', async () => {
+      // @ts-ignore
+      const element = createTestComponent({field: exampleField});
+      await flushPromises();
+      const errorMessage = element.shadowRoot.querySelector(errorSelector);
+
+      expect(errorMessage).not.toBeNull();
+      expect(console.error).toHaveBeenCalledWith(
+        'The c-quantic-result-date requires a result and a date field to be specified.'
+      );
+      expect(console.error).toHaveBeenCalledWith(
+        'The "exampledatefield" field value is not a valid timestamp.'
+      );
+    });
+  });
+
+  describe('when no field is given', () => {
+    it('should show an error', async () => {
+      // @ts-ignore
+      const element = createTestComponent({result: exampleResult});
+      await flushPromises();
+
+      const errorMessage = element.shadowRoot.querySelector(errorSelector);
+
+      expect(errorMessage).not.toBeNull();
+      expect(console.error).toHaveBeenCalledWith(
+        'The c-quantic-result-date requires a result and a date field to be specified.'
+      );
+      expect(console.error).toHaveBeenCalledWith(
+        'The "undefined" field value is not a valid timestamp.'
+      );
+    });
+  });
+
+  describe('when the field value is not a valid timestamp', () => {
+    const invalidValue = 'not-a-timestamp';
+    const invalidOptions = {
+      ...defaultOptions,
+      result: {
+        raw: {
+          [exampleField]: invalidValue,
+        },
+      },
+    };
+
+    it('should show an error', async () => {
+      // @ts-ignore
+      const element = createTestComponent(invalidOptions);
+      await flushPromises();
+
+      const errorMessage = element.shadowRoot.querySelector(errorSelector);
+
+      expect(errorMessage).not.toBeNull();
+    });
+  });
+
+  describe('when a formatting function is given', () => {
+    let formattingFunctionMock;
+
+    beforeEach(() => {
+      formattingFunctionMock = jest
+        .fn()
+        .mockImplementation((value) => `formatted ${value}`);
+    });
+
+    it('should render the formatted field value', async () => {
+      createTestComponent({
+        ...defaultOptions,
+        formattingFunction: formattingFunctionMock,
+      });
+      await flushPromises();
+
+      expect(formattingFunctionMock).toHaveBeenCalledWith(exampleFieldValue);
+    });
+  });
+});

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

@@ -0,0 +1,120 @@
+// @ts-ignore
+import {createElement} from 'lwc';
+import QuanticResultField from '../quanticResultField';
+
+const invalidType = 'invalid type';
+
+const fieldTypes = [
+  {
+    name: 'string',
+    element: 'c-quantic-result-text',
+  },
+  {
+    name: 'date',
+    element: 'c-quantic-result-date',
+  },
+  {
+    name: 'number',
+    element: 'c-quantic-result-number',
+  },
+  {
+    name: 'multi',
+    element: 'c-quantic-result-multi-value-text',
+  },
+];
+
+const defaultOptions = {
+  result: {
+    raw: {
+      testField: 'test value',
+    },
+  },
+  field: 'testField',
+  label: 'test label',
+  type: 'string',
+};
+
+function createTestComponent(options = defaultOptions) {
+  const element = createElement('c-quantic-result-field', {
+    is: QuanticResultField,
+  });
+
+  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));
+}
+
+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);
+  }
+}
+
+describe('c-quantic-result-field', () => {
+  beforeEach(() => {
+    console.error = 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();
+  });
+
+  describe('when the field type is invalid', () => {
+    it('should display an error', async () => {
+      const element = createTestComponent({
+        ...defaultOptions,
+        type: invalidType,
+      });
+      await flushPromises();
+
+      const error = element.shadowRoot.querySelector('.error-message');
+
+      expect(error).not.toBeNull();
+      expect(error.textContent).toBe('c-quantic-result-field Error');
+      expect(console.error).toHaveBeenCalledWith(
+        `The provided type "${invalidType}" is invalid. The type must be one of multi | number | date | string`
+      );
+    });
+  });
+
+  fieldTypes.forEach((fieldType) => {
+    it(`should correctly display the result field of type ${fieldType.name} value`, async () => {
+      const element = createTestComponent({
+        ...defaultOptions,
+        type: fieldType.name,
+      });
+      await flushPromises();
+
+      const fieldComponent = element.shadowRoot.querySelector(
+        fieldType.element
+      );
+      const {label, field} = fieldComponent;
+
+      expect(fieldComponent).not.toBeNull();
+      expect(label).toBe(defaultOptions.label);
+      expect(field).toBe(defaultOptions.field);
+    });
+  });
+});

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

@@ -0,0 +1,209 @@
+/* eslint-disable no-import-assign */
+import * as mockHeadlessLoader from 'c/quanticHeadlessLoader';
+// @ts-ignore
+import {createElement} from 'lwc';
+import QuanticResultHighlightedTextField from '../quanticResultHighlightedTextField';
+
+const componentName = 'c-quantic-result-highlighted-text-field';
+
+const expectedConsoleErrorMessage = `The ${componentName} requires a result and a field to be specified.`;
+
+const exampleField = 'examplefield';
+const exampleFieldValue = 'example highlight';
+const highlightedValue = 'highlight';
+const exampleHighlightedFieldValue = `example <b>${highlightedValue}</b>`;
+
+const exampleLabel = 'example label';
+const exampleResult = {
+  [exampleField]: exampleFieldValue,
+};
+
+const selectors = {
+  labelSelector: '.result-text__label',
+  valueSelector: '.result-text__value',
+  errorSelector: '.error-message',
+  highlightedSection: 'b',
+};
+
+const defaultOptions = {
+  result: exampleResult,
+  field: exampleField,
+};
+
+let isInitialized = false;
+
+// @ts-ignore
+mockHeadlessLoader.initializeWithHeadless = (element, engineId, initialize) => {
+  if (element instanceof QuanticResultHighlightedTextField) {
+    if (!isInitialized) {
+      isInitialized = true;
+      initialize();
+    }
+  }
+};
+
+// @ts-ignore
+mockHeadlessLoader.getHeadlessBundle = () => {
+  return {
+    ResultTemplatesHelpers: {
+      getResultProperty: (result, field) => result[`${field}`],
+    },
+    HighlightUtils: {
+      highlightString: () => exampleHighlightedFieldValue,
+    },
+  };
+};
+
+function createTestComponent(options = defaultOptions) {
+  const element = createElement(componentName, {
+    is: QuanticResultHighlightedTextField,
+  });
+
+  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-result-highlighted-text-field', () => {
+  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);
+    }
+    isInitialized = false;
+    jest.clearAllMocks();
+  }
+
+  beforeEach(() => {
+    console.error = jest.fn();
+    // @ts-ignore
+    global.Bueno = {
+      isString: jest
+        .fn()
+        .mockImplementation(
+          (value) => Object.prototype.toString.call(value) === '[object String]'
+        ),
+    };
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('error handeling when the componentis used with missing properties', () => {
+    describe('when no result is given', () => {
+      it('should show an error', async () => {
+        // @ts-ignore
+        const element = createTestComponent({field: exampleField});
+        await flushPromises();
+
+        const errorMessage = element.shadowRoot.querySelector(
+          selectors.errorSelector
+        );
+
+        expect(errorMessage).not.toBeNull();
+        expect(console.error).toHaveBeenCalledWith(expectedConsoleErrorMessage);
+      });
+    });
+
+    describe('when no field is given', () => {
+      it('should show an error', async () => {
+        // @ts-ignore
+        const element = createTestComponent({result: exampleResult});
+        await flushPromises();
+
+        const errorMessage = element.shadowRoot.querySelector(
+          selectors.errorSelector
+        );
+
+        expect(errorMessage).not.toBeNull();
+        expect(console.error).toHaveBeenCalledWith(expectedConsoleErrorMessage);
+      });
+    });
+
+    describe('when an empty string is given as a field', () => {
+      it('should show an error', async () => {
+        const element = createTestComponent({...defaultOptions, field: ''});
+        await flushPromises();
+
+        const errorMessage = element.shadowRoot.querySelector(
+          selectors.errorSelector
+        );
+
+        expect(errorMessage).not.toBeNull();
+        expect(console.error).toHaveBeenCalledWith(expectedConsoleErrorMessage);
+      });
+    });
+  });
+
+  describe('displaying highlights', () => {
+    describe('when field highlights are found in the result', () => {
+      it('should render the result field value with proper highlights', async () => {
+        const element = createTestComponent({
+          ...defaultOptions,
+          result: {
+            ...defaultOptions.result,
+            [`${exampleField}Highlights`]: exampleFieldValue,
+          },
+        });
+        await flushPromises();
+
+        const fieldValueElement = element.shadowRoot.querySelector(
+          selectors.valueSelector
+        );
+        const highlightedSection = fieldValueElement.querySelector(
+          selectors.highlightedSection
+        );
+
+        expect(fieldValueElement.textContent).toBe(exampleFieldValue);
+        expect(highlightedSection).not.toBeNull();
+        expect(highlightedSection.textContent).toBe(highlightedValue);
+      });
+    });
+
+    describe('when field highlights are not found in the result', () => {
+      it('should render the result field value without highlights', async () => {
+        const element = createTestComponent();
+        await flushPromises();
+
+        const fieldValueElement = element.shadowRoot.querySelector(
+          selectors.valueSelector
+        );
+        const highlightedSection = fieldValueElement.querySelector(
+          selectors.highlightedSection
+        );
+
+        expect(fieldValueElement.textContent).toBe(exampleFieldValue);
+        expect(highlightedSection).toBeNull();
+      });
+    });
+  });
+
+  describe('displaying the component with a label', () => {
+    it('should render the field value with a label', async () => {
+      const element = createTestComponent({
+        ...defaultOptions,
+        label: exampleLabel,
+      });
+      await flushPromises();
+
+      const labelElement = element.shadowRoot.querySelector(
+        selectors.labelSelector
+      );
+      const fieldValueElement = element.shadowRoot.querySelector(
+        selectors.valueSelector
+      );
+
+      expect(labelElement.textContent).toBe(`${exampleLabel}:`);
+      expect(fieldValueElement.textContent).toBe(exampleFieldValue);
+    });
+  });
+});