@coveo/quantic 3.43.2 → 3.43.3

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

@@ -3,7 +3,7 @@ import {
   useCaseEnum,
   useCaseTestCases,
 } from '../../../../../../playwright/utils/useCase';
-import facetData from './data';
+import {initialFacetData, expandedFacetData, selectedFacetData} from './data';
 
 const fixtures = {
   search: testSearch,
@@ -14,12 +14,22 @@ useCaseTestCases.forEach((useCase) => {
   let test = fixtures[useCase.value];
   test.describe(`quantic facet ${useCase.label}`, () => {
     test.describe('when selecting and deselecting a facet value', () => {
+      test.use({
+        facetResponses: {
+          responses: [
+            [initialFacetData],
+            [selectedFacetData],
+            [initialFacetData],
+          ],
+        },
+      });
+
       test('should trigger a new search and log the corresponding UA analytics events', async ({
         baseFacet,
         facet,
       }) => {
         const selectedIndex = 0;
-        const {facetId, field, values} = facetData;
+        const {facetId, field, values} = initialFacetData;
         const facetSelectUaRequest = baseFacet.waitForFacetSelectUaAnalytics({
           facetId,
           facetField: field,
@@ -54,12 +64,22 @@ useCaseTestCases.forEach((useCase) => {
     });
 
     test.describe('when selecting a facet value and clicking the clear filter button', () => {
+      test.use({
+        facetResponses: {
+          responses: [
+            [initialFacetData],
+            [selectedFacetData],
+            [initialFacetData],
+          ],
+        },
+      });
+
       test('should trigger a new search and log the corresponding UA analytics events', async ({
         baseFacet,
         facet,
       }) => {
         const selectedIndex = 0;
-        const {facetId, field, values} = facetData;
+        const {facetId, field, values} = initialFacetData;
         const facetSelectUaRequest = baseFacet.waitForFacetSelectUaAnalytics({
           facetId,
           facetField: field,
@@ -92,11 +112,20 @@ useCaseTestCases.forEach((useCase) => {
     });
 
     test.describe('when expanding and collapsing facet values using Show More/Less buttons', () => {
+      test.use({
+        facetResponses: {
+          responses: [[initialFacetData], [expandedFacetData], [initialFacetData]],
+        },
+        options: {
+          numberOfValues: 2,
+        },
+      });
+
       test('should fetch additional facet values and send correct UA analytics', async ({
         baseFacet,
         facet,
       }) => {
-        const {facetId, field} = facetData;
+        const {facetId, field} = initialFacetData;
         const uaRequest = baseFacet.waitForShowMoreFacetResultsUaAnalytics({
           facetId,
           facetField: field,
@@ -137,9 +166,12 @@ useCaseTestCases.forEach((useCase) => {
       const facetValueIndex = 0;
 
       test.use({
+        facetResponses: {
+          responses: [[initialFacetData], [selectedFacetData]],
+        },
         options: {
           caption: exampleCaption,
-          value: facetData.values[facetValueIndex].value,
+          value: initialFacetData.values[facetValueIndex].value,
         },
       });
       test('should display the custom caption instead of the raw facet value', async ({
@@ -149,7 +181,7 @@ useCaseTestCases.forEach((useCase) => {
         expect(facet.facetValue.nth(facetValueIndex)).toHaveText(
           new RegExp(exampleCaption)
         );
-        const {facetId, field, values} = facetData;
+        const {facetId, field, values} = initialFacetData;
         const uaRequest = baseFacet.waitForFacetSelectUaAnalytics({
           facetId,
           facetField: field,
@@ -173,7 +205,7 @@ useCaseTestCases.forEach((useCase) => {
           baseFacet,
           facet,
         }) => {
-          const {field: expectedField} = facetData;
+          const {field: expectedField} = initialFacetData;
           const exampleQuery = 'test';
           const facetSearchResponsePromise =
             baseFacet.waitForFacetSearchResponse();
@@ -190,10 +222,12 @@ useCaseTestCases.forEach((useCase) => {
 
       test.describe('with a selected value in the URL', () => {
         const selectedIndex = 0;
-        const {field, values} = facetData;
+        const {field, values} = initialFacetData;
         test.use({
           urlHash: `f-${field}=${values[selectedIndex].value}`,
-          facetResponseMock: undefined,
+          facetResponses: {
+            responses: [],
+          },
         });
 
         test('should select the correct facet value', async ({facet}) => {

package/force-app/main/default/lwc/quanticGeneratedAnswer/templates/generatedAnswer.html

@@ -87,8 +87,8 @@
   </template>
   <template lwc:if={cannotAnswer}>
     <template lwc:if={isManualAnswerGeneration}>
-      <div data-testid="generated-answer__no-answer-card" class="slds-box">
-        <div class="generated-answer__card-header slds-grid slds-grid_vertical-align-center slds-border_bottom slds-p-around_x-small">
+      <div data-testid="generated-answer__no-answer-card" class="slds-box slds-p-around_none">
+        <div class="generated-answer__card-header slds-grid slds-grid_vertical-align-center slds-border_bottom slds-p-around_small">
           <div class="generated-answer__header-title slds-grid slds-grid_vertical-align-center">
             <lightning-icon
               icon-name="utility:sparkles"
@@ -101,7 +101,7 @@
         </div>
         <div
           data-testid="generated-answer__no-answer-message"
-          class="generated-answer__content slds-var-m-top_medium"
+          class="generated-answer__content slds-p-around_small"
         >
           <div class={generatedAnswerClass}>
             <slot name="no-answer-message">{labels.noGeneratedAnswer}</slot>

package/force-app/main/default/lwc/quanticNumericFacet/e2e/data.ts

@@ -1,10 +1,16 @@
-const facetData = {
+const facetId = 'ytlikecount';
+const field = 'ytlikecount';
+
+/**
+ * Facet response before any value is selected.
+ */
+export const initialFacetData = {
   domain: {
     start: 0,
     end: 200,
   },
-  facetId: 'ytlikecount',
-  field: 'ytlikecount',
+  facetId,
+  field,
   moreValuesAvailable: false,
   values: [
     {
@@ -25,4 +31,18 @@ const facetData = {
   indexScore: 0.4,
 };
 
-export default facetData;
+const [firstRange, secondRange] = initialFacetData.values;
+
+/**
+ * Facet response after the first value is selected.
+ */
+export const selectedFacetData = {
+  ...initialFacetData,
+  values: [
+    {
+      ...firstRange,
+      state: 'selected',
+    },
+    secondRange,
+  ],
+};

package/force-app/main/default/lwc/quanticNumericFacet/e2e/fixture.ts

@@ -6,7 +6,7 @@ import {
   insightSearchRequestRegex,
 } from '../../../../../../playwright/utils/requests';
 import {BaseFacetObject} from '../../../../../../playwright/page-object/baseFacetObject';
-import facetData from './data';
+import {initialFacetData} from './data';
 import {facetBase} from '../../../../../../playwright/fixtures/baseFacetFixture';
 
 const pageUrl = 's/quantic-numeric-facet';
@@ -23,18 +23,20 @@ type QuanticNumericFacetE2EFixtures = {
 
 export const testSearch = facetBase.extend<QuanticNumericFacetE2EFixtures>({
   options: {withInput: true},
-  facetResponseMock: [facetData],
+  facetResponses: {responses: [[initialFacetData]]},
   baseFacet: async ({page}, use) => {
     await use(new BaseFacetObject(page, searchRequestRegex));
   },
   facet: async (
-    {page, options, configuration, baseFacet, urlHash, facetResponseMock},
+    {page, options, configuration, baseFacet, urlHash, facetResponses},
     use
   ) => {
+    // search use case: interface auto-triggers a search on load, hence the mockSearchWithBaseResponse call below
+    await baseFacet.mockSearchWithBaseResponse();
     await page.goto(`${pageUrl}#${urlHash ? urlHash : ''}`);
-    if (facetResponseMock) {
-      await baseFacet.mockSearchWithFacetResponse(facetResponseMock);
-    }
+    await baseFacet.mockSearchWithFacetResponseSequence(
+      facetResponses?.responses
+    );
 
     configuration.configure(options);
     await baseFacet.waitForSearchResponse();
@@ -45,7 +47,7 @@ export const testSearch = facetBase.extend<QuanticNumericFacetE2EFixtures>({
 
 export const testInsight = facetBase.extend<QuanticNumericFacetE2EFixtures>({
   options: {withInput: true},
-  facetResponseMock: [facetData],
+  facetResponses: {responses: [[initialFacetData]]},
   baseFacet: async ({page}, use) => {
     await use(new BaseFacetObject(page, insightSearchRequestRegex));
   },
@@ -53,17 +55,19 @@ export const testInsight = facetBase.extend<QuanticNumericFacetE2EFixtures>({
     await use(new InsightSetupObject(page));
   },
   facet: async (
-    {page, options, baseFacet, configuration, insightSetup, facetResponseMock},
+    {page, options, baseFacet, configuration, insightSetup, facetResponses},
     use
   ) => {
     await page.goto(pageUrl);
-    if (facetResponseMock) {
-      await baseFacet.mockSearchWithFacetResponse(facetResponseMock);
-    }
+    await baseFacet.mockSearchWithFacetResponseSequence(
+      facetResponses?.responses
+    );
     configuration.configure({...options, useCase: useCaseEnum.insight});
     await insightSetup?.waitForInsightInterfaceInitialization();
-    await baseFacet.performSearch();
-    await baseFacet.waitForSearchResponse();
+    await Promise.all([
+      baseFacet.waitForSearchResponse(),
+      baseFacet.performSearch(),
+    ]);
     await use(new NumericFacetObject(page));
   },
 });

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

@@ -3,7 +3,7 @@ import {
   useCaseEnum,
   useCaseTestCases,
 } from '../../../../../../playwright/utils/useCase';
-import facetData from './data';
+import {initialFacetData, selectedFacetData} from './data';
 
 const fixtures = {
   search: testSearch,
@@ -14,12 +14,22 @@ useCaseTestCases.forEach((useCase) => {
   let test = fixtures[useCase.value];
   test.describe(`quantic numeric facet ${useCase.label}`, () => {
     test.describe('when selecting and deselecting a facet value', () => {
+      test.use({
+        facetResponses: {
+          responses: [
+            [initialFacetData],
+            [selectedFacetData],
+            [initialFacetData],
+          ],
+        },
+      });
+
       test('should trigger a new search and log the corresponding UA analytics events', async ({
         baseFacet,
         facet,
       }) => {
         const selectedIndex = 0;
-        const {facetId, field, values} = facetData;
+        const {facetId, field, values} = initialFacetData;
         const expectedFacetData = {
           facetId,
           facetField: field,
@@ -61,12 +71,22 @@ useCaseTestCases.forEach((useCase) => {
     });
 
     test.describe('when selecting a facet value and clicking the clear filter button', () => {
+      test.use({
+        facetResponses: {
+          responses: [
+            [initialFacetData],
+            [selectedFacetData],
+            [initialFacetData],
+          ],
+        },
+      });
+
       test('should trigger a new search and log the corresponding UA analytics events', async ({
         baseFacet,
         facet,
       }) => {
         const selectedIndex = 0;
-        const {facetId, field, values} = facetData;
+        const {facetId, field, values} = initialFacetData;
         const expectedFacetData = {
           facetId,
           facetField: field,
@@ -113,7 +133,7 @@ useCaseTestCases.forEach((useCase) => {
       }) => {
         const exampleMin = '1';
         const exampleMax = '2';
-        const {facetId, field} = facetData;
+        const {facetId, field} = initialFacetData;
         const expectedFacetData = {
           facetId: `${facetId}_input`,
           facetField: field,
@@ -144,10 +164,12 @@ useCaseTestCases.forEach((useCase) => {
     if (useCase.value === useCaseEnum.search) {
       test.describe('with a selected value in the URL', () => {
         const selectedIndex = 0;
-        const {field, values} = facetData;
+        const {field, values} = initialFacetData;
         test.use({
           urlHash: `nf-${field}=${values[selectedIndex].start}...${values[selectedIndex].end}`,
-          facetResponseMock: undefined,
+          facetResponses: {
+            responses: [],
+          },
         });
 
         test('should select the correct facet value', async ({facet}) => {

package/force-app/main/default/lwc/quanticPager/e2e/fixture.ts

@@ -34,6 +34,7 @@ export const testSearch = quanticBase.extend<QuanticPagerE2ESearchFixtures>({
     await use(new SearchObject(page, searchRequestRegex));
   },
   pager: async ({page, options, configuration, search, urlHash}, use) => {
+    await search.mockSearchWithBaseResponse();
     await page.goto(urlHash ? `${pageUrl}#${urlHash}` : pageUrl);
     const searchResponsePromise = search.waitForSearchResponse();
     configuration.configure(options);
@@ -52,12 +53,11 @@ export const testInsight = quanticBase.extend<QuanticPagerE2EInsightFixtures>({
     await use(new InsightSetupObject(page));
   },
   pager: async ({page, options, search, configuration, insightSetup}, use) => {
+    await search.mockSearchWithBaseResponse();
     await page.goto(pageUrl);
     configuration.configure({...options, useCase: useCaseEnum.insight});
     await insightSetup.waitForInsightInterfaceInitialization();
-    const searchResponsePromise = search.waitForSearchResponse();
-    await search.performSearch();
-    await searchResponsePromise;
+    await Promise.all([search.waitForSearchResponse(), search.performSearch()]);
     await use(new PagerObject(page));
   },
 });

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

@@ -52,7 +52,7 @@ useCaseTestCases.forEach((useCase) => {
         pager,
         search,
       }) => {
-        const examplePage = 3;
+        const examplePage = 2;
         const searchResponsePromise = search.waitForSearchResponse();
         const pagerPageUaAnalyticsPromise =
           pager.waitForPagerNumberUaAnalytics();

package/force-app/main/default/lwc/quanticSort/e2e/fixture.ts

@@ -33,6 +33,7 @@ export const testSearch = quanticBase.extend<QuanticSortE2ESearchFixtures>({
     await use(new SearchObject(page, searchRequestRegex));
   },
   sort: async ({page, options, configuration, search, urlHash}, use) => {
+    await search.mockSearchWithBaseResponse();
     await page.goto(urlHash ? `${sortUrl}#${urlHash}` : sortUrl);
     configuration.configure(options);
     await search.waitForSearchResponse();
@@ -49,11 +50,11 @@ export const testInsight = quanticBase.extend<QuanticSortE2EInsightFixtures>({
     await use(new InsightSetupObject(page));
   },
   sort: async ({page, options, search, configuration, insightSetup}, use) => {
+    await search.mockSearchWithBaseResponse();
     await page.goto(sortUrl);
     configuration.configure({...options, useCase: useCaseEnum.insight});
     await insightSetup.waitForInsightInterfaceInitialization();
-    await search.performSearch();
-    await search.waitForSearchResponse();
+    await Promise.all([search.waitForSearchResponse(), search.performSearch()]);
     await use(new SortObject(page));
   },
 });

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

@@ -9,6 +9,7 @@ const selectors = {
   contentWrapper: '[data-testid="thread-item-content"]',
   visibleContent: '[data-testid="thread-item-content"] > div:not([hidden])',
   line: '[data-testid="thread-item-line"]',
+  lineColumn: '[data-testid="thread-item-line-column"]',
   dot: '[data-testid="thread-item-dot"]',
 };
 
@@ -87,6 +88,52 @@ describe('c-quantic-thread-item', () => {
       const dot = element.shadowRoot.querySelector(selectors.dot);
       expect(dot.className).not.toContain('thread-item__dot--expanded');
     });
+
+    it('dot has interactive class when collapse is enabled', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const dot = element.shadowRoot.querySelector(selectors.dot);
+      expect(dot.className).toContain('thread-item__dot--interactive');
+    });
+
+    it('dot does not have interactive class when disableCollapse is true', async () => {
+      const element = createTestComponent({disableCollapse: true});
+      await flushPromises();
+
+      const dot = element.shadowRoot.querySelector(selectors.dot);
+      expect(dot.className).not.toContain('thread-item__dot--interactive');
+    });
+
+    it('line column has interactive class when collapse is enabled and line is visible', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const lineColumn = element.shadowRoot.querySelector(selectors.lineColumn);
+      expect(lineColumn.className).toContain(
+        'thread-item__line-column--interactive'
+      );
+    });
+
+    it('line column does not have interactive class when disableCollapse is true', async () => {
+      const element = createTestComponent({disableCollapse: true});
+      await flushPromises();
+
+      const lineColumn = element.shadowRoot.querySelector(selectors.lineColumn);
+      expect(lineColumn.className).not.toContain(
+        'thread-item__line-column--interactive'
+      );
+    });
+
+    it('line column does not have interactive class when hideLine is true', async () => {
+      const element = createTestComponent({hideLine: true});
+      await flushPromises();
+
+      const lineColumn = element.shadowRoot.querySelector(selectors.lineColumn);
+      expect(lineColumn.className).not.toContain(
+        'thread-item__line-column--interactive'
+      );
+    });
   });
 
   describe('expanded state', () => {
@@ -143,6 +190,97 @@ describe('c-quantic-thread-item', () => {
       );
       expect(content).toBeNull();
     });
+
+    it('expands the content when the dot is clicked while collapsed', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      element.shadowRoot.querySelector(selectors.dot).click();
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).not.toBeNull();
+    });
+
+    it('collapses the content when the dot is clicked while expanded', async () => {
+      const element = createTestComponent({isExpanded: true});
+      await flushPromises();
+
+      element.shadowRoot.querySelector(selectors.dot).click();
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).toBeNull();
+    });
+
+    it('does not toggle when the dot is clicked and disableCollapse is true', async () => {
+      const element = createTestComponent({disableCollapse: true});
+      await flushPromises();
+
+      element.shadowRoot.querySelector(selectors.dot).click();
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).not.toBeNull();
+    });
+
+    it('expands the content when the line column is clicked while collapsed', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      element.shadowRoot.querySelector(selectors.lineColumn).click();
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).not.toBeNull();
+    });
+
+    it('collapses the content when the line column is clicked while expanded', async () => {
+      const element = createTestComponent({isExpanded: true});
+      await flushPromises();
+
+      element.shadowRoot.querySelector(selectors.lineColumn).click();
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).toBeNull();
+    });
+
+    it('does not toggle when the line column is clicked and disableCollapse is true', async () => {
+      const element = createTestComponent({disableCollapse: true});
+      await flushPromises();
+
+      element.shadowRoot.querySelector(selectors.lineColumn).click();
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).not.toBeNull();
+    });
+
+    it('does not toggle when the line column is clicked and hideLine is true', async () => {
+      const element = createTestComponent({hideLine: true, isExpanded: true});
+      await flushPromises();
+
+      element.shadowRoot.querySelector(selectors.lineColumn).click();
+      await flushPromises();
+
+      const content = element.shadowRoot.querySelector(
+        selectors.visibleContent
+      );
+      expect(content).not.toBeNull();
+    });
   });
 
   describe('disableCollapse', () => {

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

@@ -25,6 +25,7 @@
   flex: 1;
   width: 1px;
   background-color: var(--lwc-colorBorder, #dddbda);
+  transition: background-color 0.2s ease;
 }
 
 .thread-item__line::before,
@@ -35,6 +36,7 @@
   width: 1px;
   height: 8px;
   background-color: var(--lwc-colorBorder, #dddbda);
+  transition: background-color 0.2s ease;
 }
 
 .thread-item__line::before {
@@ -45,6 +47,16 @@
   bottom: -8px;
 }
 
+.thread-item__line-column--interactive {
+  cursor: pointer;
+}
+
+.thread-item__line-column--interactive:hover .thread-item__line,
+.thread-item__line-column--interactive:hover .thread-item__line::before,
+.thread-item__line-column--interactive:hover .thread-item__line::after {
+  background-color: var(--lwc-colorTextDefault, #080707);
+}
+
 .thread-item__content {
   grid-column: 2;
   grid-row: 2;
@@ -55,6 +67,15 @@
   width: 8px;
   border-radius: 50%;
   background-color: var(--lwc-colorBorder, #dddbda);
+  transition: background-color 0.2s ease;
+}
+
+.thread-item__dot--interactive {
+  cursor: pointer;
+}
+
+.thread-item__dot--interactive:hover {
+  background-color: var(--lwc-colorTextDefault, #080707);
 }
 
 .thread-item__dot--expanded {

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

@@ -1,11 +1,19 @@
 <template>
   <li class="thread-item">
     <div class="thread-item__grid">
-      <div class="slds-grid slds-grid_vertical slds-grid_vertical-align-center thread-item__timeline">
+      <div
+        class={lineColumnClass}
+        data-testid="thread-item-line-column"
+        onclick={handleLineClick}
+      >
         <div
           class="slds-grid slds-grid_align-center slds-grid_vertical-align-center thread-item__dot-column"
         >
-          <span class={dotClass} data-testid="thread-item-dot"></span>
+          <span
+            class={dotClass}
+            data-testid="thread-item-dot"
+            onclick={handleDotClick}
+          ></span>
         </div>
         <template lwc:if={shouldDisplayLine}>
           <span class="thread-item__line" data-testid="thread-item-line"></span>

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

@@ -58,6 +58,21 @@ export default class QuanticThreadItem extends LightningElement {
     this._isExpanded = !this._isExpanded;
   }
 
+  handleDotClick(event) {
+    event.stopPropagation();
+    if (this.disableCollapse) {
+      return;
+    }
+    this._isExpanded = !this._isExpanded;
+  }
+
+  handleLineClick() {
+    if (this.disableCollapse || this.hideLine) {
+      return;
+    }
+    this._isExpanded = !this._isExpanded;
+  }
+
   get shouldDisplayLine() {
     return !this.hideLine;
   }
@@ -75,6 +90,28 @@ export default class QuanticThreadItem extends LightningElement {
   }
 
   get dotClass() {
-    return `thread-item__dot${this._isExpanded ? ' thread-item__dot--expanded' : ''}`;
+    const classes = ['thread-item__dot'];
+    if (this._isExpanded) {
+      classes.push('thread-item__dot--expanded');
+    }
+    if (!this.disableCollapse) {
+      classes.push('thread-item__dot--interactive');
+    }
+    return classes.join(' ');
+  }
+
+  get lineColumnClass() {
+    const classes = [
+      'slds-grid',
+      'slds-grid_align-center',
+      'slds-grid_vertical',
+      'slds-grid_vertical-align-center',
+      'slds-shrink-none',
+      'thread-item__timeline',
+    ];
+    if (!this.disableCollapse && !this.hideLine) {
+      classes.push('thread-item__line-column--interactive');
+    }
+    return classes.join(' ');
   }
 }