@coveo/quantic 3.10.0-pre.faaf12d7a7 → 3.11.0

package/README.md

@@ -55,8 +55,8 @@ Or you can run the individual commands below.
 - Make sure you are in the `packages/quantic` root folder.
 - Run this command to create the default scratch org. `npm run scratch:create`.
 - In VS Code, press Command + Shift P, enter sfdx, and select SFDX: Create a Default Scratch Org.
-- You can also run this command from the command line. `sf org create scratch --set-default --definition-file config/project-scratch-def.json --alias "LWC"`
-- `LWC` is an alias for the scratch org that you can use in other Salesforce CLI commands. You can create any alias that you like.
+- You can also run this command from the command line. `sf org create scratch --set-default --definition-file config/lws-enabled-scratch-def.json --alias Quantic__LWS_enabled`
+- `Quantic__LWS_enabled` is an alias for the scratch org that you can use in other Salesforce CLI commands. You can create any alias that you like.
 
 #### Deploy the Quantic code
 
@@ -64,39 +64,55 @@ Or you can run the individual commands below.
 
 ## Testing
 
-### Deploy the Quantic Examples Community
+### Deploy the Quantic Examples Communities
 
-Example components are available as a Salesforce community (Digital Experience) allowing you to experiment with Quantic components.
+Example components are available as Salesforce communities (Digital Experiences), allowing you to experiment with Quantic components in two separate environments: one with Lightning Web Security (LWS) enabled and one with LWS disabled.
 
-To setup the community in the `LWC` scratch org, run:
+To set up both communities in scratch orgs, run:
 
 ```bash
 npm run setup:examples
 ```
 
-This script creates, configures, and deploys everything required to have fully working examples. The community URL is provided at the end of the script output, as in the following example:
+This script creates, configures, and deploys everything required to have fully working examples in **two scratch orgs**:
+
+- An org with **LWS enabled**.
+- An org with **LWS disabled**.
+
+At the end of the script, the URLs for the two communities are provided, as in the following example:
 
 ```
-...
 
-The 'Quantic Examples' community is ready, you can access it at the following URL:
-https://your-salesforce-scratch-org-instance.force.com/examples
+The 'Quantic Examples' community (LWS enabled) is ready, you can access it at the following URL:
+https://your-salesforce-lws-enabled-scratch-org-instance.force.com/examples
+
+The 'Quantic Examples' community (LWS disabled) is ready, you can access it at the following URL:
+https://your-salesforce-lws-disabled-scratch-org-instance.force.com/examples
 
 To open Cypress, run:
 npm run e2e:watch
 ```
 
-Once the community has been deployed, you can deploy the `main` or `example` components only when needed. To do so, run:
+Once the community has been deployed, you can deploy the `main` or `example` components to a specific org only when needed by running the corresponding commands:
+
+```bash
+npm run deploy:main --target-org Quantic__LWS_enabled
+npm run deploy:examples --target-org Quantic__LWS_enabled
+```
+
+You can replace Quantic\_\_LWS_enabled with your target org alias. For example:
 
 ```bash
-npm run deploy:main
-npm run deploy:examples
+npm run deploy:main --target-org MyCustomOrg
+npm run deploy:examples --target-org MyCustomOrg
 ```
 
 ### Run Cypress for Quantic Components
 
 **Note** Before attempting to run [Cypress](https://docs.cypress.io) tests, make sure the `Quantic Examples` community is deployed as described in the previous section.
 
+**Note** Cypress tests run on the org with **LWS enabled**, aliased as `Quantic__LWS_enabled`.
+
 To learn how to add tests, see [adding tests](./docs/adding-tests.md).
 
 - All the tests will need to be under folder `cypress/integration`.
@@ -119,6 +135,30 @@ To get the [detailed report](./docs/detailed-reporting.md), run:
 npm run e2e:detailed
 ```
 
+### Run Playwright for Quantic Components
+
+**Note** Before attempting to run [Playwright](https://playwright.dev/) tests, make sure the `Quantic Examples` community is deployed as described in the previous section in both orgs, the one where LWS is enabled and the one where it is disabled.
+
+**Note** For more information on how to add tests, please refer to our [Quantic Testing Strategy](https://github.com/coveo/ui-kit/blob/master/packages/quantic/decisions/0001-testing-strategy.md), which provides detailed guidelines on testing Quantic components.
+
+To run Playwright tests, run:
+
+```bash
+npm run e2e:playwright:
+```
+
+To run Playwright tests only for the scratch org where LWS is enabled, run:
+
+```bash
+npm run e2e:playwright:lws-enabled
+```
+
+To run Playwright tests only for the scratch org where LWS is disabled, run:
+
+```bash
+npm run e2e:playwright:lws-disabled
+```
+
 ### Run LWC unit tests for Quantic Components
 
 To run LWC unit tests directly in your console, run:

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

@@ -1603,4 +1603,11 @@
     <protected>false</protected>
     <shortDescription>User actions</shortDescription>
   </labels>
+  <labels>
+    <fullName>quantic_CloseNotification</fullName>
+    <value>Close notification</value>
+    <language>en_US</language>
+    <protected>false</protected>
+    <shortDescription>Close notification</shortDescription>
+  </labels>
 </CustomLabels>

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

@@ -64,6 +64,14 @@ export default class QuanticCaseAssistInterface extends LightningElement {
                       ...(document.referrer && {
                         originLevel3: document.referrer.substring(0, 256),
                       }),
+                      analyticsClientMiddleware: (_event, payload) => {
+                        if (!payload.customData) {
+                          payload.customData = {};
+                        }
+                        payload.customData.coveoQuanticVersion =
+                          window.coveoQuanticVersion;
+                        return payload;
+                      },
                     },
                     ...rest,
                   },

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

@@ -15,16 +15,21 @@ jest.mock('c/quanticUtils', () => ({
       CATEGORYFACETS: 'categoryFacets',
     },
   },
+  I18nUtils: {
+    format: jest.fn(),
+  },
 }));
 jest.mock('c/quanticHeadlessLoader');
 
 const selectors = {
   facetContent: '[data-test="facet-content"]',
+  componentError: 'c-quantic-component-error',
 };
 
 const exampleFacetId = 'example facet id';
+const exampleField = 'exampleField';
 const defaultOptions = {
-  field: 'example field',
+  field: exampleField,
 };
 const categoryFacetControllerMock = {
   subscribe: jest.fn((callback) => callback()),
@@ -33,6 +38,8 @@ const categoryFacetControllerMock = {
     values: [],
   },
 };
+const parentFacetIdError = `The ${exampleField} c-quantic-category-facet requires dependsOn.parentFacetId to be a valid string.`;
+const expectedValueError = `The ${exampleField} c-quantic-category-facet requires dependsOn.expectedValue to be a valid string.`;
 
 function createTestComponent(options = defaultOptions) {
   prepareHeadlessState();
@@ -82,6 +89,21 @@ const exampleEngine = {
 };
 let isInitialized = false;
 
+function mockBueno() {
+  // @ts-ignore
+  mockHeadlessLoader.getBueno = () => {
+    // @ts-ignore
+    global.Bueno = {
+      isString: jest
+        .fn()
+        .mockImplementation(
+          (value) => Object.prototype.toString.call(value) === '[object String]'
+        ),
+    };
+    return new Promise((resolve) => resolve());
+  };
+}
+
 function mockSuccessfulHeadlessInitialization() {
   // @ts-ignore
   mockHeadlessLoader.initializeWithHeadless = (element, _, initialize) => {
@@ -104,6 +126,7 @@ function cleanup() {
 describe('c-quantic-category-facet', () => {
   beforeAll(() => {
     mockSuccessfulHeadlessInitialization();
+    mockBueno();
   });
 
   afterEach(() => {
@@ -198,6 +221,90 @@ describe('c-quantic-category-facet', () => {
     });
   });
 
+  describe('validation of the dependsOn property', () => {
+    let consoleError;
+    beforeAll(() => {
+      consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+    });
+
+    describe('when dependsOn.parentFacetId is not provided', () => {
+      it('should display the error component', async () => {
+        const invalidFacetDependency = {
+          expectedValue: 'txt',
+        };
+        const element = createTestComponent({
+          ...defaultOptions,
+          dependsOn: invalidFacetDependency,
+        });
+        await flushPromises();
+
+        const componentError = element.shadowRoot.querySelector(
+          selectors.componentError
+        );
+        const facetContent = element.shadowRoot.querySelector(
+          selectors.facetContent
+        );
+
+        expect(consoleError).toHaveBeenCalledTimes(1);
+        expect(consoleError).toHaveBeenCalledWith(parentFacetIdError);
+        expect(componentError).not.toBeNull();
+        expect(facetContent).toBeNull();
+      });
+    });
+
+    describe('when dependsOn.parentFacetId is not a string', () => {
+      it('should display the error component', async () => {
+        const invalidFacetDependency = {
+          parentFacetId: 1,
+          expectedValue: 'txt',
+        };
+        const element = createTestComponent({
+          ...defaultOptions,
+          dependsOn: invalidFacetDependency,
+        });
+        await flushPromises();
+
+        const componentError = element.shadowRoot.querySelector(
+          selectors.componentError
+        );
+        const facetContent = element.shadowRoot.querySelector(
+          selectors.facetContent
+        );
+
+        expect(consoleError).toHaveBeenCalledTimes(1);
+        expect(consoleError).toHaveBeenCalledWith(parentFacetIdError);
+        expect(componentError).not.toBeNull();
+        expect(facetContent).toBeNull();
+      });
+    });
+
+    describe('when dependsOn.expectedValue is not a string', () => {
+      it('should display the error component', async () => {
+        const invalidFacetDependency = {
+          parentFacetId: 'filetype',
+          expectedValue: 2,
+        };
+        const element = createTestComponent({
+          ...defaultOptions,
+          dependsOn: invalidFacetDependency,
+        });
+        await flushPromises();
+
+        const componentError = element.shadowRoot.querySelector(
+          selectors.componentError
+        );
+        const facetContent = element.shadowRoot.querySelector(
+          selectors.facetContent
+        );
+
+        expect(consoleError).toHaveBeenCalledTimes(1);
+        expect(consoleError).toHaveBeenCalledWith(expectedValueError);
+        expect(componentError).not.toBeNull();
+        expect(facetContent).toBeNull();
+      });
+    });
+  });
+
   describe('when the component is disconnected', () => {
     it('should make the condition manager stop watching the facet', async () => {
       const exampleFacetDependency = {

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

@@ -14,6 +14,7 @@ import {
   initializeWithHeadless,
   registerToStore,
   getHeadlessBundle,
+  getBueno,
 } from 'c/quanticHeadlessLoader';
 import {
   I18nUtils,
@@ -301,6 +302,7 @@ export default class QuanticCategoryFacet extends LightningElement {
       },
     });
     if (this.dependsOn) {
+      this.validateDependsOnProperty();
       this.initFacetConditionManager(engine);
     }
     this.unsubscribe = this.facet.subscribe(() => this.updateState());
@@ -330,6 +332,26 @@ export default class QuanticCategoryFacet extends LightningElement {
     this.dispatchEvent(renderFacetEvent);
   }
 
+  validateDependsOnProperty() {
+    if (this.dependsOn) {
+      getBueno(this).then(() => {
+        const {parentFacetId, expectedValue} = this.dependsOn;
+        if (!Bueno.isString(parentFacetId)) {
+          console.error(
+            `The ${this.field} ${this.template.host.localName} requires dependsOn.parentFacetId to be a valid string.`
+          );
+          this.setInitializationError();
+        }
+        if (expectedValue && !Bueno.isString(expectedValue)) {
+          console.error(
+            `The ${this.field} ${this.template.host.localName} requires dependsOn.expectedValue to be a valid string.`
+          );
+          this.setInitializationError();
+        }
+      });
+    }
+  }
+
   initFacetConditionManager(engine) {
     this.categoryFacetConditionsManager =
       this.headless.buildFacetConditionsManager(engine, {

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

@@ -12,16 +12,21 @@ jest.mock('c/quanticUtils', () => ({
       DATEFACETS: 'dateFacets',
     },
   },
+  I18nUtils: {
+    format: jest.fn(),
+  },
 }));
 jest.mock('c/quanticHeadlessLoader');
 
 const selectors = {
   facetContent: '[data-test="facet-content"]',
+  componentError: 'c-quantic-component-error',
 };
 
 const exampleFacetId = 'example facet id';
+const exampleField = 'exampleField';
 const defaultOptions = {
-  field: 'example field',
+  field: exampleField,
 };
 const dateFacetControllerMock = {
   subscribe: jest.fn((callback) => callback()),
@@ -30,6 +35,8 @@ const dateFacetControllerMock = {
     values: [],
   },
 };
+const parentFacetIdError = `The ${exampleField} c-quantic-date-facet requires dependsOn.parentFacetId to be a valid string.`;
+const expectedValueError = `The ${exampleField} c-quantic-date-facet requires dependsOn.expectedValue to be a valid string.`;
 
 function createTestComponent(options = defaultOptions) {
   prepareHeadlessState();
@@ -79,6 +86,21 @@ const exampleEngine = {
 };
 let isInitialized = false;
 
+function mockBueno() {
+  // @ts-ignore
+  mockHeadlessLoader.getBueno = () => {
+    // @ts-ignore
+    global.Bueno = {
+      isString: jest
+        .fn()
+        .mockImplementation(
+          (value) => Object.prototype.toString.call(value) === '[object String]'
+        ),
+    };
+    return new Promise((resolve) => resolve());
+  };
+}
+
 function mockSuccessfulHeadlessInitialization() {
   // @ts-ignore
   mockHeadlessLoader.initializeWithHeadless = (element, _, initialize) => {
@@ -101,6 +123,7 @@ function cleanup() {
 describe('c-quantic-date-facet', () => {
   beforeAll(() => {
     mockSuccessfulHeadlessInitialization();
+    mockBueno();
   });
 
   afterEach(() => {
@@ -193,6 +216,89 @@ describe('c-quantic-date-facet', () => {
     });
   });
 
+  describe('validation of the dependsOn property', () => {
+    let consoleError;
+    beforeAll(() => {
+      consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+    });
+    describe('when dependsOn.parentFacetId is not provided', () => {
+      it('should display the error component', async () => {
+        const invalidFacetDependency = {
+          expectedValue: 'txt',
+        };
+        const element = createTestComponent({
+          ...defaultOptions,
+          dependsOn: invalidFacetDependency,
+        });
+        await flushPromises();
+
+        const componentError = element.shadowRoot.querySelector(
+          selectors.componentError
+        );
+        const facetContent = element.shadowRoot.querySelector(
+          selectors.facetContent
+        );
+
+        expect(consoleError).toHaveBeenCalledTimes(1);
+        expect(consoleError).toHaveBeenCalledWith(parentFacetIdError);
+        expect(componentError).not.toBeNull();
+        expect(facetContent).toBeNull();
+      });
+    });
+
+    describe('when dependsOn.parentFacetId is not a string', () => {
+      it('should display the error component', async () => {
+        const invalidFacetDependency = {
+          parentFacetId: 1,
+          expectedValue: 'txt',
+        };
+        const element = createTestComponent({
+          ...defaultOptions,
+          dependsOn: invalidFacetDependency,
+        });
+        await flushPromises();
+
+        const componentError = element.shadowRoot.querySelector(
+          selectors.componentError
+        );
+        const facetContent = element.shadowRoot.querySelector(
+          selectors.facetContent
+        );
+
+        expect(consoleError).toHaveBeenCalledTimes(1);
+        expect(consoleError).toHaveBeenCalledWith(parentFacetIdError);
+        expect(componentError).not.toBeNull();
+        expect(facetContent).toBeNull();
+      });
+    });
+
+    describe('when dependsOn.expectedValue is not a string', () => {
+      it('should display the error component', async () => {
+        const invalidFacetDependency = {
+          parentFacetId: 'filetype',
+          expectedValue: 2,
+        };
+        const element = createTestComponent({
+          ...defaultOptions,
+          dependsOn: invalidFacetDependency,
+        });
+        await flushPromises();
+
+        const componentError = element.shadowRoot.querySelector(
+          selectors.componentError
+        );
+        const facetContent = element.shadowRoot.querySelector(
+          selectors.facetContent
+        );
+
+        expect(consoleError).toHaveBeenCalledTimes(1);
+        expect(consoleError).toHaveBeenCalledWith(expectedValueError);
+        expect(componentError).not.toBeNull();
+        expect(facetContent).toBeNull();
+      });
+    });
+  });
+
   describe('when the component is disconnected', () => {
     it('should make the condition manager stop watching the facet', async () => {
       const exampleFacetDependency = {

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

@@ -9,6 +9,7 @@ import {
   initializeWithHeadless,
   registerToStore,
   getHeadlessBundle,
+  getBueno,
 } from 'c/quanticHeadlessLoader';
 import {
   I18nUtils,
@@ -210,6 +211,7 @@ export default class QuanticDateFacet extends LightningElement {
       element: this.template.host,
     });
     if (this.dependsOn) {
+      this.validateDependsOnProperty();
       this.initFacetConditionManager(engine);
     }
   };
@@ -238,6 +240,26 @@ export default class QuanticDateFacet extends LightningElement {
     this.dispatchEvent(renderFacetEvent);
   }
 
+  validateDependsOnProperty() {
+    if (this.dependsOn) {
+      getBueno(this).then(() => {
+        const {parentFacetId, expectedValue} = this.dependsOn;
+        if (!Bueno.isString(parentFacetId)) {
+          console.error(
+            `The ${this.field} ${this.template.host.localName} requires dependsOn.parentFacetId to be a valid string.`
+          );
+          this.setInitializationError();
+        }
+        if (expectedValue && !Bueno.isString(expectedValue)) {
+          console.error(
+            `The ${this.field} ${this.template.host.localName} requires dependsOn.expectedValue to be a valid string.`
+          );
+          this.setInitializationError();
+        }
+      });
+    }
+  }
+
   initFacetConditionManager(engine) {
     this.dateFacetConditionsManager = this.headless.buildFacetConditionsManager(
       engine,

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

@@ -12,16 +12,21 @@ jest.mock('c/quanticUtils', () => ({
       FACETS: 'facets',
     },
   },
+  I18nUtils: {
+    format: jest.fn(),
+  },
 }));
 jest.mock('c/quanticHeadlessLoader');
 
 const selectors = {
   facetContent: '[data-test="facet-content"]',
+  componentError: 'c-quantic-component-error',
 };
 
 const exampleFacetId = 'example facet id';
+const exampleField = 'exampleField';
 const defaultOptions = {
-  field: 'example field',
+  field: exampleField,
 };
 const facetControllerMock = {
   subscribe: jest.fn((callback) => callback()),
@@ -30,6 +35,8 @@ const facetControllerMock = {
     values: [],
   },
 };
+const parentFacetIdError = `The ${exampleField} c-quantic-facet requires dependsOn.parentFacetId to be a valid string.`;
+const expectedValueError = `The ${exampleField} c-quantic-facet requires dependsOn.expectedValue to be a valid string.`;
 
 function createTestComponent(options = defaultOptions) {
   prepareHeadlessState();
@@ -89,6 +96,21 @@ function mockSuccessfulHeadlessInitialization() {
   };
 }
 
+function mockBueno() {
+  // @ts-ignore
+  mockHeadlessLoader.getBueno = () => {
+    // @ts-ignore
+    global.Bueno = {
+      isString: jest
+        .fn()
+        .mockImplementation(
+          (value) => Object.prototype.toString.call(value) === '[object String]'
+        ),
+    };
+    return new Promise((resolve) => resolve());
+  };
+}
+
 function cleanup() {
   // The jsdom instance is shared across test cases in a single file so reset the DOM
   while (document.body.firstChild) {
@@ -101,6 +123,7 @@ function cleanup() {
 describe('c-quantic-facet', () => {
   beforeAll(() => {
     mockSuccessfulHeadlessInitialization();
+    mockBueno();
   });
 
   afterEach(() => {
@@ -214,6 +237,88 @@ describe('c-quantic-facet', () => {
     });
   });
 
+  describe('validation of the dependsOn property', () => {
+    let consoleError;
+    beforeAll(() => {
+      consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+    });
+    describe('when dependsOn.parentFacetId is not provided', () => {
+      it('should display the error component', async () => {
+        const invalidFacetDependency = {
+          expectedValue: 'txt',
+        };
+        const element = createTestComponent({
+          ...defaultOptions,
+          dependsOn: invalidFacetDependency,
+        });
+        await flushPromises();
+
+        const componentError = element.shadowRoot.querySelector(
+          selectors.componentError
+        );
+        const facetContent = element.shadowRoot.querySelector(
+          selectors.facetContent
+        );
+
+        expect(consoleError).toHaveBeenCalledTimes(1);
+        expect(consoleError).toHaveBeenCalledWith(parentFacetIdError);
+        expect(componentError).not.toBeNull();
+        expect(facetContent).toBeNull();
+      });
+    });
+
+    describe('when dependsOn.parentFacetId is not a string', () => {
+      it('should display the error component', async () => {
+        const invalidFacetDependency = {
+          parentFacetId: 1,
+          expectedValue: 'txt',
+        };
+        const element = createTestComponent({
+          ...defaultOptions,
+          dependsOn: invalidFacetDependency,
+        });
+        await flushPromises();
+
+        const componentError = element.shadowRoot.querySelector(
+          selectors.componentError
+        );
+        const facetContent = element.shadowRoot.querySelector(
+          selectors.facetContent
+        );
+
+        expect(consoleError).toHaveBeenCalledTimes(1);
+        expect(consoleError).toHaveBeenCalledWith(parentFacetIdError);
+        expect(componentError).not.toBeNull();
+        expect(facetContent).toBeNull();
+      });
+    });
+
+    describe('when dependsOn.expectedValue is not a string', () => {
+      it('should display the error component', async () => {
+        const invalidFacetDependency = {
+          parentFacetId: 'filetype',
+          expectedValue: 2,
+        };
+        const element = createTestComponent({
+          ...defaultOptions,
+          dependsOn: invalidFacetDependency,
+        });
+        await flushPromises();
+
+        const componentError = element.shadowRoot.querySelector(
+          selectors.componentError
+        );
+        const facetContent = element.shadowRoot.querySelector(
+          selectors.facetContent
+        );
+
+        expect(consoleError).toHaveBeenCalledTimes(1);
+        expect(consoleError).toHaveBeenCalledWith(expectedValueError);
+        expect(componentError).not.toBeNull();
+        expect(facetContent).toBeNull();
+      });
+    });
+  });
   describe('when the component is disconnected', () => {
     it('should make the condition manager stop watching the facet', async () => {
       const exampleFacetDependency = {