From 818452568d6f0394cd009ea8162774d4e8ffa874 Mon Sep 17 00:00:00 2001 From: Aanchal Pawar <97873570+glo82145@users.noreply.github.com> Date: Wed, 9 Nov 2022 05:49:28 +0530 Subject: [PATCH] AC-2489::Page title for search page not informative (Search Results) (#3931) * AC-2489::Page title for search page not informative (Search Results) * AC-2489::Fixed the lint issue on searchPage.js * AC-2489::fixed failing pr-test testcase * AC-2489::Added store view name with search term * AC-2489::Added storename with search term aria-label * AC-2489::fixed yarn test cases Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com> --- .../__snapshots__/useSearchPage.spec.js.snap | 1 + .../__tests__/useSearchPage.spec.js | 45 ++++++++++++++- .../lib/talons/SearchPage/useSearchPage.js | 7 ++- .../__snapshots__/searchPage.spec.js.snap | 56 +++++++++---------- .../lib/components/SearchPage/searchPage.js | 10 ++-- 5 files changed, 81 insertions(+), 38 deletions(-) diff --git a/packages/peregrine/lib/talons/SearchPage/__tests__/__snapshots__/useSearchPage.spec.js.snap b/packages/peregrine/lib/talons/SearchPage/__tests__/__snapshots__/useSearchPage.spec.js.snap index 5070948f12..46e5500b7d 100644 --- a/packages/peregrine/lib/talons/SearchPage/__tests__/__snapshots__/useSearchPage.spec.js.snap +++ b/packages/peregrine/lib/talons/SearchPage/__tests__/__snapshots__/useSearchPage.spec.js.snap @@ -8,6 +8,7 @@ Object { "value": "position", }, ], + "currentStoreName": "Store 1", "data": Object { "products": Object { "page_info": Object { diff --git a/packages/peregrine/lib/talons/SearchPage/__tests__/useSearchPage.spec.js b/packages/peregrine/lib/talons/SearchPage/__tests__/useSearchPage.spec.js index 64bad31332..e31b0adeed 100644 --- a/packages/peregrine/lib/talons/SearchPage/__tests__/useSearchPage.spec.js +++ b/packages/peregrine/lib/talons/SearchPage/__tests__/useSearchPage.spec.js @@ -6,6 +6,7 @@ import { getFiltersFromSearch } from '../../FilterModal/helpers'; import { useSearchPage } from '../useSearchPage'; import { getSearchParam } from '../../../hooks/useSearchParam'; import { useEventingContext } from '../../../context/eventing'; +import { useStoreSwitcher } from '@magento/peregrine/lib/talons/Header/useStoreSwitcher'; const log = jest.fn(); const Component = props => { @@ -28,6 +29,10 @@ const mockUseSort = jest .mockName('mockUseSort'); const mockSetCurrentPage = jest.fn().mockName('mockSetCurrentPage'); +jest.mock('@magento/peregrine/lib/talons/Header/useStoreSwitcher', () => ({ + useStoreSwitcher: jest.fn() +})); + jest.mock('react-router-dom', () => ({ useHistory: jest.fn(() => ({ push: jest.fn() })), useLocation: jest.fn(() => ({ @@ -135,6 +140,9 @@ const mockGetSearchAvailableSortMethods = jest.fn(); describe('searchCategory', () => { test('returns the correct shape', () => { + useStoreSwitcher.mockReturnValueOnce({ + currentStoreName: 'Store 1' + }); useLazyQuery.mockReturnValueOnce([ mockGetSearchAvailableSortMethods, { data: mockAvailableSortMethods } @@ -149,6 +157,9 @@ describe('searchCategory', () => { mockGetSearchAvailableSortMethods, { data: mockAvailableSortMethods } ]); + useStoreSwitcher.mockReturnValueOnce({ + currentStoreName: 'Store 1' + }); getFiltersFromSearch.mockReturnValueOnce(new Map()); // Act. createTestInstance(); @@ -162,6 +173,9 @@ describe('searchCategory', () => { mockGetSearchAvailableSortMethods, { data: mockAvailableSortMethods } ]); + useStoreSwitcher.mockReturnValueOnce({ + currentStoreName: 'Store 1' + }); const map = new Map().set('not_category_id', 'unit test'); getFiltersFromSearch.mockReturnValueOnce(map); // Act. @@ -176,6 +190,9 @@ describe('searchCategory', () => { mockGetSearchAvailableSortMethods, { data: mockAvailableSortMethods } ]); + useStoreSwitcher.mockReturnValueOnce({ + currentStoreName: 'Store 1' + }); const map = new Map().set('category_id', new Set(['Bottoms,11'])); getFiltersFromSearch.mockReturnValueOnce(map); // Act. @@ -190,6 +207,9 @@ describe('searchCategory', () => { mockGetSearchAvailableSortMethods, { data: mockAvailableSortMethods } ]); + useStoreSwitcher.mockReturnValueOnce({ + currentStoreName: 'Store 1' + }); const map = new Map().set( 'category_id', new Set(['Bottoms,11', 'Skirts,12']) @@ -207,7 +227,8 @@ describe('searchCategory', () => { { sortText: 'Changed', sortAttribute: 'relevance', - sortDirection: 'DESC' + sortDirection: 'DESC', + currentStoreName: 'Store 1' }, 0 ], @@ -216,7 +237,8 @@ describe('searchCategory', () => { { sortText: 'Best Match', sortAttribute: 'Changed', - sortDirection: 'DESC' + sortDirection: 'DESC', + currentStoreName: 'Store 1' }, 1 ], @@ -225,7 +247,8 @@ describe('searchCategory', () => { { sortText: 'Best Match', sortAttribute: 'relevance', - sortDirection: 'Changed' + sortDirection: 'Changed', + currentStoreName: 'Store 1' }, 1 ] @@ -234,18 +257,25 @@ describe('searchCategory', () => { 'Changing %s current page to 1.', (description, sortParams, expected) => { mockUseSort.mockReturnValueOnce([sortParams, jest.fn()]); + useStoreSwitcher.mockReturnValueOnce({ + currentStoreName: 'Store 1' + }); useLazyQuery.mockReturnValueOnce([ mockGetSearchAvailableSortMethods, { data: mockAvailableSortMethods } ]); const tree = createTestInstance(); act(() => { + useStoreSwitcher.mockReturnValueOnce({ + currentStoreName: 'Store 1' + }); useLazyQuery.mockReturnValueOnce([ mockGetSearchAvailableSortMethods, { data: mockAvailableSortMethods } ]); tree.update(); }); + expect(mockSetCurrentPage).toHaveBeenCalledTimes(expected); } ); @@ -254,6 +284,9 @@ describe('searchCategory', () => { mockGetSearchAvailableSortMethods, { data: mockAvailableSortMethods } ]); + useStoreSwitcher.mockReturnValueOnce({ + currentStoreName: 'Store 1' + }); mockUseSort.mockReturnValueOnce([ { sortText: 'Best Match', @@ -269,6 +302,9 @@ describe('searchCategory', () => { mockGetSearchAvailableSortMethods, { data: mockAvailableSortMethods } ]); + useStoreSwitcher.mockReturnValueOnce({ + currentStoreName: 'Store 1' + }); tree.update(); }); expect(mockSetCurrentPage).toHaveBeenCalledWith(1, true); @@ -283,6 +319,9 @@ describe('searchCategory', () => { mockGetSearchAvailableSortMethods, { data: mockAvailableSortMethods } ]); + useStoreSwitcher.mockReturnValueOnce({ + currentStoreName: 'Store 1' + }); mockUseSort.mockReturnValueOnce([ { sortText: 'Sort Text', diff --git a/packages/peregrine/lib/talons/SearchPage/useSearchPage.js b/packages/peregrine/lib/talons/SearchPage/useSearchPage.js index 2fc583dafa..279fe12377 100644 --- a/packages/peregrine/lib/talons/SearchPage/useSearchPage.js +++ b/packages/peregrine/lib/talons/SearchPage/useSearchPage.js @@ -1,7 +1,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react'; import { useLazyQuery, useQuery } from '@apollo/client'; import { useLocation } from 'react-router-dom'; - +import { useStoreSwitcher } from '@magento/peregrine/lib/talons/Header/useStoreSwitcher'; import mergeOperations from '../../util/shallowMerge'; import { useAppContext } from '../../context/app'; import { usePagination } from '../../hooks/usePagination'; @@ -22,7 +22,7 @@ import { useEventingContext } from '../../context/eventing'; export const useSearchPage = (props = {}) => { const [, { dispatch }] = useEventingContext(); const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations); - + const { currentStoreName } = useStoreSwitcher(); const { getFilterInputsQuery, getPageSize, @@ -286,6 +286,7 @@ export const useSearchPage = (props = {}) => { pageControl, searchCategory, searchTerm: inputText, - sortProps + sortProps, + currentStoreName }; }; diff --git a/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap b/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap index c0d5844df3..65f9c33b74 100644 --- a/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap +++ b/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap @@ -59,10 +59,10 @@ exports[`Search Page Component error view does not render when data is present 1 - Venia Search + undefined's Search Result for term undefined - Venia Search + undefined's Search Result for term undefined - Venia Search + undefined's Search Result for term undefined - Venia Search + undefined's Search Result for term undefined - Venia Search + undefined's Search Result for term undefined - Venia Search + undefined's Search Result for term undefined - Venia Search + undefined's Search Result for term undefined - Venia Search + undefined's Search Result for term false - Search Term - Venia Search + undefined's Search Result for term Search Term - Venia Search + undefined's Search Result for term undefined - Venia Search + undefined's Search Result for term undefined - Venia Search + undefined's Search Result for term undefined - Venia Search + undefined's Search Result for term undefined - Venia Search + undefined's Search Result for term undefined { pageControl, searchCategory, searchTerm, - sortProps + sortProps, + currentStoreName } = talonProps; const { formatMessage } = useIntl(); + const [currentSort] = sortProps; + const metaTitle = `${currentStoreName}'s Search Result for term ${searchTerm}`; const content = useMemo(() => { if (!data && loading) { return ( @@ -216,8 +218,8 @@ const SearchPage = props => { {content} {maybeFilterModal} - {metaLabel} - + {metaTitle} + );