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>

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");
+    },
+  );
+});

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"]',
 };

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);
+}

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

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>