We have an Angular CLI project. We have our files spec.ts
in different places, verified through Karma without any specific data.
We want to use, as described in the Angular doc white paper, some helper classes that help us test various things in the application. For example, an official document places a testing/index.ts
function for simulating click processing in a file . Then it can be used in all tests.
The problem in the project in the document uses SystemJS, and I would like to reuse these helpers in the Angular CLI project structure.
Is there any way in the structure of the Angular CLI project so that this file is loaded and their function is available in our files spec.ts
?
Karma.conf mentions the file src/test.ts
, but I don't know if this might be the right place for these stubs and helper functions.
Sample Files
Here are the files from the document and karma.conf.js created using the Angular CLI.
Angular.io doc testing/index.ts
file:
import { DebugElement } from '@angular/core';
import { tick, ComponentFixture } from '@angular/core/testing';
export * from './jasmine-matchers';
export * from './router-stubs';
export function advance(f: ComponentFixture<any>): void {
tick();
f.detectChanges();
}
export function newEvent(eventName: string, bubbles = false, cancelable = false) {
let evt = document.createEvent('CustomEvent');
evt.initCustomEvent(eventName, bubbles, cancelable, null);
return evt;
}
export const ButtonClickEvents = {
left: { button: 0 },
right: { button: 2 }
};
export function click(el: DebugElement | HTMLElement, eventObj: any = ButtonClickEvents.left): void {
if (el instanceof HTMLElement) {
el.click();
} else {
el.triggerEventHandler('click', eventObj);
}
}
testing/router-stubs.ts
file:
export { ActivatedRoute, Router, RouterLink, RouterOutlet} from '@angular/router';
import { Component, Directive, Injectable, Input } from '@angular/core';
import { NavigationExtras } from '@angular/router';
@Directive({
selector: '[routerLink]',
host: {
'(click)': 'onClick()'
}
})
export class RouterLinkStubDirective {
@Input('routerLink') linkParams: any;
navigatedTo: any = null;
onClick() {
this.navigatedTo = this.linkParams;
}
}
@Component({selector: 'router-outlet', template: ''})
export class RouterOutletStubComponent { }
@Injectable()
export class RouterStub {
navigate(commands: any[], extras?: NavigationExtras) { }
}
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class ActivatedRouteStub {
private subject = new BehaviorSubject(this.testParams);
params = this.subject.asObservable();
private _testParams: {};
get testParams() { return this._testParams; }
set testParams(params: {}) {
this._testParams = params;
this.subject.next(params);
}
get snapshot() {
return { params: this.testParams };
}
}
Angular CLI File karma.conf.js
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma')
],
client:{
clearContext: false
},
files: [
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['@angular/cli']
},
mime: {
'text/x-typescript': ['ts','tsx']
},
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'coverage-istanbul']
: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};