@coveo/quantic 3.43.2 → 3.43.4

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

@@ -0,0 +1,130 @@
+/**
+ * Facet response builders for the breadcrumb manager example page
+ * (`exampleQuanticBreadcrumbManager.html`), which registers four facets:
+ * filetype (regular), ytlikecount (numeric), date (timeframe), and
+ * geographicalhierarchy (category).
+ */
+type State = 'idle' | 'selected';
+
+const filetypeFacet = (state: State = 'idle') => ({
+  facetId: 'filetype',
+  field: 'filetype',
+  moreValuesAvailable: false,
+  values: [
+    {value: 'YouTubeVideo', state, numberOfResults: 100},
+    {value: 'txt', state: 'idle', numberOfResults: 50},
+  ],
+  indexScore: 0.5,
+});
+
+const numericFacet = (state: State = 'idle') => ({
+  facetId: 'ytlikecount',
+  field: 'ytlikecount',
+  moreValuesAvailable: false,
+  values: [
+    {start: 0, end: 1000, endInclusive: false, state, numberOfResults: 100},
+    {
+      start: 1000,
+      end: 2000,
+      endInclusive: false,
+      state: 'idle',
+      numberOfResults: 50,
+    },
+  ],
+  indexScore: 0.4,
+});
+
+const timeframeFacet = (state: State = 'idle') => ({
+  facetId: 'date',
+  field: 'date',
+  moreValuesAvailable: false,
+  values: [
+    {start: 'past-1-week', end: 'now', endInclusive: false, state, numberOfResults: 100},
+    {
+      start: 'past-1-month',
+      end: 'now',
+      endInclusive: false,
+      state: 'idle',
+      numberOfResults: 50,
+    },
+    {
+      start: 'past-6-month',
+      end: 'now',
+      endInclusive: false,
+      state: 'idle',
+      numberOfResults: 40,
+    },
+    {
+      start: 'past-1-year',
+      end: 'now',
+      endInclusive: false,
+      state: 'idle',
+      numberOfResults: 30,
+    },
+    {
+      start: 'past-10-year',
+      end: 'now',
+      endInclusive: false,
+      state: 'idle',
+      numberOfResults: 20,
+    },
+  ],
+  indexScore: 0.3,
+});
+
+const categoryFacet = (state: State = 'idle') => ({
+  facetId: 'geographicalhierarchy',
+  field: 'geographicalhierarchy',
+  moreValuesAvailable: false,
+  values:
+    state === 'selected'
+      ? [
+          {
+            value: 'North America',
+            state: 'selected',
+            numberOfResults: 100,
+            children: [],
+            path: ['North America'],
+            isLeafValue: false,
+          },
+        ]
+      : [
+          {
+            value: 'North America',
+            state: 'idle',
+            numberOfResults: 100,
+            children: [],
+            path: ['North America'],
+            isLeafValue: false,
+          },
+          {
+            value: 'Africa',
+            state: 'idle',
+            numberOfResults: 50,
+            children: [],
+            path: ['Africa'],
+            isLeafValue: false,
+          },
+        ],
+  indexScore: 0.2,
+});
+
+const allFacets = (selected?: 'regular' | 'numeric' | 'timeframe' | 'category') => [
+  filetypeFacet(selected === 'regular' ? 'selected' : 'idle'),
+  numericFacet(selected === 'numeric' ? 'selected' : 'idle'),
+  timeframeFacet(selected === 'timeframe' ? 'selected' : 'idle'),
+  categoryFacet(selected === 'category' ? 'selected' : 'idle'),
+];
+
+export const allIdle = allFacets();
+export const regularSelected = allFacets('regular');
+export const numericSelected = allFacets('numeric');
+export const timeframeSelected = allFacets('timeframe');
+export const categorySelected = allFacets('category');
+
+export const regularAndTimeframeSelected = [
+  filetypeFacet('selected'),
+  numericFacet('idle'),
+  timeframeFacet('selected'),
+  categoryFacet('idle'),
+];

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

@@ -1,12 +1,13 @@
 import {BreadcrumbManagerObject} from './pageObject';
-import {quanticBase} from '../../../../../../playwright/fixtures/baseFixture';
-import {SearchObject} from '../../../../../../playwright/page-object/searchObject';
+import {facetBase} from '../../../../../../playwright/fixtures/baseFacetFixture';
+import {BaseFacetObject} from '../../../../../../playwright/page-object/baseFacetObject';
 import {
   searchRequestRegex,
   insightSearchRequestRegex,
 } from '../../../../../../playwright/utils/requests';
 import {InsightSetupObject} from '../../../../../../playwright/page-object/insightSetupObject';
 import {useCaseEnum} from '../../../../../../playwright/utils/useCase';
+import {allIdle} from './data';
 
 const breadcrumbManagerUrl = 's/quantic-breadcrumb-manager';
 
@@ -17,7 +18,6 @@ interface BreadcrumbManagerOptions {
 
 type QuanticBreadcrumbManagerE2EFixtures = {
   breadcrumbManager: BreadcrumbManagerObject;
-  search: SearchObject;
   options: Partial<BreadcrumbManagerOptions>;
 };
 
@@ -32,43 +32,54 @@ type QuanticBreadcrumbManagerE2eInsightFixtures =
   };
 
 export const testSearch =
-  quanticBase.extend<QuanticBreadcrumbManagerE2ESearchFixtures>({
+  facetBase.extend<QuanticBreadcrumbManagerE2ESearchFixtures>({
     options: {},
     urlHash: '',
-    search: async ({page}, use) => {
-      await use(new SearchObject(page, searchRequestRegex));
+    facetResponses: {responses: [allIdle]},
+    baseFacet: async ({page}, use) => {
+      await use(new BaseFacetObject(page, searchRequestRegex));
     },
     breadcrumbManager: async (
-      {page, options, configuration, search, urlHash},
+      {page, options, configuration, baseFacet, urlHash, facetResponses},
       use
     ) => {
+      await baseFacet.mockSearchWithBaseResponse();
       await page.goto(
         urlHash ? `${breadcrumbManagerUrl}#${urlHash}` : breadcrumbManagerUrl
       );
+      await baseFacet.mockSearchWithFacetResponseSequence(
+        facetResponses?.responses
+      );
       configuration.configure(options);
-      await search.waitForSearchResponse();
+      await baseFacet.waitForSearchResponse();
       await use(new BreadcrumbManagerObject(page));
     },
   });
 
 export const testInsight =
-  quanticBase.extend<QuanticBreadcrumbManagerE2eInsightFixtures>({
+  facetBase.extend<QuanticBreadcrumbManagerE2eInsightFixtures>({
     options: {},
-    search: async ({page}, use) => {
-      await use(new SearchObject(page, insightSearchRequestRegex));
+    facetResponses: {responses: [allIdle]},
+    baseFacet: async ({page}, use) => {
+      await use(new BaseFacetObject(page, insightSearchRequestRegex));
     },
     insightSetup: async ({page}, use) => {
       await use(new InsightSetupObject(page));
     },
     breadcrumbManager: async (
-      {page, options, search, configuration, insightSetup},
+      {page, options, baseFacet, configuration, insightSetup, facetResponses},
       use
     ) => {
       await page.goto(breadcrumbManagerUrl);
+      await baseFacet.mockSearchWithFacetResponseSequence(
+        facetResponses?.responses
+      );
       configuration.configure({...options, useCase: useCaseEnum.insight});
       await insightSetup.waitForInsightInterfaceInitialization();
-      await search.performSearch();
-      await search.waitForSearchResponse();
+      await Promise.all([
+        baseFacet.waitForSearchResponse(),
+        baseFacet.performSearch(),
+      ]);
       await use(new BreadcrumbManagerObject(page));
     },
   });

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

@@ -3,6 +3,14 @@ import {
   useCaseEnum,
   useCaseTestCases,
 } from '../../../../../../playwright/utils/useCase';
+import {
+  regularSelected,
+  numericSelected,
+  timeframeSelected,
+  categorySelected,
+  regularAndTimeframeSelected,
+  allIdle,
+} from './data';
 
 const fixtures = {
   search: testSearch,
@@ -23,17 +31,22 @@ useCaseTestCases.forEach((useCase) => {
   test.describe(`quantic breadcrumb manager ${useCase.label}`, () => {
     test.describe('when de-selecting a facet value', () => {
       test.describe('with regular facet values', () => {
+        test.use({
+          facetResponses: {
+            responses: [allIdle, regularSelected, allIdle],
+          },
+        });
         test('should trigger a new search and log analytics', async ({
           breadcrumbManager,
-          search,
+          baseFacet,
         }) => {
           const firstRegularFacetValue =
             await breadcrumbManager.firstRegularFacetValue;
-          const searchResponsePromise = search.waitForSearchResponse();
+          const searchResponsePromise = baseFacet.waitForSearchResponse();
           await breadcrumbManager.clickFirstRegularFacetLink();
           await searchResponsePromise;
 
-          const secondSearchResponsePromise = search.waitForSearchResponse();
+          const secondSearchResponsePromise = baseFacet.waitForSearchResponse();
           const breadcrumbAnalyticsPromise =
             breadcrumbManager.waitForBreadcrumbFacetUaAnalytics({
               facetValue: firstRegularFacetValue,
@@ -45,18 +58,23 @@ useCaseTestCases.forEach((useCase) => {
       });
 
       test.describe('with numeric facet values', () => {
+        test.use({
+          facetResponses: {
+            responses: [allIdle, numericSelected, allIdle],
+          },
+        });
         test('should trigger a new search and log analytics', async ({
           breadcrumbManager,
-          search,
+          baseFacet,
         }) => {
           const [facetRangeStart, facetRangeEnd] =
             (await breadcrumbManager.firstNumericFacetValue)?.split(' - ') ??
             [];
-          const searchResponsePromise = search.waitForSearchResponse();
+          const searchResponsePromise = baseFacet.waitForSearchResponse();
           await breadcrumbManager.clickFirstNumericFacetLink();
           await searchResponsePromise;
 
-          const secondSearchResponsePromise = search.waitForSearchResponse();
+          const secondSearchResponsePromise = baseFacet.waitForSearchResponse();
           // We use the facet display value to compare, but the display value is localized and can contain non-numeric characters while the analytics request doesn't contain those characters.
           const breadcrumbAnalyticsPromise =
             breadcrumbManager.waitForBreadcrumbFacetUaAnalytics({
@@ -70,17 +88,22 @@ useCaseTestCases.forEach((useCase) => {
       });
 
       test.describe('with timeframe|date facet values', () => {
+        test.use({
+          facetResponses: {
+            responses: [allIdle, timeframeSelected, allIdle],
+          },
+        });
         test('should trigger a new search and log analytics', async ({
           breadcrumbManager,
-          search,
+          baseFacet,
         }) => {
           const facetValue = await breadcrumbManager.firstTimeframeFacetValue;
           test.expect(facetValue).not.toBeNull();
-          const searchResponsePromise = search.waitForSearchResponse();
+          const searchResponsePromise = baseFacet.waitForSearchResponse();
           await breadcrumbManager.clickFirstTimeframeFacetLink();
           await searchResponsePromise;
 
-          const secondSearchResponsePromise = search.waitForSearchResponse();
+          const secondSearchResponsePromise = baseFacet.waitForSearchResponse();
           // We use the facet display value to compare, but the display value is prettified and is transformed to be human readable, while the analytics request isn't.
           const [expectedFacetRangeStart, expectedFacetRangeEnd] =
             datetimeFacetLabelToValue[facetValue!].split('..');
@@ -96,17 +119,22 @@ useCaseTestCases.forEach((useCase) => {
       });
 
       test.describe('with category facet values', () => {
+        test.use({
+          facetResponses: {
+            responses: [allIdle, categorySelected, allIdle],
+          },
+        });
         test('should trigger a new search and log analytics', async ({
           breadcrumbManager,
-          search,
+          baseFacet,
         }) => {
           const facetValue = await breadcrumbManager.firstCategoryFacetValue;
           test.expect(facetValue).not.toBeNull();
-          const searchResponsePromise = search.waitForSearchResponse();
+          const searchResponsePromise = baseFacet.waitForSearchResponse();
           await breadcrumbManager.clickFirstCategoryFacetLink();
           await searchResponsePromise;
 
-          const secondSearchResponsePromise = search.waitForSearchResponse();
+          const secondSearchResponsePromise = baseFacet.waitForSearchResponse();
           const expectedFacetValue = facetValue!;
           const breadcrumbAnalyticsPromise =
             breadcrumbManager.waitForBreadcrumbFacetUaAnalytics({
@@ -120,20 +148,30 @@ useCaseTestCases.forEach((useCase) => {
     });
 
     test.describe('when clicking on the clear all filters button', () => {
+      test.use({
+        facetResponses: {
+          responses: [
+            allIdle,
+            regularSelected,
+            regularAndTimeframeSelected,
+            allIdle,
+          ],
+        },
+      });
       test('should send a clear all filters analytics event and clear all selected facets values', async ({
         breadcrumbManager,
-        search,
+        baseFacet,
       }) => {
-        const searchResponsePromise = search.waitForSearchResponse();
+        const searchResponsePromise = baseFacet.waitForSearchResponse();
         await breadcrumbManager.clickFirstRegularFacetLink();
         await searchResponsePromise;
 
-        const searchResponsePromiseTwo = search.waitForSearchResponse();
+        const searchResponsePromiseTwo = baseFacet.waitForSearchResponse();
         await breadcrumbManager.clickFirstTimeframeFacetLink();
         await searchResponsePromiseTwo;
 
         await test.expect(breadcrumbManager.clearAllButton).toBeVisible();
-        const clearAllSearchResponsePromise = search.waitForSearchResponse();
+        const clearAllSearchResponsePromise = baseFacet.waitForSearchResponse();
         const clearAllAnalyticsPromise =
           breadcrumbManager.waitForBreadcrumbResetAllUaAnalytics();
         await breadcrumbManager.clickClearAllButton();
@@ -152,6 +190,9 @@ useCaseTestCases.forEach((useCase) => {
         const facetSelectedHash = 'f-filetype=YouTubeVideo';
         test.use({
           urlHash: facetSelectedHash,
+          facetResponses: {
+            responses: [regularSelected],
+          },
         });
 
         test('should have a facet selected in the breadcrumb manager', async ({

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

@@ -1,9 +1,8 @@
 .card {
   position: relative;
-  padding: 1rem 0.9rem;
-  background: var(--lwc-colorBackgroundAlt, #ffffff);
-  border: var(--lwc-borderWidthThin, 1px) solid var(--lwc-colorBorder, #dddbda);
-  border-radius: 0.25rem;
+  background: var(--slds-g-color-surface-1, var(--lwc-colorBackgroundAlt, #ffffff));
+  border: var(--slds-g-sizing-border-1, var(--lwc-borderWidthThin, 1px)) solid var(--slds-g-color-neutral-base-90, var(--lwc-colorBorder, #dddbda));
+  border-radius: var(--slds-g-radius-border-2, 0.25rem);
   background-clip: padding-box;
   -webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 10%);
   box-shadow: 0 2px 2px 0 rgb(0 0 0 / 10%);

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

@@ -1,6 +1,6 @@
 <template>
   <host>
-    <article class="card">
+    <article class="card slds-p-around_medium">
       <header class="slds-grid slds-p-horizontal_x-small slds-has-flexi-truncate">
         <div class="slds-media__body card_focusable-header" onclick={handleHeaderClick} onkeydown={handleHeaderKeyDown}
           role="button" tabindex="0" data-testid="card-container__header">

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

@@ -13,19 +13,19 @@
 
 .carousel__indicator {
   width: 3.25rem;
-  height: 0.25rem;
+  height: var(--slds-g-sizing-2, 0.25rem);
   border: 0;
-  border-radius: var(--lwc-borderRadiusMedium, 0.25rem);
-  background-color: var(--lwc-brandLightActive, #e3e5ed);
+  border-radius: var(--slds-g-radius-border-2, var(--lwc-borderRadiusMedium, 0.25rem));
+  background-color: var(--slds-g-color-accent-light-1, var(--lwc-brandLightActive, #e3e5ed));
   transition: 0.2s;
 }
 
 .carousel__indicator--active {
-  background-color: var(--lwc-brandPrimary, #1b96ff);
+  background-color: var(--slds-g-color-accent-1, var(--lwc-brandPrimary, #1b96ff));
 }
 
 .carousel__indicator:hover {
-  background-color: var(--lwc-brandPrimaryActive, #0176d3);
+  background-color: var(--slds-g-color-accent-2, var(--lwc-brandPrimaryActive, #0176d3));
 }
 
 .carousel__previous-navigation {

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

@@ -28,7 +28,7 @@ lightning-icon {
 }
 
 .slds-visual-picker input:checked ~ label .visual-picker__figure:after {
-  border-right-color: var(--lwc-colorBorderRowSelectedHover, rgb(27, 150, 255));
-  border-top-color: var(--lwc-colorBorderRowSelectedHover, rgb(27, 150, 255));
-  border-radius: 4px;
+  border-right-color: var(--slds-g-color-brand-base-50, var(--lwc-colorBorderRowSelectedHover, rgb(27, 150, 255)));
+  border-top-color: var(--slds-g-color-brand-base-50, var(--lwc-colorBorderRowSelectedHover, rgb(27, 150, 255)));
+  border-radius: var(--slds-g-radius-border-2, 4px);
 }

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

@@ -1,6 +1,13 @@
-const facetData = {
-  facetId: 'geographicalhierarchy',
-  field: 'geographicalhierarchy',
+const facetId = 'geographicalhierarchy';
+const field = 'geographicalhierarchy';
+const label = 'Country';
+
+/**
+ * Facet response before any value is selected.
+ */
+export const initialFacetData = {
+  facetId,
+  field,
   moreValuesAvailable: true,
   values: [
     {
@@ -20,8 +27,65 @@ const facetData = {
       isLeafValue: false,
     },
   ],
-  indexScore: 0.40500903971252294,
-  label: 'Object type',
+  indexScore: 1,
+  label,
 };
 
-export default facetData;
+const [northAmerica] = initialFacetData.values;
+
+/**
+ * Facet response after clicking "Show more".
+ */
+export const expandedFacetData = {
+  ...initialFacetData,
+  values: [
+    ...initialFacetData.values,
+    {
+      value: 'South America',
+      state: 'idle',
+      numberOfResults: 112,
+      children: [],
+      path: ['South America'],
+      isLeafValue: false,
+    },
+    {
+      value: 'Asia',
+      state: 'idle',
+      numberOfResults: 58,
+      children: [],
+      path: ['Asia'],
+      isLeafValue: false,
+    },
+  ],
+};
+
+/**
+ * Facet response after the first parent value is selected.
+ */
+export const selectedFacetData = {
+  ...initialFacetData,
+  values: [
+    {
+      ...northAmerica,
+      state: 'selected',
+      children: [
+        {
+          value: 'Canada',
+          state: 'idle',
+          numberOfResults: 45,
+          children: [],
+          path: ['North America', 'Canada'],
+          isLeafValue: true,
+        },
+        {
+          value: 'United States',
+          state: 'idle',
+          numberOfResults: 67,
+          children: [],
+          path: ['North America', 'United States'],
+          isLeafValue: true,
+        },
+      ],
+    },
+  ],
+};

package/force-app/main/default/lwc/quanticCategoryFacet/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-category-facet';
@@ -26,20 +26,22 @@ type QuanticFacetE2EFixtures = {
 
 export const testSearch = facetBase.extend<QuanticFacetE2EFixtures>({
   options: {},
-  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}${options.caption ? '-with-captions' : ''}#${urlHash ? urlHash : ''}`
     );
-    if (facetResponseMock) {
-      await baseFacet.mockSearchWithFacetResponse(facetResponseMock);
-    }
+    await baseFacet.mockSearchWithFacetResponseSequence(
+      facetResponses?.responses
+    );
     configuration.configure(options);
     await baseFacet.waitForSearchResponse();
 
@@ -49,7 +51,7 @@ export const testSearch = facetBase.extend<QuanticFacetE2EFixtures>({
 
 export const testInsight = facetBase.extend<QuanticFacetE2EFixtures>({
   options: {},
-  facetResponseMock: [facetData],
+  facetResponses: {responses: [[initialFacetData]]},
   baseFacet: async ({page}, use) => {
     await use(new BaseFacetObject(page, insightSearchRequestRegex));
   },
@@ -57,17 +59,19 @@ export const testInsight = facetBase.extend<QuanticFacetE2EFixtures>({
     await use(new InsightSetupObject(page));
   },
   facet: async (
-    {page, options, baseFacet, configuration, insightSetup, facetResponseMock},
+    {page, options, baseFacet, configuration, insightSetup, facetResponses},
     use
   ) => {
     await page.goto(`${pageUrl}${options.caption ? '-with-captions' : ''}`);
-    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 CategoryFacetObject(page));
   },
 });