Add outfit auto-save Cypress tests

This commit is contained in:
Emi Matchu 2021-05-03 16:05:13 -07:00
parent 03acbb9757
commit 8bd64f7aae
4 changed files with 55 additions and 5 deletions

View file

@ -42,4 +42,54 @@ describe("WardrobePage: Outfit saving", () => {
page.getOutfitName().should("have.text", outfitName); page.getOutfitName().should("have.text", outfitName);
page.getOutfitPreview().toMatchImageSnapshot(); page.getOutfitPreview().toMatchImageSnapshot();
}); });
it("Saves an outfit, then toggles an item to auto-save it", () => {
cy.logInAs("dti-test");
cy.visit("/outfits/new?species=1&color=8&closet[]=78104");
// Give the outfit a unique timestamped name
const outfitName = `Cypress Test - Auto-Save on Items - ${new Date().toISOString()}`;
page.getOutfitName({ timeout: 12000 }).click();
cy.focused().type(outfitName + "{enter}");
// Save the outfit, and wait for it to finish.
page.getSaveOutfitButton().click().should("have.attr", "data-loading");
page.getOutfitIsSavedIndicator({ timeout: 12000 }).should("exist");
// Click the background to toggle it on.
cy.contains("#1 Fan Room Background").click();
// Wait for the outfit to start auto-saving, then finish again.
page.getOutfitIsSavingIndicator({ timeout: 5000 }).should("exist");
page.getOutfitIsSavedIndicator({ timeout: 12000 }).should("exist");
// Reload the page. The outfit preview should still contain the background.
cy.reload();
page.getOutfitPreview({ timeout: 20000 }).toMatchImageSnapshot();
});
it("Saves an outfit, then changes the color to auto-save it", () => {
cy.logInAs("dti-test");
cy.visit("/outfits/new?species=1&color=8");
// Give the outfit a unique timestamped name
const outfitName = `Cypress Test - Auto-Save on Color - ${new Date().toISOString()}`;
page.getOutfitName({ timeout: 12000 }).click();
cy.focused().type(outfitName + "{enter}");
// Save the outfit, and wait for it to finish.
page.getSaveOutfitButton().click().should("have.attr", "data-loading");
page.getOutfitIsSavedIndicator({ timeout: 12000 }).should("exist");
// Change the color from Blue to Red.
page.getColorSelect().select("Red");
// Wait for the outfit to start auto-saving, then finish again.
page.getOutfitIsSavingIndicator({ timeout: 5000 }).should("exist");
page.getOutfitIsSavedIndicator({ timeout: 12000 }).should("exist");
// Reload the page. The outfit preview should still show a Red Acara.
cy.reload();
page.getOutfitPreview({ timeout: 20000 }).toMatchImageSnapshot();
});
}); });

View file

@ -9,12 +9,15 @@ export const getSaveOutfitButton = withTestId("wardrobe-save-outfit-button");
export const getOutfitIsSavedIndicator = withTestId( export const getOutfitIsSavedIndicator = withTestId(
"wardrobe-outfit-is-saved-indicator" "wardrobe-outfit-is-saved-indicator"
); );
export const getOutfitIsSavingIndicator = withTestId(
"wardrobe-outfit-is-saving-indicator"
);
export function getPosePickerOption(label, options) { export function getPosePickerOption(label, options) {
return cy.get(`input[aria-label="${CSS.escape(label)}"]`, options); return cy.get(`input[aria-label="${CSS.escape(label)}"]`, options);
} }
export function getOutfitPreview() { export function getOutfitPreview(options = { timeout: 15000 }) {
// HACK: To return the screenshottable preview *area* (which is what this // HACK: To return the screenshottable preview *area* (which is what this
// function is currently used for), we select the first img tag. That's // function is currently used for), we select the first img tag. That's
// because the app relies on CSS `object-fit` to get images to position // because the app relies on CSS `object-fit` to get images to position
@ -31,10 +34,7 @@ export function getOutfitPreview() {
// performs its snapshot within the window's natural area, rather than // performs its snapshot within the window's natural area, rather than
// the simulated area that most tests run in. // the simulated area that most tests run in.
return cy return cy
.get("[data-test-id=wardrobe-outfit-preview]:not([data-loading])", { .get("[data-test-id=wardrobe-outfit-preview]:not([data-loading])", options)
// A bit of an extra-long timeout, to await both server data and image data
timeout: 15000,
})
.get("img") .get("img")
.first(); .first();
} }