From 21e0be510995594a22a3ec38536b7ce3b679965b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anna=20Szcz=C4=99ch?=
 <30683248+szczecha@users.noreply.github.com>
Date: Thu, 18 May 2023 11:30:05 +0200
Subject: [PATCH] Add e2e for should be able to switch to products tile view
 SALEOR_2610 (#3619)

* add e2e for switching to tile view

* remove unused reference

* add change to tile view helper

* use cypress command checkIfElementIsVisible

Co-authored-by: wojteknowacki <124166231+wojteknowacki@users.noreply.github.com>

* change to kebab case

* add check for switch to grid view

---------

Co-authored-by: wojteknowacki <124166231+wojteknowacki@users.noreply.github.com>
---
 .../e2e/products/productsList/productsView.js | 36 +++++++++++++++++++
 .../catalog/products/products-list.js         |  3 ++
 .../catalog/products/productsListPage.js      |  8 +++++
 .../ProductListTiles/ProductListTiles.tsx     |  1 +
 .../ProductListViewSwitch.tsx                 |  8 +++--
 5 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 cypress/e2e/products/productsList/productsView.js

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 @@
+/// <reference types="cypress"/>
+
+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<ProductListTilesProps> = ({
           gap={9}
           padding={9}
           __paddingTop={`calc(${vars.space[9]} - ${vars.space[5]}`}
+          data-test-id="tile-view"
         >
           {products.map(product => (
             <ProductTile
diff --git a/src/products/components/ProductListViewSwitch/ProductListViewSwitch.tsx b/src/products/components/ProductListViewSwitch/ProductListViewSwitch.tsx
index 15d5ee109..be1eafbc7 100644
--- a/src/products/components/ProductListViewSwitch/ProductListViewSwitch.tsx
+++ b/src/products/components/ProductListViewSwitch/ProductListViewSwitch.tsx
@@ -18,10 +18,14 @@ export const ProductListViewSwitch = ({
       setProductListViewType(value as ProductListViewType);
     }}
   >
-    <Switch.Item id="datagrid" value="datagrid">
+    <Switch.Item
+      id="datagrid"
+      value="datagrid"
+      data-test-id="datagrid-view-button"
+    >
       <ViewListIcon size="medium" />
     </Switch.Item>
-    <Switch.Item id="tile" value="tile">
+    <Switch.Item id="tile" value="tile" data-test-id="tile-view-button">
       <ViewTilesIcon size="medium" />
     </Switch.Item>
   </Switch>