diff --git a/cypress/integration/WardrobePage/Outfit saving.spec.js b/cypress/integration/WardrobePage/Outfit saving.spec.js index b372802..3dc36e0 100644 --- a/cypress/integration/WardrobePage/Outfit saving.spec.js +++ b/cypress/integration/WardrobePage/Outfit saving.spec.js @@ -42,4 +42,54 @@ describe("WardrobePage: Outfit saving", () => { page.getOutfitName().should("have.text", outfitName); 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(); + }); }); diff --git a/cypress/integration/WardrobePage/__image_snapshots__/WardrobePage Outfit saving Saves an outfit, then changes the color to auto-save it #0.png b/cypress/integration/WardrobePage/__image_snapshots__/WardrobePage Outfit saving Saves an outfit, then changes the color to auto-save it #0.png new file mode 100644 index 0000000..6a67037 Binary files /dev/null and b/cypress/integration/WardrobePage/__image_snapshots__/WardrobePage Outfit saving Saves an outfit, then changes the color to auto-save it #0.png differ diff --git a/cypress/integration/WardrobePage/__image_snapshots__/WardrobePage Outfit saving Saves an outfit, then toggles an item to auto-save it #0.png b/cypress/integration/WardrobePage/__image_snapshots__/WardrobePage Outfit saving Saves an outfit, then toggles an item to auto-save it #0.png new file mode 100644 index 0000000..e4103b9 Binary files /dev/null and b/cypress/integration/WardrobePage/__image_snapshots__/WardrobePage Outfit saving Saves an outfit, then toggles an item to auto-save it #0.png differ diff --git a/cypress/integration/WardrobePage/page.js b/cypress/integration/WardrobePage/page.js index 86fbeb7..624f533 100644 --- a/cypress/integration/WardrobePage/page.js +++ b/cypress/integration/WardrobePage/page.js @@ -9,12 +9,15 @@ export const getSaveOutfitButton = withTestId("wardrobe-save-outfit-button"); export const getOutfitIsSavedIndicator = withTestId( "wardrobe-outfit-is-saved-indicator" ); +export const getOutfitIsSavingIndicator = withTestId( + "wardrobe-outfit-is-saving-indicator" +); export function getPosePickerOption(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 // 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 @@ -31,10 +34,7 @@ export function getOutfitPreview() { // performs its snapshot within the window's natural area, rather than // the simulated area that most tests run in. return cy - .get("[data-test-id=wardrobe-outfit-preview]:not([data-loading])", { - // A bit of an extra-long timeout, to await both server data and image data - timeout: 15000, - }) + .get("[data-test-id=wardrobe-outfit-preview]:not([data-loading])", options) .get("img") .first(); }