Angular 2测试——组件状态在测试之间持久化(即不重置)

Question

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

我已经看了这里，但是没有一个解决方案起作用。

我的简化测试代码是:

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

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

任何想法?

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