From 9846718d1a6264fc6084bf82b454221a1ecb627f Mon Sep 17 00:00:00 2001 From: Christian Linne Date: Mon, 22 Oct 2018 14:03:08 +0200 Subject: [PATCH 1/3] feat(e2e): Attempt to use ts for cypress tests ... unluckily, the type checker is going mad here. --- tests/e2e/plugins/index.js | 20 ++++++++++++++++++++ tests/e2e/specs/{test.js => test.ts} | 3 +++ tests/e2e/tsconfig.json | 12 ++++++++++++ tsconfig.json | 3 ++- 4 files changed, 37 insertions(+), 1 deletion(-) rename tests/e2e/specs/{test.js => test.ts} (77%) create mode 100644 tests/e2e/tsconfig.json diff --git a/tests/e2e/plugins/index.js b/tests/e2e/plugins/index.js index ae74253..958bf89 100644 --- a/tests/e2e/plugins/index.js +++ b/tests/e2e/plugins/index.js @@ -1,6 +1,26 @@ // https://docs.cypress.io/guides/guides/plugins-guide.html +/* eslint-disable import/no-extraneous-dependencies global-require */ +const webpack = require("@cypress/webpack-preprocessor"); module.exports = (on, config) => { + on("file:preprocessor", webpack({ + webpackOptions: { + resolve: { + extensions: [".ts", ".tsx", ".js"] + }, + module: { + rules: [ + { + test: /\.tsx?$/, + loader: "ts-loader", + options: { transpileOnly: false } + } + ] + } + }, + watchOptions: {} + })); + return Object.assign({}, config, { fixturesFolder: "tests/e2e/fixtures", integrationFolder: "tests/e2e/specs", diff --git a/tests/e2e/specs/test.js b/tests/e2e/specs/test.ts similarity index 77% rename from tests/e2e/specs/test.js rename to tests/e2e/specs/test.ts index c9a96b4..379065e 100644 --- a/tests/e2e/specs/test.js +++ b/tests/e2e/specs/test.ts @@ -1,4 +1,7 @@ // https://docs.cypress.io/api/introduction/api.html +/// + +/// describe("My First Test", () => { it("Visits the app root url", () => { diff --git a/tests/e2e/tsconfig.json b/tests/e2e/tsconfig.json new file mode 100644 index 0000000..118edf5 --- /dev/null +++ b/tests/e2e/tsconfig.json @@ -0,0 +1,12 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "target": "es5", + "lib": ["es5", "dom"], + "baseUrl": " ../../node_modules", + "types": ["cypress"] + }, + "include": [ + "**/*.ts" + ] +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 9ba7c82..0b23573 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -47,6 +47,7 @@ }, "exclude": [ "node_modules", - "build" + "build", + "test/e2e" ] } From 1782ba396bbc580199a1adb9846a7da42b6df68c Mon Sep 17 00:00:00 2001 From: Christian Linne Date: Tue, 23 Oct 2018 08:36:55 +0200 Subject: [PATCH 2/3] Second attempt: Try to disable external type-checker ... still no luck. --- tests/e2e/tsconfig.json | 1 - vue.config.js | 48 ++++++++++++++++++++++++++++++++--------- 2 files changed, 38 insertions(+), 11 deletions(-) diff --git a/tests/e2e/tsconfig.json b/tests/e2e/tsconfig.json index 118edf5..d416f4e 100644 --- a/tests/e2e/tsconfig.json +++ b/tests/e2e/tsconfig.json @@ -1,5 +1,4 @@ { - "extends": "../../tsconfig.json", "compilerOptions": { "target": "es5", "lib": ["es5", "dom"], diff --git a/vue.config.js b/vue.config.js index dc3fc2a..9ddaa60 100644 --- a/vue.config.js +++ b/vue.config.js @@ -33,18 +33,20 @@ module.exports = { .when(process.env.NODE_ENV === "production", config => { // Use a runtime chunk to optimize cache busting. // Otherwise, the runtime information would be added to the entry point. - config - .optimization - .runtimeChunk({ name: "runtime" }); + if (!process.env.CYPRESS_ENV) { + config + .optimization + .runtimeChunk({ name: "runtime" }); + } - // Configure path alias for rxjs. - const rxPaths = require("rxjs/_esm2015/path-mapping"); - const rxResolvedPaths = rxPaths(); - for (const p in rxResolvedPaths) { - if (rxResolvedPaths.hasOwnProperty(p)) { - config.resolve.alias.set(p, rxResolvedPaths[p]); - } + // Configure path alias for rxjs. + const rxPaths = require("rxjs/_esm2015/path-mapping"); + const rxResolvedPaths = rxPaths(); + for (const p in rxResolvedPaths) { + if (rxResolvedPaths.hasOwnProperty(p)) { + config.resolve.alias.set(p, rxResolvedPaths[p]); } + } // Configure style purging. const purgeOptions = { @@ -82,6 +84,32 @@ module.exports = { return args; }) ; + + // Disable fork-ts-checker and switch ts-loader to also perform type checking. + // Some optimizations are not applied otherwise, thus... + // Unluckily, this means that we cannot use thread-loader for this ... + config + .plugins + .delete("fork-ts-checker"); + + config + .module + .rule("ts") + .uses + .delete("thread-loader"); + + config + .module + .rule("ts") + .use("ts-loader") + .options({ + transpileOnly: false, + appendTsSuffixTo: [ + "\\.vue$" + ], + happyPackMode: false, + allowTsInNodeModules: true + }); }); } }; \ No newline at end of file From 40f650ff4f6af59b08f042f12d9254b80c9ad198 Mon Sep 17 00:00:00 2001 From: Christian Linne Date: Wed, 24 Oct 2018 14:18:58 +0200 Subject: [PATCH 3/3] Finally working ... typo on exclude clause... --- package.json | 4 ++-- tests/e2e/specs/test.ts | 2 -- tsconfig.json | 2 +- vue.config.js | 26 -------------------------- 4 files changed, 3 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index 688b502..70108a9 100644 --- a/package.json +++ b/package.json @@ -83,12 +83,12 @@ } }, "lint-staged": { - "*.ts": [ + "src/**/*.ts": [ "vue-cli-service lint --fix", "prettier --write", "git add" ], - "*.vue": [ + "src/**/*.vue": [ "vue-cli-service lint --fix", "stylelint", "prettier --write", diff --git a/tests/e2e/specs/test.ts b/tests/e2e/specs/test.ts index 379065e..e786e7e 100644 --- a/tests/e2e/specs/test.ts +++ b/tests/e2e/specs/test.ts @@ -1,8 +1,6 @@ // https://docs.cypress.io/api/introduction/api.html /// -/// - describe("My First Test", () => { it("Visits the app root url", () => { cy.visit("/"); diff --git a/tsconfig.json b/tsconfig.json index 0b23573..c6d59e2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -48,6 +48,6 @@ "exclude": [ "node_modules", "build", - "test/e2e" + "tests/e2e" ] } diff --git a/vue.config.js b/vue.config.js index 9ddaa60..ab559ac 100644 --- a/vue.config.js +++ b/vue.config.js @@ -84,32 +84,6 @@ module.exports = { return args; }) ; - - // Disable fork-ts-checker and switch ts-loader to also perform type checking. - // Some optimizations are not applied otherwise, thus... - // Unluckily, this means that we cannot use thread-loader for this ... - config - .plugins - .delete("fork-ts-checker"); - - config - .module - .rule("ts") - .uses - .delete("thread-loader"); - - config - .module - .rule("ts") - .use("ts-loader") - .options({ - transpileOnly: false, - appendTsSuffixTo: [ - "\\.vue$" - ], - happyPackMode: false, - allowTsInNodeModules: true - }); }); } }; \ No newline at end of file