gpt4 book ai didi

Angular 4 单元测试(TestBed)非常慢

转载 作者:太空狗 更新时间:2023-10-29 16:55:06 28 4
gpt4 key购买 nike

我使用 Angular TestBed 进行了一些单元测试。即使测试非常简单,它们运行起来也非常慢(平均每秒 1 个测试 Assets )。
即使在重新阅读 Angular 文档后,我也找不到性能如此差的原因。
不使用 TestBed 的独立测试在几分之一秒内运行。

单元测试

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);
});
});

目标组件(带模板)

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>

业力配置

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
})
}

最佳答案

事实证明问题出在 Angular 上,如 Github 所述

下面是来自 Github 讨论的解决方法,该方法将我们项目中运行测试的时间从 40 多秒减少到仅 1 秒 (!)

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));

关于Angular 4 单元测试(TestBed)非常慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47691705/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com