chore(deps): update Cypress (#2018)

.eslintignore

@@ -10,10 +10,10 @@
 !/test
 
 !/cypress
+/cypress/e2e/**/*.js
+/cypress/e2e/**/*.js.map
 /cypress/fixtures/**/*.js
 /cypress/fixtures/**/*.js.map
-/cypress/integration/**/*.js
-/cypress/integration/**/*.js.map
 /cypress/pages/**/*.js
 /cypress/pages/**/*.js.map
 /cypress/screenshots

.gitignore

@@ -20,10 +20,10 @@ coverage/
 .rpt2_cache
 
 # built files
+/cypress/e2e/**/*.js
+/cypress/e2e/**/*.js.map
 /cypress/fixtures/**/*.js
 /cypress/fixtures/**/*.js.map
-/cypress/integration/**/*.js
-/cypress/integration/**/*.js.map
 /cypress/pages/**/*.js
 /cypress/pages/**/*.js.map
 /cypress/screenshots/

cypress.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  env: {
+    SNAPSHOT_BASE_DIRECTORY: "./cypress/snapshots/base",
+    SNAPSHOT_DIFF_DIRECTORY: "./cypress/snapshots/diff",
+  },
+  screenshotsFolder: "./cypress/snapshots/actual",
+  trashAssetsBeforeRuns: true,
+  viewportHeight: 1600,
+  viewportWidth: 1200,
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    async setupNodeEvents(on, config) {
+      return (await import("./cypress/plugins/index.js")).default(on, config);
+    },
+    specPattern: [
+      "cypress/e2e/visual/**/*.spec.js",
+      "cypress/e2e/functional/**/*.spec.js",
+    ],
+    supportFile: "cypress/support/e2e.js",
+  },
+});

cypress/integration/functional/clicks.spec.ts → cypress/e2e/functional/clicks.spec.ts

@@ -1,6 +1,6 @@
 import { VisEvent } from "../helpers";
 
-context("Clicks", (): void => {
+context("Clicks", { testIsolation: false }, (): void => {
   /*
    * The canvas starts at 200x200 and ends at 400x400.
    */

cypress/integration/functional/directed-hierarchical-layout.spec.ts → cypress/e2e/functional/directed-hierarchical-layout.spec.ts

@@ -184,162 +184,145 @@ describe("Directed hierarchical layout", (): void => {
       })
     );
 
-    describe(name, (): void => {
-      it("Preparation", (): void => {
-        cy.visVisitUniversal();
+    it(name, (): void => {
+      cy.visVisitUniversal();
 
-        cy.visRun(({ network, nodes, edges }): void => {
-          network.setOptions({
-            edges: {
-              arrows: {
-                to: true,
-              },
+      cy.visRun(({ network, nodes, edges }): void => {
+        network.setOptions({
+          edges: {
+            arrows: {
+              to: true,
             },
-            layout: {
-              hierarchical: {
-                enabled: true,
-                sortMethod: "directed",
-              },
+          },
+          layout: {
+            hierarchical: {
+              enabled: true,
+              sortMethod: "directed",
             },
-          });
-
-          nodes.add(data.nodes);
-          edges.add(data.edges);
+          },
         });
+
+        nodes.add(data.nodes);
+        edges.add(data.edges);
       });
 
       configs.forEach(({ expectedVisibleEdges, nodesToCluster }, cid): void => {
         const clusterDescribeName =
           cid === 0 ? "Without clustering" : `With ${cid} clusters`;
 
-        describe(clusterDescribeName, (): void => {
-          if (cid > 0) {
-            it("Cluster", (): void => {
-              cy.visRun(({ network }): void => {
-                network.cluster({
-                  clusterNodeProperties: {
-                    label: `Cluster #${cid}`,
-                  },
-                  joinCondition: ({ id }): boolean => nodesToCluster.has(id),
-                });
-              });
+        if (cid > 0) {
+          cy.visRun(({ network }): void => {
+            network.cluster({
+              clusterNodeProperties: {
+                label: `Cluster #${cid}`,
+              },
+              joinCondition: ({ id }): boolean => nodesToCluster.has(id),
             });
-          }
+          });
+        }
 
-          /*
-           * There's no point in testing running this test for cyclic graphs.
-           * Such graphs are always invalid.
+        /*
+         * There's no point in testing running this test for cyclic graphs.
+         * Such graphs are always invalid.
+         */
+        if (!cyclic) {
+          /**
+           * Test that children are placed below their parents and parents
+           * above their children.
+           *
+           * This also tests that the required number of edges is visible on
+           * the canvas. Since the number is available there anyway, it can as
+           * well be tested.
            */
-          if (!cyclic) {
-            /**
-             * Test that children are placed below their parents and parents
-             * above their children.
-             *
-             * This also tests that the required number of edges is visible on
-             * the canvas. Since the number is available there anyway, it can as
-             * well be tested.
-             */
-            it("Hierarchical order of nodes", (): void => {
-              cy.visRun(({ network }): void => {
-                const visibleNodeIds = new Set(
-                  Object.keys(network.getPositions())
-                );
+          cy.visRun(({ network }): void => {
+            const visibleNodeIds = new Set(Object.keys(network.getPositions()));
 
-                /*
-                 * No matter how much ESLint think they're unnecessary, these two
-                 * assertions are indeed necessary.
-                 */
-                const visibleEdges = Object.values(
-                  (
-                    network as unknown as {
-                      body: {
-                        edges: {
-                          fromId: string;
-                          toId: string;
-                        }[];
-                      };
-                    }
-                  ).body.edges
-                ).filter(
-                  (edge): boolean =>
-                    visibleNodeIds.has(edge.fromId) &&
-                    visibleNodeIds.has(edge.toId)
-                );
-
-                const invalidEdges = visibleEdges
-                  .map(
-                    ({
-                      fromId,
-                      toId,
-                    }): {
-                      fromId: IdType;
-                      fromPosition: Point;
-                      toId: IdType;
-                      toPosition: Point;
-                    } => ({
-                      fromId,
-                      fromPosition: network.getPositions([fromId])[fromId],
-                      toId,
-                      toPosition: network.getPositions([toId])[toId],
-                    })
-                  )
-                  .filter(({ fromPosition, toPosition }): boolean => {
-                    return !(fromPosition.y < toPosition.y);
-                  });
-
-                expect(invalidEdges).to.deep.equal([]);
-                expect(visibleEdges).to.have.lengthOf(expectedVisibleEdges);
-              });
-            });
-
-            /**
-             * Test that all levels are evenly spaced without gaps.
+            /*
+             * No matter how much ESLint think they're unnecessary, these two
+             * assertions are indeed necessary.
              */
-            it("Spacing between levels", (): void => {
-              cy.visRun(({ network }): void => {
-                const levels = Array.from(
-                  new Set(
-                    Object.values(network.getPositions()).map(
-                      ({ y }): number => y
-                    )
-                  )
-                ).sort((a, b): number => a - b);
+            const visibleEdges = Object.values(
+              (
+                network as unknown as {
+                  body: {
+                    edges: {
+                      fromId: string;
+                      toId: string;
+                    }[];
+                  };
+                }
+              ).body.edges
+            ).filter(
+              (edge): boolean =>
+                visibleNodeIds.has(edge.fromId) && visibleNodeIds.has(edge.toId)
+            );
 
-                const gaps = new Array(levels.length - 1)
-                  .fill(null)
-                  .map((_, i): number => {
-                    return levels[i] - levels[i + 1];
-                  });
-
-                expect(
-                  gaps.every((gap, _i, arr): boolean => {
-                    return gap === arr[0];
-                  }),
-                  "All levels should be evenly spaced without gaps."
-                ).to.be.true;
+            const invalidEdges = visibleEdges
+              .map(
+                ({
+                  fromId,
+                  toId,
+                }): {
+                  fromId: IdType;
+                  fromPosition: Point;
+                  toId: IdType;
+                  toPosition: Point;
+                } => ({
+                  fromId,
+                  fromPosition: network.getPositions([fromId])[fromId],
+                  toId,
+                  toPosition: network.getPositions([toId])[toId],
+                })
+              )
+              .filter(({ fromPosition, toPosition }): boolean => {
+                return !(fromPosition.y < toPosition.y);
               });
-            });
-          }
+
+            expect(invalidEdges).to.deep.equal([]);
+            expect(visibleEdges).to.have.lengthOf(expectedVisibleEdges);
+          });
 
           /**
-           * Click through the entire network to ensure that:
-           *   - No node is off the canvas.
-           *   - No node is covered behind another node.
-           *   - Each node is selected after being clicked.
+           * Test that all levels are evenly spaced without gaps.
            */
-          it("Click through the network", (): void => {
-            cy.visStabilizeFitAndRun(({ network }): void => {
-              network.unselectAll();
-              expect(network.getSelectedNodes()).to.deep.equal([]);
+          cy.visRun(({ network }): void => {
+            const levels = Array.from(
+              new Set(
+                Object.values(network.getPositions()).map(({ y }): number => y)
+              )
+            ).sort((a, b): number => a - b);
 
-              const visibleNodeIds = new Set(
-                Object.keys(network.getPositions()).sort()
-              );
-              for (const id of visibleNodeIds) {
-                cy.visClickNode(id);
-              }
-            });
+            const gaps = new Array(levels.length - 1)
+              .fill(null)
+              .map((_, i): number => {
+                return levels[i] - levels[i + 1];
+              });
+
+            expect(
+              gaps.every((gap, _i, arr): boolean => {
+                return gap === arr[0];
+              }),
+              "All levels should be evenly spaced without gaps."
+            ).to.be.true;
           });
+        }
+
+        /**
+         * Click through the entire network to ensure that:
+         *   - No node is off the canvas.
+         *   - No node is covered behind another node.
+         *   - Each node is selected after being clicked.
+         */
+        cy.visStabilizeFitAndRun(({ network }): void => {
+          network.unselectAll();
+          expect(network.getSelectedNodes()).to.deep.equal([]);
+
+          const visibleNodeIds = new Set(
+            Object.keys(network.getPositions()).sort()
+          );
+          for (const id of visibleNodeIds) {
+            cy.visClickNode(id);
+          }
         });
       });
     });

cypress/integration/functional/pollution.spec.ts → cypress/e2e/functional/pollution.spec.ts

@@ -1,4 +1,4 @@
-context("Pollution", (): void => {
+context("Pollution", { testIsolation: false }, (): void => {
   const resultContainerIds = [
     "results-before-loading",
     "results-after-loading",

cypress/plugins/index.js

@@ -16,13 +16,13 @@ module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
 
-  config.testFiles = [];
+  config.specPattern = [];
 
   const all = !config.env.VISUAL && !config.env.FUNCTIONAL;
 
   if (all || config.env.VISUAL) {
     // Visual regression screenshot tests.
-    config.testFiles.push("visual/**/*.spec.js");
+    config.specPattern.push("cypress/e2e/visual/**/*.spec.js");
     config.env.failSilently = false;
     config.trashAssetsBeforeRuns = true;
 
@@ -39,7 +39,7 @@ module.exports = (on, config) => {
 
   if (all || config.env.FUNCTIONAL) {
     // Functional tests.
-    config.testFiles.push("functional/**/*.spec.js");
+    config.specPattern.push("cypress/e2e/functional/**/*.spec.js");
   }
 
   return config;

cypress/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "lib": ["esnext", "dom"],
-    "module": "es2015",
+    "module": "es2020",
     "outDir": ".",
     "target": "es2015",
     "types": ["cypress"]