djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add e2e for should be able to switch to products tile view SALEOR_2610 (#3619)

Browse source 
* 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>
This commit is contained in:
Anna Szczęch 2023-05-18 11:30:05 +02:00 committed by GitHub
parent 8a86a32c08
commit 21e0be5109
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 54 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
cypress/e2e/products/productsList/productsView.js Normal file
View file

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

3
cypress/elements/catalog/products/products-list.js
View file

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

8
cypress/support/pages/catalog/products/productsListPage.js
View file

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

1
src/products/components/ProductListTiles/ProductListTiles.tsx
View file

@ -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

8
src/products/components/ProductListViewSwitch/ProductListViewSwitch.tsx
View file

@ -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>