added quantic E2E tests for custom options display and select

coveo · Jun 21, 2024 · 8676d83 · 8676d83
1 parent ce7c358
commit 8676d83
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 2 deletions.
diff --git a/packages/quantic/cypress/e2e/default-1/sort/sort.cypress.ts b/packages/quantic/cypress/e2e/default-1/sort/sort.cypress.ts
@@ -33,8 +33,35 @@ describe('quantic-sort', () => {
   ];
   const sortOptionValues = sortOptions.map((option) => option.value);
 
+  const customSortOptions = [
+    {
+      label: 'Date ascending',
+      value: 'date ascending',
+      criterion: {
+        by: 'date',
+        order: 'ascending',
+      },
+    },
+    {
+      label: 'Views Descending',
+      value: '@ytviewcount descending',
+      criterion: {
+        by: 'field',
+        field: 'ytviewcount',
+        order: 'descending',
+      },
+    },
+    {
+      label: 'No Sort',
+      value: 'nosort',
+    },
+  ];
+  const customSortOptionsValues = customSortOptions.map(
+    (option) => option.value
+  );
   interface SortOptions {
     useCase: string;
+    customSortOptionsEnabled: boolean;
   }
 
   function visitSort(options: Partial<SortOptions>, waitForSearch = true) {
@@ -104,6 +131,41 @@ describe('quantic-sort', () => {
           });
       });
 
+      describe('when passing custom options as slots to the component', () => {
+        it('should display the custom options properly', () => {
+          visitSort({useCase: param.useCase, customSortOptionsEnabled: true});
+
+          Expect.displaySortDropdown(true);
+          Expect.labelContains('Sort by');
+
+          Actions.openDropdown();
+
+          Expect.containsOptions(customSortOptionsValues);
+          Expect.optionsEqual(customSortOptions);
+        });
+
+        customSortOptions.forEach(({label, value}) => {
+          describe('when selecting a custom option', () => {
+            it(`should update the shown selected option to ${label}`, () => {
+              visitSort({
+                useCase: param.useCase,
+                customSortOptionsEnabled: true,
+              });
+              Actions.selectOption(value);
+
+              Expect.selectedOption(value);
+
+              Expect.completeSearchRequest(
+                'resultsSort',
+                param.useCase,
+                (body) => Expect.sortCriteriaInSearchRequest(body, value)
+              );
+              Expect.logSortResults(value);
+            });
+          });
+        });
+      });
+
       if (param.useCase === useCaseEnum.search) {
         describe('when loading sort selection from URL', () => {
           sortOptionValues

diff --git a/packages/quantic/force-app/examples/main/lwc/exampleQuanticSort/exampleQuanticSort.html b/packages/quantic/force-app/examples/main/lwc/exampleQuanticSort/exampleQuanticSort.html
@@ -3,15 +3,24 @@
     title={pageTitle}
     description={pageDescription}
     show-preview={isConfigured}>
-  
+
     <div slot="configuration">
       <c-configurator options={options} ontryitnow={handleTryItNow}>
         <c-action-perform-search slot="actions" engine-id={engineId}></c-action-perform-search>
       </c-configurator>
     </div>
 
     <c-example-use-case slot="preview" use-case={config.useCase} engine-id={engineId}>
-      <c-quantic-sort engine-id={engineId}></c-quantic-sort>
+      <template lwc:if={customSortOptionsEnabled}>
+        <c-quantic-sort engine-id={engineId}>
+          <template for:each={customSortOptions} for:item="option">
+            <c-quantic-sort-option key={option.value} label={option.label} value={option.value} criterion={option.criterion}></c-quantic-sort-option>
+          </template>
+        </c-quantic-sort>
+      </template>
+      <template lwc:else>
+        <c-quantic-sort engine-id={engineId}></c-quantic-sort>
+      </template>
     </c-example-use-case>
   </c-example-layout>
 </template>
diff --git a/packages/quantic/force-app/examples/main/lwc/exampleQuanticSort/exampleQuanticSort.js b/packages/quantic/force-app/examples/main/lwc/exampleQuanticSort/exampleQuanticSort.js
@@ -16,12 +16,53 @@ export default class ExampleQuanticSort extends LightningElement {
         'Define which use case to test. Possible values are: search, insight',
       defaultValue: 'search',
     },
+    {
+      attribute: 'customSortOptionsEnabled',
+      label: 'Custom Sort Options Enabled',
+      description: 'Enable the custom Sort options',
+      defaultValue: false,
+    },
+  ];
+
+  customSortOptionsArray = [
+    {
+      label: 'Date ascending',
+      value: 'date ascending',
+      criterion: {
+        by: 'date',
+        order: 'ascending',
+      },
+    },
+    {
+      label: 'Views Descending',
+      value: '@ytviewcount descending',
+      criterion: {
+        by: 'field',
+        field: 'ytviewcount',
+        order: 'descending',
+      },
+    },
+    {
+      label: 'No Sort',
+      value: 'nosort',
+      criterion: {
+        by: 'nosort',
+      },
+    },
   ];
 
   get notConfigured() {
     return !this.isConfigured;
   }
 
+  get customSortOptionsEnabled() {
+    return this.config.customSortOptionsEnabled;
+  }
+
+  get customSortOptions() {
+    return this.customSortOptionsArray;
+  }
+
   handleTryItNow(evt) {
     this.config = evt.detail;
     this.isConfigured = true;