Skip to content

Commit

Permalink
feat(stark-testing): replace karma-typescript by karma + `@angula…
Browse files Browse the repository at this point in the history
…r/devkit:build-angular`

Increase test speed thanks to karma + stop use "commonjs" module during test.

BREAKING CHANGE:
Adapt angular.json, package.json and base.spec.ts files.

  Check test config in "angular.json":
  ```
  // ...
  "test": {
    "builder": "@angular-builders/custom-webpack:karma",
    "options": {
      "main": "base.spec.ts",
      "karmaConfig": "./karma.conf.js",
      "tsConfig": "tsconfig.spec.json"
    }
  }
  ```

  Check tests scripts in "package.json":
  ```
  // BEFORE
  "test-fast": "karma start",
  "test-fast:ci": "karma start karma.conf.ci.js",

  // AFTER
  "test-fast": "npm run ng test",
  "test-fast:ci": "cross-env CI=1 npm run ng test --code-coverage",
  ```

  Adapt "base.spec.ts" file as follows:
  ```typescript
  "use strict";

  import "core-js/es";
  import "core-js/proposals/reflect-metadata";

  // IE polyfills

  // See https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill
  /* tslint:disable:no-unbound-method */
  if (!Element.prototype.matches) {
  	Element.prototype.matches = (<any>Element.prototype).msMatchesSelector ||
  	  Element.prototype.webkitMatchesSelector;
  }
  /* tslint:enable:no-unbound-method */

  // See: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach#Polyfill
  if ((<any>window).NodeList && !NodeList.prototype.forEach) {
  	(<any>NodeList.prototype).forEach = Array.prototype.forEach;
  }

  /* tslint:disable:no-import-side-effect */
  import "zone.js/dist/zone";
  import "zone.js/dist/zone-testing";
  import "zone.js/dist/long-stack-trace-zone";
  /* tslint:enable:no-import-side-effect */

  // define global environment variable (used in some places in stark-core and stark-ui)
  global["ENV"] = "development";

  import { getTestBed } from "@angular/core/testing";
  import {
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting
  } from "@angular/platform-browser-dynamic/testing";

  // tslint:disable:completed-docs bool-param-default
  declare const require: {
  	context(path: string, deep?: boolean, filter?: RegExp): {
  		keys(): string[];
  		<T>(id: string): T;
  	};
  };
  getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

  // Then we find all the tests.
  const context = require.context('./src', true, /\.spec\.ts$/);
  // And load the modules.
  context.keys().forEach(context);
  ```
  • Loading branch information
SuperITMan committed May 5, 2021
1 parent c13709f commit a9e06dc
Show file tree
Hide file tree
Showing 20 changed files with 4,577 additions and 2,279 deletions.
6,303 changes: 4,425 additions & 1,878 deletions package-lock.json

Large diffs are not rendered by default.

49 changes: 0 additions & 49 deletions packages/karma.conf.ci.js

This file was deleted.

79 changes: 22 additions & 57 deletions packages/karma.conf.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,67 +5,34 @@ const helpers = require("./stark-testing/helpers");
*/
const defaultKarmaConfig = require("./stark-testing/karma.conf.js").rawKarmaConfig;

// entry files of the "@nationalbankbelgium/stark-ui" module imported in mock files
const karmaTypescriptFiles = [{ pattern: helpers.root("public_api.ts") }, { pattern: helpers.root("testing/**/*.ts") }];
const customReportsConfig = { ...defaultKarmaConfig.coverageIstanbulReporter["report-config"] };
let packageDir = "/packages/";

const karmaTypescriptBundlerAlias = {
// adapt the resolution of the stark-core module to the UMD module
"@nationalbankbelgium/stark-core": "../../dist/packages/stark-core/bundles/stark-core.umd.js",
"@nationalbankbelgium/stark-core/testing": "../../dist/packages/stark-core/bundles/stark-core-testing.umd.js",
// adapt the resolution of the 3rd party modules used in stark-core
"@angularclass/hmr": "../stark-core/node_modules/@angularclass/hmr/dist/index.js",
"@ng-idle/core": "../stark-core/node_modules/@ng-idle/core/bundles/ng-idle-core.umd.js",
"@ng-idle/keepalive": "../stark-core/node_modules/@ng-idle/keepalive/bundles/ng-idle-keepalive.umd.js",
"@ngrx/store": "../stark-core/node_modules/@ngrx/store/bundles/store.umd.js",
"@ngrx/store/src/models": "../stark-core/node_modules/@ngrx/store/bundles/store.umd.js",
"@ngrx/effects": "../stark-core/node_modules/@ngrx/effects/bundles/effects.umd.js",
"@ngrx/effects/testing": "../stark-core/node_modules/@ngrx/effects/bundles/effects-testing.umd.js",
"@ngx-translate/core": "../stark-core/node_modules/@ngx-translate/core/bundles/ngx-translate-core.umd.js",
"@uirouter/angular": "../stark-core/node_modules/@uirouter/angular/bundles/uirouter-angular.umd.js",
"@uirouter/core": "../stark-core/node_modules/@uirouter/core/lib/index.js",
"@uirouter/rx": "../stark-core/node_modules/@uirouter/rx/lib/index.js",
cerialize: "../stark-core/node_modules/cerialize/index.js",
"class-validator": "../stark-core/node_modules/class-validator/index.js",
"deep-freeze-strict": "../stark-core/node_modules/deep-freeze-strict/index.js",
ibantools: "../stark-core/node_modules/ibantools/build/ibantools.js",
"lodash-es": "../stark-core/node_modules/lodash-es/lodash.js",
"lodash-es/cloneDeep": "../stark-core/node_modules/lodash-es/cloneDeep.js",
"lodash-es/find": "../stark-core/node_modules/lodash-es/find.js",
"lodash-es/findIndex": "../stark-core/node_modules/lodash-es/findIndex.js",
"lodash-es/floor": "../stark-core/node_modules/lodash-es/floor.js",
"lodash-es/get": "../stark-core/node_modules/lodash-es/get.js",
"lodash-es/isEmpty": "../stark-core/node_modules/lodash-es/isEmpty.js",
"lodash-es/isEqual": "../stark-core/node_modules/lodash-es/isEqual.js",
"lodash-es/merge": "../stark-core/node_modules/lodash-es/merge.js",
"lodash-es/noop": "../stark-core/node_modules/lodash-es/noop.js",
"lodash-es/sortBy": "../stark-core/node_modules/lodash-es/sortBy.js",
"lodash-es/reduce": "../stark-core/node_modules/lodash-es/reduce.js",
"lodash-es/startCase": "../stark-core/node_modules/lodash-es/startCase.js",
"lodash-es/uniqueId": "../stark-core/node_modules/lodash-es/uniqueId.js",
moment: "../stark-core/node_modules/moment/moment.js"
};
if (helpers.currentFolder === "stark") {
const args = process.argv.slice(2);
for (const arg of args) {
if (arg.match(/^stark-\w+$/)) {
packageDir += arg;
}
}
} else if (helpers.currentFolder.match(/^stark-\w+$/)) {
packageDir += helpers.currentFolder;
} else {
console.error("No stark package defined!");
exit(1);
}

// start customizing the KarmaCI configuration from stark-testing
const starkPackagesSpecificConfiguration = {
...defaultKarmaConfig,
// add missing files due to "@nationalbankbelgium/stark-*" imports used in mock files of the testing sub-package
files: [...defaultKarmaConfig.files, ...karmaTypescriptFiles],
karmaTypescriptConfig: {
...defaultKarmaConfig.karmaTypescriptConfig,
bundlerOptions: {
...defaultKarmaConfig.karmaTypescriptConfig.bundlerOptions,
// change the module resolution for the KarmaTypescript bundler
resolve: {
alias: karmaTypescriptBundlerAlias
},
// Overwrite the karmaTypescriptConfig to pass the correct preset to karma-typescript-es6-transform
transforms: [
require(helpers.root("../stark-testing/node_modules/karma-typescript-angular2-transform")),
require(helpers.root("../stark-testing/node_modules/karma-typescript-es6-transform"))({
presets: [helpers.root("../stark-testing/node_modules/@babel/preset-env")] // add preset in a way that the package can find it
})
]
}
coverageIstanbulReporter: {
...defaultKarmaConfig.coverageIstanbulReporter,
dir:
helpers.currentFolder === "stark"
? helpers.root("reports/coverage" + packageDir)
: helpers.root("../../reports/coverage" + packageDir),
"report-config": customReportsConfig
}
};

Expand All @@ -74,7 +41,5 @@ module.exports = {
default: function (config) {
return config.set(starkPackagesSpecificConfiguration);
},
karmaTypescriptBundlerAlias,
karmaTypescriptFiles,
rawKarmaConfig: starkPackagesSpecificConfiguration
};
33 changes: 21 additions & 12 deletions packages/stark-core/base.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,31 @@ import "core-js/es";
import "core-js/proposals/reflect-metadata";

/* tslint:disable:no-import-side-effect */
// FIXME: change when https://github.com/monounity/karma-typescript/issues/320 is resolved
// tslint:disable-next-line:import-blacklist
import "lodash-es"; // see https://github.com/monounity/karma-typescript/issues/150#issuecomment-318620280
import "zone.js/dist/zone";
import "zone.js/dist/zone-testing";
import "zone.js/dist/long-stack-trace-zone";
import "zone.js/dist/proxy"; // since zone.js 0.6.15
import "zone.js/dist/sync-test";
import "zone.js/dist/jasmine-patch"; // put here since zone.js 0.6.14
import "zone.js/dist/async-test";
import "zone.js/dist/fake-async-test";
/* tslint:enable:no-import-side-effect */

import { TestBed } from "@angular/core/testing";
// define global environment variable (used in some places in stark-core and stark-ui)
global["ENV"] = "development";

import { getTestBed } from "@angular/core/testing";
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing";

TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
// tslint:disable:completed-docs bool-param-default
declare const require: {
context(
path: string,
deep?: boolean,
filter?: RegExp
): {
keys(): string[];
<T>(id: string): T;
};
};
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

// define global environment variable (used in some places in stark-core)
global["ENV"] = "development";
// Then we find all the tests.
const context = require.context("./src", true, /\.spec\.ts$/);
// And load the modules.
context.keys().forEach(context);
11 changes: 0 additions & 11 deletions packages/stark-core/karma.conf.ci.js

This file was deleted.

5 changes: 3 additions & 2 deletions packages/stark-core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -56,15 +56,16 @@
"docs": "compodoc",
"docs:coverage": "npm run docs -- --coverageTest 85 --coverageTestThresholdFail true",
"docs:serve": "npm run docs -- --watch --serve --port 4321",
"ng": "../../node_modules/.bin/ng",
"ngc": "node ../../node_modules/@angular/compiler-cli/src/main.js -p ./tsconfig.json",
"lint": "npm run lint-ts && npm run lint-css",
"lint-ts": "node ../../node_modules/tslint/bin/tslint --config ./tslint.json --project ./tsconfig.spec.json --format codeFrame",
"lint-ts:fix": "node --max_old_space_size=4096 ../../node_modules/tslint/bin/tslint --config ./tslint.json --project ./tsconfig.spec.json --format codeFrame --fix",
"lint-css": "node ../../node_modules/stylelint/bin/stylelint \"./(src|assets)/**/*.?(pc|sc|c|sa)ss\" --formatter \"string\" --allow-empty-input",
"test": "npm run lint && npm run test-fast",
"test:ci": "npm run lint && npm run test-fast:ci",
"test-fast": "node ../stark-testing/node_modules/karma/bin/karma start",
"test-fast:ci": "node ../stark-testing/node_modules/karma/bin/karma start karma.conf.ci.js",
"test-fast": "npm run ng test",
"test-fast:ci": "../../node_modules/.bin/cross-env CI=1 npm run ng test -- --code-coverage",
"tsc": "node ../../node_modules/typescript/bin/tsc -p ./tsconfig.json",
"tslint": "node ../../node_modules/tslint/bin/tslint",
"tslint-check": "tslint-config-prettier-check ./tslint.json"
Expand Down
3 changes: 0 additions & 3 deletions packages/stark-core/tsconfig.spec.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "commonjs"
},
"files": null,
"include": ["**/*.ts"]
}
35 changes: 22 additions & 13 deletions packages/stark-rbac/base.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,22 +18,31 @@ if ((<any>window).NodeList && !NodeList.prototype.forEach) {
}

/* tslint:disable:no-import-side-effect */
// FIXME: change when https://github.com/monounity/karma-typescript/issues/320 is resolved
// tslint:disable-next-line:import-blacklist
import "lodash-es"; // see https://github.com/monounity/karma-typescript/issues/150#issuecomment-318620280
import "zone.js/dist/zone";
import "zone.js/dist/zone-testing";
import "zone.js/dist/long-stack-trace-zone";
import "zone.js/dist/proxy"; // since zone.js 0.6.15
import "zone.js/dist/sync-test";
import "zone.js/dist/jasmine-patch"; // put here since zone.js 0.6.14
import "zone.js/dist/async-test";
import "zone.js/dist/fake-async-test";
/* tslint:enable:no-import-side-effect */

import { TestBed } from "@angular/core/testing";
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing";
// define global environment variable (used in some places in stark-core and stark-ui)
global["ENV"] = "development";

TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
import { getTestBed } from "@angular/core/testing";
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from "@angular/platform-browser-dynamic/testing";

// define global environment variable (used in some places in stark-ui)
global["ENV"] = "development";
// tslint:disable:completed-docs bool-param-default
declare const require: {
context(
path: string,
deep?: boolean,
filter?: RegExp
): {
keys(): string[];
<T>(id: string): T;
};
};
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

// Then we find all the tests.
const context = require.context("./src", true, /\.spec\.ts$/);
// And load the modules.
context.keys().forEach(context);
11 changes: 0 additions & 11 deletions packages/stark-rbac/karma.conf.ci.js

This file was deleted.

5 changes: 3 additions & 2 deletions packages/stark-rbac/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,16 @@
"docs": "compodoc",
"docs:coverage": "npm run docs -- --coverageTest 85 --coverageTestThresholdFail true",
"docs:serve": "npm run docs -- --watch --serve --port 4321",
"ng": "../../node_modules/.bin/ng",
"ngc": "node ../../node_modules/@angular/compiler-cli/src/main.js -p ./tsconfig.json",
"lint": "npm run lint-ts && npm run lint-css",
"lint-ts": "node ../../node_modules/tslint/bin/tslint --config ./tslint.json --project ./tsconfig.spec.json --format codeFrame",
"lint-ts:fix": "node --max_old_space_size=4096 ../../node_modules/tslint/bin/tslint --config ./tslint.json --project ./tsconfig.spec.json --format codeFrame --fix",
"lint-css": "node ../../node_modules/stylelint/bin/stylelint \"./(src|assets)/**/*.?(pc|sc|c|sa)ss\" --formatter \"string\" --allow-empty-input",
"test": "npm run lint && npm run test-fast",
"test:ci": "npm run lint && npm run test-fast:ci",
"test-fast": "node ../stark-testing/node_modules/karma/bin/karma start",
"test-fast:ci": "node ../stark-testing/node_modules/karma/bin/karma start karma.conf.ci.js",
"test-fast": "npm run ng test",
"test-fast:ci": "../../node_modules/.bin/cross-env CI=1 npm run ng test -- --code-coverage",
"tsc": "node ../../node_modules/typescript/bin/tsc -p ./tsconfig.json",
"tslint": "node ../../node_modules/tslint/bin/tslint",
"tslint-check": "tslint-config-prettier-check ./tslint.json"
Expand Down
3 changes: 0 additions & 3 deletions packages/stark-rbac/tsconfig.spec.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "commonjs"
},
"files": null,
"include": ["**/*.ts"]
}

0 comments on commit a9e06dc

Please sign in to comment.