Angular 2 Testing - Component state persisting between tests (i.e. not resetting)

Question

I am writing some unit tests for a component, but its state is persisting between tests.

I've taken a look here but none of the solutions there made a difference.

My simplified test code is:

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

Note that the HerdIndexComponent has an array of 11 inputs. This line would select the 5th one:

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

Currently, the issue is being exhibited in the 'should save a valid formula' test, where the first input already has the the value 1 from the test above. If I was to select 2 different inputs in the second beforeEach, then the test fails (formulas are only valid when the inputs sum to 1 and it would sum to 2 otherwise, i.e 1 + 0.5 + 0.5).

This is most I can practically paste because my component has multiple dependant models but this shouldn't matter.

Any ideas? I thought I was following the docs to the letter.

There's no reason it should be. Can you provide a complete test, we can copy and paste, that will reproduce the problem — Paul Samsotha, Nov 13 '16 at 23:48
Like @peeskillet said, de-simplify the code so we can actually see what's happening. As a guess, you've got a nested `describe` with a `beforeeach` somewhere above — Fiddles, Nov 14 '16 at 02:33
@Fiddles yes I do have a nested describe - didn't think that was a relevant detail but will update code as fully as I can — iamyojimbo, Nov 14 '16 at 05:11
@Fiddles @peeskillet I have updated my code to show the nested `describe`, which I assumed was an irrelevant detail. Is what I'm doing not allowed? — iamyojimbo, Nov 14 '16 at 05:27

LuftWaffle · Answer 1 · 2019-10-22T13:15:10.443

I don't see you compiling the component. Normally you should compile the components to validate the configuration of the testing module. Try this instead of your first 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 - Component state persisting between tests (i.e. not resetting)

1 Answers1