From 23d72d25e4e2fd453d8653638d451625a4eccfbf Mon Sep 17 00:00:00 2001
From: Steven Vachon <contact@svachon.com>
Date: Tue, 10 Mar 2020 12:20:44 -0400
Subject: [PATCH] @grafana/e2e: fix runtime ts-loader errors with Cypress
 support files (#22688)

* Minor changes

* Only exclude installed packages that are not @grafana/e2e itself

* Explicitly load Cypress tsconfig for clarity

* Fix Cypress tsconfig

  * it was trying to extend a config that is not published
  * it needs to be commonjs
---
 ...-compare-images.js => compareSnapshots.js} |  1 -
 .../cypress/plugins/cy-ts-preprocessor.js     | 26 --------------
 .../{cy-extend-config.js => extendConfig.js}  |  0
 packages/grafana-e2e/cypress/plugins/index.js | 14 ++++----
 .../cypress/plugins/typescriptPreprocessor.js | 35 +++++++++++++++++++
 packages/grafana-e2e/cypress/tsconfig.json    |  3 +-
 6 files changed, 43 insertions(+), 36 deletions(-)
 rename packages/grafana-e2e/cypress/plugins/{cy-compare-images.js => compareSnapshots.js} (95%)
 delete mode 100644 packages/grafana-e2e/cypress/plugins/cy-ts-preprocessor.js
 rename packages/grafana-e2e/cypress/plugins/{cy-extend-config.js => extendConfig.js} (100%)
 create mode 100644 packages/grafana-e2e/cypress/plugins/typescriptPreprocessor.js

diff --git a/packages/grafana-e2e/cypress/plugins/cy-compare-images.js b/packages/grafana-e2e/cypress/plugins/compareSnapshots.js
similarity index 95%
rename from packages/grafana-e2e/cypress/plugins/cy-compare-images.js
rename to packages/grafana-e2e/cypress/plugins/compareSnapshots.js
index 4066eee109b..65702f52f11 100644
--- a/packages/grafana-e2e/cypress/plugins/cy-compare-images.js
+++ b/packages/grafana-e2e/cypress/plugins/compareSnapshots.js
@@ -1,4 +1,3 @@
-const fs = require('fs');
 const BlinkDiff = require('blink-diff');
 
 function compareSnapshotsPlugin(args) {
diff --git a/packages/grafana-e2e/cypress/plugins/cy-ts-preprocessor.js b/packages/grafana-e2e/cypress/plugins/cy-ts-preprocessor.js
deleted file mode 100644
index 02ab5016c13..00000000000
--- a/packages/grafana-e2e/cypress/plugins/cy-ts-preprocessor.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const wp = require('@cypress/webpack-preprocessor');
-
-const webpackOptions = {
-  resolve: {
-    extensions: ['.ts', '.js'],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        exclude: [/node_modules/],
-        use: [
-          {
-            loader: 'ts-loader',
-          },
-        ],
-      },
-    ],
-  },
-};
-
-const options = {
-  webpackOptions,
-};
-
-module.exports = wp(options);
diff --git a/packages/grafana-e2e/cypress/plugins/cy-extend-config.js b/packages/grafana-e2e/cypress/plugins/extendConfig.js
similarity index 100%
rename from packages/grafana-e2e/cypress/plugins/cy-extend-config.js
rename to packages/grafana-e2e/cypress/plugins/extendConfig.js
diff --git a/packages/grafana-e2e/cypress/plugins/index.js b/packages/grafana-e2e/cypress/plugins/index.js
index 6dc9773ed72..3865d647c00 100644
--- a/packages/grafana-e2e/cypress/plugins/index.js
+++ b/packages/grafana-e2e/cypress/plugins/index.js
@@ -1,6 +1,6 @@
-const compareSnapshotsPlugin = require('./cy-compare-images');
-const cypressTypeScriptPreprocessor = require('./cy-ts-preprocessor');
-const extendConfigPlugin = require('./cy-extend-config');
+const compareSnapshotsPlugin = require('./compareSnapshots');
+const extendConfig = require('./extendConfig');
+const typescriptPreprocessor = require('./typescriptPreprocessor');
 
 module.exports = (on, config) => {
   // yarn build fails with:
@@ -9,10 +9,8 @@ module.exports = (on, config) => {
   // on('task', {
   //   failed: require('cypress-failed-log/src/failed')(),
   // });
-  on('file:preprocessor', cypressTypeScriptPreprocessor);
-  on('task', {
-    compareSnapshotsPlugin,
-  });
+  on('file:preprocessor', typescriptPreprocessor);
+  on('task', { compareSnapshotsPlugin });
   on('task', {
     log({ message, optional }) {
       optional ? console.log(message, optional) : console.log(message);
@@ -22,5 +20,5 @@ module.exports = (on, config) => {
 
   // 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);
+  return extendConfig(config);
 };
diff --git a/packages/grafana-e2e/cypress/plugins/typescriptPreprocessor.js b/packages/grafana-e2e/cypress/plugins/typescriptPreprocessor.js
new file mode 100644
index 00000000000..da12a823396
--- /dev/null
+++ b/packages/grafana-e2e/cypress/plugins/typescriptPreprocessor.js
@@ -0,0 +1,35 @@
+const { resolve } = require('path');
+const wp = require('@cypress/webpack-preprocessor');
+
+const packageRoot = resolve(`${__dirname}/../../`);
+const packageModules = `${packageRoot}/node_modules`;
+
+const webpackOptions = {
+  module: {
+    rules: [
+      {
+        include: modulePath => {
+          return modulePath.startsWith(packageRoot) && !modulePath.startsWith(packageModules);
+        },
+        test: /\.ts$/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              configFile: `${__dirname}/../tsconfig.json`,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+};
+
+const options = {
+  webpackOptions,
+};
+
+module.exports = wp(options);
diff --git a/packages/grafana-e2e/cypress/tsconfig.json b/packages/grafana-e2e/cypress/tsconfig.json
index c5d0b72aed0..41a42f4f422 100644
--- a/packages/grafana-e2e/cypress/tsconfig.json
+++ b/packages/grafana-e2e/cypress/tsconfig.json
@@ -1,7 +1,8 @@
 {
   "compilerOptions": {
+    "module": "commonjs",
     "types": ["cypress"]
   },
-  "extends": "../tsconfig.json",
+  "extends": "@grafana/tsconfig",
   "include": ["**/*.ts"]
 }