[PWA-2552] Change default sort on search page to relevance

packages/peregrine/lib/hooks/__tests__/useSort.spec.js

@@ -15,7 +15,7 @@ const TestComponent = (props = {}) => {
     return <i />;
 };
 
-test('should render without an error', () => {
+test('should render without an error with position sort by default', () => {
     createTestInstance(<TestComponent />);
     const result = log.mock.calls[0][0];
     const [{ sortText }] = result;
@@ -53,3 +53,14 @@ test('should render with updated sort order', () => {
     const [{ sortText: nextSortText }] = nextResult;
     expect(nextSortText).toBe('Price: Low to High');
 });
+
+test('should render search with best match sort by default', () => {
+    const sortOrder = {
+        sortFromSearch: true
+    };
+
+    createTestInstance(<TestComponent props={sortOrder} />);
+    const result = log.mock.calls[0][0];
+    const [{ sortText }] = result;
+    expect(sortText).toBe('Best Match');
+});

packages/peregrine/lib/hooks/useSort.js

@@ -8,10 +8,21 @@ const defaultSort = {
     sortDirection: 'ASC'
 };
 
+const searchSort = {
+    sortText: 'Best Match',
+    sortId: 'sortItem.relevance',
+    sortAttribute: 'relevance',
+    sortDirection: 'DESC'
+};
+
 /**
  *
  * @param props
  * @returns {[{sortDirection: string, sortAttribute: string, sortText: string}, React.Dispatch<React.SetStateAction<{sortDirection: string, sortAttribute: string, sortText: string}>>]}
  */
-export const useSort = (props = {}) =>
-    useState(() => Object.assign({}, defaultSort, props));
+export const useSort = (props = {}) => {
+    const { sortFromSearch = false } = props;
+    return useState(() =>
+        Object.assign({}, sortFromSearch ? searchSort : defaultSort, props)
+    );
+};

packages/peregrine/lib/talons/RootComponents/Category/useCategory.js

@@ -54,7 +54,7 @@ export const useCategory = props => {
     const { currentPage, totalPages } = paginationValues;
     const { setCurrentPage, setTotalPages } = paginationApi;
 
-    const sortProps = useSort();
+    const sortProps = useSort({ sortFromSearch: false });
     const [currentSort] = sortProps;
 
     // Keep track of the sort criteria so we can tell when they change.

packages/peregrine/lib/talons/SearchPage/useSearchPage.js

@@ -44,7 +44,7 @@ export const useSearchPage = (props = {}) => {
 
     const pageSize = pageSizeData && pageSizeData.storeConfig.grid_per_page;
 
-    const sortProps = useSort();
+    const sortProps = useSort({ sortFromSearch: true });
     const [currentSort] = sortProps;
     const { sortAttribute, sortDirection } = currentSort;
     // Keep track of the sort criteria so we can tell when they change.

packages/venia-ui/lib/components/ProductSort/productSort.js

@@ -47,11 +47,14 @@ const ProductSort = props => {
     // click event for menu items
     const handleItemClick = useCallback(
         sortAttribute => {
-            setSort({
-                sortText: sortAttribute.text,
-                sortId: sortAttribute.id,
-                sortAttribute: sortAttribute.attribute,
-                sortDirection: sortAttribute.sortDirection
+            setSort(prevSort => {
+                return {
+                    sortText: sortAttribute.text,
+                    sortId: sortAttribute.id,
+                    sortAttribute: sortAttribute.attribute,
+                    sortDirection: sortAttribute.sortDirection,
+                    sortFromSearch: prevSort.sortFromSearch
+                };
             });
             setExpanded(false);
         },
@@ -74,15 +77,6 @@ const ProductSort = props => {
                 attribute: 'relevance',
                 sortDirection: 'DESC'
             },
-            {
-                id: 'sortItem.position',
-                text: formatMessage({
-                    id: 'sortItem.position',
-                    defaultMessage: 'Position'
-                }),
-                attribute: 'position',
-                sortDirection: 'ASC'
-            },
             {
                 id: 'sortItem.priceDesc',
                 text: formatMessage({
@@ -103,6 +97,19 @@ const ProductSort = props => {
             }
         ];
 
+        // Do not display Position in Search
+        if (!currentSort.sortFromSearch) {
+            defaultSortMethods.push({
+                id: 'sortItem.position',
+                text: formatMessage({
+                    id: 'sortItem.position',
+                    defaultMessage: 'Position'
+                }),
+                attribute: 'position',
+                sortDirection: 'ASC'
+            });
+        }
+
         const allSortingMethods = sortMethodsFromConfig
             ? orderSortingList(
                   [sortMethodsFromConfig, defaultSortMethods].flat()
@@ -137,6 +144,7 @@ const ProductSort = props => {
         classes.menuItem,
         currentSort.sortAttribute,
         currentSort.sortDirection,
+        currentSort.sortFromSearch,
         expanded,
         formatMessage,
         handleItemClick,

venia-integration-tests/cypress.config.json

@@ -1,14 +1,14 @@
 {
     "baseUrl": "https://develop.pwa-venia.com",
-    "defaultCommandTimeout": 10000,
+    "defaultCommandTimeout": 30000,
     "supportFile": "src/support/index.js",
     "pluginsFile": "src/plugins/index.js",
     "fixturesFolder": "src/fixtures",
     "integrationFolder": "src/tests",
     "screenshotsFolder": "src/snapshots",
     "video": false,
     "pageLoadTimeout": 30000,
-    "requestTimeout": 30000,
+    "requestTimeout": 60000,
     "testFiles": "**/*.spec.js",
     "viewportHeight": 900,
     "viewportWidth": 1440,

venia-integration-tests/src/assertions/categoryPage/index.js

@@ -134,6 +134,15 @@ export const assertActiveSortItem = sortLabel => {
     cy.get(productSortSortItemActive).should('contain', sortLabel);
 };
 
+/**
+ * Assert Sort Item not available from list
+ *
+ * @param {String} sortLabel product name
+ */
+export const assertNotAvailableSortItem = sortLabel => {
+    cy.get(productSortSortItem).should('not.contain', sortLabel);
+};
+
 /**
  * Utility function to assert CategoryPage text is in correct language (french or english)
  * @param {String} language -- language to validate (ISO639 codes only, eg. "fra,eng")

venia-integration-tests/src/tests/e2eTests/category/verifySortAndPagination.spec.js

@@ -94,7 +94,7 @@ describe('PWA-1410: verify sort and pagination', () => {
         });
 
         toggleProductSort();
-        assertActiveSortItem(sortData.position);
+        assertActiveSortItem(sortData.bestMatch);
         sortProducts(sortData.priceLowHigh);
 
         cy.wait(['@gqlGetProductSearchQuery'], {

venia-integration-tests/src/tests/e2eTests/search/verifySearchFunctionality.spec.js

@@ -4,6 +4,12 @@ import {
 } from '../../../fixtures';
 import { header as headerActions } from '../../../actions';
 import { categoryPage as categoryPageAssertions } from '../../../assertions';
+import { sortData } from '../../../fixtures/categoryPage';
+import {
+    assertActiveSortItem,
+    assertNotAvailableSortItem
+} from '../../../assertions/categoryPage';
+import { sortProducts, toggleProductSort } from '../../../actions/categoryPage';
 
 const { searchData } = categoryPageFixtures;
 const {
@@ -44,6 +50,12 @@ describe('PWA-1406: verify user search actions', () => {
 
         assertProductIsInGallery(searchData.validProductName1);
 
+        // Test - Position sort not available in search
+        toggleProductSort();
+        assertNotAvailableSortItem(sortData.position);
+
+        assertActiveSortItem(sortData.bestMatch);
+
         // Test - Search by valid SKU - 2
         triggerSearch();
         searchFromSearchBar(searchData.validSku2);
@@ -82,5 +94,13 @@ describe('PWA-1406: verify user search actions', () => {
         );
 
         assertProductIsInGallery(searchData.validProductName1);
+
+        toggleProductSort();
+        sortProducts(sortData.priceHighLow);
+
+        // Test - Position sort not available in search even after changing sort
+        toggleProductSort();
+        assertActiveSortItem(sortData.priceHighLow);
+        assertNotAvailableSortItem(sortData.position);
     });
 });