Cypress 7

.github/workflows/workflow.yml

@@ -16,9 +16,11 @@ jobs:
       - id: get-branch-name
         run: echo "::set-output name=branch_name::$(git symbolic-ref --short HEAD)"
         shell: bash
-
-      - name: Cypress run
+      
+      - name: Run Component tests 🧪
         uses: cypress-io/github-action@v2
+        with:
+          command: npm run test:cy
         env:
           VRT_APIURL: "http://162.243.161.172:4200"
           VRT_PROJECT: "VRT"

.gitignore

@@ -6,6 +6,7 @@
 .pnp.js
 
 # testing
+vrt.json
 .nyc_output/
 /coverage
 /cypress/screenshots

cypress.json

@@ -4,7 +4,6 @@
   "video": false,
   "screenshotOnRunFailure": false,
   "retries": 0,
-  "experimentalComponentTesting": true,
   "componentFolder": "src",
   "testFiles": "**/*.spec.*"
 }

cypress/plugins/index.js

@@ -1,9 +1,10 @@
 const {
   addVisualRegressionTrackerPlugin,
 } = require("@visual-regression-tracker/agent-cypress/dist/plugin");
+const injectReactScriptsDevServer = require("@cypress/react/plugins/react-scripts");
 
 module.exports = async (on, config) => {
-  require("cypress-react-unit-test/plugins/react-scripts")(on, config);
+  injectReactScriptsDevServer(on, config);
   addVisualRegressionTrackerPlugin(on, config);
   return config;
 };

cypress/support/index.js

@@ -15,12 +15,8 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-// Import commands.js using ES2015 syntax:
 import "./commands";
 
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
-require("cypress-react-unit-test/support");
 
 before(() => {
   cy.vrtStart();

package.json

@@ -25,30 +25,25 @@
     "react-material-ui-form-validator": "^2.1.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
-    "socket.io-client": "^2.3.0",
-    "typescript": "^3.9.7",
+    "socket.io-client": "^2.4.0",
+    "typescript": "^4.3.4",
     "use-image": "^1.0.6"
   },
   "scripts": {
     "start": "chmod +x ./env.sh && ./env.sh && cp env-config.js ./public/ && react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test"
+    "test": "react-scripts test",
+    "test:cy": "cypress run-ct"
   },
   "eslintConfig": {
     "extends": "react-app"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
+  "browserslist": [
+    ">0.3%",
+    "not ie 11",
+    "not dead",
+    "not op_mini all"
+  ],
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
@@ -60,6 +55,8 @@
     ]
   },
   "devDependencies": {
+    "@cypress/react": "^5.9.1",
+    "@cypress/webpack-dev-server": "^1.4.0",
     "@types/jest": "^26.0.20",
     "@types/lodash": "^4.14.170",
     "@types/node": "^13.13.0",
@@ -69,8 +66,7 @@
     "@types/react-material-ui-form-validator": "^2.1.0",
     "@types/react-router-dom": "^5.1.5",
     "@types/socket.io-client": "^1.4.33",
-    "@visual-regression-tracker/agent-cypress": "^4.7.3",
-    "cypress": "^5.6.0",
-    "cypress-react-unit-test": "^4.17.0"
+    "@visual-regression-tracker/agent-cypress": "^5.0.0",
+    "cypress": "^7.6.0"
   }
 }

src/_test/test.moun.helper.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { mount } from "cypress-react-unit-test";
+import { mount } from "@cypress/react";
 import {
   ProjectProvider,
   AuthProvider,
@@ -34,6 +34,6 @@ export const mountVrtComponent = ({
       </Route>
     </MemoryRouter>,
     {
-      stylesheets: ["/__root/src/index.css"],
+      stylesheets: ["/src/index.css"],
     }
   );

src/components/Filters.spec.tsx

@@ -1,6 +1,6 @@
 /* global cy */
 import React from "react";
-import { mount } from "cypress-react-unit-test";
+import { mount } from "@cypress/react";
 import Filters from "./Filters";
 import { TestStatus } from "../types/testStatus";
 
@@ -30,6 +30,7 @@ describe("Filters", () => {
             branchName: "master",
             baselineBranchName: "baselineBranchName",
             merge: false,
+            tempIgnoreAreas: "[]",
           },
         ]}
         queryState={["Some query", cy.stub()]}
@@ -42,6 +43,6 @@ describe("Filters", () => {
       />
     );
 
-    cy.get("#cypress-root").vrtTrack("Filters");
+    cy.get("#__cy_root").vrtTrack("Filters");
   });
 });

src/components/Header.spec.tsx

@@ -1,6 +1,6 @@
 /* global cy */
 import React from "react";
-import { mount } from "cypress-react-unit-test";
+import { mount } from "@cypress/react";
 import Header from "./Header";
 import { AuthProvider } from "../contexts";
 import { BrowserRouter } from "react-router-dom";
@@ -19,7 +19,7 @@ describe("Header", () => {
         </BrowserRouter>
       );
 
-      cy.get("#cypress-root").vrtTrack("Header. Guest");
+      cy.get("#__cy_root").vrtTrack("Header. Guest");
     });
 
     it("Logged", () => {
@@ -32,7 +32,7 @@ describe("Header", () => {
         </BrowserRouter>
       );
 
-      cy.get("#cypress-root").vrtTrack("Header. Logged");
+      cy.get("#__cy_root").vrtTrack("Header. Logged");
     });
   });
 });

src/components/TestRunList/BulkOperation.tsx

@@ -1,12 +1,16 @@
 import React from "react";
-import { Typography, IconButton, Tooltip, LinearProgress } from "@material-ui/core";
-import { BaseComponentProps, InternalRowsState, RowModel } from "@material-ui/data-grid";
+import {
+  Typography,
+  IconButton,
+  Tooltip,
+  LinearProgress,
+} from "@material-ui/core";
+import { BaseComponentProps, RowModel } from "@material-ui/data-grid";
 import { BaseModal } from "../BaseModal";
 import { useSnackbar } from "notistack";
 import { Delete, LayersClear, ThumbDown, ThumbUp } from "@material-ui/icons";
 import { testRunService } from "../../services";
 import { TestStatus } from "../../types";
-import { IgnoreArea } from "../../types/ignoreArea";
 
 export const BulkOperation: React.FunctionComponent<BaseComponentProps> = (
   props: BaseComponentProps
@@ -15,10 +19,11 @@ export const BulkOperation: React.FunctionComponent<BaseComponentProps> = (
   const [approveDialogOpen, setApproveDialogOpen] = React.useState(false);
   const [rejectDialogOpen, setRejectDialogOpen] = React.useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
-  const [clearIgnoreDialogOpen, setClearIgnoreDialogOpen] = React.useState(false);
+  const [clearIgnoreDialogOpen, setClearIgnoreDialogOpen] = React.useState(
+    false
+  );
   const [isProcessing, setIsProcessing] = React.useState(false);
 
-  const allRows: InternalRowsState = props.state.rows;
   const selectedRows: Record<React.ReactText, boolean> = props.state.selection;
   const count = Object.keys(selectedRows).length;
 
@@ -75,10 +80,15 @@ export const BulkOperation: React.FunctionComponent<BaseComponentProps> = (
 
   const isRowEligibleForApproveOrReject = (id: string) => {
     //Find the test status of the current row
-    let currentRow: any = props.rows.find((value: RowModel) => value.id.toString().includes(id));
+    let currentRow: any = props.rows.find((value: RowModel) =>
+      value.id.toString().includes(id)
+    );
     let currentRowStatus = JSON.stringify(currentRow.status);
     //In line with how we can approve/reject only new and unresolved from details modal.
-    return (currentRowStatus.includes(TestStatus.new) || currentRowStatus.includes(TestStatus.unresolved));
+    return (
+      currentRowStatus.includes(TestStatus.new) ||
+      currentRowStatus.includes(TestStatus.unresolved)
+    );
   };
 
   const processAction = (id: string) => {
@@ -117,7 +127,10 @@ export const BulkOperation: React.FunctionComponent<BaseComponentProps> = (
 
   return (
     <>
-      <Tooltip title="Approve unresolved in selected rows." aria-label="approve">
+      <Tooltip
+        title="Approve unresolved in selected rows."
+        aria-label="approve"
+      >
         <span>
           <IconButton disabled={count === 0} onClick={toggleApproveDialogOpen}>
             <ThumbUp />
@@ -153,7 +166,12 @@ export const BulkOperation: React.FunctionComponent<BaseComponentProps> = (
       </Tooltip>
 
       <BaseModal
-        open={deleteDialogOpen || approveDialogOpen || rejectDialogOpen || clearIgnoreDialogOpen}
+        open={
+          deleteDialogOpen ||
+          approveDialogOpen ||
+          rejectDialogOpen ||
+          clearIgnoreDialogOpen
+        }
         title={getTitle()}
         submitButtonText={submitButtonText()}
         onCancel={dismissDialog}
@@ -181,7 +199,7 @@ export const BulkOperation: React.FunctionComponent<BaseComponentProps> = (
           closeModal();
         }}
       />
-      { isProcessing && <LinearProgress />}
+      {isProcessing && <LinearProgress />}
     </>
   );
 };

src/index.css

@@ -5,7 +5,7 @@ body {
 }
 
 #root,
-#cypress-root {
+#__cy_root {
   height: 100%;
 }