Check for new outfit saved indicator in Cypress

This commit is contained in:
Emi Matchu 2021-04-22 02:44:45 -07:00
parent 99e0fdbf59
commit 8b5ba60ea8
6 changed files with 19 additions and 27 deletions

View file

@ -15,10 +15,8 @@ describe("WardrobePage: Outfit saving", () => {
// Wait for the outfit to stop saving, and check that it redirected and
// still shows the correct outfit preview and name.
cy.location("pathname", { timeout: 12000 }).should(
"match",
/^\/outfits\/[0-9]+$/
);
page.getOutfitIsSavedIndicator({ timeout: 12000 }).should("exist");
cy.location("pathname").should("match", /^\/outfits\/[0-9]+$/);
page.getOutfitName().should("have.text", outfitName);
page.getOutfitPreview().toMatchImageSnapshot();
});
@ -39,10 +37,8 @@ describe("WardrobePage: Outfit saving", () => {
// Wait for the outfit to stop saving, and check that it redirected and
// still shows the correct outfit preview and name.
cy.location("pathname", { timeout: 12000 }).should(
"match",
/^\/outfits\/[0-9]+$/
);
page.getOutfitIsSavedIndicator({ timeout: 12000 }).should("exist");
cy.location("pathname").should("match", /^\/outfits\/[0-9]+$/);
page.getOutfitName().should("have.text", outfitName);
page.getOutfitPreview().toMatchImageSnapshot();
});

Binary file not shown.

Before

Width:  |  Height:  |  Size: 313 KiB

After

Width:  |  Height:  |  Size: 316 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

View file

@ -1,14 +1,14 @@
export function getSpeciesSelect(options) {
return cy.get("[data-test-id=wardrobe-species-picker]", options);
}
const withTestId = (testId) => (options) =>
cy.get(`[data-test-id="${CSS.escape(testId)}"]`, options);
export function getColorSelect(options) {
return cy.get("[data-test-id=wardrobe-color-picker]", options);
}
export function getPosePickerButton(options) {
return cy.get("[data-test-id=wardrobe-pose-picker]", options);
}
export const getSpeciesSelect = withTestId("wardrobe-species-picker");
export const getColorSelect = withTestId("wardrobe-color-picker");
export const getPosePickerButton = withTestId("wardrobe-pose-picker");
export const getOutfitName = withTestId("outfit-name");
export const getSaveOutfitButton = withTestId("wardrobe-save-outfit-button");
export const getOutfitIsSavedIndicator = withTestId(
"wardrobe-outfit-is-saved-indicator"
);
export function getPosePickerOption(label, options) {
return cy.get(`input[aria-label="${CSS.escape(label)}"]`, options);
@ -20,11 +20,3 @@ export function getOutfitPreview() {
timeout: 15000,
});
}
export function getOutfitName(options) {
return cy.get("[data-test-id=outfit-name]", options);
}
export function getSaveOutfitButton(options) {
return cy.get("[data-test-id=wardrobe-save-outfit-button]", options);
}

View file

@ -429,7 +429,11 @@ function OutfitSavingIndicator({ outfitState }) {
if (latestVersionIsSaved) {
return (
<Flex align="center" fontSize="xs">
<Flex
align="center"
fontSize="xs"
data-test-id="wardrobe-outfit-is-saved-indicator"
>
<CheckIcon
marginRight="1"
// HACK: Not sure why my various centering things always feel wrong...