J'ai quelques tests unitaires en utilisant Angular TestBed. Même si les tests sont très simples, ils sont extrêmement lents (en moyenne 1 test par seconde).
Même après avoir relu la documentation angulaire, je n’ai pas pu trouver la raison d’une si mauvaise performance.
Les tests isolés, n'utilisant pas TestBed, s'exécutent en une fraction de seconde.
Test de l'unité
import { Component } from "@angular/core";
import { ComponentFixture, TestBed, async } from "@angular/core/testing";
import { By } from "@angular/platform-browser";
import { DebugElement } from "@angular/core";
import { DynamicFormDropdownComponent } from "./dynamicFormDropdown.component";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { FormsModule } from "@angular/forms";
import { DropdownQuestion } from "../../element/question/questionDropdown";
import { TranslateService } from "@ngx-translate/core";
import { TranslatePipeMock } from "../../../../tests-container/translate-pipe-mock";
describe("Component: dynamic drop down", () => {
let component: DynamicFormDropdownComponent;
let fixture: ComponentFixture<DynamicFormDropdownComponent>;
let expectedInputQuestion: DropdownQuestion;
const emptySelectedObj = { key: "", value: ""};
const expectedOptions = {
key: "testDropDown",
value: "",
label: "testLabel",
disabled: false,
selectedObj: { key: "", value: ""},
options: [
{ key: "key_1", value: "value_1" },
{ key: "key_2", value: "value_2" },
{ key: "key_3", value: "value_3" },
],
};
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [NgbModule.forRoot(), FormsModule],
declarations: [DynamicFormDropdownComponent, TranslatePipeMock],
providers: [TranslateService],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DynamicFormDropdownComponent);
component = fixture.componentInstance;
expectedInputQuestion = new DropdownQuestion(expectedOptions);
component.question = expectedInputQuestion;
});
it("should have a defined component", () => {
expect(component).toBeDefined();
});
it("Must have options collapsed by default", () => {
expect(component.optionsOpen).toBeFalsy();
});
it("Must toggle the optionsOpen variable calling openChange() method", () => {
component.optionsOpen = false;
expect(component.optionsOpen).toBeFalsy();
component.openChange();
expect(component.optionsOpen).toBeTruthy();
});
it("Must have options available once initialized", () => {
expect(component.question.options.length).toEqual(expectedInputQuestion.options.length);
});
it("On option button click, the relative value must be set", () => {
spyOn(component, "propagateChange");
const expectedItem = expectedInputQuestion.options[0];
fixture.detectChanges();
const actionButtons = fixture.debugElement.queryAll(By.css(".dropdown-item"));
actionButtons[0].nativeElement.click();
expect(component.question.selectedObj).toEqual(expectedItem);
expect(component.propagateChange).toHaveBeenCalledWith(expectedItem.key);
});
it("writeValue should set the selectedObj once called (pass string)", () => {
expect(component.question.selectedObj).toEqual(emptySelectedObj);
const expectedItem = component.question.options[0];
component.writeValue(expectedItem.key);
expect(component.question.selectedObj).toEqual(expectedItem);
});
it("writeValue should set the selectedObj once called (pass object)", () => {
expect(component.question.selectedObj).toEqual(emptySelectedObj);
const expectedItem = component.question.options[0];
component.writeValue(expectedItem);
expect(component.question.selectedObj).toEqual(expectedItem);
});
});
Composant cible (avec modèle)
import { Component, Input, OnInit, ViewChild, ElementRef, forwardRef } from "@angular/core";
import { FormGroup, ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
import { DropdownQuestion } from "../../element/question/questionDropdown";
@Component({
selector: "df-dropdown",
templateUrl: "./dynamicFormDropdown.component.html",
styleUrls: ["./dynamicFormDropdown.styles.scss"],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DynamicFormDropdownComponent),
multi: true,
},
],
})
export class DynamicFormDropdownComponent implements ControlValueAccessor {
@Input()
public question: DropdownQuestion;
public optionsOpen: boolean = false;
public selectItem(key: string, value: string): void {
this.question.selectedObj = { key, value };
this.propagateChange(this.question.selectedObj.key);
}
public writeValue(object: any): void {
if (object) {
if (typeof object === "string") {
this.question.selectedObj = this.question.options.find((item) => item.key === object) || { key: "", value: "" };
} else {
this.question.selectedObj = object;
}
}
}
public registerOnChange(fn: any) {
this.propagateChange = fn;
}
public propagateChange = (_: any) => { };
public registerOnTouched() {
}
public openChange() {
if (!this.question.disabled) {
this.optionsOpen = !this.optionsOpen;
}
}
private toggle(dd: any) {
if (!this.question.disabled) {
dd.toggle();
}
}
}
-----------------------------------------------------------------------
<div>
<div (openChange)="openChange();" #dropDown="ngbDropdown" ngbDropdown class="wrapper" [ngClass]="{'disabled-item': question.disabled}">
<input type="text"
[disabled]="question.disabled"
[name]="controlName"
class="select btn btn-outline-primary"
[ngModel]="question.selectedObj.value | translate"
[title]="question.selectedObj.value"
readonly ngbDropdownToggle #selectDiv/>
<i (click)="toggle(dropDown);" [ngClass]="optionsOpen ? 'arrow-down' : 'arrow-up'" class="rchicons rch-003-button-icon-referenzen-pfeil-akkordon"></i>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="option-wrapper">
<button *ngFor="let opt of question.options; trackBy: opt?.key" (click)="selectItem(opt.key, opt.value); dropDown.close();"
class="dropdown-item option" [disabled]="question.disabled">{{opt.value | translate}}</button>
</div>
</div>
</div>
Karma config
var webpackConfig = require('./webpack/webpack.dev.js');
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
plugins: [
require('karma-webpack'),
require('karma-jasmine'),
require('karma-phantomjs-launcher'),
require('karma-sourcemap-loader'),
require('karma-tfs-reporter'),
require('karma-junit-reporter'),
],
files: [
'./app/polyfills.ts',
'./tests-container/test-bundle.spec.ts',
],
exclude: [],
preprocessors: {
'./app/polyfills.ts': ['webpack', 'sourcemap'],
'./tests-container/test-bundle.spec.ts': ['webpack', 'sourcemap'],
'./app/**/!(*.spec.*).(ts|js)': ['sourcemap'],
},
webpack: {
entry: './tests-container/test-bundle.spec.ts',
devtool: 'inline-source-map',
module: webpackConfig.module,
resolve: webpackConfig.resolve
},
mime: {
'text/x-TypeScript': ['ts', 'tsx']
},
reporters: ['progress', 'junit', 'tfs'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: false,
concurrency: Infinity
})
}
Il s’est avéré que le problème se pose avec Angular, comme indiqué sur Github
Ci-dessous une solution de contournement de la discussion sur Github qui a fait passer le temps d'exécution des tests de plus de 40 secondes à seulement 1 seconde!
const oldResetTestingModule = TestBed.resetTestingModule;
beforeAll((done) => (async () => {
TestBed.resetTestingModule();
TestBed.configureTestingModule({
// ...
});
function HttpLoaderFactory(http: Http) {
return new TranslateHttpLoader(http, "/api/translations/", "");
}
await TestBed.compileComponents();
// prevent Angular from resetting testing module
TestBed.resetTestingModule = () => TestBed;
})()
.then(done)
.catch(done.fail));
describe('Test name', () => {
configureTestSuite();
beforeAll(done => (async () => {
TestBed.configureTestingModule({
imports: [HttpClientTestingModule, NgReduxTestingModule],
providers: []
});
await TestBed.compileComponents();
})().then(done).catch(done.fail));
it(‘your test', (done: DoneFn) => {
});
});
Créer un nouveau fichier:
import { getTestBed, TestBed, ComponentFixture } from '@angular/core/testing';
import { } from 'jasmine';
export const configureTestSuite = () => {
const testBedApi: any = getTestBed();
const originReset = TestBed.resetTestingModule;
beforeAll(() => {
TestBed.resetTestingModule();
TestBed.resetTestingModule = () => TestBed;
});
afterEach(() => {
testBedApi._activeFixtures.forEach((fixture: ComponentFixture<any>) => fixture.destroy());
testBedApi._instantiated = false;
});
afterAll(() => {
TestBed.resetTestingModule = originReset;
TestBed.resetTestingModule();
});
};
Cela peut dépendre du navigateur que vous utilisez pour les tests. Quant à moi, ChromeHeadless était nettement plus rapide (~ 1min):
ng test --single-run --browsers ChromeHeadless
Que PhantomJS (~ 3min):
ng test --single-run --browsers PhantomJS
Vous voudrez peut-être essayer ng-bullet . Cela augmente considérablement la vitesse d'exécution des tests unitaires angulaires . Il est également suggéré de l'utiliser dans le rapport de mise en pension angulaire officiel concernant les performances des tests unitaires sur banc d'essai: https://github.com/angular/angular/issues/12409#issuecomment-425635583
Le but est de remplacer l'original beforeEach dans l'en-tête de chaque fichier de test
beforeEach(async(() => {
// a really simplified example of TestBed configuration
TestBed.configureTestingModule({
declarations: [ /*list of components goes here*/ ],
imports: [ /* list of providers goes here*/ ]
})
.compileComponents();
}));
avec configureTestSuite:
import { configureTestSuite } from 'ng-bullet';
...
configureTestSuite(() => {
TestBed.configureTestingModule({
declarations: [ /*list of components goes here*/ ],
imports: [ /* list of providers goes here*/ ]
})
});
La réponse de Francesco ci-dessus est excellente, mais elle nécessite ce code à la fin. Sinon, d'autres suites de tests échoueront.
afterAll(() => {
TestBed.resetTestingModule = oldResetTestingModule;
TestBed.resetTestingModule();
});