feat(quantic): added support for custom options in the quanticSort component

packages/quantic/cypress/e2e/default-1/refine-modal-content/refine-modal-content-actions.ts

@@ -3,7 +3,7 @@ import {
   RefineContentSelectors,
 } from './refine-modal-content-selectors';
 
-function defineContentActions(selector: RefineContentSelector) {
+function refineContentActions(selector: RefineContentSelector) {
   return {
     clickClearAllFilters: () => {
       selector
@@ -43,9 +43,27 @@ function defineContentActions(selector: RefineContentSelector) {
           'when clicking the first option of the duplicated timeframe facet'
         );
     },
+    openRefineModalSortDropdown: () => {
+      selector
+        .refineSortDropdown()
+        .click()
+        .logAction('when opening the sort dropdown in the refine modal');
+    },
+  };
+}
+
+function sortActions(selector: RefineContentSelector) {
+  return {
+    openSortDropdown: () => {
+      selector
+        .sortDropdown()
+        .click()
+        .logAction('when opening the sort dropdown');
+    },
   };
 }
 
 export const RefineContentActions = {
-  ...defineContentActions(RefineContentSelectors),
+  ...refineContentActions(RefineContentSelectors),
+  ...sortActions(RefineContentSelectors),
 };

packages/quantic/cypress/e2e/default-1/refine-modal-content/refine-modal-content-expectations.ts

@@ -1,7 +1,10 @@
+import {Interception} from 'cypress/types/net-stubbing';
+import {InterceptAliases} from '../../../page-objects/search';
 import {should} from '../../common-selectors';
 import {
   RefineContentSelector,
   RefineContentSelectors,
+  SortSelector,
 } from './refine-modal-content-selectors';
 
 const COMMON_FACET_PROPERTIES = ['facetId', 'field', 'label'];
@@ -186,13 +189,6 @@ function refineContentExpectations(selector: RefineContentSelector) {
         .logDetail('should display the duplicated date facet');
     },
 
-    displaySort: (display: boolean) => {
-      selector
-        .sort()
-        .should(display ? 'exist' : 'not.exist')
-        .logDetail(`${should(display)} display the Quantic Sort component`);
-    },
-
     displayDuplicatedTimeframeFacetClearFiltersButton: (display: boolean) => {
       selector
         .timeframeFacetClearFiltersButton()
@@ -263,9 +259,65 @@ function refineContentExpectations(selector: RefineContentSelector) {
         })
         .logDetail('should order the facets correctly');
     },
+
+    displayRefineModalSort: (display: boolean) => {
+      selector
+        .refineSort()
+        .should(display ? 'exist' : 'not.exist')
+        .logDetail(
+          `${should(display)} display the Quantic Sort component in the refine modal`
+        );
+    },
+
+    refineSortOptionsEqual: (options: {value: string; label: string}[]) => {
+      options.forEach((option) => {
+        selector
+          .refineSortOption(option.value)
+          .should('exist')
+          .should('contain', option.label)
+          .logDetail(
+            `should contain the sort option ${option.label} in the refine modal sort component`
+          );
+      });
+    },
+  };
+}
+
+function sortExpectations(selector: SortSelector) {
+  return {
+    displaySort: (display: boolean) => {
+      selector
+        .sort()
+        .should(display ? 'exist' : 'not.exist')
+        .logDetail(`${should(display)} display the Quantic Sort component`);
+    },
+
+    sortOptionsEqual: (options: {value: string; label: string}[]) => {
+      options.forEach((option) => {
+        selector
+          .sortOption(option.value)
+          .should('exist')
+          .should('contain', option.label)
+          .logDetail(
+            `should contain the sort option ${option.label} in the sort component`
+          );
+      });
+    },
+
+    sortCriteriaInSearchRequest: (value: string) => {
+      cy.get<Interception>(InterceptAliases.Search)
+        .then((interception) => {
+          const body = interception.request.body;
+          expect(body.sortCriteria).to.equal(value);
+        })
+        .logDetail(
+          'should have the correct sort criteria in the search request'
+        );
+    },
   };
 }
 
 export const RefineContentExpectations = {
   ...refineContentExpectations(RefineContentSelectors),
+  ...sortExpectations(RefineContentSelectors),
 };

packages/quantic/cypress/e2e/default-1/refine-modal-content/refine-modal-content-selectors.ts

@@ -3,13 +3,6 @@ import {ComponentSelector, CypressSelector} from '../../common-selectors';
 const refineContentComponent = 'c-quantic-refine-modal-content';
 const refineContentContainer = '.facets-container';
 
-export interface RefineContentSelector extends FacetSelector {
-  container: FacetSelector;
-  sort: () => CypressSelector;
-  clearAllFiltersButton: () => CypressSelector;
-  filtersTitle: () => CypressSelector;
-}
-
 export interface FacetSelector extends ComponentSelector {
   get: () => CypressSelector;
   facetManager: () => CypressSelector;
@@ -28,6 +21,13 @@ export interface FacetSelector extends ComponentSelector {
   timeframeFacetValues: () => CypressSelector;
 }
 
+export interface SortSelector extends ComponentSelector {
+  get: () => CypressSelector;
+  sort: () => CypressSelector;
+  sortOption: (value: string) => CypressSelector;
+  sortDropdown: () => CypressSelector;
+}
+
 const getCommonFacetSelectors = (
   rootSelector: () => CypressSelector
 ): FacetSelector => {
@@ -60,12 +60,34 @@ const getCommonFacetSelectors = (
   };
 };
 
+export interface RefineContentSelector extends FacetSelector, SortSelector {
+  container: FacetSelector;
+  clearAllFiltersButton: () => CypressSelector;
+  filtersTitle: () => CypressSelector;
+  refineSort: () => CypressSelector;
+  refineSortDropdown: () => CypressSelector;
+  refineSortOption: (value: string) => CypressSelector;
+}
+
 export const RefineContentSelectors: RefineContentSelector = {
   container: getCommonFacetSelectors(() => cy.get(refineContentContainer)),
   ...getCommonFacetSelectors(() => cy.get(refineContentComponent)),
-  sort: () => RefineContentSelectors.get().find('c-quantic-sort'),
   clearAllFiltersButton: () =>
     RefineContentSelectors.get().find('.filters-header lightning-button'),
   filtersTitle: () =>
     RefineContentSelectors.get().find('[data-cy="filters-title"]'),
+  refineSort: () => cy.get('c-quantic-refine-modal-content c-quantic-sort'),
+  refineSortDropdown: () =>
+    RefineContentSelectors.refineSort().find('[data-cy="sort-dropdown"]'),
+  refineSortOption: (value: string) =>
+    RefineContentSelectors.refineSortDropdown().find(
+      `.slds-listbox__option[data-value="${value}"]`
+    ),
+  sort: () => cy.get('c-quantic-sort[data-cy="main-sort"]'),
+  sortDropdown: () =>
+    RefineContentSelectors.sort().find('[data-cy="sort-dropdown"]'),
+  sortOption: (value: string) =>
+    RefineContentSelectors.sortDropdown().find(
+      `.slds-listbox__option[data-value="${value}"]`
+    ),
 };

packages/quantic/cypress/e2e/default-1/refine-modal-content/refine-modal-content.cypress.ts

@@ -1,5 +1,5 @@
 import {configure} from '../../../page-objects/configurator';
-import {InterceptAliases, interceptSearch} from '../../../page-objects/search';
+import {interceptSearch, InterceptAliases} from '../../../page-objects/search';
 import {scope} from '../../../reporters/detailed-collector';
 import {RefineContentActions as Actions} from './refine-modal-content-actions';
 import {RefineContentExpectations as Expect} from './refine-modal-content-expectations';
@@ -9,6 +9,35 @@ interface RefineContentOptions {
   disableDynamicNavigation: boolean;
 }
 
+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',
+    criterion: {
+      by: 'nosort',
+    },
+  },
+];
+
+const defaultCustomOptionValue = 'date ascending';
+
 describe('quantic-refine-content', () => {
   const pageUrl = 's/quantic-refine-modal-content';
 
@@ -37,7 +66,7 @@ describe('quantic-refine-content', () => {
         Expect.displayDuplicatedCategoryFacet();
         Expect.displayDuplicatedTimeframeFacet();
         Expect.displayDuplicatedDateFacet();
-        Expect.displaySort(true);
+        Expect.displayRefineModalSort(true);
         Expect.correctFacetsOrder();
       });
 
@@ -85,7 +114,7 @@ describe('quantic-refine-content', () => {
         Actions.clickDuplicatedTimeframeFacetExpandButton();
         Expect.displayDuplicatedTimeframeFacetValues();
         Expect.displayDuplicatedDateFacet();
-        Expect.displaySort(false);
+        Expect.displayRefineModalSort(false);
         Expect.correctFacetsOrder();
       });
     });
@@ -108,8 +137,35 @@ describe('quantic-refine-content', () => {
         Actions.clickDuplicatedTimeframeFacetExpandButton();
         Expect.displayDuplicatedTimeframeFacetValues();
         Expect.displayDuplicatedDateFacet();
-        Expect.displaySort(true);
+        Expect.displayRefineModalSort(true);
       });
     });
   });
+
+  describe('when using custom sort options', () => {
+    it('should render the same custom sort options in the sort component and in the refine modal', () => {
+      visitRefineContent({});
+      Expect.sortCriteriaInSearchRequest(defaultCustomOptionValue);
+
+      scope(
+        'when opening the sort options of the quantic sort component',
+        () => {
+          Expect.displaySort(true);
+          Actions.openSortDropdown();
+
+          Expect.sortOptionsEqual(customSortOptions);
+        }
+      );
+
+      scope(
+        'when opening the sort options of the quantic sort component inside the refine modal',
+        () => {
+          Expect.displayRefineModalSort(true);
+          Actions.openRefineModalSortDropdown();
+
+          Expect.refineSortOptionsEqual(customSortOptions);
+        }
+      );
+    });
+  });
 });

packages/quantic/cypress/e2e/default-1/refine-toggle/refine-toggle-expectations.ts

@@ -99,17 +99,6 @@ function refineToggleSelector(selector: RefineToggleSelector) {
         .logDetail(`The view results should contain "${label}"`);
     },
 
-    displaySort: (display: boolean) => {
-      selector
-        .sort()
-        .should(display ? 'exist' : 'not.exist')
-        .logDetail(
-          `${should(
-            display
-          )} display the sort component inside the refine modal content`
-        );
-    },
-
     displayFacetManager: (display = true) => {
       selector
         .facetManager()

packages/quantic/cypress/e2e/default-1/refine-toggle/refine-toggle-selectors.ts

@@ -13,7 +13,6 @@ export interface RefineToggleSelector extends ComponentSelector {
   modalFooter: () => CypressSelector;
   viewResultsButton: () => CypressSelector;
   total: () => CypressSelector;
-  sort: () => CypressSelector;
   filtersCountBadge: () => CypressSelector;
   timeframeFacetExpandButton: () => CypressSelector;
   defaultFacetExpandButton: () => CypressSelector;
@@ -47,7 +46,6 @@ export const RefineToggleSelectors: RefineToggleSelector = {
   viewResultsButton: () =>
     RefineToggleSelectors.modalFooter().find('.slds-button'),
   total: () => RefineToggleSelectors.get().find('.summary__total'),
-  sort: () => RefineToggleSelectors.modalContent().find('c-quantic-sort'),
   filtersCountBadge: () =>
     RefineToggleSelectors.get().find('.refine-button_filters-badge'),
   timeframeFacetExpandButton: () =>