[CSR-213] Support Code Coverage (#174)

* wip * feat: handle coverage * fix: use cypress-cloud for test script in frontend app * feat: add experimentalCoverageRecording plugin option * fix: change the script that tests frontend example app * feat: add coverageEnabled flag to CreateRunPayload * chore: rename from examples/frontend to examples/coverage * chore: wip * chore: .. --------- Co-authored-by: Andrew Goldis <[email protected]>
currents-dev · Aug 25, 2023 · ddc6b1f · ddc6b1f
1 parent b382c33
commit ddc6b1f
Show file tree

Hide file tree

Showing 31 changed files with 19,260 additions and 10,550 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,7 +7,8 @@ node_modules
 .yarn
 
 # testing
-coverage
+examples/coverage/coverage/*
+.nyc_output
 
 # next.js
 .next/
@@ -39,3 +40,7 @@ yarn-error.log*
 
 # ENV file
 .env
+
+# parcel
+.parcel-cache
+dist
diff --git a/examples/coverage/.babelrc b/examples/coverage/.babelrc
@@ -0,0 +1,3 @@
+{
+  "plugins": ["istanbul"]
+}
diff --git a/examples/coverage/README.md b/examples/coverage/README.md
@@ -0,0 +1,37 @@
+# Recording Cypress Tests Coverage to Currents
+
+Tests `--experimental-coverage-recording` option.
+
+## Setup
+
+See the example configuration file ['cypress.config.ts]('cypress.config.ts) and [examples/coverage/cypress/support/commands.js](examples/coverage/cypress/support/commands.js)
+
+### Install @cypress/code-coverage plugin
+
+Install the official [@cypress/code-coverage](https://www.npmjs.com/package/@cypress/code-coverage) plugin together with the `@cypress/code-coverage/support` support file.
+
+Add [code instrumentation](https://github.com/cypress-io/code-coverage#instrument-your-application) and optionally add `@cypress/code-coverage/use-babelrc` for on-the-fly preprocessing.
+
+### Install `cypress-cloud`
+
+Install `cypress-cloud` plugin **after** `@cypress/code-coverage`.
+
+Provide `coverageFile` cypress environment property in `cypress.config.{jt}s` file for a custom location of the coverage files. The default value is `./.nyc_output/out.json`
+
+### Start Example Server
+
+```sh
+npm run start
+```
+
+### Start `cypress-cloud` execution
+
+```sh
+npx cypress-cloud run --parallel --record --key currents_key --ci-build-id `date +%s` --experimental-coverage-recording
+```
+
+## Development
+
+```bash
+npm run cy2
+```
diff --git a/examples/coverage/about.html b/examples/coverage/about.html
@@ -0,0 +1,5 @@
+<body>
+  <h2>About</h2>
+  <main id="content"></main>
+  <script src="about.js"></script>
+</body>
diff --git a/examples/coverage/about.js b/examples/coverage/about.js
@@ -0,0 +1,3 @@
+document
+  .getElementById('content')
+  .appendChild(document.createTextNode('Est. 2019'))
diff --git a/examples/coverage/app.js b/examples/coverage/app.js
@@ -0,0 +1,5 @@
+import { map } from 'lodash'
+
+const list = [{ name: 'joe' }, { name: 'mary' }]
+const names = map(list, 'name')
+console.log('just names', names)
diff --git a/examples/coverage/currents.config.js b/examples/coverage/currents.config.js
@@ -0,0 +1,8 @@
+const isCI = !!(process.env.GITHUB_ACTION || process.env.CIRCLE_BRANCH);
+
+module.exports = {
+  projectId: isCI ? "Ij0RfK" : "VGLEa1",
+  cloudServiceUrl: !isCI ? "http://localhost:1234" : undefined,
+  recordKey: process.env.CURRENTS_RECORD_KEY || "DsDpjPk0ITxBLTmn",
+  userAgent: "custom",
+};
diff --git a/examples/coverage/cypress.config.ts b/examples/coverage/cypress.config.ts
@@ -0,0 +1,29 @@
+import coveragePlugin from "@cypress/code-coverage/task";
+import coverageInstrumenter from "@cypress/code-coverage/use-babelrc";
+
+import { defineConfig } from "cypress";
+
+import { cloudPlugin } from "cypress-cloud/plugin";
+
+export default defineConfig({
+  fixturesFolder: false,
+  e2e: {
+    async setupNodeEvents(on, config) {
+      on("file:preprocessor", coverageInstrumenter);
+      const tempConfig = coveragePlugin(on, config);
+      return await cloudPlugin(on, tempConfig);
+    },
+    baseUrl: "http://localhost:8888",
+    videoUploadOnPasses: false,
+    supportFile: "cypress/support/e2e.js",
+    specPattern: "cypress/*/**/*.cy.js",
+    env: {
+      // @cypress/code-coverage config
+      codeCoverage: {
+        exclude: ["cypress/**/*.*"],
+      },
+      // set custom coverage file for cypress-cloud
+      coverageFile: "./.nyc_output/out.json",
+    },
+  },
+});
diff --git a/examples/coverage/cypress/e2e/spec_1.cy.js b/examples/coverage/cypress/e2e/spec_1.cy.js
@@ -0,0 +1,26 @@
+// enables intelligent code completion for Cypress commands
+// https://on.cypress.io/intelligent-code-completion
+/// <reference types="Cypress" />
+
+context("Page test", () => {
+  beforeEach(() => {
+    cy.visit("/", {
+      onBeforeLoad(win) {
+        cy.spy(win.console, "log").as("log");
+      },
+    });
+  });
+
+  it("logs names", function () {
+    cy.get("@log")
+      .should("have.been.calledOnce")
+      .should("have.been.calledWith", "just names", ["joe", "mary"]);
+  });
+
+  it("loads About page", () => {
+    cy.contains("About").click();
+    cy.url().should("match", /\/about/);
+    cy.contains("h2", "About");
+    cy.contains("Est. 2019");
+  });
+});
diff --git a/examples/coverage/cypress/e2e/spec_2.cy.js b/examples/coverage/cypress/e2e/spec_2.cy.js
@@ -0,0 +1,15 @@
+// enables intelligent code completion for Cypress commands
+// https://on.cypress.io/intelligent-code-completion
+/// <reference types="Cypress" />
+
+import { add } from "../../unit";
+
+context("Unit tests", () => {
+  it("adds numbers", () => {
+    expect(add(2, 3)).to.equal(5);
+  });
+
+  it("concatenates strings", () => {
+    expect(add("foo", "Bar")).to.equal("fooBar");
+  });
+});
diff --git a/examples/coverage/cypress/support/commands.js b/examples/coverage/cypress/support/commands.js
@@ -0,0 +1,2 @@
+import '@cypress/code-coverage/support'
+console.log('this is commands file')
diff --git a/examples/coverage/cypress/support/e2e.js b/examples/coverage/cypress/support/e2e.js
@@ -0,0 +1 @@
+require("./commands");
diff --git a/examples/coverage/index.html b/examples/coverage/index.html
@@ -0,0 +1,8 @@
+<body>
+  <nav>
+    <a href="./about.html">About</a>
+  </nav>
+  <h2>Test page</h2>
+  <p>Open the DevTools to see console messages</p>
+  <script src="app.js" type="module"></script>
+</body>
diff --git a/examples/coverage/package.json b/examples/coverage/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "example-frontend",
+  "description": "Tests a frontend app",
+  "devDependencies": {
+    "@babel/core": "^7.22.9",
+    "@cypress/code-coverage": "^3.11.0",
+    "babel-plugin-istanbul": "^6.1.1",
+    "check-code-coverage": "^1.10.5",
+    "nyc": "^15.1.0",
+    "parcel": "^2.9.3",
+    "start-server-and-test": "^2.0.0"
+  },
+  "scripts": {
+    "cy:run": "../../node_modules/.bin/cypress run",
+    "cy:open": "../../node_modules/.bin/cypress open",
+    "start": "../../node_modules/.bin/parcel serve --port 8888 --cache-dir ./.parcel-cache index.html",
+    "pretest": "rimraf .nyc_output .parcel-cache coverage dist",
+    "cy2": "../../node_modules/.bin/start-test 8888 cli",
+    "coverage:verify": "npx nyc report --check-coverage true --lines 100",
+    "coverage:check-files": "../../node_modules/.bin/check-coverage app.js && ../../node_modules/.bin/check-coverage about.js && ../../node_modules/.bin/check-coverage unit.js && ../../node_modules/.bin/only-covered app.js about.js unit.js",
+    "cli": "npx cypress-cloud run --ci-build-id $(date \"+%s\") --parallel --record --experimental-coverage-recording"
+  },
+  "dependencies": {
+    "cypress-cloud": "^1.9.2",
+    "lodash": "^4.17.21"
+  }
+}
diff --git a/examples/coverage/tsconfig.json b/examples/coverage/tsconfig.json
@@ -0,0 +1,35 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Next.js",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": false,
+    "moduleResolution": "node",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "ts-node": {
+    "compilerOptions": {
+      "module": "CommonJS"
+    }
+  },
+  "include": ["next-env.d.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/coverage/unit.js b/examples/coverage/unit.js
@@ -0,0 +1 @@
+export const add = (a, b) => a + b
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import '@cypress/code-coverage/support'
		console.log('this is commands file')