check skeletons visibility (#1215)

This commit is contained in:
Karolina Rakoczy 2021-07-12 15:35:26 +02:00 committed by GitHub
parent e76c78a23b
commit 2eae52d3df
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 61 additions and 23 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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