angularjs - Angular 2 测试 - 组件状态在测试之间持续存在(即不重置)

Question

我正在为一个组件编写一些单元测试，但它的状态在测试之间持续存在。

我看过here但是那里的所有解决方案都没有起到任何作用。

我的简化测试代码是:

describe('Component: HerdIndexComponent', () => {
    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [FormsModule],
            declarations: [
                HerdIndexComponent,
            ],
            providers: [
                {provide: ActivatedRoute, useValue: activatedRouteStub},
                {provide: HerdIndexService, useValue: herdIndexServiceStub},
            ]
        });
        fixture = TestBed.createComponent(HerdIndexComponent);
        component = fixture.debugElement.componentInstance;
    });


    it('should not show error when formula is valid', fakeAsync(() => {
        fixture.detectChanges();
        const input = fixture.debugElement.queryAll(By.css('.pta-components tbody tr'))[0].query(By.css('input'));
        input.nativeElement.value = '1';
        input.nativeElement.dispatchEvent(newEvent('keyup'));
        fixture.detectChanges();
        const error = fixture.debugElement.query(By.css('.error'));
        expect(error.nativeElement.textContent).toBe('');
    }));

    describe('Functionality: Saving', () => {

        let saveButtonDe;

        beforeEach(() => {
            fixture.detectChanges();
            const input0 = fixture.debugElement.queryAll(By.css('.pta-components tbody tr'))[0].query(By.css('input'));
            const input1 = fixture.debugElement.queryAll(By.css('.pta-components tbody tr'))[1].query(By.css('input'));
            input0.nativeElement.value = '0.5';
            input1.nativeElement.value = '0.5';
            input0.nativeElement.dispatchEvent(newEvent('keyup'));
            input1.nativeElement.dispatchEvent(newEvent('keyup'));
            saveButtonDe = fixture.debugElement.query(By.css('button'));
        });

        it('should save a valid formula', fakeAsync(() => {
            fixture.detectChanges();
            console.log(component.formula.components.map(com => com.coefficient.decimalValue));
            saveButtonDe.nativeElement.dispatchEvent(newEvent('click'));
            fixture.detectChanges();
            tick();
            fixture.detectChanges();
            const error = fixture.debugElement.query(By.css('.error'));
            const success = fixture.debugElement.query(By.css('.success'));
            expect(error.nativeElement.textContent.trim()).toBe('');
            expect(success.nativeElement.textContent.trim()).toBe('Formula Saved');
            console.log(component);
        }));
    });
});

请注意，HerdIndexComponent 有一个包含 11 个输入的数组。此行将选择第 5 个:

fixture.debugElement.queryAll(By.css('.pta-components tbody tr'))[4].query(By.css('input'));

目前，该问题出现在 'should save a valid formula' 测试中，其中第一个输入已经具有上述测试中的值 1。如果我要在第二个 beforeEach 中选择 2 个不同的输入，那么测试将失败(公式仅在输入总和为 1 时有效，否则总和为 2，即 1 + 0.5 + 0.5).

这是我实际上可以粘贴的最多内容，因为我的组件有多个依赖模型，但这应该无关紧要。

有什么想法吗？我以为我在关注 docs不折不扣。

Answer 1

我没有看到你在编译组件。 通常你应该编译组件来验证测试模块的配置。 试试这个而不是你的第一个 beforeEach

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [FormsModule],
        declarations: [
            HerdIndexComponent,
        ],
        providers: [
            {provide: ActivatedRoute, useValue: activatedRouteStub},
            {provide: HerdIndexService, useValue: herdIndexServiceStub},
        ]
    })
    .compileComponents;
}));

beforeEach(() => {
    fixture = TestBed.createComponent(HerdIndexComponent);
    component = fixture.debugElement.componentInstance;
    fixture.detectChanges();
});