diff --git a/cypress/e2e/products/productsList/productsView.js b/cypress/e2e/products/productsList/productsView.js new file mode 100644 index 000000000..0eaa17777 --- /dev/null +++ b/cypress/e2e/products/productsList/productsView.js @@ -0,0 +1,36 @@ +/// + +import { PRODUCTS_LIST } from "../../../elements/catalog/products/products-list"; +import { urlList } from "../../../fixtures/urlList"; +import { + changeToDatagridView, + changeToTileView, +} from "../../../support/pages/catalog/products/productsListPage"; + +describe("As an user I should be able switch between product views", () => { + beforeEach(() => { + cy.clearSessionData() + .loginUserViaRequest() + .then(() => { + // set notifiedAboutNavigator to make navigator banner gone from the start - banner was covering needed elements during test + window.localStorage.setItem("notifiedAboutNavigator", "true"); + }); + cy.visit(urlList.products); + }); + + it( + "should be able to switch between products view TC: SALEOR_2610", + { tags: ["@productsList", "@allEnv", "@stable"] }, + () => { + cy.get(PRODUCTS_LIST.datagridViewButton) + .invoke("attr", "data-state") + .should("eq", "checked"); + changeToTileView(); + cy.checkIfElementIsVisible(PRODUCTS_LIST.tileProductsView); + cy.get(PRODUCTS_LIST.dataGridTable).should("not.exist"); + changeToDatagridView(); + cy.checkIfElementIsVisible(PRODUCTS_LIST.dataGridTable); + cy.get(PRODUCTS_LIST.tileProductsView).should("not.exist"); + }, + ); +}); diff --git a/cypress/elements/catalog/products/products-list.js b/cypress/elements/catalog/products/products-list.js index 9019d87fd..fe4ccecda 100644 --- a/cypress/elements/catalog/products/products-list.js +++ b/cypress/elements/catalog/products/products-list.js @@ -50,4 +50,7 @@ export const PRODUCTS_LIST = { }, resultsOnPageSelect: "[data-test-id='PaginationRowNumberSelect']", rowNumberOption: "[data-test-id='rowNumberOption']", + tileViewButton: '[data-test-id="tile-view-button"]', + datagridViewButton: '[data-test-id="datagrid-view-button"]', + tileProductsView: '[data-test-id="tile-view"]', }; diff --git a/cypress/support/pages/catalog/products/productsListPage.js b/cypress/support/pages/catalog/products/productsListPage.js index 50a256a9f..4f6d1375c 100644 --- a/cypress/support/pages/catalog/products/productsListPage.js +++ b/cypress/support/pages/catalog/products/productsListPage.js @@ -131,3 +131,11 @@ export function sortProductsBy(sortBy) { .waitForRequestAndCheckIfNoErrors("@ProductList"); expectProductsSortedBy(sortBy, false); } + +export function changeToTileView() { + cy.clickOnElement(PRODUCTS_LIST.tileViewButton); +} + +export function changeToDatagridView() { + cy.clickOnElement(PRODUCTS_LIST.datagridViewButton); +} diff --git a/src/products/components/ProductListTiles/ProductListTiles.tsx b/src/products/components/ProductListTiles/ProductListTiles.tsx index 18aa0a5fe..669565503 100644 --- a/src/products/components/ProductListTiles/ProductListTiles.tsx +++ b/src/products/components/ProductListTiles/ProductListTiles.tsx @@ -43,6 +43,7 @@ export const ProductListTiles: React.FC = ({ gap={9} padding={9} __paddingTop={`calc(${vars.space[9]} - ${vars.space[5]}`} + data-test-id="tile-view" > {products.map(product => ( - + - +