Angular testing

Angular
2

Hi Manisha!

Technically you can use any testing library with Angular, but if you use the Angular CLI it will generate spec files for you that will make your testing infinitely easier.

For example a QUnit test may look like this:

test('Hello World!', function() {
    F('.sample').text('Hello World!', 'h1 should have text hello world');
});

If you’d like to test that a DOM element like .sample h1 in Angular, you’ll need to bootstrap up the component with the template containing the markup.

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  it('should render title in a h1 tag', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('.sample h1').textContent).toContain('Hello World!');
  });
});