Angular 2 Testing - Component Instance is undefined

6
votes

I have a problem in testing in Angular 2.

describe('Spinner Component', () => {

    beforeEach(() => TestBed.configureTestingModule({
        declarations: [SpinnerComponent]
    }).compileComponents());

    beforeEach(() =>  {
        fixture = TestBed.createComponent(SpinnerComponent);
        comp = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('Should Create a Spinner Component', () => {
        fixture.detectChanges();
        var compiled = fixture.debugElement.nativeElement;

        expect(compiled).toBeTruthy();
    });

    it('Should not be running', () => {
        fixture.detectChanges();
        expect(comp.isRunning).toBe(false);
    });
});

The code above shows that the Spinner Component in the test 'Should not be running'. I do not know what causes this. I get an error in the console (Please see below). I have created the component instance on the second before each as seen in the code but it states that it is undefined when ran on the second test case. I need help. I would really appreciate it. Thanks in advance.

Error in console

unit-testingangularkarma-jasmineangular-cli
compileComponents should be done asynchronously. Maybe that has something to do with it. You should add async to the beforeEach. beforeEach(async(() => ...)). Give that a try and see if there's any difference. async is from @angular/core/testing – Paul Samsotha
thanks for answering, @peeskillet, however, it still prompts the same error. – xiotee
Would you be able to put together a complete one file example I can copy and paste that will reproduce the error? That means the component in the example also – Paul Samsotha
@peeskillet Here is a plunker link of the file and component plnkr.co/edit/uPd02BHllEvgD7QrH8eq?p=catalogue – xiotee
comp.isRunning. You have no isRunning getter in the component, only a setter. You should add a get isRunning() { return whateverThisPointsTo } – Paul Samsotha