Cypress test config and commands

cypress.config.js

@@ -5,6 +5,7 @@ module.exports = defineConfig({
   viewportWidth: 1920,
   viewportHeight: 1080,
   video: false,
+
   env: {
     API_AUTH: "https://auth.api.dev.zesty.io",
     COOKIE_NAME: "DEV_APP_SID",
@@ -27,4 +28,8 @@ module.exports = defineConfig({
     specPattern: "cypress/e2e/**/*.{js,jsx,ts,tsx}",
     testIsolation: false,
   },
+  defaultCommandTimeout: 15_000,
+  pageLoadTimeout: 80_000,
+  requestTimeout: 40_000,
+  responseTimeout: 80_000,
 });

cypress/e2e/blocks/pages/AllBlocksPage.js

@@ -1,3 +1,4 @@
+const TIMEOUT = { timeout: 30_000 };
 class AllBlocksPage {
   visit() {
     cy.visit("/blocks");
@@ -28,9 +29,11 @@ class AllBlocksPage {
   }
 
   createBlock(name) {
-    this.createBlockButton.click();
+    cy.intercept("POST", "**/content/models").as("createModel");
+    this.createBlockButton.click(TIMEOUT);
     cy.getBySelector("create-model-display-name-input").type(name);
     cy.getBySelector("create-model-submit-button").click();
+    cy.wait("@createModel");
   }
 }
 

cypress/e2e/blocks/tests/blocks.spec.js

@@ -5,18 +5,20 @@ import SchemaPage from "../../schema/pages/SchemaPage";
 const CypressTestBlock = "Cypress Test Block";
 const CypressTestVariant = "Cypress Test Variant";
 
+const TIMEOUT = { timeout: 30_000 };
+
 describe("All Blocks Tests", () => {
   before(() => {
-    AllBlocksPage.visit();
+    cy.deleteContentModels(["Cypress Test Block", "Cypress Test Variant"]);
   });
 
   after(() => {
-    SchemaPage.visit();
-    SchemaPage.deleteModel(CypressTestBlock);
+    cy.deleteContentModels(["Cypress Test Block", "Cypress Test Variant"]);
   });
 
   it("should show and traverse onboarding flow", () => {
-    AllBlocksPage.onboardingDialog.should("be.visible");
+    AllBlocksPage.visit();
+    cy.get('[data-cy="onboarding-dialog"]', TIMEOUT).should("be.visible");
     const totalSteps = 4;
     for (let i = 0; i < totalSteps; i++) {
       AllBlocksPage.clickOnboardingNextButton();
@@ -26,7 +28,7 @@ describe("All Blocks Tests", () => {
 
   it("creates new block with default values", () => {
     AllBlocksPage.createBlock(CypressTestBlock);
-    cy.contains(CypressTestBlock).should("exist");
+    cy.contains(CypressTestBlock, TIMEOUT).should("exist");
     SchemaPage.visit();
     SchemaPage.addSingleLineTextFieldWithDefaultValue(
       CypressTestBlock,
@@ -50,16 +52,23 @@ describe("All Blocks Tests", () => {
   });
 
   it("navigates to block detail page", () => {
-    cy.contains(CypressTestBlock).click();
-    cy.contains("Start Creating Variants Now").should("exist");
+    cy.contains(CypressTestBlock).click({ timeout: 30_000 });
+    cy.contains("Start Creating Variants Now", { timeout: 30_000 }).should(
+      "exist"
+    );
   });
 
   it("creates a variant with default values", () => {
-    cy.contains(CypressTestBlock).click();
+    AllBlocksPage.visit();
+    cy.contains(CypressTestBlock).click(TIMEOUT);
     BlockPage.createVariant(CypressTestVariant);
     cy.contains(
-      new RegExp(`${CypressTestBlock}:\\s*${CypressTestVariant}`)
+      new RegExp(`${CypressTestBlock}:\\s*${CypressTestVariant}`),
+      TIMEOUT
     ).should("exist");
-    cy.get('input[name="foo"]').should("have.value", "Default Foo");
+    cy.get('input[name="foo"]', { timeout: 30_000 }).should(
+      "have.value",
+      "Default Foo"
+    );
   });
 });

cypress/e2e/content/actions.spec.js

@@ -11,6 +11,10 @@ const yesterdayTimestamp = moment()
 describe("Actions in content editor", () => {
   const timestamp = Date.now();
 
+  before(() => {
+    cy.cleanStatusLabels();
+  });
+
   it("Must not save when missing required Field", () => {
     cy.waitOn("/v1/content/models*", () => {
       cy.visit("/content/6-556370-8sh47g/7-82a5c7ffb0-07vj1c");
@@ -83,7 +87,7 @@ describe("Actions in content editor", () => {
     cy.get("#12-f8efe4e0f5-xj7pj6 input").should("not.exist");
 
     // Make an edit to enable save button
-    cy.get("#12-849844-t8v5l6 input").clear().type(timestamp);
+    cy.get("#12-849844-t8v5l6 input").clear().type(timestamp.toString());
 
     // save to api
     cy.waitOn(
@@ -95,7 +99,6 @@ describe("Actions in content editor", () => {
 
     cy.get("[data-cy=toast]").contains("Item Saved");
   });
-
   it("Saves homepage item metadata", () => {
     cy.waitOn("/v1/content/models*", () => {
       cy.visit("/content/6-a1a600-k0b6f0/7-a1be38-1b42ht/meta");
@@ -119,10 +122,9 @@ describe("Actions in content editor", () => {
   it("Publishes an item", () => {
     cy.getBySelector("PublishButton").click();
     cy.getBySelector("ConfirmPublishModal").should("exist");
-    cy.getBySelector("ConfirmPublishButton").click();
-
     cy.intercept("GET", "**/publishings").as("publish");
-    cy.wait("@publish");
+    cy.getBySelector("ConfirmPublishButton").click();
+    cy.wait("@publish", { timeout: 30_000 });
 
     cy.getBySelector("ContentPublishedIndicator").should("exist");
   });
@@ -212,17 +214,18 @@ describe("Actions in content editor", () => {
       cy.visit("/content/6-a1a600-k0b6f0/new");
     });
 
-    cy.get("input[name=title]", { timeout: 5000 }).click().type(timestamp);
+    cy.get("input[name=title]")
+      .click({ timeout: 30_000 })
+      .type(timestamp.toString());
     cy.getBySelector("ManualMetaFlow").click();
     cy.getBySelector("metaDescription")
       .find("textarea")
       .first()
-      .type(timestamp);
+      .type(timestamp.toString());
     cy.getBySelector("CreateItemSaveButton").click();
 
-    cy.contains("Created Item", { timeout: 5000 }).should("exist");
+    cy.contains("Created Item", { timeout: 30_000 }).should("exist");
   });
-
   it("Saved item becomes publishable", () => {
     cy.get("#PublishButton").should("exist");
   });
@@ -232,7 +235,7 @@ describe("Actions in content editor", () => {
       cy.visit("/content/6-a1a600-k0b6f0");
     });
 
-    cy.contains(timestamp, { timeout: 5000 }).should("exist");
+    cy.contains(timestamp, { timeout: 30_000 }).should("exist");
   });
 
   it("Deletes an item", () => {
@@ -257,9 +260,9 @@ describe("Actions in content editor", () => {
     // these waits are due to a delay
     // dealing with these specific endpoints
     // the local environment is slow
-    cy.contains("Successfully sent workflow request", { timeout: 5000 }).should(
-      "exist"
-    );
+    cy.contains("Successfully sent workflow request", {
+      timeout: 30_000,
+    }).should("exist");
   });
 
   // it("Refreshes the CDN cache", () => {
@@ -330,6 +333,6 @@ describe("Actions in content editor", () => {
 
     cy.getBySelector("CreateItemSaveButton").click();
 
-    cy.contains("Created Item", { timeout: 5000 }).should("exist");
+    cy.contains("Created Item", { timeout: 60_000 }).should("exist");
   });
 });

cypress/e2e/content/comments.js

@@ -1,7 +1,7 @@
 describe("Content Item: Comments", () => {
   before(() => {
-    cy.waitOn("/v1/content/models*", () => {
-      cy.waitOn("/v1/comments*", () => {
+    cy.waitOn("**/v1/content/models*", () => {
+      cy.waitOn("**/v1/comments*", () => {
         cy.visit("/content/6-556370-8sh47g/7-b939a4-457q19");
       });
     });
@@ -10,7 +10,9 @@ describe("Content Item: Comments", () => {
 
   it("Creates an initial comment", () => {
     cy.getBySelector("OpenCommentsButton").first().click();
-    cy.get("#commentInputField").click().type("This is a new comment.");
+    cy.get("#commentInputField").type("This is a new comment.", {
+      timeout: 60_000,
+    });
     cy.getBySelector("SubmitNewComment").click();
     cy.intercept("/v1/comments/*").as("getAllComments");
     cy.wait("@getAllComments");

cypress/e2e/content/content.spec.js

@@ -5,10 +5,10 @@ describe("Content Specs", () => {
 
   describe("editing content", () => {
     before(() => {
-      cy.waitOn("/v1/content/models*", () => {
+      cy.waitOn("**/v1/content/models*", () => {
         cy.visit("/content/6-556370-8sh47g/7-b939a4-457q19");
       });
-      cy.getBySelector("DuoModeToggle").click();
+      cy.getBySelector("DuoModeToggle").click({ timeout: 60_000 });
     });
 
     it("Text Field", () => {
@@ -412,24 +412,24 @@ describe("Content Specs", () => {
     });
   });
 
-  describe("Block Selector Field", () => {
-    before(() => {
-      cy.waitOn("/v1/content/models*", () => {
-        cy.visit("/content/6-556370-8sh47g/7-b939a4-457q19");
-      });
-    });
-
-    it("Sets a block variant", () => {
-      cy.getBySelector("BlockSelectorModelField", { timeout: 10000 })
-        .find("input")
-        .click();
-      cy.get(".MuiAutocomplete-popper .MuiAutocomplete-option")
-        .contains("Test Block Do Not Delete")
-        .click();
-
-      cy.getBySelector("BlockSelectorVariantField", { timeout: 10000 }).click();
-      cy.getBySelector("Variant_0").click();
-      cy.getBySelector("BlockFieldVariantPreview").should("exist");
-    });
-  });
+  // describe("Block Selector Field", () => {
+  //   before(() => {
+  //     cy.waitOn("**/v1/content/models*", () => {
+  //       cy.visit("/content/6-556370-8sh47g/7-b939a4-457q19");
+  //     });
+  //   });
+
+  //   it("Sets a block variant", () => {
+  //     cy.getBySelector("BlockSelectorModelField", { timeout: 10000 })
+  //       .find("input")
+  //       .click();
+  //     cy.get(".MuiAutocomplete-popper .MuiAutocomplete-option")
+  //       .contains("Test Block Do Not Delete")
+  //       .click();
+
+  //     cy.getBySelector("BlockSelectorVariantField", { timeout: 10000 }).click();
+  //     cy.getBySelector("Variant_0").click();
+  //     cy.getBySelector("BlockFieldVariantPreview").should("exist");
+  //   });
+  // });
 });

cypress/e2e/content/headTags.spec.js

@@ -1,11 +1,11 @@
 // assumes no Head Tags as starting state
 describe("Head Tags", () => {
   it("creates and deletes new head tag", () => {
-    cy.waitOn("/v1/content/models*", () => {
+    cy.waitOn("**/v1/content/models*", () => {
       cy.visit("/content/6-556370-8sh47g/7-b939a4-457q19/head");
     });
 
-    cy.contains("Create Head Tag").click();
+    cy.contains("Create Head Tag").click({ timeout: 60_000 });
 
     cy.get("[data-cy=newTagCard]")
       .last()

cypress/e2e/content/item-list-table.spec.js

@@ -1,15 +1,16 @@
 describe("Content item list table", () => {
   it("Resolves internal link zuids", () => {
-    cy.waitOn("/search/items*", () => {
-      cy.waitOn("/v1/content/models*", () => {
+    cy.waitOn("**/search/items*", () => {
+      cy.waitOn("**/v1/content/models*", () => {
         cy.visit("/content/6-a1a600-k0b6f0");
       });
     });
 
-    cy.getBySelector("SingleRelationshipCell", { timeout: 10000 })
+    cy.getBySelector("SingleRelationshipCell")
       .first()
       .contains(
-        "5 Tricks to Teach Your Pitbull: Fun & Easy Tips for You & Your Dog!"
+        "5 Tricks to Teach Your Pitbull: Fun & Easy Tips for You & Your Dog!",
+        { timeout: 30_000 }
       );
   });
 });

cypress/e2e/content/meta.spec.js

@@ -67,9 +67,9 @@ describe("Content Meta", () => {
   });
 
   it("Does not validate meta description for dataset items", () => {
-    cy.waitOn("/v1/content/models*", () => {
-      cy.waitOn("/v1/env/nav", () => {
-        cy.waitOn("/v1/search/items*", () => {
+    cy.waitOn("**/v1/content/models*", () => {
+      cy.waitOn("**/v1/env/nav", () => {
+        cy.waitOn("**/v1/search/items*", () => {
           cy.visit("/content/6-675028-84dq4s/new");
         });
       });
@@ -81,9 +81,9 @@ describe("Content Meta", () => {
   });
 
   it("Auto applies page parent when creating an item", () => {
-    cy.waitOn("/v1/content/models*", () => {
-      cy.waitOn("/v1/env/nav", () => {
-        cy.waitOn("/v1/search/items*", () => {
+    cy.waitOn("**/v1/content/models*", () => {
+      cy.waitOn("**/v1/env/nav", () => {
+        cy.waitOn("**/v1/search/items*", () => {
           cy.visit("/content/6-0c960c-d1n0kx/new");
         });
       });
@@ -104,9 +104,9 @@ describe("Content Meta", () => {
   });
 
   it("Supports a dedicated Twitter title, description and image", () => {
-    cy.waitOn("/v1/content/models*", () => {
-      cy.waitOn("/v1/env/nav", () => {
-        cy.waitOn("/v1/search/items*", () => {
+    cy.waitOn("**/v1/content/models*", () => {
+      cy.waitOn("**/v1/env/nav", () => {
+        cy.waitOn("**/v1/search/items*", () => {
           cy.visit("/content/6-b6cde1aa9f-wftv50/7-92ab81c5a8-bhvb0l/meta");
         });
       });

cypress/e2e/content/multi-lang.spec.js

@@ -1,7 +1,7 @@
 describe("multi-lang", () => {
   it("Check if multi lang exist", () => {
     cy.waitOn(
-      "/v1/content/models/6-a4d6e6f087-1jmlbx/items/7-b8da98dea8-1nwkc9",
+      "**/v1/content/models/6-a4d6e6f087-1jmlbx/items/7-b8da98dea8-1nwkc9",
       () => {
         cy.visit("/content/6-a4d6e6f087-1jmlbx/7-b8da98dea8-1nwkc9");
       }

cypress/e2e/content/navigation.spec.js

@@ -1,3 +1,7 @@
+const LABELS = {
+  cypressTest: "Cypress test (Group with visible fields in list)",
+};
+
 describe("Navigation through content editor", () => {
   before(() => {
     cy.waitOn("/v1/env/nav", () => {
@@ -24,7 +28,7 @@ describe("Navigation through content editor", () => {
     cy.getBySelector("create_new_content_item_dialog").should("exist");
     cy.getBySelector("create_new_content_item_input")
       .find("input")
-      .type("cypress");
+      .type(LABELS.cypressTest);
     cy.get(".MuiAutocomplete-listbox .MuiAutocomplete-option")
       .first()
       .should("exist")

cypress/e2e/content/pages/ContentItemPage.js

@@ -0,0 +1,24 @@
+class ContentItemPage {
+  elements = {
+    createItemButton: () => cy.getBySelector("CreateItemSaveButton"),
+    duoModeToggle: () => cy.getBySelector("DuoModeToggle"),
+    moreMenu: () => cy.getBySelector("ContentItemMoreButton"),
+    deleteItemButton: () => cy.getBySelector("DeleteContentItem"),
+    confirmDeleteItemButton: () =>
+      cy.getBySelector("DeleteContentItemConfirmButton"),
+    versionSelector: () => cy.getBySelector("VersionSelector"),
+    versionItem: () => cy.getBySelector("VersionItem"),
+    addWorkflowStatusLabel: () => cy.getBySelector("AddWorkflowStatusLabel"),
+    workflowStatusLabelOption: () =>
+      cy.getBySelector("WorkflowStatusLabelOption"),
+    activeWorkflowStatusLabel: () =>
+      cy.getBySelector("ActiveWorkflowStatusLabel"),
+    publishItemButton: () => cy.getBySelector("PublishButton"),
+    confirmPublishItemButton: () => cy.getBySelector("ConfirmPublishButton"),
+    toast: () => cy.getBySelector("toast"),
+    contentPublishedIndicator: () =>
+      cy.getBySelector("ContentPublishedIndicator"),
+  };
+}
+
+export default new ContentItemPage();