check skeletons visibility (#1215)
This commit is contained in:
parent
e76c78a23b
commit
2eae52d3df
16 changed files with 61 additions and 23 deletions
|
@ -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"]'
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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", () => {
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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
|
||||
);
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue