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

【问题标题】：Angular 2 Testing - Component state persisting between tests (i.e. not resetting)Angular 2 测试 - 组件状态在测试之间持续存在（即不重置）
【发布时间】：2016-11-13 21:02:46
【问题描述】：

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

我查看了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 的信。

【问题讨论】：

没有理由这样做。能否提供一个完整的测试，我们可以复制粘贴，这样会重现问题
就像@peeskillet 说的那样，去简化代码，这样我们就可以真正看到发生了什么。作为猜测，你有一个嵌套的describe 和一个beforeeach 上面某处
@Fiddles 是的，我确实有一个嵌套描述 - 不认为这是一个相关的细节，但会尽可能全面地更新代码
@Fiddles @peeskillet 我已经更新了我的代码以显示嵌套的describe，我认为这是一个无关紧要的细节。我的行为是不允许的吗？
有什么想法吗？

标签： angularjs unit-testing angular jasmine

【解决方案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();
});

【讨论】：