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

Saleor 2692 tests for filtering products (#1055)

Browse source 
* test for filtering products

* tests for filters

* change filter input selector

* change filter input selector

* change filter input selector

* add data-test-id
This commit is contained in:
Karolina 2021-04-12 17:22:12 +02:00 committed by GitHub
parent c6cdc393e2
commit 2173e241b5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 257 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
cypress/apiRequests/Collections.js
View file

@ -1,3 +1,23 @@
export function createCollection(name, slug = name) {
const mutation = `mutation {
collectionCreate(input:{
name:"${name}",
slug:"${name}"
}){
collectionErrors{
field
message
}
collection{
name
id
}
}
}`;
return cy
.sendRequestWithQuery(mutation)
.its("body.data.collectionCreate.collection");
}
export function getCollections(search) {
const filter = search
? `, filter:{

16
cypress/apiRequests/Product.js
View file

@ -1,3 +1,4 @@
import { stringify } from "../support/format/formatJson";
import { getValueWithDefault } from "./utils/Utils";
export function getFirstProducts(first, search) {
@ -22,6 +23,21 @@ export function getFirstProducts(first, search) {
.sendRequestWithQuery(query)
.then(resp => resp.body.data.products.edges);
}
export function updateProduct(productId, input) {
const mutation = `mutation {
productUpdate(id:"${productId}", input:${stringify(input)} ){
productErrors{
field
message
}
product{
id
}
}
}
`;
return cy.sendRequestWithQuery(mutation);
}
export function updateChannelInProduct({
productId,

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

@ -1,6 +1,19 @@
export const PRODUCTS_LIST = {
productsList: "[data-test-id][data-test='id']",
productsNames: "[data-test='name']",
createProductBtn: "[data-test='add-product']",
searchProducts: "[placeholder='Search Products...']",
emptyProductRow: "[class*='Skeleton']"
emptyProductRow: "[data-test-id='skeleton']",
showFiltersButton: '[data-test-id="show-filters-button"]',
filters: {
filterOption: '[data-test-id="filterOption"]',
productsOutOfStockOption: '[data-test-id="OUT_OF_STOCK"]',
filterBy: {
category: '[data-test-id="categories"]',
collection: '[data-test-id="collections"]',
productType: '[data-test-id="productType"]',
stock: '[data-test-id="stock"]'
},
filterBySearchInput: '[data-test*="filterField"][data-test*="Input"]'
}
};

3
cypress/elements/shared/sharedElements.js
View file

@ -1,3 +1,4 @@
export const SHARED_ELEMENTS = {
header: "[data-test-id='page-header']"
header: "[data-test-id='page-header']",
progressBar: '[role="progressbar"]'
};

113
cypress/integration/products/productsList/filteringProducts.js Normal file
View file

@ -0,0 +1,113 @@
import faker from "faker";
import { createCollection } from "../../../apiRequests/Collections";
import { PRODUCTS_LIST } from "../../../elements/catalog/products/products-list";
import {
selectFilterOption,
selectProductsOutOfStock
} from "../../../steps/catalog/products/productsListSteps";
import { urlList } from "../../../url/urlList";
import { getDefaultChannel } from "../../../utils/channelsUtils";
import {
createProductInChannel,
createTypeAttributeAndCategoryForProduct,
deleteProductsStartsWith,
updateProduct
} from "../../../utils/products/productsUtils";
import {
createShipping,
deleteShippingStartsWith
} from "../../../utils/shippingUtils";
describe("Products", () => {
const startsWith = "Cy-";
const name = `${startsWith}${faker.random.number()}`;
const stockQuantity = 747;
const price = 342;
let attribute;
let productType;
let category;
let warehouse;
let channel;
let collection;
before(() => {
cy.clearSessionData().loginUserViaRequest();
deleteShippingStartsWith(startsWith);
deleteProductsStartsWith(startsWith);
createTypeAttributeAndCategoryForProduct(name).then(
({
attribute: attributeResp,
productType: productTypeResp,
category: categoryResp
}) => {
attribute = attributeResp;
productType = productTypeResp;
category = categoryResp;
}
);
createCollection(name).then(
collectionResp => (collection = collectionResp)
);
getDefaultChannel()
.then(channelResp => {
channel = channelResp;
cy.fixture("addresses");
})
.then(addresses => {
createShipping({
channelId: channel.id,
name,
address: addresses.plAddress
});
})
.then(({ warehouse: warehouseResp }) => {
warehouse = warehouseResp;
createProductInChannel({
name,
channelId: channel.id,
warehouseId: warehouse.id,
quantityInWarehouse: stockQuantity,
price,
attributeId: attribute.id,
categoryId: category.id,
productTypeId: productType.id
});
})
.then(({ product: product }) => {
updateProduct(product.id, { collections: [collection.id] });
});
});
beforeEach(() => {
cy.clearSessionData()
.loginUserViaRequest()
.visit(urlList.products);
});
const filterProductsBy = ["category", "collection", "productType"];
filterProductsBy.forEach(filterBy => {
it(`should filter products by ${filterBy}`, () => {
selectFilterOption(filterBy, name);
cy.getTextFromElement(PRODUCTS_LIST.productsNames).then(product => {
expect(product).to.includes(name);
});
});
});
it("should filter products out of stock", () => {
const productOutOfStock = `${startsWith}${faker.random.number()}`;
createProductInChannel({
name: productOutOfStock,
channelId: channel.id,
warehouseId: warehouse.id,
quantityInWarehouse: 0,
productTypeId: productType.id,
attributeId: attribute.id,
categoryId: category.id,
price
});
selectProductsOutOfStock();
cy.getTextFromElement(PRODUCTS_LIST.productsNames).then(product => {
expect(product).to.includes(productOutOfStock);
});
});
});

34
cypress/steps/catalog/products/productsListSteps.js Normal file
View file

@ -0,0 +1,34 @@
import { PRODUCTS_LIST } from "../../../elements/catalog/products/products-list";
import { BUTTON_SELECTORS } from "../../../elements/shared/button-selectors";
import { SHARED_ELEMENTS } from "../../../elements/shared/sharedElements";
export function selectFilterOption(filter, optionName) {
selectFilterBy(filter)
.get(PRODUCTS_LIST.filters.filterBySearchInput)
.type(optionName);
cy.contains(PRODUCTS_LIST.filters.filterOption, optionName)
.find(BUTTON_SELECTORS.checkbox)
.click();
submitFilters();
}
export function selectProductsOutOfStock() {
selectFilterBy("stock")
.get(PRODUCTS_LIST.filters.productsOutOfStockOption)
.click();
submitFilters();
}
function selectFilterBy(filter) {
return cy
.get(PRODUCTS_LIST.showFiltersButton)
.click()
.get(PRODUCTS_LIST.filters.filterBy[filter])
.click();
}
function submitFilters() {
cy.get(BUTTON_SELECTORS.submit)
.click()
.get(SHARED_ELEMENTS.progressBar)
.should("not.exist")
.get(PRODUCTS_LIST.emptyProductRow)
.should("not.exist");
}

12
cypress/support/format/formatJson.js Normal file
View file

@ -0,0 +1,12 @@
export function stringify(obj_from_json) {
if (typeof obj_from_json !== "object" || Array.isArray(obj_from_json)) {
// not an object, stringify using native function
return JSON.stringify(obj_from_json);
}
// Implements recursive object serialization according to JSON spec
// but without quotes around the keys.
const props = Object.keys(obj_from_json)
.map(key => `${key}:${stringify(obj_from_json[key])}`)
.join(",");
return `{${props}}`;
}

5
cypress/utils/products/productsUtils.js
View file

@ -85,6 +85,11 @@ export function createProduct(attributeId, name, productTypeId, categoryId) {
.createProduct(attributeId, name, productTypeId, categoryId)
.its("body.data.productCreate.product");
}
export function updateProduct(productId, input) {
return productRequest
.updateProduct(productId, input)
.its("body.data.productUpdate.product");
}
export function createVariant({
productId,
sku,

1
src/components/Filter/Filter.tsx
View file

@ -111,6 +111,7 @@ const Filter: React.FC<FilterProps> = props => {
isFilterMenuOpened || isFilterActive
})}
onClick={() => setFilterMenuOpened(!isFilterMenuOpened)}
data-test-id="show-filters-button"
>
<Typography className={classes.addFilterText}>
<FormattedMessage defaultMessage="Filters" description="button" />

6
src/components/Filter/FilterAutocompleteField.tsx
View file

@ -131,7 +131,11 @@ const FilterAutocompleteField: React.FC<FilterAutocompleteFieldProps> = ({
</Typography>
)}
{availableOptions.map(option => (
<div className={classes.option} key={option.value}>
<div
className={classes.option}
key={option.value}
data-test-id="filterOption"
>
<FormControlLabel
control={
<Checkbox

2
src/products/components/ProductList/ProductList.tsx
View file

@ -297,7 +297,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
onClick={product && onRowClick(product.id)}
className={classes.link}
data-test="id"
data-test-id={product?.id}
data-test-id={product ? product?.id : "skeleton"}
>
<TableCell padding="checkbox">
<Checkbox

34
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -36765,6 +36765,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -37978,6 +37979,7 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -38409,6 +38411,7 @@ exports[`Storyshots Views / Attributes / Attribute list no data 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -67555,6 +67558,7 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -69148,6 +69152,7 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -69556,6 +69561,7 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -79790,6 +79796,7 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -80465,6 +80472,7 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -80898,6 +80906,7 @@ exports[`Storyshots Views / Discounts / Sale list no channels 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -81573,6 +81582,7 @@ exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -90970,6 +90980,7 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -91504,6 +91515,7 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -91983,6 +91995,7 @@ exports[`Storyshots Views / Discounts / Voucher list no channels 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -92517,6 +92530,7 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -97742,6 +97756,7 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -99382,6 +99397,7 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -99820,6 +99836,7 @@ exports[`Storyshots Views / Orders / Draft order list when no data 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -128023,6 +128040,7 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -129383,6 +129401,7 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -129834,6 +129853,7 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -147737,6 +147757,7 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -148094,6 +148115,7 @@ exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -148422,6 +148444,7 @@ exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -153118,6 +153141,7 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -153734,6 +153758,7 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -154105,6 +154130,7 @@ exports[`Storyshots Views / Product types / Product types list no data 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -188766,6 +188792,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -191241,6 +191268,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -191548,6 +191576,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
<tr
class="MuiTableRow-root-id ProductList-link-id"
data-test="id"
data-test-id="skeleton"
>
<td
class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@ -191792,6 +191821,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -194027,6 +194057,7 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -194438,6 +194469,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -217559,6 +217591,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>
@ -218234,6 +218267,7 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
<div>
<button
class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
data-test-id="show-filters-button"
tabindex="0"
type="button"
>