diff --git a/cypress/e2e/configuration/channels/channels.js b/cypress/e2e/configuration/channels/channels.js index 19b363d14..d1efb1001 100644 --- a/cypress/e2e/configuration/channels/channels.js +++ b/cypress/e2e/configuration/channels/channels.js @@ -2,16 +2,16 @@ /// import faker from "faker"; -import { PRODUCTS_LIST } from "../../../elements/catalog/products/products-list"; import { ADD_CHANNEL_FORM_SELECTORS } from "../../../elements/channels/add-channel-form-selectors"; import { AVAILABLE_CHANNELS_FORM } from "../../../elements/channels/available-channels-form"; import { CHANNELS_SELECTORS } from "../../../elements/channels/channels-selectors"; import { SELECT_CHANNELS_TO_ASSIGN } from "../../../elements/channels/select-channels-to-assign"; import { HEADER_SELECTORS } from "../../../elements/header/header-selectors"; import { BUTTON_SELECTORS } from "../../../elements/shared/button-selectors"; -import { urlList } from "../../../fixtures/urlList"; +import { productDetailsUrl, urlList } from "../../../fixtures/urlList"; import { ONE_PERMISSION_USERS } from "../../../fixtures/users"; import { createChannel } from "../../../support/api/requests/Channels"; +import { getFirstProducts } from "../../../support/api/requests/Product"; import { createShippingZoneWithoutWarehouse, getShippingZone, @@ -87,19 +87,14 @@ describe("Channels", () => { // new channel should be visible at product availability form cy.clearSessionData().loginUserViaRequest(); - cy.addAliasToGraphRequest("InitialProductFilterAttributes"); - cy.visit(urlList.products) - .waitForRequestAndCheckIfNoErrors("@InitialProductFilterAttributes") - .waitForProgressBarToNotExist() - .get(PRODUCTS_LIST.emptyProductRow) - .should("not.exist") - .get(PRODUCTS_LIST.productsNames) - .first() - .click() - .get(AVAILABLE_CHANNELS_FORM.manageChannelsButton) - .click() - .get(SELECT_CHANNELS_TO_ASSIGN.listOfChannels) - .contains(randomChannel); + getFirstProducts(1).then(resp => { + const product = resp[0].node; + cy.visit(productDetailsUrl(product.id)) + .get(AVAILABLE_CHANNELS_FORM.manageChannelsButton) + .click() + .get(SELECT_CHANNELS_TO_ASSIGN.listOfChannels) + .contains(randomChannel); + }); }, ); it( diff --git a/cypress/e2e/navigation.js b/cypress/e2e/navigation.js index b323de7c9..0bf5408d1 100644 --- a/cypress/e2e/navigation.js +++ b/cypress/e2e/navigation.js @@ -18,7 +18,6 @@ import { PERMISSION_GROUP_LIST_SELECTORS, PLUGINS_LIST_SELECTORS, PRODUCT_TYPES_LIST_SELECTORS, - PRODUCTS_LIST, SALES_SELECTORS, SHIPPING_ZONES_LIST_SELECTORS, STAFF_MEMBERS_LIST_SELECTORS, @@ -26,7 +25,6 @@ import { } from "../elements/"; import { PERMISSIONS_OPTIONS } from "../fixtures/permissionsUsers"; import { urlList } from "../fixtures/urlList"; -import { ensureCanvasStatic } from "../support/customCommands/sharedElementsOperations/canvas"; import { expectConfigurationAvailableSectionsNumber, expectConfigurationSectionsToBeVisible, @@ -432,9 +430,6 @@ describe("As a staff user I want to navigate through shop using different permis cy.get(MENU_SELECTORS.CATALOG.collections).should("be.visible"); expectMainMenuAvailableSections(5); }); - ensureCanvasStatic(PRODUCTS_LIST.dataGridTable).then(() => { - cy.assertCanvasRowsNumber(PRODUCTS_LIST.dataGridTable, 21); - }); }, ); diff --git a/cypress/e2e/products/productsList/filteringProducts.js b/cypress/e2e/products/productsList/filteringProducts.js index 9b40da8c1..825002ed8 100644 --- a/cypress/e2e/products/productsList/filteringProducts.js +++ b/cypress/e2e/products/productsList/filteringProducts.js @@ -3,7 +3,7 @@ import faker from "faker"; -import { PRODUCTS_LIST } from "../../../elements/catalog/products/products-list"; +import { SHARED_ELEMENTS } from "../../../elements"; import { urlList } from "../../../fixtures/urlList"; import { createCollection } from "../../../support/api/requests/Collections"; import { updateProduct } from "../../../support/api/requests/Product"; @@ -24,7 +24,7 @@ import { } from "../../../support/pages/catalog/products/productsListPage"; describe("As an admin I should be able to filter products", () => { - const startsWith = "CyFilterProducts-"; + const startsWith = "ACyFilterProducts-"; const name = `${startsWith}${faker.datatype.number()}`; const stockQuantity = 747; const price = 342; @@ -92,9 +92,7 @@ describe("As an admin I should be able to filter products", () => { }); beforeEach(() => { - cy.clearSessionData() - .loginUserViaRequest() - .visit(urlList.products); + cy.clearSessionData().loginUserViaRequest().visit(urlList.products); }); const filterProductsBy = [ @@ -107,11 +105,8 @@ describe("As an admin I should be able to filter products", () => { `should filter products by ${filterBy.type}. TC: ${filterBy.testCase}`, { tags: ["@productsList", "@allEnv", "@stable"] }, () => { - cy.expectSkeletonIsVisible().waitForProgressBarToNotExist(); selectFilterOption(filterBy.type, name); - cy.getTextFromElement(PRODUCTS_LIST.productsNames).then(product => { - expect(product).to.includes(name); - }); + cy.get(SHARED_ELEMENTS.dataGridTable).contains(name).should("exist"); }, ); }); @@ -120,7 +115,6 @@ describe("As an admin I should be able to filter products", () => { "should filter products out of stock. TC: SALEOR_2604", { tags: ["@productsList", "@allEnv", "@stable"] }, () => { - cy.expectSkeletonIsVisible(); const productOutOfStock = `${startsWith}${faker.datatype.number()}`; createProductInChannel({ name: productOutOfStock, @@ -132,16 +126,11 @@ describe("As an admin I should be able to filter products", () => { categoryId: category.id, price, }); - cy.waitForProgressBarToNotExist(); selectChannel(channel.slug); selectProductsOutOfStock(); - cy.searchInTable(productOutOfStock) - .get(PRODUCTS_LIST.productsNames) - .should("have.length", 1) - .getTextFromElement(PRODUCTS_LIST.productsNames) - .then(product => { - expect(product).to.includes(productOutOfStock); - }); + cy.get(SHARED_ELEMENTS.dataGridTable) + .contains(productOutOfStock) + .should("exist"); }, ); }); diff --git a/cypress/e2e/products/productsList/pagination.js b/cypress/e2e/products/productsList/pagination.js index 445963223..9d8e8e5d4 100644 --- a/cypress/e2e/products/productsList/pagination.js +++ b/cypress/e2e/products/productsList/pagination.js @@ -1,13 +1,10 @@ /// /// +import { PAGINATION } from "../../../elements"; import { PRODUCTS_LIST } from "../../../elements/catalog/products/products-list"; -import { BUTTON_SELECTORS } from "../../../elements/shared/button-selectors"; import { urlList } from "../../../fixtures/urlList"; -import { - getDisplayedColumnArray, - isNumberOfProductsSameAsInSelectResultsOnPage, -} from "../../../support/pages/catalog/products/productsListPage"; +import { ensureCanvasStatic } from "../../../support/customCommands/sharedElementsOperations/canvas"; describe("As an admin I should be able to manage products table", () => { beforeEach(() => { @@ -16,37 +13,33 @@ describe("As an admin I should be able to manage products table", () => { }); it( - "should be able go to the next page on product list. TC: SALEOR_2605", + "should be able go to the next page and back on product list. TC: SALEOR_2605", { tags: ["@productsList", "@allEnv", "@stable"] }, () => { - cy.expectSkeletonIsVisible() - .get(PRODUCTS_LIST.emptyProductRow) - .should("not.exist") - .get(PRODUCTS_LIST.previousPagePagination) - .should("be.disabled"); - let firstPageProducts; - getDisplayedColumnArray("name").then( - productsList => (firstPageProducts = productsList), - ); - cy.addAliasToGraphRequest("ProductList") - .get(PRODUCTS_LIST.nextPageButton) - .click() - .waitForSkeletonToDisappear() - .get(PRODUCTS_LIST.emptyProductRow) - .should("not.exist") - .wait("@ProductList"); - getDisplayedColumnArray("name").then(productList => { - expect(productList).to.not.equal(firstPageProducts); + ensureCanvasStatic(PRODUCTS_LIST.dataGridTable).then(() => { + cy.assertCanvasRowsNumber(PRODUCTS_LIST.dataGridTable, 21); }); - cy.get(PRODUCTS_LIST.previousPagePagination) + cy.get(PAGINATION.previousPagePaginationButton).should("be.disabled"); + + cy.addAliasToGraphRequest("ProductList") + .get(PAGINATION.nextPagePaginationButton) + .should("not.be.disabled") .click() - .waitForSkeletonToDisappear() - .get(PRODUCTS_LIST.emptyProductRow) - .should("not.exist"); - getDisplayedColumnArray("name").then(productsList => { - expect( - JSON.stringify(productsList) === JSON.stringify(firstPageProducts), - ).to.be.true; + .wait("@ProductList"); + + ensureCanvasStatic(PRODUCTS_LIST.dataGridTable).then(() => { + cy.assertCanvasRowsNumber(PRODUCTS_LIST.dataGridTable, 21); + }); + cy.get(PAGINATION.previousPagePaginationButton) + .should("not.be.disabled") + .click() + .wait("@ProductList") + .get(PAGINATION.previousPagePaginationButton) + .should("be.disabled") + .get(PAGINATION.nextPagePaginationButton) + .should("not.be.disabled"); + ensureCanvasStatic(PRODUCTS_LIST.dataGridTable).then(() => { + cy.assertCanvasRowsNumber(PRODUCTS_LIST.dataGridTable, 21); }); }, ); @@ -55,27 +48,17 @@ describe("As an admin I should be able to manage products table", () => { "should see correct amount of products per page. TC: SALEOR_2606", { tags: ["@productsList", "@allEnv", "@stable"] }, () => { - cy.expectSkeletonIsVisible(); - isNumberOfProductsSameAsInSelectResultsOnPage().then( - isTheSame => - expect(isTheSame, "check if number of displayed products is correct") - .to.be.true, - ); - cy.get(PRODUCTS_LIST.resultsOnPageSelect) - .click() - .get( - `${PRODUCTS_LIST.rowNumberOption}${BUTTON_SELECTORS.notSelectedOption}`, - ) - .first() - .click() - .waitForProgressBarToNotExist(); - isNumberOfProductsSameAsInSelectResultsOnPage().then( - isTheSame => - expect( - isTheSame, - "check if number of displayed products is correct, after changing results number in table footer", - ).to.be.true, - ); + cy.addAliasToGraphRequest("ProductList"); + ensureCanvasStatic(PRODUCTS_LIST.dataGridTable).then(() => { + cy.getRowNumberButton().should("contain.text", 20); + cy.assertCanvasRowsNumber(PRODUCTS_LIST.dataGridTable, 21); + }); + cy.clickRowNumberButton(); + cy.getRowSelectorWithNumber(30).click().wait("@ProductList"); + ensureCanvasStatic(PRODUCTS_LIST.dataGridTable).then(() => { + cy.get(PRODUCTS_LIST.resultsOnPageSelect).should("contain.text", 30); + cy.assertCanvasRowsNumber(PRODUCTS_LIST.dataGridTable, 31); + }); }, ); }); diff --git a/cypress/e2e/products/productsList/sortingProducts.js b/cypress/e2e/products/productsList/sortingProducts.js index f3343169a..e8b582d25 100644 --- a/cypress/e2e/products/productsList/sortingProducts.js +++ b/cypress/e2e/products/productsList/sortingProducts.js @@ -11,14 +11,14 @@ import { submitFilters, } from "../../../support/pages/catalog/products/productsListPage"; -describe("As an admin I should be able to sort products", () => { +// waiting for canvas fix https://github.com/saleor/saleor-dashboard/issues/3410 +describe.skip("As an admin I should be able to sort products", () => { let defaultChannel; beforeEach(() => { cy.clearSessionData() .loginUserViaRequest() .visit(urlList.products) - .expectSkeletonIsVisible() .get(SHARED_ELEMENTS.header) .should("be.visible"); }); diff --git a/cypress/elements/catalog/products/products-list.js b/cypress/elements/catalog/products/products-list.js index 4e2ba8298..9019d87fd 100644 --- a/cypress/elements/catalog/products/products-list.js +++ b/cypress/elements/catalog/products/products-list.js @@ -48,8 +48,6 @@ export const PRODUCTS_LIST = { }, filterBySearchInput: '[data-test-id="filter-field-autocomplete-input"]', }, - nextPageButton: "[data-test-id='button-pagination-next']", - previousPagePagination: "[data-test-id='button-pagination-back']", resultsOnPageSelect: "[data-test-id='PaginationRowNumberSelect']", rowNumberOption: "[data-test-id='rowNumberOption']", }; diff --git a/cypress/elements/index.js b/cypress/elements/index.js index d7c78cdc6..abb5c3907 100644 --- a/cypress/elements/index.js +++ b/cypress/elements/index.js @@ -19,6 +19,7 @@ import { CUSTOMERS_LIST_SELECTORS, } from "./customer/"; import { SALES_SELECTORS, VOUCHERS_SELECTORS } from "./discounts"; +import { PAGINATION } from "./navigation"; import { DRAFT_ORDERS_LIST_SELECTORS, ORDERS_SELECTORS } from "./orders"; import { PAGE_DETAILS_SELECTORS, PAGES_LIST_SELECTORS } from "./pages/"; import { @@ -65,6 +66,7 @@ export { PAGE_TYPE_DETAILS_SELECTORS, PAGE_TYPES_LIST_SELECTORS, PAGES_LIST_SELECTORS, + PAGINATION, PERMISSION_GROUP_DETAILS_SELECTORS, PERMISSION_GROUP_LIST_SELECTORS, PLUGINS_DETAILS_SELECTORS, diff --git a/cypress/elements/navigation/index.js b/cypress/elements/navigation/index.js new file mode 100644 index 000000000..2e9e3c8db --- /dev/null +++ b/cypress/elements/navigation/index.js @@ -0,0 +1,3 @@ +import { PAGINATION } from "./pagination"; + +export { PAGINATION }; diff --git a/cypress/elements/navigation/pagination.js b/cypress/elements/navigation/pagination.js new file mode 100644 index 000000000..d021c122c --- /dev/null +++ b/cypress/elements/navigation/pagination.js @@ -0,0 +1,5 @@ +export const PAGINATION = { + previousPagePaginationButton: "[data-test-id='button-pagination-back']", + rowNumberButton: "[data-test-id='PaginationRowNumberSelect']", + nextPagePaginationButton: "[data-test-id='button-pagination-next']", +}; diff --git a/cypress/elements/shared/sharedElements.js b/cypress/elements/shared/sharedElements.js index b5afdbced..f86a8b9f3 100644 --- a/cypress/elements/shared/sharedElements.js +++ b/cypress/elements/shared/sharedElements.js @@ -3,6 +3,7 @@ export const SHARED_ELEMENTS = { progressBar: '[role="progressbar"]', circularProgress: '[class*="CircularProgress-circle"]', autocompleteCircle: '[class*="arrowInnerContainer"]', + dataGridTable: "[data-testid='data-grid-canvas']", skeleton: '[data-test-id="skeleton"]', table: 'table[class*="Table"]', tableRow: '[data-test-id*="id"], [class*="MuiTableRow"]', diff --git a/cypress/support/customCommands/basicOperations/index.js b/cypress/support/customCommands/basicOperations/index.js index 39a7c37d4..be42bb8a9 100644 --- a/cypress/support/customCommands/basicOperations/index.js +++ b/cypress/support/customCommands/basicOperations/index.js @@ -1,6 +1,9 @@ Cypress.Commands.add("getTextFromElement", element => cy.get(element).invoke("text"), ); +Cypress.Commands.add("getRowSelectorWithNumber", rowNumber => + cy.get(`[data-value=${rowNumber}]`), +); Cypress.Commands.add("clearAndType", { prevSubject: true }, (subject, text) => { cy.wrap(subject).then(subject => { diff --git a/cypress/support/customCommands/sharedElementsOperations/selects.js b/cypress/support/customCommands/sharedElementsOperations/selects.js index 8a5058cab..e806119a0 100644 --- a/cypress/support/customCommands/sharedElementsOperations/selects.js +++ b/cypress/support/customCommands/sharedElementsOperations/selects.js @@ -1,9 +1,23 @@ +import { PAGINATION } from "../../../elements"; import { BUTTON_SELECTORS } from "../../../elements/shared/button-selectors"; import { selectorWithDataValue, SHARED_ELEMENTS, } from "../../../elements/shared/sharedElements"; +Cypress.Commands.add("clickRowNumberButton", () => + cy.get(PAGINATION.rowNumberButton).click(), +); +Cypress.Commands.add("getRowNumberButton", () => + cy.get(PAGINATION.rowNumberButton), +); +Cypress.Commands.add("clickNextPagePaginationButton", () => + cy.get(PAGINATION.rowNumberButton), +); +Cypress.Commands.add("clickPrevPagePaginationButton", () => + cy.get(PAGINATION.previousPagePaginationButton), +); + Cypress.Commands.add("createNewOption", (selectSelector, newOption) => { cy.get(selectSelector).type(newOption); cy.contains(BUTTON_SELECTORS.selectOption, newOption) diff --git a/cypress/support/pages/catalog/products/productsListPage.js b/cypress/support/pages/catalog/products/productsListPage.js index ecb2d4114..3b8119643 100644 --- a/cypress/support/pages/catalog/products/productsListPage.js +++ b/cypress/support/pages/catalog/products/productsListPage.js @@ -80,9 +80,7 @@ export function selectProductsOutOfStock() { } export function selectFilterBy(filter) { - return showFilters() - .get(PRODUCTS_LIST.filters.filterBy[filter]) - .click(); + return showFilters().get(PRODUCTS_LIST.filters.filterBy[filter]).click(); } export function selectFilterByAttribute(attributeSlug) { @@ -106,9 +104,10 @@ export function selectChannel(channelSlug) { } export function submitFilters() { - cy.get(BUTTON_SELECTORS.submit) + cy.addAliasToGraphRequest("ProductList") + .get(BUTTON_SELECTORS.submit) .click() - .waitForProgressBarToNotExist() + .waitForRequestAndCheckIfNoErrors("@ProductList") .get(PRODUCTS_LIST.emptyProductRow) .should("not.exist"); }