Merge pull request #1616 from danskernesdigitalebibliotek/DDFNEXT-224…

…-opgrader-eslint-plugin-cypress-react-komponenter Bump eslint-plugin-cypress to version 4.1.0
danskernesdigitalebibliotek · Jan 2, 2025 · 96af0be · 96af0be
2 parents 99f5a1b + 58d5187
commit 96af0be
Show file tree

Hide file tree

Showing 11 changed files with 174 additions and 127 deletions.
diff --git a/package.json b/package.json
@@ -101,7 +101,7 @@
     "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-loader": "^4.0.2",
-    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-cypress": "^4.1.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.0",
     "eslint-plugin-no-only-tests": "^3.3.0",

diff --git a/src/apps/advanced-search/advanced-search.test.ts b/src/apps/advanced-search/advanced-search.test.ts
@@ -12,16 +12,20 @@ describe("Search Result", () => {
   });
 
   it("Should translate typed in query-index into valid CQL", () => {
-    cy.getBySel("advanced-search-header-row").first().click().type("Harry");
-    cy.getBySel("advanced-search-header-row").eq(1).click().type("Prince");
+    cy.getBySel("advanced-search-header-row").first().click();
+    cy.getBySel("advanced-search-header-row").first().type("Harry");
+    cy.getBySel("advanced-search-header-row").eq(1).click();
+    cy.getBySel("advanced-search-header-row").eq(1).type("Prince");
     cy.getBySel("preview-section")
       .first()
       .should("contain", "'Harry' AND 'Prince'");
   });
 
   it("Should reflect operator changes in the translated CQL", () => {
-    cy.getBySel("advanced-search-header-row").first().click().type("Harry");
-    cy.getBySel("advanced-search-header-row").eq(1).click().type("Prince");
+    cy.getBySel("advanced-search-header-row").first().click();
+    cy.getBySel("advanced-search-header-row").first().type("Harry");
+    cy.getBySel("advanced-search-header-row").eq(1).click();
+    cy.getBySel("advanced-search-header-row").eq(1).type("Prince");
     cy.getBySel("advanced-search-header-row")
       .eq(1)
       .getBySel("clauses")
@@ -33,11 +37,13 @@ describe("Search Result", () => {
   });
 
   it("Should translate filters into CQL", () => {
-    cy.getBySel("advanced-search-header-row").first().click().type("Harry");
-    cy.getBySel("advanced-search-header-row").eq(1).click().type("Prince");
+    cy.getBySel("advanced-search-header-row").first().click();
+    cy.getBySel("advanced-search-header-row").first().type("Harry");
+    cy.getBySel("advanced-search-header-row").eq(1).click();
+    cy.getBySel("advanced-search-header-row").eq(1).type("Prince");
+    cy.getBySel("advanced-search-material-types").first().click();
     cy.getBySel("advanced-search-material-types")
       .first()
-      .click()
       .find("li")
       .eq(1)
       .should("contain", "Book")
@@ -47,9 +53,9 @@ describe("Search Result", () => {
       "contain",
       "'Harry' AND 'Prince' AND term.generalmaterialtype='bøger'"
     );
+    cy.getBySel("advanced-search-accessibility").first().click();
     cy.getBySel("advanced-search-accessibility")
       .first()
-      .click()
       .find("li")
       .eq(2)
       .should("contain", "Online")
@@ -63,38 +69,36 @@ describe("Search Result", () => {
 
   it("Should reset the form upon reset button click", () => {
     // Setup the search query.
-    cy.getBySel("advanced-search-header-row").eq(0).click().type("Harry");
+    cy.getBySel("advanced-search-header-row").first().click();
+    cy.getBySel("advanced-search-header-row").first().type("Harry");
+    cy.getBySel("advanced-search-header-row").eq(1).click();
     cy.getBySel("advanced-search-header-row")
       .eq(1)
-      .click()
       .within(() => {
         cy.get("input").type("Rowling");
         cy.get("select").select(1);
       });
     cy.getBySel("advanced-search-add-row").click();
+    cy.getBySel("advanced-search-header-row").eq(2).click();
     cy.getBySel("advanced-search-header-row")
       .eq(2)
-      .click()
       .within(() => {
         cy.get("input").type("Magi");
         cy.get("select").select(2);
       });
-    cy.getBySel("advanced-search-material-types")
-      .click()
-      .within(() => {
-        cy.get("[role=option]").eq(1).click();
-        cy.get("[role=option]").eq(2).click();
-      });
-    cy.getBySel("advanced-search-fiction")
-      .click()
-      .within(() => {
-        cy.get("[role=option]").eq(1).click();
-      });
-    cy.getBySel("advanced-search-accessibility")
-      .click()
-      .within(() => {
-        cy.get("[role=option]").eq(1).click();
-      });
+    cy.getBySel("advanced-search-material-types").click();
+    cy.getBySel("advanced-search-material-types").within(() => {
+      cy.get("[role=option]").eq(1).click();
+      cy.get("[role=option]").eq(2).click();
+    });
+    cy.getBySel("advanced-search-fiction").click();
+    cy.getBySel("advanced-search-fiction").within(() => {
+      cy.get("[role=option]").eq(1).click();
+    });
+    cy.getBySel("advanced-search-accessibility").click();
+    cy.getBySel("advanced-search-accessibility").within(() => {
+      cy.get("[role=option]").eq(1).click();
+    });
 
     cy.getBySel("advanced-search-reset", true).click();
 
@@ -127,36 +131,35 @@ describe("Search Result", () => {
   });
 
   it("Should enable the search button if at least one input is filled out", () => {
-    cy.getBySel("advanced-search-header-row").first().click().type("Harry");
+    cy.getBySel("advanced-search-header-row").first().click();
+    cy.getBySel("advanced-search-header-row").first().type("Harry");
     cy.getBySel("search-button").should("be.enabled");
   });
 
   it("Should persist advanced search query in url", () => {
     // Setup the search query.
-    cy.getBySel("advanced-search-header-row").eq(0).click().type("Harry");
+    cy.getBySel("advanced-search-header-row").eq(0).click();
+    cy.getBySel("advanced-search-header-row").eq(0).type("Harry");
+    cy.getBySel("advanced-search-header-row").eq(1).click();
     cy.getBySel("advanced-search-header-row")
       .eq(1)
-      .click()
       .within(() => {
         cy.get("input").type("Rowling");
         cy.get("select").select(1);
       });
-    cy.getBySel("advanced-search-material-types")
-      .click()
-      .within(() => {
-        cy.get("[role=option]").eq(1).click();
-        cy.get("[role=option]").eq(2).click();
-      });
-    cy.getBySel("advanced-search-fiction")
-      .click()
-      .within(() => {
-        cy.get("[role=option]").eq(1).click();
-      });
-    cy.getBySel("advanced-search-accessibility")
-      .click()
-      .within(() => {
-        cy.get("[role=option]").eq(1).click();
-      });
+    cy.getBySel("advanced-search-material-types").click();
+    cy.getBySel("advanced-search-material-types").within(() => {
+      cy.get("[role=option]").eq(1).click();
+      cy.get("[role=option]").eq(2).click();
+    });
+    cy.getBySel("advanced-search-fiction").click();
+    cy.getBySel("advanced-search-fiction").within(() => {
+      cy.get("[role=option]").eq(1).click();
+    });
+    cy.getBySel("advanced-search-accessibility").click();
+    cy.getBySel("advanced-search-accessibility").within(() => {
+      cy.get("[role=option]").eq(1).click();
+    });
 
     // Perform the search to persist it in the url.
     cy.getBySel("search-button").click();
@@ -217,7 +220,8 @@ describe("Search Result", () => {
   });
 
   it("Should show search results upon submitting the form", () => {
-    cy.getBySel("advanced-search-header-row").first().click().type("Harry");
+    cy.getBySel("advanced-search-header-row").first().click();
+    cy.getBySel("advanced-search-header-row").first().type("Harry");
     cy.getBySel("search-button").click();
     cy.wait("@complexSearchWithPagination GraphQL operation");
     cy.getBySel("search-result-list").should("exist");
@@ -226,12 +230,14 @@ describe("Search Result", () => {
   });
 
   it("Updates search string after initial search is executed", () => {
-    cy.getBySel("advanced-search-header-row").first().click().type("Harry");
+    cy.getBySel("advanced-search-header-row").first().click();
+    cy.getBySel("advanced-search-header-row").first().type("Harry");
     cy.getBySel("preview-section").first().should("contain", "'Harry'");
     cy.getBySel("search-button").click();
     cy.wait("@complexSearchWithPagination GraphQL operation");
     cy.getBySel("search-result-list").should("exist");
-    cy.getBySel("advanced-search-header-row").eq(1).click().type("Potter");
+    cy.getBySel("advanced-search-header-row").eq(1).click();
+    cy.getBySel("advanced-search-header-row").eq(1).type("Potter");
     cy.getBySel("preview-section")
       .first()
       .should("contain", "'Harry' AND 'Potter'");

diff --git a/src/apps/loan-list/list/loan-list.test.ts b/src/apps/loan-list/list/loan-list.test.ts
@@ -374,9 +374,13 @@ describe("Loan list", () => {
     cy.get(".list-reservation-container")
       .find(".list-reservation")
       .eq(0)
-      .scrollIntoView()
-      .find(".list-reservation__information div a")
-      .should("exist");
+      .scrollIntoView();
+    cy.get(".list-reservation-container")
+      .find(".list-reservation")
+      .eq(0)
+      .within(() => {
+        cy.get(".list-reservation__information div a").should("exist");
+      });
 
     // 2.b.iv.3.c. Only shown if loan is overdue
     cy.get(".list-reservation-container")

diff --git a/src/apps/material/instant-loan.test.ts b/src/apps/material/instant-loan.test.ts
@@ -48,16 +48,16 @@ describe("Instant Loan", () => {
     cy.visit(
       "/iframe.html?&id=apps-material--instant-loan&viewMode=story&type=bog"
     ).scrollTo("bottom");
+    cy.getBySel("material-header-buttons-physical").scrollIntoView();
     cy.getBySel("material-header-buttons-physical")
-      .scrollIntoView()
       .should("be.visible")
       .and("contain", "Reserve bog")
       .click();
   });
 
   it("should render InstantLoan summary with title and cover", () => {
+    cy.getBySel("instant-loan").scrollIntoView();
     cy.getBySel("instant-loan")
-      .scrollIntoView()
       .should("have.attr", "aria-expanded", "false")
       .and("contain", "Hent bogen nu")
       .find("img")
@@ -66,25 +66,23 @@ describe("Instant Loan", () => {
   });
 
   it("should render InstantLoan branches", () => {
-    cy.getBySel("instant-loan").scrollIntoView().click();
+    cy.getBySel("instant-loan").scrollIntoView();
+    cy.getBySel("instant-loan").click();
 
-    cy.getBySel("instant-loan")
-      .scrollIntoView()
-      .should("have.attr", "aria-expanded", "true");
+    cy.getBySel("instant-loan").should("have.attr", "aria-expanded", "true");
 
-    cy.getBySel("instant-loan-branches")
-      .scrollIntoView()
-      .children()
-      .should("have.length", 1);
+    cy.getBySel("instant-loan-branches").scrollIntoView();
+    cy.getBySel("instant-loan-branches").children().should("have.length", 1);
   });
 
   it("should render InstantLoan branch", () => {
-    cy.getBySel("instant-loan").scrollIntoView().click();
+    cy.getBySel("instant-loan").scrollIntoView();
+    cy.getBySel("instant-loan").click();
 
+    cy.getBySel("instant-loan-branches").scrollIntoView();
     cy.getBySel("instant-loan-branches")
       .get("li")
       .contains("li", "Ørestad")
-      .scrollIntoView()
       .should("contain", "Ørestad")
       .and("contain", "2 stk");
   });

diff --git a/src/apps/material/login-redirect.test.ts b/src/apps/material/login-redirect.test.ts
@@ -12,8 +12,8 @@ describe("Material", () => {
     cy.scrollTo("bottom");
     cy.getBySel("material-description").scrollIntoView();
 
+    cy.getBySel("material-header-buttons-physical").scrollIntoView();
     cy.getBySel("material-header-buttons-physical")
-      .scrollIntoView()
       .should("be.visible")
       .and("contain", "Reserve bog")
       .click();
@@ -39,9 +39,9 @@ describe("Material", () => {
     cy.scrollTo("bottom");
     cy.getBySel("material-description").scrollIntoView();
 
+    cy.getBySel("material-header-buttons-physical").scrollIntoView();
     cy.getBySel("material-header-buttons-physical")
       .should("be.visible")
-      .scrollIntoView()
       .and("contain", "Reserve bog")
       .click();
 

diff --git a/src/apps/material/material.test.ts b/src/apps/material/material.test.ts
@@ -405,9 +405,9 @@ describe("Material", () => {
 
     cy.scrollTo("bottom");
 
+    cy.getBySel("material-editions-disclosure").click();
     cy.getBySel("material-editions-disclosure")
       .should("contain", "Editions")
-      .click()
       .then((disclosure) => {
         cy.wrap(disclosure).should("contain", "Reserve");
       });

diff --git a/src/apps/material/order-digital-copy.test.ts b/src/apps/material/order-digital-copy.test.ts
@@ -86,9 +86,9 @@ describe("Material - Order digital copy", () => {
       .should("be.visible")
       .click();
 
+    cy.getBySel("email-order-digital-copy").clear();
     cy.getBySel("email-order-digital-copy")
       .should("be.visible")
-      .clear()
       .type("new-mail.test.com");
 
     cy.interceptGraphql({
@@ -112,9 +112,9 @@ describe("Material - Order digital copy", () => {
       .should("be.visible")
       .click();
 
+    cy.getBySel("email-order-digital-copy").clear();
     cy.getBySel("email-order-digital-copy")
       .should("be.visible")
-      .clear()
       .type("new-mail.test.com");
 
     cy.interceptGraphql({
@@ -139,9 +139,9 @@ describe("Material - Order digital copy", () => {
       .should("be.visible")
       .click();
 
+    cy.getBySel("email-order-digital-copy").clear();
     cy.getBySel("email-order-digital-copy")
       .should("be.visible")
-      .clear()
       .type("new-mail.test.com");
 
     cy.interceptGraphql({
@@ -166,9 +166,9 @@ describe("Material - Order digital copy", () => {
       .should("be.visible")
       .click();
 
+    cy.getBySel("email-order-digital-copy").clear();
     cy.getBySel("email-order-digital-copy")
       .should("be.visible")
-      .clear()
       .type("new-mail.test.com");
 
     cy.interceptGraphql({
@@ -193,9 +193,9 @@ describe("Material - Order digital copy", () => {
       .should("be.visible")
       .click();
 
+    cy.getBySel("email-order-digital-copy").clear();
     cy.getBySel("email-order-digital-copy")
       .should("be.visible")
-      .clear()
       .type("new-mail.test.com");
 
     cy.interceptGraphql({
@@ -220,9 +220,9 @@ describe("Material - Order digital copy", () => {
       .should("be.visible")
       .click();
 
+    cy.getBySel("email-order-digital-copy").clear();
     cy.getBySel("email-order-digital-copy")
       .should("be.visible")
-      .clear()
       .type("new-mail.test.com");
 
     cy.interceptGraphql({