I am brand new to Jasmine and currently in the process of grasping how to write Unit tests for my components in Angular 4. One issue I encountered is when I attempt to add a class to the button's classList within the ngOnInit() lifecycle hook of the Component, the test fails with an error stating "cannot find property 'classList' of null." This is my current approach.
Component.ts
ngOnInit() {
document.querySelector('.button-visible').classList.add('hidden');
}
This is the scenario I'm aiming to address in my spec ts file.
Component.spec.ts
describe('AppComponent', () => {
let component = AppComponent;
let fixture: ComponentFixture<AppComponent>;
let compiledElement;
});
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [AppComponent]
.....
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AppComponent);
component = fixture.componentInstance;
compiledElement = fixture.debugElement.nativeElement;
fixture.detectChanges();
});
it('should create component', () => {
expect(compiledElement.querySelector('button.button-visible').classList).toContain('hidden');
expect(component).toBeTruthy();
});
});
I am struggling to determine the correct testing approach. Any assistance would be greatly appreciated.