chore: update to Cypress v4 (#2wee38)

devowlio · Apr 14, 2020 · a2149a7 · a2149a7
1 parent a42f2b0
commit a2149a7
Show file tree

Hide file tree

Showing 9 changed files with 304 additions and 297 deletions.
diff --git a/devops/docker/gitlab-ci/Dockerfile b/devops/docker/gitlab-ci/Dockerfile
@@ -30,12 +30,15 @@ RUN apt-get update && apt-get install -y \
     python-dev \
     # Cypress.io dependencies
     xvfb \
-    libgtk-3-dev \
+    libgtk2.0-0 \
+    libgtk-3-0 \
     libnotify-dev \
     libgconf-2-4 \
     libnss3 \
     libxss1 \
     libasound2 \
+    libxtst6 \
+    xauth \
     # libssl-dev is needed for Phar (https://raspberrypi.stackexchange.com/a/36379)
     libssl-dev && \
     # PHP dependencies (https://git.io/JvAFa)

diff --git a/docs/usage/getting-started.md b/docs/usage/getting-started.md
@@ -14,7 +14,7 @@ Please make sure that the following components are installed on your local compu
 -   (optional) [**Visual Studio Code**](https://code.visualstudio.com/): IDE with the best integration for tools used in `wp-react-starter`
 
 {% hint style="warning" %}
-The boilerplate is **not** yet fully supported on Windows systems. Feel free to contribute or use a [Windows Subsystem for Linux (WSL)](https://docs.microsoft.com/windows/wsl/install-win10) or [Windows Subsystem 2 for Linux (WSL2)](https://docs.microsoft.com/windows/wsl/wsl2-install).
+The boilerplate is **not** yet fully supported on Windows systems. Feel free to contribute or use a [Windows Subsystem 2 for Linux (WSL2)](https://docs.microsoft.com/windows/wsl/wsl2-install).
 {% endhint %}
 
 ## Installation

diff --git a/plugins/wp-reactjs-starter/cypress.json b/plugins/wp-reactjs-starter/cypress.json
@@ -1,5 +1,5 @@
 {
     "integrationFolder": "test/cypress/integration",
-    "pluginsFile": "test/cypress/plugins/index.js",
+    "pluginsFile": "test/cypress/plugins/index.ts",
     "//": "// The cypress configuration is dynamically created through a plugin, see ./test/cypress/plugins/index"
 }
diff --git a/plugins/wp-reactjs-starter/package.json b/plugins/wp-reactjs-starter/package.json
@@ -193,7 +193,7 @@
         "classnames": "^2.2.6",
         "clean-css": "^4.2.1",
         "css-loader": "^3.4.2",
-        "cypress": "~3.4.1",
+        "cypress": "~4.4.0",
         "cypress-cucumber-preprocessor": "^2.0.1",
         "fork-ts-checker-webpack-plugin": "^4.1.1",
         "grunt": "^1.1.0",

diff --git a/...tjs-starter/test/cypress/plugins/index.js → ...tjs-starter/test/cypress/plugins/index.ts b/...tjs-starter/test/cypress/plugins/index.js → ...tjs-starter/test/cypress/plugins/index.ts
@@ -11,11 +11,13 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
-const child_process = require("child_process");
-const cypressWebpackPreprocessor = require("@cypress/webpack-preprocessor");
-const path = require("path");
+import { execSync } from "child_process";
+import cypressWebpackPreprocessor from "@cypress/webpack-preprocessor";
+import { resolve } from "path";
+
+// eslint-disable-next-line import/no-extraneous-dependencies
 require("dotenv").config({
-    path: path.resolve(process.env.PWD, "../../.env")
+    path: resolve(process.env.PWD, "../../.env")
 });
 
 /**
@@ -29,7 +31,7 @@ function applyConfig(config) {
 
     config.screenshotsFolder = "test/cypress/screenshots";
     config.videosFolder = "test/cypress/videos";
-    config.supportFile = "test/cypress/support/index.js";
+    config.supportFile = "test/cypress/support/index.ts";
     config.fixturesFolder = "test/cypress/fixtures";
     config.ignoreTestFiles = "*.ts";
     // config.testFiles = "test/cypress/integration/**/*.{feature,features}";
@@ -50,13 +52,11 @@ function applyConfig(config) {
         };
     } else {
         // Local development
-        const wpContainer = JSON.parse(
-            child_process
-                .execSync("docker container inspect $(yarn --silent root:run docker-compose:name-wordpress)")
-                .toString()
-        )[0];
+        const [wpContainer] = JSON.parse(
+            execSync("docker container inspect $(yarn --silent root:run docker-compose:name-wordpress)").toString()
+        );
         const definedPort = wpContainer.HostConfig.PortBindings["80/tcp"][0].HostPort;
-        config.baseUrl = process.env.WP_LOCAL_INSTALL_URL || "http://localhost:" + definedPort;
+        config.baseUrl = process.env.WP_LOCAL_INSTALL_URL || `http://localhost:${definedPort}`;
     }
 }
 
@@ -78,6 +78,7 @@ module.exports = (on, config) => {
                     extensions: [".ts", ".js"]
                 },
                 // @see https://git.io/JeAtF
+                // eslint-disable-next-line @typescript-eslint/camelcase
                 node: { fs: "empty", child_process: "empty", readline: "empty" },
                 module: {
                     rules: [
@@ -86,7 +87,7 @@ module.exports = (on, config) => {
                             exclude: /(disposables)/,
                             use: {
                                 loader: "babel-loader",
-                                options: require(path.resolve(process.env.PWD, "package.json")).babel
+                                options: require(resolve(process.env.PWD, "package.json")).babel
                             }
                         },
                         {
@@ -103,11 +104,9 @@ module.exports = (on, config) => {
         })
     );
 
-    on("test:before:run", () => {
-        console.log("Check if docker container is reachable...");
-        child_process.execSync(`yarn --silent root:run wp-cli "wp core version"`);
-        console.log("Reachable");
-    });
+    console.log("Check if docker container is reachable...");
+    execSync(`yarn --silent root:run wp-cli "wp core version"`);
+    console.log("Reachable");
 
     return config;
 };
diff --git a/plugins/wp-reactjs-starter/test/cypress/step-definitions/adminPage/adminPage.ts b/plugins/wp-reactjs-starter/test/cypress/step-definitions/adminPage/adminPage.ts
@@ -6,15 +6,12 @@ Then("I open admin page", () => {
 });
 
 Then("I click on REST API link in the admin notice and alert contains {string}", (alertText: string) => {
-    AdminPageObject.restApiLink.click().then(
-        () =>
-            new Promise((resolve) =>
-                cy.on("window:alert", (text) => {
-                    expect(text).to.contain(alertText);
-                    resolve();
-                })
-            )
-    );
+    const stub = cy.stub();
+    cy.on("window:alert", stub);
+
+    AdminPageObject.restApiLink.click().then(() => {
+        expect(stub.getCall(0)).to.be.calledWith(Cypress.sinon.match(new RegExp(alertText)));
+    });
 });
 
 Then("I type {string} and add todo, check it, afterwards delete it", (todo: string) => {

diff --git a/...-starter/test/cypress/support/commands.js → ...-starter/test/cypress/support/commands.ts b/...-starter/test/cypress/support/commands.js → ...-starter/test/cypress/support/commands.ts
diff --git a/...tjs-starter/test/cypress/support/index.js → ...tjs-starter/test/cypress/support/index.ts b/...tjs-starter/test/cypress/support/index.js → ...tjs-starter/test/cypress/support/index.ts