@coveo/quantic 3.38.2 → 3.39.1

package/force-app/main/default/labels/CustomLabels.labels-meta.xml

@@ -1624,4 +1624,18 @@
     <protected>false</protected>
     <shortDescription>No generated answer available.</shortDescription>
   </labels>
+  <labels>
+    <fullName>quantic_AskFollowUp</fullName>
+    <value>Ask follow-up</value>
+    <language>en_US</language>
+    <protected>false</protected>
+    <shortDescription>Ask follow-up</shortDescription>
+  </labels>
+  <labels>
+    <fullName>quantic_SubmitFollowUp</fullName>
+    <value>Submit follow-up</value>
+    <language>en_US</language>
+    <protected>false</protected>
+    <shortDescription>Submit follow-up</shortDescription>
+  </labels>
 </CustomLabels>

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

@@ -0,0 +1,180 @@
+import {buildCreateTestComponent, cleanup, flushPromises} from 'c/testUtils';
+import QuanticGeneratedAnswerFollowUpInput from '../quanticGeneratedAnswerFollowUpInput';
+
+jest.mock(
+  '@salesforce/label/c.quantic_SubmitFollowUp',
+  () => ({default: 'Submit follow-up'}),
+  {virtual: true}
+);
+jest.mock(
+  '@salesforce/label/c.quantic_AskFollowUp',
+  () => ({default: 'Ask follow-up'}),
+  {virtual: true}
+);
+jest.mock('c/quanticUtils', () => ({
+  keys: {ENTER: 'Enter'},
+}));
+
+const selectors = {
+  input: 'lightning-input',
+  submitButton: 'lightning-button-icon',
+  inputContainer: '.follow-up-input__input-container',
+};
+
+const createTestComponent = buildCreateTestComponent(
+  QuanticGeneratedAnswerFollowUpInput,
+  'c-quantic-generated-answer-follow-up-input'
+);
+
+describe('c-quantic-generated-answer-follow-up-input', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should render the input and submit button', async () => {
+    const element = createTestComponent();
+    await flushPromises();
+
+    const input = element.shadowRoot.querySelector(selectors.input);
+    const submitButton = element.shadowRoot.querySelector(
+      selectors.submitButton
+    );
+
+    expect(input).not.toBeNull();
+    expect(submitButton).not.toBeNull();
+  });
+
+  describe('submitting a follow up', () => {
+    it('should dispatch #quantic__submitfollowup when pressing Enter', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const handler = jest.fn();
+      element.addEventListener('quantic__submitfollowup', handler);
+
+      const input = element.shadowRoot.querySelector(selectors.input);
+      input.value = 'follow up question';
+      input.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}));
+
+      expect(handler).toHaveBeenCalledTimes(1);
+      expect(handler.mock.calls[0][0].detail.value).toBe('follow up question');
+    });
+
+    it('should dispatch #quantic__submitfollowup when clicking the submit button', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const handler = jest.fn();
+      element.addEventListener('quantic__submitfollowup', handler);
+
+      const input = element.shadowRoot.querySelector(selectors.input);
+      input.value = 'another question';
+
+      const submitButton = element.shadowRoot.querySelector(
+        selectors.submitButton
+      );
+      submitButton.click();
+
+      expect(handler).toHaveBeenCalledTimes(1);
+      expect(handler.mock.calls[0][0].detail.value).toBe('another question');
+    });
+
+    it('should clear the input and blur it after a successful submit', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const input = element.shadowRoot.querySelector(selectors.input);
+      input.value = 'a question';
+      input.blur = jest.fn();
+
+      input.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}));
+
+      expect(input.value).toBe('');
+    });
+  });
+
+  describe('when submission should be blocked', () => {
+    it('should not dispatch the event when submitButtonDisabled is true', async () => {
+      const element = createTestComponent({submitButtonDisabled: true});
+      await flushPromises();
+
+      const handler = jest.fn();
+      element.addEventListener('quantic__submitfollowup', handler);
+
+      const input = element.shadowRoot.querySelector(selectors.input);
+      input.value = 'a question';
+      input.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}));
+
+      expect(handler).not.toHaveBeenCalled();
+    });
+
+    it('should not dispatch the event when input is whitespace only', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const handler = jest.fn();
+      element.addEventListener('quantic__submitfollowup', handler);
+
+      const input = element.shadowRoot.querySelector(selectors.input);
+      input.value = '   ';
+      input.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter'}));
+
+      expect(handler).not.toHaveBeenCalled();
+    });
+
+    it('should not dispatch the event when input is empty', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const handler = jest.fn();
+      element.addEventListener('quantic__submitfollowup', handler);
+
+      const input = element.shadowRoot.querySelector(selectors.input);
+      input.value = '';
+
+      const submitButton = element.shadowRoot.querySelector(
+        selectors.submitButton
+      );
+      submitButton.click();
+
+      expect(handler).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('focus and blur CSS class toggling', () => {
+    it('should add the focused class when the input is focused', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const input = element.shadowRoot.querySelector(selectors.input);
+      input.dispatchEvent(new CustomEvent('focus'));
+      await flushPromises();
+
+      const container = element.shadowRoot.querySelector(
+        selectors.inputContainer
+      );
+      expect(container.classList).toContain(
+        'follow-up-input__input-container--focused'
+      );
+    });
+
+    it('should remove the focused class when the input is blurred', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const input = element.shadowRoot.querySelector(selectors.input);
+      input.dispatchEvent(new CustomEvent('focus'));
+      await flushPromises();
+
+      input.dispatchEvent(new CustomEvent('blur'));
+      await flushPromises();
+
+      const container = element.shadowRoot.querySelector(
+        selectors.inputContainer
+      );
+      expect(container.classList).not.toContain(
+        'follow-up-input__input-container--focused'
+      );
+    });
+  });
+});

package/force-app/main/default/lwc/quanticGeneratedAnswerFollowUpInput/quanticGeneratedAnswerFollowUpInput.css

@@ -0,0 +1,17 @@
+:host {
+  --slds-c-input-shadow: none;
+}
+
+.follow-up-input__input {
+  border: none;
+  box-shadow: none;
+  outline: none;
+  width: 100%;
+  --slds-c-input-color-border: transparent;
+  --slds-c-input-shadow-focus: transparent;
+  --slds-c-input-spacing-border: 0px;
+}
+
+.follow-up-input__input-container.follow-up-input__input-container--focused {
+  border-color: var(--lwc-brandAccessible, #0176d3);
+}

package/force-app/main/default/lwc/quanticGeneratedAnswerFollowUpInput/quanticGeneratedAnswerFollowUpInput.html

@@ -0,0 +1,29 @@
+<template>
+  <div class={inputContainerClasses}>
+    <lightning-input
+      class="slds-col slds-grow follow-up-input__input"
+      type="text" 
+      variant="label-hidden" 
+      label={labels.askFollowUp}
+      placeholder={labels.askFollowUp}
+      name="ask-followup"
+      lwc:ref="askFollowUpInput"
+      onfocus={handleFocus}
+      onblur={handleBlur}
+      onkeydown={handleKeyDown}
+    ></lightning-input>
+    <lightning-button-icon
+      disabled={submitButtonDisabled}
+      onclick={handleSubmitFollowUp}
+      icon-name="utility:arrowup"
+      variant="brand"
+      class="slds-col slds-grow-none slds-align_absolute-center"
+      name="submit-follow-up"
+      title={labels.submitFollowUp}
+      aria-label={labels.submitFollowUp}
+      alternative-text={labels.submitFollowUp}
+    >
+      <label>{labels.submitFollowUp}</label>
+    </lightning-button-icon>
+  </div>
+</template>

package/force-app/main/default/lwc/quanticGeneratedAnswerFollowUpInput/quanticGeneratedAnswerFollowUpInput.js

@@ -0,0 +1,79 @@
+import submitFollowUp from '@salesforce/label/c.quantic_SubmitFollowUp';
+import askFollowUp from '@salesforce/label/c.quantic_AskFollowUp';
+import {keys} from 'c/quanticUtils';
+import {api, LightningElement} from 'lwc';
+
+/**
+ * The `QuanticGeneratedAnswerFollowUpInput` component allows users to submit follow-up questions related to a generated answer.
+ * @fires CustomEvent#quantic__submitfollowup
+ * @category Internal
+ * @example
+ * <c-quantic-generated-answer-follow-up-input></c-quantic-generated-answer-follow-up-input>
+ */
+export default class QuanticGeneratedAnswerFollowUpInput extends LightningElement {
+  labels = {
+    submitFollowUp,
+    askFollowUp,
+  };
+
+  /**
+   * Whether the submit button is disabled.
+   * @type {boolean}
+   * @defaultValue false
+   */
+  @api
+  submitButtonDisabled = false;
+
+  /** @type {boolean} */
+  _focused = false;
+
+  handleKeyDown(event) {
+    // Let the browser commit IME text before handling shortcuts like Enter during composition.
+    if (event.isComposing || event.keyCode === 229) {
+      return;
+    }
+
+    if (event.key === keys.ENTER) {
+      event.preventDefault();
+      this.handleSubmitFollowUp();
+    }
+  }
+
+  handleSubmitFollowUp() {
+    if (
+      this.submitButtonDisabled ||
+      this.refs.askFollowUpInput.value.trim() === ''
+    ) {
+      return;
+    }
+    this.sendSubmitFollowUpEvent();
+    this.refs.askFollowUpInput.value = '';
+  }
+
+  handleFocus() {
+    this._focused = true;
+  }
+
+  handleBlur() {
+    this._focused = false;
+  }
+
+  /**
+   * Sends the "quantic__submitfollowup" event.
+   */
+  sendSubmitFollowUpEvent() {
+    this.dispatchEvent(
+      new CustomEvent('quantic__submitfollowup', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          value: this.refs.askFollowUpInput.value,
+        },
+      })
+    );
+  }
+
+  get inputContainerClasses() {
+    return `follow-up-input__input-container slds-box slds-grid slds-box_xx-small ${this._focused ? 'follow-up-input__input-container--focused' : ''}`;
+  }
+}

package/force-app/main/default/lwc/quanticGeneratedAnswerFollowUpInput/quanticGeneratedAnswerFollowUpInput.js-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>65.0</apiVersion>
+    <isExposed>false</isExposed>
+</LightningComponentBundle>

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

@@ -0,0 +1,214 @@
+import {
+  AriaLiveRegion,
+  isFocusable,
+  getFirstFocusableElement,
+  getLastFocusableElement,
+  isCustomElement,
+  isParentOf,
+} from 'c/quanticUtils';
+
+describe('accessibilityUtils', () => {
+  describe('AriaLiveRegion', () => {
+    let elem;
+
+    beforeEach(() => {
+      elem = {dispatchEvent: jest.fn()};
+    });
+
+    it('should dispatch a register region event on creation', () => {
+      AriaLiveRegion('test-region', elem);
+      expect(elem.dispatchEvent).toHaveBeenCalledTimes(1);
+      const event = elem.dispatchEvent.mock.calls[0][0];
+      expect(event.type).toBe('quantic__registerregion');
+      expect(event.detail).toEqual({
+        regionName: 'test-region',
+        assertive: false,
+      });
+    });
+
+    it('should dispatch a register region event with assertive flag', () => {
+      AriaLiveRegion('test-region', elem, true);
+      const event = elem.dispatchEvent.mock.calls[0][0];
+      expect(event.detail.assertive).toBe(true);
+    });
+
+    it('should dispatch an aria live message event when dispatchMessage is called', () => {
+      const region = AriaLiveRegion('test-region', elem);
+      region.dispatchMessage('hello');
+      expect(elem.dispatchEvent).toHaveBeenCalledTimes(2);
+      const event = elem.dispatchEvent.mock.calls[1][0];
+      expect(event.type).toBe('quantic__arialivemessage');
+      expect(event.detail).toEqual({
+        regionName: 'test-region',
+        assertive: false,
+        message: 'hello',
+      });
+    });
+  });
+
+  describe('isFocusable', () => {
+    function createElement(tag, attrs = {}) {
+      const el = document.createElement(tag);
+      Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, v));
+      return el;
+    }
+
+    it('should return true for a button', () => {
+      expect(isFocusable(createElement('button'))).toBe(true);
+    });
+
+    it('should return false for a disabled button', () => {
+      expect(isFocusable(createElement('button', {disabled: ''}))).toBe(false);
+    });
+
+    it('should return true for an anchor with href', () => {
+      expect(isFocusable(createElement('a', {href: '#'}))).toBe(true);
+    });
+
+    it('should return false for an anchor without href', () => {
+      expect(isFocusable(createElement('a'))).toBe(false);
+    });
+
+    it('should return true for an input', () => {
+      expect(isFocusable(createElement('input'))).toBe(true);
+    });
+
+    it('should return false for a disabled input', () => {
+      expect(isFocusable(createElement('input', {disabled: ''}))).toBe(false);
+    });
+
+    it('should return true for an element with tabindex >= 0', () => {
+      expect(isFocusable(createElement('div', {tabindex: '0'}))).toBe(true);
+    });
+
+    it('should return false for an element with tabindex -1', () => {
+      expect(isFocusable(createElement('div', {tabindex: '-1'}))).toBe(false);
+    });
+
+    it('should return true for a contentEditable element', () => {
+      expect(isFocusable(createElement('div', {contentEditable: 'true'}))).toBe(
+        true
+      );
+    });
+
+    it('should return false for a plain div', () => {
+      expect(isFocusable(createElement('div'))).toBe(false);
+    });
+
+    it('should return true for an iframe', () => {
+      expect(isFocusable(createElement('iframe'))).toBe(true);
+    });
+
+    it('should return true for a select', () => {
+      expect(isFocusable(createElement('select'))).toBe(true);
+    });
+
+    it('should return true for a textarea', () => {
+      expect(isFocusable(createElement('textarea'))).toBe(true);
+    });
+  });
+
+  describe('isCustomElement', () => {
+    it('should return true for elements with a hyphen in the tag name', () => {
+      const el = document.createElement('my-component');
+      expect(isCustomElement(el)).toBe(true);
+    });
+
+    it('should return false for standard elements', () => {
+      const el = document.createElement('div');
+      expect(isCustomElement(el)).toBe(false);
+    });
+
+    it('should return false for null', () => {
+      expect(isCustomElement(null)).toBe(false);
+    });
+  });
+
+  describe('getFirstFocusableElement', () => {
+    it('should return null for null input', () => {
+      expect(getFirstFocusableElement(null)).toBeNull();
+    });
+
+    it('should return the element itself if it is focusable and has no focusable children', () => {
+      const btn = document.createElement('button');
+      expect(getFirstFocusableElement(btn)).toBe(btn);
+    });
+
+    it('should return the first focusable child', () => {
+      const div = document.createElement('div');
+      const span = document.createElement('span');
+      const btn1 = document.createElement('button');
+      const btn2 = document.createElement('button');
+      div.appendChild(span);
+      div.appendChild(btn1);
+      div.appendChild(btn2);
+      expect(getFirstFocusableElement(div)).toBe(btn1);
+    });
+
+    it('should return null for a custom element without data-focusable', () => {
+      const el = document.createElement('my-component');
+      expect(getFirstFocusableElement(el)).toBeNull();
+    });
+
+    it('should return the custom element if data-focusable is true', () => {
+      const el = document.createElement('my-component');
+      el.dataset.focusable = 'true';
+      expect(getFirstFocusableElement(el)).toBe(el);
+    });
+
+    it('should return null for a text node', () => {
+      const text = document.createTextNode('hello');
+      expect(getFirstFocusableElement(text)).toBeNull();
+    });
+  });
+
+  describe('getLastFocusableElement', () => {
+    it('should return null for null input', () => {
+      expect(getLastFocusableElement(null)).toBeNull();
+    });
+
+    it('should return the last focusable child', () => {
+      const div = document.createElement('div');
+      const btn1 = document.createElement('button');
+      const btn2 = document.createElement('button');
+      div.appendChild(btn1);
+      div.appendChild(btn2);
+      expect(getLastFocusableElement(div)).toBe(btn2);
+    });
+
+    it('should return the element itself if it is focusable and has no focusable children', () => {
+      const input = document.createElement('input');
+      expect(getLastFocusableElement(input)).toBe(input);
+    });
+  });
+
+  describe('isParentOf', () => {
+    it('should return false for null', () => {
+      expect(isParentOf(null, 'MY-COMPONENT')).toBe(false);
+    });
+
+    it('should return true if the element itself matches the target tag', () => {
+      const el = document.createElement('my-component');
+      expect(isParentOf(el, 'MY-COMPONENT')).toBe(true);
+    });
+
+    it('should return true if a descendant matches the target tag', () => {
+      const wrapper = document.createElement('div');
+      const child = document.createElement('my-component');
+      wrapper.appendChild(child);
+      expect(isParentOf(wrapper, 'MY-COMPONENT')).toBe(true);
+    });
+
+    it('should return false if no descendant matches', () => {
+      const wrapper = document.createElement('div');
+      const child = document.createElement('span');
+      wrapper.appendChild(child);
+      expect(isParentOf(wrapper, 'MY-COMPONENT')).toBe(false);
+    });
+
+    it('should return false for a text node', () => {
+      const text = document.createTextNode('hello');
+      expect(isParentOf(text, 'MY-COMPONENT')).toBe(false);
+    });
+  });
+});

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

@@ -0,0 +1,86 @@
+import {Store} from 'c/quanticUtils';
+
+describe('storeUtils', () => {
+  describe('Store.facetTypes', () => {
+    it('should expose the expected facet type keys', () => {
+      expect(Store.facetTypes).toEqual({
+        FACETS: 'facets',
+        NUMERICFACETS: 'numericFacets',
+        DATEFACETS: 'dateFacets',
+        CATEGORYFACETS: 'categoryFacets',
+      });
+    });
+  });
+
+  describe('Store.initialize', () => {
+    it('should return a store with empty state', () => {
+      const store = Store.initialize();
+      expect(store).toEqual({
+        state: {
+          facets: {},
+          numericFacets: {},
+          dateFacets: {},
+          categoryFacets: {},
+          sort: {},
+        },
+      });
+    });
+  });
+
+  describe('Store.registerFacetToStore', () => {
+    it('should register facet data under the given facet type and id', () => {
+      const store = Store.initialize();
+      const data = {facetId: 'author', label: 'Author'};
+      Store.registerFacetToStore(store, 'facets', data);
+      expect(store.state.facets.author).toEqual(data);
+    });
+
+    it('should not overwrite an existing facet entry', () => {
+      const store = Store.initialize();
+      const data = {facetId: 'author', label: 'Author'};
+      Store.registerFacetToStore(store, 'facets', data);
+      Store.registerFacetToStore(store, 'facets', {
+        facetId: 'author',
+        label: 'Updated',
+      });
+      expect(store.state.facets.author.label).toBe('Author');
+    });
+  });
+
+  describe('Store.registerSortOptionDataToStore', () => {
+    it('should set sort data on the store', () => {
+      const store = Store.initialize();
+      const sortData = [{label: 'Relevance', value: 'relevance'}];
+      Store.registerSortOptionDataToStore(store, sortData);
+      expect(store.state.sort).toBe(sortData);
+    });
+  });
+
+  describe('Store.getFromStore', () => {
+    it('should return facet data for the given type', () => {
+      const store = Store.initialize();
+      const data = {facetId: 'source', label: 'Source'};
+      Store.registerFacetToStore(store, 'facets', data);
+      expect(Store.getFromStore(store, 'facets')).toEqual({source: data});
+    });
+
+    it('should return an empty object when no facets are registered', () => {
+      const store = Store.initialize();
+      expect(Store.getFromStore(store, 'facets')).toEqual({});
+    });
+  });
+
+  describe('Store.getSortOptionsFromStore', () => {
+    it('should return the sort options', () => {
+      const store = Store.initialize();
+      const sortData = [{label: 'Date', value: 'date'}];
+      Store.registerSortOptionDataToStore(store, sortData);
+      expect(Store.getSortOptionsFromStore(store)).toBe(sortData);
+    });
+
+    it('should return an empty object when no sort options are registered', () => {
+      const store = Store.initialize();
+      expect(Store.getSortOptionsFromStore(store)).toEqual({});
+    });
+  });
+});