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 => (
-
+
-
+