feat: unit-test-runner 3.0 with optional coverage report handling (#5610)

* feat: unit-test-runner 3.0 with optional coverage report handling

* refactor: cleanup logging

* fix: spec regex for js projects

Co-authored-by: Igor Randjelovic <rigor789@gmail.com>

Author: NathanWalker

config/test-dependencies.json

@@ -1,13 +1,15 @@
 [
+    {
+        "name": "@jsdevtools/coverage-istanbul-loader"
+    },
     {
         "name": "karma"
     },
     {
-        "name": "karma-nativescript-launcher"
+        "name": "karma-coverage"
     },
     {
-        "name": "karma-webpack",
-        "excludedPeerDependencies": ["webpack"]
+        "name": "karma-nativescript-launcher"
     },
     {
         "name": "mocha",
@@ -48,5 +50,8 @@
         "name": "@types/qunit",
         "framework": "qunit",
         "projectType": ".ts"
+    },
+    {
+        "name": "nyc"
     }
 ]

lib/commands/test-init.ts

@@ -134,6 +134,10 @@ class TestInitCommand implements ICommand {
 			this.$projectData
 		);
 
+		this.$logger.clearScreen();
+
+		const bufferedLogs = [];
+
 		const testsDir = path.join(this.$projectData.appDirectoryPath, "tests");
 		const projectTestsDir = path.relative(
 			this.$projectData.projectDir,
@@ -145,8 +149,13 @@ class TestInitCommand implements ICommand {
 		);
 		let shouldCreateSampleTests = true;
 		if (this.$fs.exists(testsDir)) {
-			this.$logger.info(
-				`${projectTestsDir} directory already exists, will not create an example test project.`
+			const specFilenamePattern = `<filename>.spec${projectFilesExtension}`;
+			bufferedLogs.push(
+				[
+					`Note: The "${projectTestsDir}" directory already exists, will not create example tests in the project.`,
+					`You may create "${specFilenamePattern}" files anywhere you'd like.`,
+					"",
+				].join("\n").yellow
 			);
 			shouldCreateSampleTests = false;
 		}
@@ -172,23 +181,76 @@ class TestInitCommand implements ICommand {
 		const exampleFilePath = this.$resources.resolvePath(
 			`test/example.${frameworkToInstall}${projectFilesExtension}`
 		);
+		const targetExampleTestPath = path.join(
+			testsDir,
+			`example.spec${projectFilesExtension}`
+		);
 
 		if (shouldCreateSampleTests && this.$fs.exists(exampleFilePath)) {
-			this.$fs.copyFile(
-				exampleFilePath,
-				path.join(testsDir, `example${projectFilesExtension}`)
+			this.$fs.copyFile(exampleFilePath, targetExampleTestPath);
+			const targetExampleTestRelativePath = path.relative(
+				projectDir,
+				targetExampleTestPath
 			);
-			this.$logger.info(
-				`\nExample test file created in ${projectTestsDir}`.yellow
+			bufferedLogs.push(
+				`Added example test: ${targetExampleTestRelativePath.yellow}`
 			);
-		} else {
-			this.$logger.info(
-				`\nPlace your test files under ${projectTestsDir}`.yellow
+		}
+
+		// test main entry
+		const testMainResourcesPath = this.$resources.resolvePath(
+			`test/test-main${projectFilesExtension}`
+		);
+		const testMainPath = path.join(
+			this.$projectData.appDirectoryPath,
+			`test${projectFilesExtension}`
+		);
+
+		if (!this.$fs.exists(testMainPath)) {
+			this.$fs.copyFile(testMainResourcesPath, testMainPath);
+			const testMainRelativePath = path.relative(projectDir, testMainPath);
+			bufferedLogs.push(
+				`Main test entrypoint created: ${testMainRelativePath.yellow}`
 			);
 		}
 
+		const testTsConfigTemplate = this.$resources.readText(
+			"test/tsconfig.spec.json"
+		);
+		const testTsConfig = _.template(testTsConfigTemplate)({
+			basePath: this.$projectData.getAppDirectoryRelativePath(),
+		});
+
+		this.$fs.writeFile(
+			path.join(projectDir, "tsconfig.spec.json"),
+			testTsConfig
+		);
+		bufferedLogs.push(`Added/replaced ${"tsconfig.spec.json".yellow}`);
+
+		const greyDollarSign = "$".grey;
 		this.$logger.info(
-			'Run your tests using the "$ ns test <platform>" command.'.yellow
+			[
+				[
+					`Tests using`.green,
+					frameworkToInstall.cyan,
+					`were successfully initialized.`.green,
+				].join(" "),
+				"",
+				...bufferedLogs,
+				"",
+				`Note: @nativescript/unit-test-runner was included in "dependencies" as a convenience to automatically adjust your app's Info.plist on iOS and AndroidManifest.xml on Android to ensure the socket connects properly.`
+					.yellow,
+				"",
+				`For production you may want to move to "devDependencies" and manage the settings yourself.`
+					.yellow,
+				"",
+				"",
+				`You can now run your tests:`,
+				"",
+				`  ${greyDollarSign} ${"ns test ios".green}`,
+				`  ${greyDollarSign} ${"ns test android".green}`,
+				"",
+			].join("\n")
 		);
 	}
 }

lib/controllers/migrate-controller.ts

@@ -235,7 +235,7 @@ export class MigrateController
 		{
 			packageName: "@nativescript/unit-test-runner",
 			minVersion: "1.0.0",
-			desiredVersion: "~2.0.5",
+			desiredVersion: "~3.0.0",
 			async shouldMigrateAction(
 				dependency: IMigrationDependency,
 				projectData: IProjectData,
@@ -1167,10 +1167,7 @@ export class MigrateController
 		const dependencies: IMigrationDependency[] = [
 			{
 				packageName: "karma-webpack",
-				minVersion: "3.0.5",
-				desiredVersion: "~5.0.0",
-				isDev: true,
-				shouldAddIfMissing: true,
+				shouldRemove: true,
 			},
 			{
 				packageName: "karma-jasmine",

lib/services/test-execution-service.ts

@@ -190,6 +190,7 @@ export class TestExecutionService implements ITestExecutionService {
 				path: this.$options.path,
 				tns: process.argv[1],
 				node: process.execPath,
+				env: this.$options.env,
 				options: {
 					debugTransport: this.$options.debugTransport,
 					debugBrk: this.$options.debugBrk,

package-lock.json

@@ -1,4 +1,3 @@
-const filePatterns = [${ testFiles }];
 module.exports = function (config) {
   const options = {
 
@@ -11,8 +10,8 @@ module.exports = function (config) {
     frameworks: [${ frameworks }],
 
 
-    // list of files / patterns to load in the browser
-    files: filePatterns,
+    // list of files / patterns to load in the browser. Leave empty for webpack projects
+    // files: [],
 
 
     // list of files to exclude
@@ -31,6 +30,16 @@ module.exports = function (config) {
     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
     reporters: ['progress'],
 
+    // configure optional coverage, enable via --env.codeCoverage
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+
 
     // web server port
     port: 9876,
@@ -74,41 +83,9 @@ module.exports = function (config) {
     singleRun: false
   };
 
-  setWebpackPreprocessor(config, options);
-  setWebpack(config, options);
-
-  config.set(options);
-}
-module.exports.filePatterns = filePatterns;
-// You can also use RegEx if you'd like:
-// module.exports.filesRegex = /\.\/tests\/.*\.ts$/;
-
-function setWebpackPreprocessor(config, options) {
-  if (config && config.bundle) {
-    if (!options.preprocessors) {
-      options.preprocessors = {};
-    }
-
-    options.files.forEach(file => {
-      if (!options.preprocessors[file]) {
-        options.preprocessors[file] = [];
-      }
-      options.preprocessors[file].push('webpack');
-    });
+  if(config._NS && config._NS.env && config._NS.env.codeCoverage) {
+    options.reporters = (options.reporters || []).concat(['coverage']);
   }
-}
 
-function setWebpack(config, options) {
-  if (config && config.bundle) {
-    const env = {};
-    env[config.platform] = true;
-    env.sourceMap = config.debugBrk;
-    env.appPath = config.appPath;
-    env.karmaWebpack = true;
-    options.webpack = require('./webpack.config')(env);
-    delete options.webpack.entry;
-    delete options.webpack.output.libraryTarget;
-    const invalidPluginsForUnitTesting = ["GenerateBundleStarterPlugin", "GenerateNativeScriptEntryPointsPlugin"];
-    options.webpack.plugins = options.webpack.plugins.filter(p => !invalidPluginsForUnitTesting.includes(p.constructor.name));
-  }
+  config.set(options);
 }

resources/test/karma.conf.js

@@ -0,0 +1,9 @@
+import { runTestApp } from "@nativescript/unit-test-runner";
+// import other polyfills here
+
+runTestApp({
+	runTests: () => {
+		const tests = require.context("./", true, /\.spec\.js$/);
+		tests.keys().map(tests);
+	},
+});

resources/test/test-main.js

@@ -0,0 +1,11 @@
+import { runTestApp } from "@nativescript/unit-test-runner";
+// import other polyfills here
+
+declare let require: any;
+
+runTestApp({
+	runTests: () => {
+		const tests = require.context("./", true, /\.spec\.ts$/);
+		tests.keys().map(tests);
+	},
+});

resources/test/test-main.ts

@@ -0,0 +1,9 @@
+{
+	"extends": "./tsconfig.json",
+    "compilerOptions": {
+        "sourceMap": true
+    },
+	"files": ["${ basePath }/test.ts"],
+	"include": ["${ basePath }/**/*.spec.ts", "${ basePath }/**/*.d.ts"],
+	"exclude": ["node_modules", "platforms", "e2e"]
+}