-
Notifications
You must be signed in to change notification settings - Fork 393
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: Load product list from transfer state in SSR (#18009)
- Loading branch information
Showing
5 changed files
with
478 additions
and
3 deletions.
There are no files selected for viewing
69 changes: 69 additions & 0 deletions
69
projects/storefrontapp-e2e-cypress/cypress/e2e/ssr/product-listing-page.core-e2e.cy.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| /* | ||
| * SPDX-FileCopyrightText: 2023 SAP Spartacus team <spartacus-team@sap.com> | ||
| * | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import { SSR_E2E_PLP_SCENARIOS } from '../../helpers/ssr/product-listing-page'; | ||
|
|
||
| const SEARCH_REQUEST_URL = '**/products/search?**'; | ||
| const scenarios = SSR_E2E_PLP_SCENARIOS; | ||
|
|
||
| describe('SSR - Product Listing Page', () => { | ||
| /** | ||
| * This tests all the scenarios where SSR should render the page but the search request is | ||
| * only made on the initial page load. The server should have rendered the page and return | ||
| * the cached page that does NOT need to request the search api again on reload. | ||
| * | ||
| * Note: When in development, restarting the dev ssr server (npm run dev:ssr) may be required | ||
| * to clear the rendering cache. | ||
| */ | ||
| describe('search request should only be made once and NOT on page reload', () => { | ||
| for (let scenario of scenarios) { | ||
| // Skip is used in case of going back to a page that would be already cached | ||
| // since another search request would NOT be made. | ||
| if (!scenario.skipReloadTest) { | ||
| it(scenario.case, () => { | ||
| cy.intercept(SEARCH_REQUEST_URL).as('search-init'); | ||
| cy.visit(scenario.url); | ||
| cy.wait('@search-init'); | ||
|
|
||
| cy.intercept(SEARCH_REQUEST_URL, cy.spy().as('search-2nd')); | ||
| cy.reload(); | ||
| cy.get('cx-product-list'); | ||
| cy.get('@search-2nd').should('not.have.been.called'); | ||
| }); | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| /** | ||
| * This tests that navigation has not broken when navigating options such as paginations and sorts. | ||
| */ | ||
| describe( | ||
| 'should be able to navigate through all scenarios and trigger requests for each case', | ||
| { testIsolation: false }, | ||
| () => { | ||
| for (let i = 0; i < scenarios.length; i++) { | ||
| const scenario = scenarios[i]; | ||
| const previous = scenarios[i - 1]; | ||
| it(scenario.case, () => { | ||
| // Visit whenever no next step from previous scenario to begin with new search type. | ||
| if (!previous?.navigateToNext) { | ||
| cy.visit(scenarios[i].url); | ||
| } | ||
|
|
||
| cy.get('cx-product-list'); | ||
| cy.url().should('contain', scenario.url); | ||
|
|
||
| // Make sure navigation has happened successfully by checking a search request was made. | ||
| if (scenario.navigateToNext) { | ||
| cy.intercept(SEARCH_REQUEST_URL).as('search'); | ||
| scenario.navigateToNext(); | ||
| cy.wait('@search'); | ||
| } | ||
| }); | ||
| } | ||
| } | ||
| ); | ||
| }); |
96 changes: 96 additions & 0 deletions
96
projects/storefrontapp-e2e-cypress/cypress/helpers/ssr/product-listing-page.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| /* | ||
| * SPDX-FileCopyrightText: 2023 SAP Spartacus team <spartacus-team@sap.com> | ||
| * | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| const CASE_TITLES = { | ||
| ALL_BRANDS: 'All Brands', | ||
| QUERY_GRIP: 'Search Query "grip"', | ||
| DIGITAL_CAMERAS: 'Digital Cameras', | ||
| }; | ||
|
|
||
| const CASE_URLS = { | ||
| ALL_BRANDS: '/Brands/all/c/brands', | ||
| QUERY_GRIP: '/search/grip', | ||
| DIGITAL_CAMERAS: '/Open-Catalogue/Cameras/Digital-Cameras/c/575', | ||
| }; | ||
|
|
||
| const CASE_QUERY_PARTS = { | ||
| ALL_BRANDS: '?query=:topRated:allCategories:brands', | ||
| QUERY_GRIP: '?query=grip:topRated', | ||
| DIGITAL_CAMERAS: '?query=:topRated:allCategories:575', | ||
| }; | ||
|
|
||
| function getStandardCases(key: string) { | ||
| return [ | ||
| { | ||
| case: CASE_TITLES[key], | ||
| url: CASE_URLS[key], | ||
| navigateToNext: () => { | ||
| cy.get('cx-pagination a.page[aria-label="page 2"]').first().click(); | ||
| }, | ||
| }, | ||
| { | ||
| case: CASE_TITLES[key] + ' (2nd page)', | ||
| url: CASE_URLS[key] + '?currentPage=1', | ||
| navigateToNext: () => { | ||
| cy.get('cx-pagination a.start[aria-label="first page"]') | ||
| .first() | ||
| .click(); | ||
| }, | ||
| }, | ||
| { | ||
| case: CASE_TITLES[key] + ' (back to first page)', | ||
| url: CASE_URLS[key], | ||
| navigateToNext: () => { | ||
| cy.get('cx-sorting .ng-select').first().ngSelect('Top Rated'); | ||
| }, | ||
| skipReloadTest: true, | ||
| }, | ||
| { | ||
| case: CASE_TITLES[key] + ' (with sort)', | ||
| url: CASE_URLS[key] + '?sortCode=topRated', | ||
| navigateToNext: () => { | ||
| cy.get('cx-pagination a.page[aria-label="page 2"]').first().click(); | ||
| }, | ||
| }, | ||
| { | ||
| case: CASE_TITLES[key] + ' (2nd page with sort)', | ||
| url: CASE_URLS[key] + '?sortCode=topRated¤tPage=1', | ||
| navigateToNext: () => { | ||
| cy.get('cx-facet a').contains('Chiba').click(); | ||
| }, | ||
| }, | ||
| { | ||
| case: CASE_TITLES[key] + ' (with query and sort)', | ||
| url: CASE_URLS[key] + CASE_QUERY_PARTS[key] + ':availableInStores:Chiba', | ||
| navigateToNext: () => { | ||
| cy.get('cx-pagination a.page[aria-label="page 2"]').first().click(); | ||
| }, | ||
| }, | ||
| { | ||
| case: CASE_TITLES[key] + ' (2nd page with query and sort)', | ||
| url: | ||
| CASE_URLS[key] + | ||
| CASE_QUERY_PARTS[key] + | ||
| ':availableInStores:Chiba¤tPage=1', | ||
| navigateToNext: () => { | ||
| cy.get('cx-sorting .ng-select').first().ngSelect('Relevance'); | ||
| }, | ||
| }, | ||
| { | ||
| case: CASE_TITLES[key] + ' (with query changing sort to default)', | ||
| url: | ||
| CASE_URLS[key] + | ||
| CASE_QUERY_PARTS[key] + | ||
| ':availableInStores:Chiba¤tPage=1&sortCode=relevance', | ||
| }, | ||
| ]; | ||
| } | ||
|
|
||
| export const SSR_E2E_PLP_SCENARIOS = [ | ||
| ...getStandardCases('ALL_BRANDS'), | ||
| ...getStandardCases('QUERY_GRIP'), | ||
| ...getStandardCases('DIGITAL_CAMERAS'), | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.