@coveo/quantic 3.43.1 → 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/quanticGeneratedAnswerThread/quanticGeneratedAnswerThread.css

@@ -1,6 +1,19 @@
-.generated-answer-thread__dot-column,
-.generated-answer-thread__line-column {
+.generated-answer-thread__grid {
+  display: grid;
+  grid-template-columns: 10px 1fr;
+  grid-template-rows: auto 1fr;
+  column-gap: var(--lwc-spacingXSmall, 8px);
+}
+
+.generated-answer-thread__timeline {
+  grid-row: 1 / -1;
+  align-self: stretch;
+}
+
+.generated-answer-thread__dot-column {
   width: 10px;
+  height: 1lh;
+  margin-block: var(--lwc-spacingXxSmall, 4px);
 }
 
 .generated-answer-thread__dot {
@@ -12,9 +25,8 @@
 
 .generated-answer-thread__connector {
   position: relative;
+  flex: 1;
   width: 1px;
-  height: 100%;
-  min-height: 12px;
   background-color: var(--lwc-colorBorder, #dddbda);
 }
 

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

@@ -11,16 +11,19 @@
     <ul class="generated-answer-thread">
       <template lwc:if={shouldCollapseOlderAnswers}>
         <li class="generated-answer-thread__show-previous">
-          <div class="slds-grid slds-grid_vertical-align-center">
-            <div
-              class="slds-grid slds-grid_align-center slds-grid_vertical-align-center slds-shrink-none slds-m-right_x-small generated-answer-thread__dot-column"
-            >
-              <span
-                class="generated-answer-thread__dot"
-                data-testid="show-previous-dot"
-              ></span>
+          <div class="generated-answer-thread__grid">
+            <div class="slds-grid slds-grid_vertical slds-grid_vertical-align-center generated-answer-thread__timeline">
+              <div
+                class="slds-grid slds-grid_align-center slds-grid_vertical-align-center generated-answer-thread__dot-column"
+              >
+                <span
+                  class="generated-answer-thread__dot"
+                  data-testid="show-previous-dot"
+                ></span>
+              </div>
+              <span class="generated-answer-thread__connector"></span>
             </div>
-            <div>
+            <div class="slds-has-flexi-truncate">
               <button
                 type="button"
                 class="slds-button_reset slds-p-horizontal_x-small slds-p-vertical_xx-small generated-answer-thread__show-previous-button"
@@ -31,13 +34,6 @@
               </button>
             </div>
           </div>
-          <div class="slds-grid">
-            <div
-              class="slds-grid slds-grid_align-center slds-shrink-none generated-answer-thread__line-column slds-m-right_x-small"
-            >
-              <span class="generated-answer-thread__connector"></span>
-            </div>
-          </div>
         </li>
       </template>
 

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', () => {