From 2eae52d3dfdfb0f6b4f325926d9cfe2e2994025a Mon Sep 17 00:00:00 2001 From: Karolina Rakoczy Date: Mon, 12 Jul 2021 15:35:26 +0200 Subject: [PATCH] check skeletons visibility (#1215) --- cypress/elements/shared/sharedElements.js | 4 +++- cypress/integration/allEnv/collections.js | 4 ++++ .../allEnv/configuration/channels.js | 5 +++++ .../allEnv/configuration/productTypes.js | 3 ++- .../shippingMethods/createShippingMethod.js | 4 ++-- cypress/integration/allEnv/discounts/sales.js | 16 ++++++---------- .../integration/allEnv/discounts/vouchers.js | 3 ++- .../integration/allEnv/orders/draftOrders.js | 6 +++--- cypress/integration/allEnv/orders/orders.js | 2 ++ .../products/productsList/filteringProducts.js | 2 ++ .../allEnv/products/productsList/pagination.js | 2 ++ .../products/productsList/sortingProducts.js | 1 + cypress/integration/stagedOnly/staffMembers.js | 1 + cypress/steps/channelsSteps.js | 8 ++++---- cypress/support/elements/index.js | 17 +++++++++++++++++ cypress/support/softAssertions/index.js | 6 +++++- 16 files changed, 61 insertions(+), 23 deletions(-) diff --git a/cypress/elements/shared/sharedElements.js b/cypress/elements/shared/sharedElements.js index 6008293f4..d43ee7245 100644 --- a/cypress/elements/shared/sharedElements.js +++ b/cypress/elements/shared/sharedElements.js @@ -1,10 +1,12 @@ export const SHARED_ELEMENTS = { header: "[data-test-id='page-header']", progressBar: '[role="progressbar"]', + circularProgress: '[class*="CircularProgress-circle"]', skeleton: '[data-test-id="skeleton"]', table: 'table[class*="Table"]', - notificationSuccess: '[data-test="notification-success"]', + selectOption: '[data-test="selectFieldOption"]', confirmationMsg: "[data-test='notification-success']", + notificationSuccess: '[data-test="notification-success"]', richTextEditor: { empty: '[class*="codex-editor--empty"]' } diff --git a/cypress/integration/allEnv/collections.js b/cypress/integration/allEnv/collections.js index ecbf11f7c..43f286b5e 100644 --- a/cypress/integration/allEnv/collections.js +++ b/cypress/integration/allEnv/collections.js @@ -72,6 +72,7 @@ describe("Collections", () => { it("should not display hidden collections", () => { const collectionName = `${startsWith}${faker.datatype.number()}`; cy.visit(urlList.collections); + cy.softExpectSkeletonIsVisible(); let collection; createCollection(collectionName, false, defaultChannel) @@ -92,6 +93,7 @@ describe("Collections", () => { const collectionName = `${startsWith}${faker.datatype.number()}`; let collection; cy.visit(urlList.collections); + cy.softExpectSkeletonIsVisible(); createCollection(collectionName, true, defaultChannel) .then(collectionResp => { @@ -116,6 +118,7 @@ describe("Collections", () => { }) .then(() => { cy.visit(urlList.collections); + cy.softExpectSkeletonIsVisible(); createCollection(collectionName, true, channel); }) .then(collectionResp => { @@ -146,6 +149,7 @@ describe("Collections", () => { }) .then(({ product: productResp }) => (createdProduct = productResp)); cy.visit(urlList.collections); + cy.softExpectSkeletonIsVisible(); createCollection(randomName, true, defaultChannel) .then(collectionResp => { collection = collectionResp; diff --git a/cypress/integration/allEnv/configuration/channels.js b/cypress/integration/allEnv/configuration/channels.js index f1d03dc79..26b3c160b 100644 --- a/cypress/integration/allEnv/configuration/channels.js +++ b/cypress/integration/allEnv/configuration/channels.js @@ -46,6 +46,7 @@ describe("Channels", () => { const randomChannel = `${channelStartsWith} ${faker.datatype.number()}`; cy.addAliasToGraphRequest("Channels"); cy.visit(urlList.channels); + cy.softExpectSkeletonIsVisible(); cy.wait("@Channels"); createChannelByView({ name: randomChannel, currency }); cy.wait("@Channel"); @@ -87,6 +88,7 @@ describe("Channels", () => { const randomChannel = `${channelStartsWith} ${faker.datatype.number()}`; cy.addAliasToGraphRequest("Channels"); cy.visit(urlList.channels); + cy.softExpectSkeletonIsVisible(); cy.wait("@Channels"); createChannelByView({ name: randomChannel, @@ -111,6 +113,7 @@ describe("Channels", () => { currencyCode: currency }); cy.visit(urlList.channels); + cy.softExpectSkeletonIsVisible(); createChannelByView({ name: randomChannel, currency }); cy.get(ADD_CHANNEL_FORM_SELECTORS.slugValidationMessage).should( "be.visible" @@ -120,6 +123,7 @@ describe("Channels", () => { it("should validate duplicated currency", () => { const randomChannel = `${channelStartsWith} ${faker.datatype.number()}`; cy.visit(urlList.channels); + cy.softExpectSkeletonIsVisible(); createChannelByView({ name: randomChannel, currency: "notExistingCurrency" @@ -139,6 +143,7 @@ describe("Channels", () => { }); cy.addAliasToGraphRequest("Channels"); cy.visit(urlList.channels); + cy.softExpectSkeletonIsVisible(); cy.wait("@Channels"); cy.contains(CHANNELS_SELECTORS.channelName, randomChannelToDelete) .parentsUntil(CHANNELS_SELECTORS.channelsTable) diff --git a/cypress/integration/allEnv/configuration/productTypes.js b/cypress/integration/allEnv/configuration/productTypes.js index f48916c91..ac4daebf3 100644 --- a/cypress/integration/allEnv/configuration/productTypes.js +++ b/cypress/integration/allEnv/configuration/productTypes.js @@ -25,7 +25,8 @@ describe("Tests for product types", () => { beforeEach(() => { cy.clearSessionData() .loginUserViaRequest() - .visit(urlList.productTypes); + .visit(urlList.productTypes) + .softExpectSkeletonIsVisible(); }); it("Create product type without shipping required", () => { diff --git a/cypress/integration/allEnv/configuration/shippingMethods/createShippingMethod.js b/cypress/integration/allEnv/configuration/shippingMethods/createShippingMethod.js index d15e34939..3cdd279c3 100644 --- a/cypress/integration/allEnv/configuration/shippingMethods/createShippingMethod.js +++ b/cypress/integration/allEnv/configuration/shippingMethods/createShippingMethod.js @@ -76,7 +76,7 @@ describe("Create shipping method", () => { "auth", ONE_PERMISSION_USERS.shipping ); - cy.visit(urlList.shippingMethods); + cy.visit(urlList.shippingMethods).softExpectSkeletonIsVisible(); createShippingZone( shippingName, warehouse.name, @@ -111,7 +111,7 @@ describe("Create shipping method", () => { "auth", ONE_PERMISSION_USERS.shipping ); - cy.visit(urlList.shippingMethods); + cy.visit(urlList.shippingMethods).softExpectSkeletonIsVisible(); createShippingZone( shippingName, warehouse.name, diff --git a/cypress/integration/allEnv/discounts/sales.js b/cypress/integration/allEnv/discounts/sales.js index 7ce9d5829..9f155eb7f 100644 --- a/cypress/integration/allEnv/discounts/sales.js +++ b/cypress/integration/allEnv/discounts/sales.js @@ -4,7 +4,6 @@ import faker from "faker"; import { createChannel } from "../../../apiRequests/Channels"; import { updateChannelInProduct } from "../../../apiRequests/Product"; -import { ONE_PERMISSION_USERS } from "../../../Data/users"; import { assignProducts, createSale, @@ -89,9 +88,8 @@ describe("Sales discounts", () => { price: productPrice }) .then(({ product: productResp }) => { - cy.clearSessionData() - .loginUserViaRequest("auth", ONE_PERMISSION_USERS.discount) - .visit(urlList.sales); + cy.visit(urlList.sales); + cy.softExpectSkeletonIsVisible(); const product = productResp; createSale({ saleName, @@ -124,9 +122,8 @@ describe("Sales discounts", () => { price: productPrice }) .then(({ product: productResp }) => { - cy.clearSessionData() - .loginUserViaRequest("auth", ONE_PERMISSION_USERS.discount) - .visit(urlList.sales); + cy.visit(urlList.sales); + cy.softExpectSkeletonIsVisible(); const product = productResp; createSale({ saleName, @@ -171,9 +168,8 @@ describe("Sales discounts", () => { }); }) .then(() => { - cy.clearSessionData() - .loginUserViaRequest("auth", ONE_PERMISSION_USERS.discount) - .visit(urlList.sales); + cy.visit(urlList.sales); + cy.softExpectSkeletonIsVisible(); createSale({ saleName, channelName: channel.name, diff --git a/cypress/integration/allEnv/discounts/vouchers.js b/cypress/integration/allEnv/discounts/vouchers.js index 86015d7ba..b98b584a3 100644 --- a/cypress/integration/allEnv/discounts/vouchers.js +++ b/cypress/integration/allEnv/discounts/vouchers.js @@ -97,7 +97,6 @@ describe("Vouchers discounts", () => { it("should create fixed price voucher", () => { const voucherValue = 50; - loginAndCreateCheckoutForVoucherWithDiscount( discountOptions.FIXED, voucherValue @@ -124,6 +123,7 @@ describe("Vouchers discounts", () => { cy.clearSessionData() .loginUserViaRequest() .visit(urlList.vouchers); + cy.softExpectSkeletonIsVisible(); createChannel({ name: randomName }) .then(channel => { createVoucher({ @@ -160,6 +160,7 @@ describe("Vouchers discounts", () => { cy.clearSessionData() .loginUserViaRequest("auth", ONE_PERMISSION_USERS.discount) .visit(urlList.vouchers); + cy.softExpectSkeletonIsVisible(); createVoucher({ voucherCode, voucherValue, diff --git a/cypress/integration/allEnv/orders/draftOrders.js b/cypress/integration/allEnv/orders/draftOrders.js index 38e30c859..32fe371e0 100644 --- a/cypress/integration/allEnv/orders/draftOrders.js +++ b/cypress/integration/allEnv/orders/draftOrders.js @@ -79,9 +79,9 @@ describe("Draft orders", () => { }); it("should move draft order to orders", () => { - cy.visit(urlList.orders) - .get(ORDERS_SELECTORS.createOrder) - .click(); + cy.visit(urlList.orders); + cy.softExpectSkeletonIsVisible(); + cy.get(ORDERS_SELECTORS.createOrder).click(); selectChannelInPicker(defaultChannel.name); finalizeDraftOrder(randomName, address).then(draftOrderNumber => { cy.visit(urlList.orders); diff --git a/cypress/integration/allEnv/orders/orders.js b/cypress/integration/allEnv/orders/orders.js index c4b3028c0..f48417c4b 100644 --- a/cypress/integration/allEnv/orders/orders.js +++ b/cypress/integration/allEnv/orders/orders.js @@ -144,6 +144,7 @@ describe("Orders", () => { .then(({ order: orderResp }) => { order = orderResp; cy.visit(urlList.orders); + cy.softExpectSkeletonIsVisible(); cy.contains(ORDERS_SELECTORS.orderRow, order.number).click(); cy.get(SHARED_ELEMENTS.skeleton) .should("not.exist") @@ -180,6 +181,7 @@ describe("Orders", () => { .then(({ order: orderResp }) => { order = orderResp; cy.visit(urlList.orders); + cy.softExpectSkeletonIsVisible(); cy.contains(ORDERS_SELECTORS.orderRow, order.number).click(); cy.get(ORDERS_SELECTORS.refundButton) .click() diff --git a/cypress/integration/allEnv/products/productsList/filteringProducts.js b/cypress/integration/allEnv/products/productsList/filteringProducts.js index 0991da69c..797d14585 100644 --- a/cypress/integration/allEnv/products/productsList/filteringProducts.js +++ b/cypress/integration/allEnv/products/productsList/filteringProducts.js @@ -91,6 +91,7 @@ describe("Filtering products", () => { const filterProductsBy = ["category", "collection", "productType"]; filterProductsBy.forEach(filterBy => { it(`should filter products by ${filterBy}`, () => { + cy.softExpectSkeletonIsVisible(); cy.get(SHARED_ELEMENTS.progressBar).should("not.exist"); selectFilterOption(filterBy, name); cy.getTextFromElement(PRODUCTS_LIST.productsNames).then(product => { @@ -100,6 +101,7 @@ describe("Filtering products", () => { }); it("should filter products out of stock", () => { + cy.softExpectSkeletonIsVisible(); const productOutOfStock = `${startsWith}${faker.datatype.number()}`; createProductInChannel({ name: productOutOfStock, diff --git a/cypress/integration/allEnv/products/productsList/pagination.js b/cypress/integration/allEnv/products/productsList/pagination.js index f7a6fa7a9..3f80272e6 100644 --- a/cypress/integration/allEnv/products/productsList/pagination.js +++ b/cypress/integration/allEnv/products/productsList/pagination.js @@ -13,6 +13,7 @@ describe("Products", () => { cy.visit(urlList.products); }); it("Should go to the next page", () => { + cy.softExpectSkeletonIsVisible(); cy.get(PRODUCTS_LIST.productsList) .should("be.visible") .get(PRODUCTS_LIST.emptyProductRow) @@ -37,6 +38,7 @@ describe("Products", () => { }); }); it("should displayed correct number of results per page", () => { + cy.softExpectSkeletonIsVisible(); isNumberOfProductsSameAsInSelectResultsOnPage().then( isTheSame => expect(isTheSame, "check if number of displayed products is correct").to diff --git a/cypress/integration/allEnv/products/productsList/sortingProducts.js b/cypress/integration/allEnv/products/productsList/sortingProducts.js index b35bcca94..0c2644721 100644 --- a/cypress/integration/allEnv/products/productsList/sortingProducts.js +++ b/cypress/integration/allEnv/products/productsList/sortingProducts.js @@ -10,6 +10,7 @@ describe("Sorting products", () => { cy.clearSessionData() .loginUserViaRequest() .visit(urlList.products); + cy.softExpectSkeletonIsVisible(); cy.get(SHARED_ELEMENTS.header).should("be.visible"); if (sortBy !== "name") { cy.get(PRODUCTS_LIST.tableHeaders[sortBy]).click(); diff --git a/cypress/integration/stagedOnly/staffMembers.js b/cypress/integration/stagedOnly/staffMembers.js index b2f07bd3f..19c19d963 100644 --- a/cypress/integration/stagedOnly/staffMembers.js +++ b/cypress/integration/stagedOnly/staffMembers.js @@ -53,6 +53,7 @@ describe("Staff members", () => { const emailInvite = `${startsWith}${firstName}@example.com`; cy.visit(urlList.staffMembers) + .softExpectSkeletonIsVisible() .get(STAFF_MEMBERS_LIST.inviteStaffMemberButton) .click(); fillUpUserDetails(firstName, lastName, emailInvite); diff --git a/cypress/steps/channelsSteps.js b/cypress/steps/channelsSteps.js index b5a27f687..04c528b4c 100644 --- a/cypress/steps/channelsSteps.js +++ b/cypress/steps/channelsSteps.js @@ -5,6 +5,7 @@ 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 { SHARED_ELEMENTS } from "../elements/shared/sharedElements"; import { fillAutocompleteSelect } from "./shared/selects"; export function createChannelByView({ @@ -56,10 +57,9 @@ export function selectChannelInPicker(channelName) { } export function selectChannelInHeader(channelName) { - cy.get(HEADER_SELECTORS.channelSelect) - .click() - .get(HEADER_SELECTORS.channelSelectList) - .contains(channelName) + cy.get(HEADER_SELECTORS.channelSelect).click(); + cy.contains(SHARED_ELEMENTS.selectOption, channelName) + .scrollIntoView() .click(); } diff --git a/cypress/support/elements/index.js b/cypress/support/elements/index.js index 136e4fd90..6a41e2d4d 100644 --- a/cypress/support/elements/index.js +++ b/cypress/support/elements/index.js @@ -1,3 +1,5 @@ +import { SHARED_ELEMENTS } from "../../elements/shared/sharedElements"; + Cypress.Commands.add("getTextFromElement", element => cy.get(element).invoke("text") ); @@ -7,3 +9,18 @@ Cypress.Commands.add("clearAndType", { prevSubject: true }, (subject, text) => { .clear() .type(text); }); + +Cypress.Commands.add("softExpectSkeletonIsVisible", () => { + cy.get(SHARED_ELEMENTS.circularProgress).should("not.exist"); + cy.get("body").then($body => { + if ($body.find(SHARED_ELEMENTS.skeleton).length) { + cy.softAssertVisibility(SHARED_ELEMENTS.skeleton); + } else { + chai + .softExpect( + $body.find(SHARED_ELEMENTS.skeleton, "skeleton should exist").length + ) + .to.be.eq(1); + } + }); +}); diff --git a/cypress/support/softAssertions/index.js b/cypress/support/softAssertions/index.js index 559ae921f..93e7e0f11 100644 --- a/cypress/support/softAssertions/index.js +++ b/cypress/support/softAssertions/index.js @@ -84,6 +84,10 @@ Cypress.Commands.add("softAssertMatch", (selector, regexp) => { chai.softExpect(assert.match(text, regexp, "regexp matches")) ); }); + Cypress.Commands.add("softAssertVisibility", selector => { - cy.get(selector).then(element => chai.softExpect(element).to.be.visible); + cy.get(selector).then( + element => + chai.softExpect(element, "element should be visible").to.be.visible + ); });