@grafana/e2e: added support for plugin repositories (#22546)

* Minor changes

* Include Cypress support files in published package

* Added CLI

… with support for custom configurations (which Cypress does not currently support by default):

  * Loads cypress.json from @grafana/e2e as a base config (via a custom Cypress plugin)
  * Sets default values for project-level Cypress files (tests, etc)
  * Optionally loads a cypress.json from the current working directory as overrides

* Updated lockfile

packages/grafana-e2e/bin/grafana-e2e.js

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+
+// This file is used only for internal executions
+
+require('ts-node').register({
+  project: `${__dirname}/../tsconfig.json`,
+  transpileOnly: true,
+});
+
+require('../src/cli/index.ts').default();

packages/grafana-e2e/cypress/plugins/cy-extend-config.js

@@ -0,0 +1,60 @@
+'use strict';
+const {
+  promises: { readFile },
+} = require('fs');
+const { resolve } = require('path');
+
+module.exports = async baseConfig => {
+  // From CLI
+  const {
+    env: { CWD },
+  } = baseConfig;
+
+  if (CWD) {
+    const projectConfig = {
+      integrationFolder: `${CWD}/cypress/integration`,
+      screenshotsFolder: `${CWD}/cypress/screenshots`,
+      videosFolder: `${CWD}/cypress/videos`,
+    };
+
+    const customProjectConfig = await readFile(`${CWD}/cypress.json`, 'utf8')
+      .then(JSON.parse)
+      .then(config => {
+        const pathKeys = [
+          'fileServerFolder',
+          'fixturesFolder',
+          'ignoreTestFiles',
+          'integrationFolder',
+          'pluginsFile',
+          'screenshotsFolder',
+          'supportFile',
+          'testFiles',
+          'videosFolder',
+        ];
+
+        return Object.fromEntries(
+          Object.entries(config).map(([key, value]) => {
+            if (pathKeys.includes(key)) {
+              return [key, resolve(CWD, value)];
+            } else {
+              return [key, value];
+            }
+          })
+        );
+      })
+      .catch(error => {
+        if (error.code === 'ENOENT') {
+          // File is optional
+          return null;
+        } else {
+          // Unexpected error
+          throw error;
+        }
+      });
+
+    return { ...baseConfig, ...projectConfig, ...customProjectConfig };
+  } else {
+    // Temporary legacy support for Grafana core (using `yarn start`)
+    return baseConfig;
+  }
+};

packages/grafana-e2e/cypress/plugins/index.js

@@ -1,7 +1,8 @@
-const cypressTypeScriptPreprocessor = require('./cy-ts-preprocessor');
 const compareSnapshotsPlugin = require('./cy-compare-images');
+const cypressTypeScriptPreprocessor = require('./cy-ts-preprocessor');
+const extendConfigPlugin = require('./cy-extend-config');
 
-module.exports = on => {
+module.exports = (on, config) => {
   // yarn build fails with:
   // >> /Users/hugo/go/src/github.com/grafana/grafana/node_modules/stringmap/stringmap.js:99
   // >>             throw new Error("StringMap expected string key");
@@ -13,9 +14,13 @@ module.exports = on => {
     compareSnapshotsPlugin,
   });
   on('task', {
-    log(args) {
-      args.optional ? console.log(args.message, args.optional) : console.log(args.message);
+    log({ message, optional }) {
+      optional ? console.log(message, optional) : console.log(message);
       return null;
     },
   });
+
+  // Always extend with this library's config and return for diffing
+  // @todo remove this when possible: https://github.com/cypress-io/cypress/issues/5674
+  return extendConfigPlugin(config);
 };

packages/grafana-e2e/package.json

@@ -15,6 +15,9 @@
     "directory": "packages/grafana-e2e"
   },
   "main": "src/index.ts",
+  "bin": {
+    "grafana-e2e": "bin/grafana-e2e.js"
+  },
   "scripts": {
     "build": "grafana-toolkit package:build --scope=e2e",
     "bundle": "rollup -c rollup.config.ts",
@@ -28,19 +31,24 @@
   "devDependencies": {
     "@cypress/webpack-preprocessor": "4.1.1",
     "@grafana/tsconfig": "^1.0.0-rc1",
-    "blink-diff": "1.0.13",
+    "@types/node": "13.7.7",
     "rollup": "1.6.0",
     "rollup-plugin-commonjs": "9.2.1",
+    "rollup-plugin-copy": "3.3.0",
     "rollup-plugin-node-resolve": "4.0.1",
     "rollup-plugin-sourcemaps": "0.4.2",
     "rollup-plugin-terser": "4.0.4",
     "rollup-plugin-typescript2": "0.19.3",
     "rollup-plugin-visualizer": "0.9.2",
     "ts-loader": "6.2.1",
+    "ts-node": "8.5.0",
     "typescript": "3.7.2"
   },
   "types": "src/index.ts",
   "dependencies": {
-    "cypress": "3.7.0"
+    "blink-diff": "1.0.13",
+    "commander": "4.1.1",
+    "cypress": "3.7.0",
+    "execa": "4.0.0"
   }
 }

packages/grafana-e2e/rollup.config.ts

@@ -1,33 +1,38 @@
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
+import copy from 'rollup-plugin-copy';
 import sourceMaps from 'rollup-plugin-sourcemaps';
 import { terser } from 'rollup-plugin-terser';
 
-const pkg = require('./package.json');
+const { name } = require('./package.json');
 
-const libraryName = pkg.name;
+const buildCjsPackage = ({ env }) => ({
+  input: 'compiled/index.js',
+  output: {
+    file: `dist/index.${env}.js`,
+    name,
+    format: 'cjs',
+    sourcemap: true,
+    exports: 'named',
+    globals: {},
+  },
+  plugins: [
+    copy({
+      flatten: false,
+      targets: [
+        { src: 'compiled/bin/**/*.*', dest: 'dist/' },
+        { src: 'compiled/cli/**/*.*', dest: 'dist/' },
+        { src: 'cypress.json', dest: 'dist/' },
+        { src: 'cypress/**/*.+(js|ts)', dest: 'dist/cypress/' },
+      ],
+    }),
+    commonjs({
+      include: /node_modules/,
+    }),
+    resolve(),
+    sourceMaps(),
+    env === 'production' && terser(),
+  ],
+});
 
-const buildCjsPackage = ({ env }) => {
-  return {
-    input: `compiled/index.js`,
-    output: [
-      {
-        file: `dist/index.${env}.js`,
-        name: libraryName,
-        format: 'cjs',
-        sourcemap: true,
-        exports: 'named',
-        globals: {},
-      },
-    ],
-    plugins: [
-      commonjs({
-        include: /node_modules/,
-      }),
-      resolve(),
-      sourceMaps(),
-      env === 'production' && terser(),
-    ],
-  };
-};
 export default [buildCjsPackage({ env: 'development' }), buildCjsPackage({ env: 'production' })];

packages/grafana-e2e/src/bin/grafana-e2e.ts

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+
+import cli from '../cli/index';
+
+cli();

packages/grafana-e2e/src/cli/index.ts

@@ -0,0 +1,40 @@
+import { resolve, sep } from 'path';
+import execa, { Options } from 'execa';
+import program from 'commander';
+
+const cypress = (commandName: string) => {
+  // Support running an unpublished dev build
+  const parentPath = resolve(`${__dirname}/../`);
+  const parentDirname = parentPath.split(sep).pop();
+  const projectPath = resolve(`${parentPath}${parentDirname === 'dist' ? '/..' : ''}`);
+
+  const cypressOptions = [commandName, '--env', `CWD=${process.cwd()}`, `--project=${projectPath}`];
+
+  const execaOptions: Options = {
+    cwd: __dirname,
+    stdio: 'inherit',
+  };
+
+  return execa(`${projectPath}/node_modules/.bin/cypress`, cypressOptions, execaOptions)
+    .then(() => {}) // no return value
+    .catch(error => console.error(error.message));
+};
+
+export default () => {
+  const configOption = '-c, --config <path>';
+  const configDescription = 'path to JSON file where configuration values are set; defaults to "cypress.json"';
+
+  program
+    .command('open')
+    .description('runs tests within the interactive GUI')
+    .option(configOption, configDescription)
+    .action(() => cypress('open'));
+
+  program
+    .command('run')
+    .description('runs tests from the CLI without the GUI')
+    .option(configOption, configDescription)
+    .action(() => cypress('run'));
+
+  program.parse(process.argv);
+};

packages/grafana-e2e/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "declarationDir": "dist",
+    "module": "commonjs",
     "outDir": "compiled",
     "rootDirs": ["."],
     "typeRoots": ["node_modules/@types"],