@coveo/quantic 3.32.0 → 3.33.1

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

@@ -0,0 +1,81 @@
+import type {Locator, Page, Request} from '@playwright/test';
+import {isUaClickEvent} from '../../../../../../playwright/utils/requests';
+
+export class ResultListObject {
+  constructor(public page: Page) {
+    this.page = page;
+  }
+
+  get resultList(): Locator {
+    return this.page.locator('c-quantic-result-list');
+  }
+
+  get resultLinks(): Locator {
+    return this.resultList.locator('c-quantic-result-link a');
+  }
+
+  getResultLink(index: number): Locator {
+    return this.resultLinks.nth(index);
+  }
+
+  async preventNavigationFromResultLink(index: number): Promise<void> {
+    return this.getResultLink(index).evaluate((el) => {
+      el?.addEventListener?.('click', (event) => {
+        event.preventDefault();
+      });
+    });
+  }
+
+  async clickResultLink(index: number): Promise<void> {
+    await this.resultLinks.nth(index).click();
+  }
+
+  async captureClickEventWorkaround(): Promise<void> {
+    // Hack(?) to have the request payload in the analytics click event.
+    // Without this the payload is not available in the request.
+    return this.page.route('*analytics*', (route) => {
+      route.continue();
+    });
+  }
+
+  async waitForResultLinkClickUaAnalytics(
+    expectedFields: Record<string, any>
+  ): Promise<Request> {
+    return this.waitForClickUaAnalytics(
+      'documentOpen',
+      (data: Record<string, any>) => {
+        const matchesExpectedFields = Object.keys(expectedFields).every(
+          (key) => data?.[key] === expectedFields[key]
+        );
+        return matchesExpectedFields;
+      }
+    );
+  }
+
+  async waitForClickUaAnalytics(
+    actionCause: string,
+    fieldsMatcher?: 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]
+        );
+
+        return (
+          matchesExpectedFields &&
+          (fieldsMatcher ? fieldsMatcher(requestData, requestData) : true)
+        );
+      }
+      return false;
+    });
+    return uaRequest;
+  }
+}

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

@@ -0,0 +1,69 @@
+/* eslint-disable @lwc/lwc/no-document-query */
+import {
+  useCaseEnum,
+  useCaseTestCases,
+} from '../../../../../../playwright/utils/useCase';
+import {testInsight, testSearch, expect} from './fixture';
+
+const fixtures = {
+  search: testSearch,
+  insight: testInsight,
+};
+
+const testFieldsToInclude = 'foo,bar,baz';
+const SEARCH_ORIGINCONTEXT = 'Search';
+const INSIGHT_ORIGINCONTEXT = 'InsightPanel';
+
+useCaseTestCases.forEach((useCase) => {
+  let test = fixtures[useCase.value];
+
+  test.describe(`quantic result list ${useCase.label}`, () => {
+    test.describe('fieldsToInclude in the Search API request', () => {
+      test.use({
+        options: {
+          fieldsToInclude: testFieldsToInclude,
+        },
+      });
+      test('when performing a search should send the added fieldsToInclude', async ({
+        resultList,
+        search,
+      }) => {
+        const expectedFieldsToInclude = testFieldsToInclude.split(',');
+        const searchRequestPromise = search.waitForSearchRequest();
+        await search.performSearch();
+        const requestBody = (await searchRequestPromise).postDataJSON();
+        expect(requestBody?.fieldsToInclude).toBeDefined();
+        expect(requestBody).toEqual(
+          expect.objectContaining({
+            fieldsToInclude: expect.arrayContaining(expectedFieldsToInclude),
+          })
+        );
+        await expect(resultList.resultList).toBeVisible();
+      });
+    });
+
+    test.describe('analytics request', () => {
+      test('when clicking a result link should send the expected click event with the correct data', async ({
+        resultList,
+      }) => {
+        await resultList.captureClickEventWorkaround();
+
+        const expectedOriginContext =
+          useCase.value === useCaseEnum.insight
+            ? INSIGHT_ORIGINCONTEXT
+            : SEARCH_ORIGINCONTEXT;
+        const firstResultLink = resultList.getResultLink(0);
+        const firstResultLinkHref = await firstResultLink.getAttribute('href');
+        await resultList.preventNavigationFromResultLink(0);
+
+        const expectedUaRequestPromise =
+          resultList.waitForResultLinkClickUaAnalytics({
+            documentUrl: firstResultLinkHref,
+            originContext: expectedOriginContext,
+          });
+        await resultList.clickResultLink(0);
+        await expectedUaRequestPromise;
+      });
+    });
+  });
+});

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

@@ -0,0 +1,235 @@
+// @ts-ignore
+import {createElement} from 'lwc';
+import QuanticResultMultiValueText from '../quanticResultMultiValueText';
+
+const exampleField = 'examplemultivaluefield';
+const exampleFieldValue = ['One', 'Two', 'Three'];
+const exampleResult = {
+  raw: {
+    [exampleField]: exampleFieldValue,
+  },
+};
+
+const labelSelector = '.result-text__label';
+const valueSelector = '.result-text__value';
+const errorSelector = '.error-message';
+
+const defaultOptions = {
+  result: exampleResult,
+  field: exampleField,
+};
+
+function createTestComponent(options = defaultOptions) {
+  const element = createElement('c-quantic-result-multi-value-text', {
+    is: QuanticResultMultiValueText,
+  });
+
+  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-multi-value-text', () => {
+  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]'
+        ),
+    };
+  });
+
+  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-multi-value-text requires a result and a multi-value field to be specified.'
+      );
+      expect(console.error).toHaveBeenCalledWith(
+        'Could not parse value from field "examplemultivaluefield" as a string array.'
+      );
+    });
+  });
+
+  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-multi-value-text requires a result and a multi-value field to be specified.'
+      );
+      expect(console.error).toHaveBeenCalledWith(
+        'Could not parse value from field "undefined" as a string array.'
+      );
+    });
+  });
+
+  describe('when the field value is an empty string', () => {
+    it('should show an error', async () => {
+      const element = createTestComponent({
+        ...defaultOptions,
+        result: {
+          raw: {
+            // @ts-ignore
+            [exampleField]: '',
+          },
+        },
+      });
+      await flushPromises();
+
+      const errorMessage = element.shadowRoot.querySelector(errorSelector);
+
+      expect(errorMessage).not.toBeNull();
+      expect(console.error).toHaveBeenCalledWith(
+        'Could not parse value from field "examplemultivaluefield" as a string array.'
+      );
+    });
+  });
+
+  describe('when the field value is not a valid multi-value field', () => {
+    it('should show an error', async () => {
+      const element = createTestComponent({
+        ...defaultOptions,
+        result: {
+          raw: {
+            // @ts-ignore
+            [exampleField]: 1,
+          },
+        },
+      });
+      await flushPromises();
+
+      const errorMessage = element.shadowRoot.querySelector(errorSelector);
+
+      expect(errorMessage).not.toBeNull();
+      expect(console.error).toHaveBeenCalledWith(
+        'Could not parse value from field "examplemultivaluefield" as a string array.'
+      );
+    });
+  });
+
+  describe('when required props are given', () => {
+    it('should render the result field value', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const fieldValueElement = element.shadowRoot.querySelector(valueSelector);
+
+      expect(fieldValueElement.textContent).toBe('One, Two, Three');
+    });
+
+    describe('when the number of values exceeds the maximum', () => {
+      const options = {
+        ...defaultOptions,
+        maxValuesToDisplay: 2,
+      };
+
+      it('should hide the extra values', async () => {
+        const element = createTestComponent(options);
+        await flushPromises();
+
+        const fieldValueElement =
+          element.shadowRoot.querySelector(valueSelector);
+
+        expect(fieldValueElement.textContent).toBe('One, Two, c.quantic_NMore');
+      });
+    });
+
+    describe('when the field value is a string with a delimiter', () => {
+      const testResult = {
+        raw: {
+          [exampleField]: 'One-Two-Three',
+        },
+      };
+      const options = {
+        ...defaultOptions,
+        result: testResult,
+        delimiter: '-',
+      };
+
+      it('should render the result field value', async () => {
+        // @ts-ignore
+        const element = createTestComponent(options);
+        await flushPromises();
+
+        const fieldValueElement =
+          element.shadowRoot.querySelector(valueSelector);
+
+        expect(fieldValueElement.textContent).toBe('One, Two, Three');
+      });
+    });
+
+    describe('when a label is provided', () => {
+      const testLabel = 'Numbers';
+      const options = {
+        ...defaultOptions,
+        label: testLabel,
+      };
+
+      it('should hide the extra values', async () => {
+        const element = createTestComponent(options);
+        await flushPromises();
+
+        const fieldValueElement =
+          element.shadowRoot.querySelector(valueSelector);
+        const labelElement = element.shadowRoot.querySelector(labelSelector);
+
+        expect(fieldValueElement.textContent).toBe('One, Two, Three');
+        expect(labelElement.textContent).toBe(`${testLabel}:`);
+      });
+
+      describe('when the label is not a valid string', () => {
+        const invalidLabel = {};
+        const invalidOptions = {
+          ...defaultOptions,
+          label: invalidLabel,
+        };
+
+        it('should show an error', async () => {
+          const element = createTestComponent(invalidOptions);
+          await flushPromises();
+
+          const errorMessage = element.shadowRoot.querySelector(errorSelector);
+
+          expect(errorMessage).not.toBeNull();
+          expect(console.error).toHaveBeenCalledWith(
+            `The "${invalidLabel}" label is not a valid string.`
+          );
+        });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,144 @@
+// @ts-ignore
+import {createElement} from 'lwc';
+import QuanticResultNumber from '../quanticResultNumber';
+
+const exampleField = 'examplenumberfield';
+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-number', {
+    is: QuanticResultNumber,
+  });
+
+  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-number', () => {
+  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-number requires a result and a number field to be specified.'
+      );
+      expect(console.error).toHaveBeenCalledWith(
+        'The "examplenumberfield" field value is not a valid number.'
+      );
+    });
+  });
+
+  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-number requires a result and a number field to be specified.'
+      );
+      expect(console.error).toHaveBeenCalledWith(
+        'The "undefined" field value is not a valid number.'
+      );
+    });
+  });
+
+  describe('when the field value is not a valid number', () => {
+    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);
+    });
+  });
+});