npm - @coveo/quantic - Versions diffs - 3.32.0 → 3.33.1 - Mend

@coveo/quantic 3.32.0 → 3.33.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (316) hide show

package/force-app/main/default/lwc/quanticResultQuickview/e2e/pageObject.ts ADDED Viewed

@@ -0,0 +1,38 @@
+import type {Locator, Page, Request} from '@playwright/test';
+import {isUaClickEvent} from '../../../../../../playwright/utils/requests';
+export class ResultQuickviewObject {
+  constructor(public page: Page) {
+    this.page = page;
+  }
+  get quickviewButton(): Locator {
+    return this.page.getByRole('button', {name: 'Open'});
+  }
+  get quickviewContent(): Locator {
+    return this.page
+      .locator('c-quantic-quickview-content iframe')
+      .contentFrame()
+      .locator('div');
+  }
+  get quickviewFooter(): Locator {
+    return this.page.locator('slot[name="footer"]');
+  }
+  async receivedEvents(): Promise<Array<string>> {
+    return this.page.locator('.event__received').allTextContents();
+  }
+  async waitForQuickviewClickEvent(): Promise<Request> {
+    return this.page.waitForRequest((request) => {
+      if (isUaClickEvent(request)) {
+        const requestBody = request.postDataJSON?.();
+        const clickEvent = JSON.parse(requestBody?.clickEvent);
+        return clickEvent?.actionCause === 'documentQuickview';
+      }
+      return false;
+    });
+  }
+}

package/force-app/main/default/lwc/quanticResultQuickview/e2e/quanticResultQuickView.e2e.ts ADDED Viewed

@@ -0,0 +1,66 @@
+import {testSearch, testInsight, expect} from './fixture';
+import {useCaseTestCases} from '../../../../../../playwright/utils/useCase';
+const fixtures = {
+  search: testSearch as typeof testSearch,
+  insight: testInsight as typeof testInsight,
+};
+useCaseTestCases.forEach((useCase) => {
+  let test = fixtures[useCase.value];
+  test.describe(`quantic result quickview ${useCase.label}`, () => {
+    test.describe('when clicked', () => {
+      test('should open container with content', async ({
+        resultQuickview,
+        search,
+      }) => {
+        await search.mockQuickviewResponse(
+          '<html><body><div>dewalt 20v cordless drill</div></body></html>'
+        );
+        const quickViewButton = resultQuickview.quickviewButton;
+        await expect(quickViewButton).toBeVisible();
+        await expect(quickViewButton).not.toBeDisabled();
+        await expect(await resultQuickview.receivedEvents()).toContain(
+          'quantic__haspreview'
+        );
+        const htmlResponsePromise = search.waitForQuickviewResponse();
+        const uaRequest = resultQuickview.waitForQuickviewClickEvent();
+        await quickViewButton.click();
+        await htmlResponsePromise;
+        await uaRequest;
+        const quickviewContent = resultQuickview.quickviewContent;
+        await expect(quickviewContent).toContainText(
+          'dewalt 20v cordless drill'
+        );
+        await expect(resultQuickview.quickviewFooter).toBeVisible();
+      });
+    });
+    test.describe('with a custom preview size defined', () => {
+      test.use({
+        options: {
+          maximumPreviewSize: 420,
+        },
+      });
+      test('should request the preview size on the api call', async ({
+        resultQuickview,
+        search,
+      }) => {
+        await search.mockQuickviewResponse(
+          '<html><body><div>makita 20v cordless drill</div></body></html>'
+        );
+        const quickViewButton = resultQuickview.quickviewButton;
+        const htmlResponsePromise = search.waitForQuickviewResponse();
+        await quickViewButton.click();
+        const response = await htmlResponsePromise;
+        expect(response.url()).toContain('requestedOutputSize=420');
+      });
+    });
+  });
+});

package/force-app/main/default/lwc/quanticResultTemplate/__tests__/quanticResultTemplate.test.js ADDED Viewed

@@ -0,0 +1,90 @@
+// @ts-ignore
+import QuanticResultTemplate from '../quanticResultTemplate';
+import {buildCreateTestComponent, cleanup, flushPromises} from 'c/testUtils';
+const createTestComponent = buildCreateTestComponent(
+  QuanticResultTemplate,
+  'c-quantic-result-template'
+);
+const selectors = {
+  slotByName: (name) => `slot[name="${name}"]`,
+  container: (name) => `div[data-testid="${name}_container"]`,
+};
+const previewSlots = ['label', 'badges', 'date', 'visual'];
+const otherSlots = [
+  'actions',
+  'title',
+  'metadata',
+  'emphasized',
+  'excerpt',
+  'bottom-metadata',
+  'children',
+];
+const allSlots = previewSlots.concat(otherSlots);
+describe('c-quantic-result-template', () => {
+  afterEach(() => {
+    cleanup();
+  });
+  it('should display all slots by default', async () => {
+    const element = createTestComponent();
+    await flushPromises();
+    expect(element.shadowRoot.firstChild.className).toBe(
+      'lgc-bg slds-p-vertical_medium slds-border_bottom'
+    );
+    for (const name of allSlots) {
+      let slot = element.shadowRoot.querySelectorAll(
+        selectors.slotByName(name)
+      );
+      expect(slot).not.toBeNull();
+      expect(slot.length).toBe(1);
+    }
+  });
+  describe('with isAnyPreviewOpen set to true', () => {
+    it('should set aria-hidden to true on the result slots for screen readers', async () => {
+      const element = createTestComponent({
+        isAnyPreviewOpen: true,
+      });
+      await flushPromises();
+      for (const name of previewSlots) {
+        let container = element.shadowRoot.querySelector(
+          selectors.container(name)
+        );
+        expect(container).not.toBeNull();
+        expect(container.ariaHidden).toBe('true');
+      }
+    });
+  });
+  describe('with resultPreviewShouldNotBeAccessible set to true', () => {
+    it('should hide the actions slot', async () => {
+      const element = createTestComponent({
+        resultPreviewShouldNotBeAccessible: true,
+      });
+      await flushPromises();
+      expect(
+        element.shadowRoot.querySelector(selectors.container('actions'))
+          .ariaHidden
+      ).toBe('true');
+    });
+  });
+  describe('with hideBorder set to true', () => {
+    it('should set the hideBorder class', async () => {
+      const element = createTestComponent({
+        hideBorder: true,
+      });
+      await flushPromises();
+      expect(
+        element.shadowRoot.firstChild.className.includes('slds-border_bottom')
+      ).toBe(false);
+    });
+  });
+});

package/force-app/main/default/lwc/quanticResultText/__tests__/quanticResultText.test.js ADDED Viewed

@@ -0,0 +1,155 @@
+// @ts-ignore
+import {createElement} from 'lwc';
+import QuanticResultText from '../quanticResultText';
+const exampleField = 'examplefield';
+const exampleFieldValue = 'example value';
+const exampleLabel = 'example label';
+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-text', {
+    is: QuanticResultText,
+  });
+  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-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-text requires a result and a field to be specified.'
+      );
+    });
+  });
+  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-text requires a result and a field to be specified.'
+      );
+    });
+  });
+  describe('when field is given as am empty string', () => {
+    it('should show an error', async () => {
+      // @ts-ignore
+      const element = createTestComponent({...defaultOptions, field: ''});
+      await flushPromises();
+      const errorMessage = element.shadowRoot.querySelector(errorSelector);
+      expect(errorMessage).not.toBeNull();
+      expect(console.error).toHaveBeenCalledWith(
+        'The c-quantic-result-text requires a result and a field to be specified.'
+      );
+    });
+  });
+  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(exampleFieldValue);
+    });
+  });
+  describe('when a label is given', () => {
+    it('should render the field value with a label', async () => {
+      const element = createTestComponent({
+        ...defaultOptions,
+        label: exampleLabel,
+      });
+      await flushPromises();
+      const labelElement = element.shadowRoot.querySelector(labelSelector);
+      const fieldValueElement = element.shadowRoot.querySelector(valueSelector);
+      expect(labelElement.textContent).toBe(`${exampleLabel}:`);
+      expect(fieldValueElement.textContent).toBe(exampleFieldValue);
+    });
+  });
+  describe('when a formatting function is given', () => {
+    const exampleFormattingFunction = (value) => `formatted ${value}`;
+    it('should render the formatted field value', async () => {
+      const element = createTestComponent({
+        ...defaultOptions,
+        formattingFunction: exampleFormattingFunction,
+      });
+      await flushPromises();
+      const fieldValueElement = element.shadowRoot.querySelector(valueSelector);
+      expect(fieldValueElement.textContent).toBe(
+        exampleFormattingFunction(exampleFieldValue)
+      );
+    });
+  });
+});