title: Unit test dynamically added class to an HTML button Jasmine
body: <p>I am totally new to Jasmine and trying to learn how to write Unit tests for my components in Angular 4. I am adding a class to the classList of the button on ngOnInit() of the Component. Now when I try to run the test, it says, cannot find property 'classList' of null. This is what I have tried so far.</p>
  
  <p><strong>Component.ts</strong></p>
  
  <pre><code>ngOnInit() {
    document.querySelector('.button-visible').classList.add('hidden');
  }
  </code></pre>
  
  <p>This is what im trying to do in my spec ts file.</p>
  
  <p><strong>Component.spec.ts</strong></p>
  
  <pre><code>describe('AppComponent', () =&gt; {
   let component = AppComponent;
   let fixture: ComponentFixture&lt;AppComponent&gt;;
   let compiledElement;
  });
  
  beforeEach(async(() =&gt; {
   TestBed.configureTestingModule({
    declarations: [AppComponent]
    .....
  }).compileComponents(); 
  }));
  
  beforeEach(() =&gt; {
   fixture = TestBed.createComponent(AppComponent);
   component = fixture.componentInstance;
   compiledElement = fixture.debugElement.nativeElement;
   fixture.detectChanges();
  });
  
  it('should create component', () =&gt; {
   expect(compiledElement.querySelector('button.button-visible').classList).toContain('hidden');
   expect(component).toBeTruthy();
  });
  });
  </code></pre>
  
  <p>I am not able to figure out how to test. Any help is appreciated.</p>