check skeletons visibility (#1215)

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

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;

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)

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", () => {

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,

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()
+        cy.visit(urlList.sales);
-          .loginUserViaRequest("auth", ONE_PERMISSION_USERS.discount)
+        cy.softExpectSkeletonIsVisible();
-          .visit(urlList.sales);
         const product = productResp;
         createSale({
           saleName,
@@ -124,9 +122,8 @@ describe("Sales discounts", () => {
         price: productPrice
       })
       .then(({ product: productResp }) => {
-        cy.clearSessionData()
+        cy.visit(urlList.sales);
-          .loginUserViaRequest("auth", ONE_PERMISSION_USERS.discount)
+        cy.softExpectSkeletonIsVisible();
-          .visit(urlList.sales);
         const product = productResp;
         createSale({
           saleName,
@@ -171,9 +168,8 @@ describe("Sales discounts", () => {
         });
       })
       .then(() => {
-        cy.clearSessionData()
+        cy.visit(urlList.sales);
-          .loginUserViaRequest("auth", ONE_PERMISSION_USERS.discount)
+        cy.softExpectSkeletonIsVisible();
-          .visit(urlList.sales);
         createSale({
           saleName,
           channelName: channel.name,

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,

cypress/integration/allEnv/orders/draftOrders.js

@@ -79,9 +79,9 @@ describe("Draft orders", () => {
   });
 
   it("should move draft order to orders", () => {
-    cy.visit(urlList.orders)
+    cy.visit(urlList.orders);
-      .get(ORDERS_SELECTORS.createOrder)
+    cy.softExpectSkeletonIsVisible();
-      .click();
+    cy.get(ORDERS_SELECTORS.createOrder).click();
     selectChannelInPicker(defaultChannel.name);
     finalizeDraftOrder(randomName, address).then(draftOrderNumber => {
       cy.visit(urlList.orders);

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()

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,

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

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();

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

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)
+  cy.get(HEADER_SELECTORS.channelSelect).click();
-    .click()
+  cy.contains(SHARED_ELEMENTS.selectOption, channelName)
-    .get(HEADER_SELECTORS.channelSelectList)
+    .scrollIntoView()
-    .contains(channelName)
     .click();
 }
 

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

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