Refactor cypress tests (#23)

jkettmann · web-flow · commit 9eb923b0d29e · 2022-08-11T11:38:04.000+02:00
diff --git a/cypress/integration/issue-list.spec.ts b/cypress/integration/issue-list.spec.ts
@@ -2,21 +2,32 @@ import mockIssues1 from "../fixtures/issues-page-1.json";
 import mockIssues2 from "../fixtures/issues-page-2.json";
 import mockIssues3 from "../fixtures/issues-page-3.json";
 
-describe("Project List", () => {
+describe("Issue List", () => {
   beforeEach(() => {
+    // setup request mocks
     cy.intercept("GET", "https://prolog-api.profy.dev/project", {
       fixture: "projects.json",
-    });
+    }).as("getProjects");
     cy.intercept("GET", "https://prolog-api.profy.dev/issue?page=1", {
       fixture: "issues-page-1.json",
-    });
+    }).as("getIssues");
     cy.intercept("GET", "https://prolog-api.profy.dev/issue?page=2", {
       fixture: "issues-page-2.json",
     });
     cy.intercept("GET", "https://prolog-api.profy.dev/issue?page=3", {
       fixture: "issues-page-3.json",
     });
+
+    // open issues page
     cy.visit("http://localhost:3000/issues");
+
+    // wait for request to resolve
+    cy.wait("@getProjects");
+    cy.wait("@getIssues");
+
+    // set button aliases
+    cy.get("button", { timeout: 10000 }).contains("Previous").as("prev-button");
+    cy.get("button").contains("Next").as("next-button");
   });
 
   context("desktop resolution", () => {
@@ -25,8 +36,8 @@ describe("Project List", () => {
     });
 
     it("renders the issues", () => {
-      cy.findByRole("main")
-        .findAllByRole("row")
+      cy.get("main")
+        .find("tr")
         .each(($el, index) => {
           // skip the header row
           if (index === 0) return;
@@ -43,38 +54,29 @@ describe("Project List", () => {
     it("paginates the data", () => {
       // test first page
       cy.contains("Page 1 of 3");
-      cy.findByRole("button", { name: "Previous" }).should(
-        "have.attr",
-        "disabled"
-      );
+      cy.get("@prev-button").should("have.attr", "disabled");
 
       // test navigation to second page
-      cy.findByRole("button", { name: "Next" }).click();
-      cy.findByRole("button", { name: "Previous" }).should(
-        "not.have.attr",
-        "disabled"
-      );
+      cy.get("@next-button").click();
+      cy.get("@prev-button").should("not.have.attr", "disabled");
       cy.contains("Page 2 of 3");
       cy.get("tbody tr:first").contains(mockIssues2.items[0].message);
 
       // test navigation to third and last page
-      cy.findByRole("button", { name: "Next" }).click();
-      cy.findByRole("button", { name: "Next" }).should("have.attr", "disabled");
+      cy.get("@next-button").click();
+      cy.get("@next-button").should("have.attr", "disabled");
       cy.contains("Page 3 of 3");
       cy.get("tbody tr:first").contains(mockIssues3.items[0].message);
 
       // test navigation back to second page
-      cy.findByRole("button", { name: "Previous" }).click();
-      cy.findByRole("button", { name: "Next" }).should(
-        "not.have.attr",
-        "disabled"
-      );
+      cy.get("@prev-button").click();
+      cy.get("@next-button").should("not.have.attr", "disabled");
       cy.contains("Page 2 of 3");
       cy.get("tbody tr:first").contains(mockIssues2.items[0].message);
     });
 
-    it("perists page after reload", () => {
-      cy.findByRole("button", { name: "Next" }).click();
+    it("persists page after reload", () => {
+      cy.get("@next-button").click();
       cy.contains("Page 2 of 3");
 
       cy.reload();
diff --git a/cypress/integration/navigation.spec.ts b/cypress/integration/navigation.spec.ts
@@ -9,19 +9,24 @@ describe("Sidebar Navigation", () => {
     });
 
     it("links are working", () => {
-      cy.findByRole("navigation").findByText("Issues").click();
+      // check that issues link leads to the right page
+      cy.get("nav").contains("Issues").click();
       cy.url().should("eq", "http://localhost:3000/issues");
 
-      cy.findByRole("navigation").findByText("Projects").click();
+      // check that projects link leads to the right page
+      cy.get("nav").contains("Projects").click();
       cy.url().should("eq", "http://localhost:3000/");
     });
 
     it("is collapsible", () => {
-      cy.findByText("Collapse").click();
-      cy.findByRole("navigation")
-        .findAllByRole("link")
-        .should("have.length", 5);
-      cy.findByRole("navigation").findByText("Issues").should("not.exist");
+      // collapse navigation
+      cy.get("nav").contains("Collapse").click();
+
+      // check that links still exist
+      cy.get("nav").find("a").should("have.length", 5);
+
+      // check that text is not rendered
+      cy.get("nav").contains("Issues").should("not.exist");
     });
   });
 
@@ -32,6 +37,7 @@ describe("Sidebar Navigation", () => {
 
     function isInViewport(el: string) {
       cy.get(el).then(($el) => {
+        // navigation should cover the whole screen
         const rect = $el[0].getBoundingClientRect();
         expect(rect.right).to.be.equal(rect.width);
         expect(rect.left).to.be.equal(0);
@@ -40,29 +46,34 @@ describe("Sidebar Navigation", () => {
 
     function isNotInViewport(el: string) {
       cy.get(el).then(($el) => {
+        // naviation should be outside of the screen
         const rect = $el[0].getBoundingClientRect();
         expect(rect.left).to.be.equal(-rect.width);
         expect(rect.right).to.be.equal(0);
       });
     }
 
     it("toggles sidebar navigation by clicking the menu icon", () => {
+      // wait for animation to finish
       cy.wait(500);
       isNotInViewport("nav");
 
-      cy.findByAltText("open menu").click();
+      // open mobile navigation
+      cy.get("img[alt='open menu']").click();
 
+      // wait for animation to finish
       cy.wait(500);
       isInViewport("nav");
 
-      cy.findByRole("navigation")
-        .findAllByRole("link")
-        .should("have.length", 5);
+      // check that all links are rendered
+      cy.get("nav").find("a").should("have.length", 5);
 
-      cy.findByText("Support").should("exist");
-      cy.findByText("Collapse").should("not.be.visible");
+      // Support button should be rendered but Collapse button not
+      cy.get("nav").contains("Support").should("exist");
+      cy.get("nav").contains("Collapse").should("not.be.visible");
 
-      cy.findByAltText("close menu").click();
+      // close mobile navigation and check that it disappears
+      cy.get("img[alt='close menu']").click();
       cy.wait(500);
       isNotInViewport("nav");
     });
diff --git a/cypress/integration/project-list.spec.ts b/cypress/integration/project-list.spec.ts
@@ -3,10 +3,16 @@ import mockProjects from "../fixtures/projects.json";
 
 describe("Project List", () => {
   beforeEach(() => {
+    // setup request mock
     cy.intercept("GET", "https://prolog-api.profy.dev/project", {
       fixture: "projects.json",
-    });
+    }).as("getProjects");
+
+    // open projects page
     cy.visit("http://localhost:3000");
+
+    // wait for request to resolve
+    cy.wait("@getProjects");
   });
 
   context("desktop resolution", () => {
@@ -17,17 +23,17 @@ describe("Project List", () => {
     it("renders the projects", () => {
       const languageNames = ["React", "Node.js", "Python"];
 
-      cy.findByRole("main")
-        .findAllByRole("listitem")
+      // get all project cards
+      cy.get("main")
+        .find("li")
         .each(($el, index) => {
+          // check that project data is rendered
           cy.wrap($el).contains(mockProjects[index].name);
           cy.wrap($el).contains(languageNames[index]);
           cy.wrap($el).contains(mockProjects[index].numIssues);
           cy.wrap($el).contains(mockProjects[index].numEvents24h);
           cy.wrap($el).contains(capitalize(mockProjects[index].status));
-          cy.wrap($el)
-            .findByRole("link")
-            .should("have.attr", "href", "/issues");
+          cy.wrap($el).find("a").should("have.attr", "href", "/issues");
         });
     });
   });
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -23,4 +23,3 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-import "@testing-library/cypress/add-commands";
diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
@@ -5,7 +5,7 @@
     "isolatedModules": false,
     // be explicit about types included
     // to avoid clashing with Jest types
-    "types": ["cypress", "@testing-library/cypress"]
+    "types": ["cypress"]
   },
   "include": ["../node_modules/cypress", "./**/*.ts"]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,6 @@
     "@storybook/addon-links": "^6.4.19",
     "@storybook/react": "^6.4.19",
     "@storybook/testing-library": "^0.0.9",
-    "@testing-library/cypress": "^8.0.2",
     "@types/jest": "^27.4.1",
     "@types/node": "17.0.21",
     "@types/react": "17.0.39",

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`"isolatedModules": false,`
`6`	`6`	`// be explicit about types included`
`7`	`7`	`// to avoid clashing with Jest types`
`8`		`- "types": ["cypress", "@testing-library/cypress"]`
	`8`	`+ "types": ["cypress"]`
`9`	`9`	`},`
`10`	`10`	`"include": ["../node_modules/cypress", "./*/.ts"]`
`11`	`11`	`}`