Add outfit auto-save Cypress tests

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

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