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个输入的数组。这一行将选择第五行：

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

Angular 2 Testing - 测试之间持续存在的组件状态（即不重置）

1 个答案: