Angular testing

Angular
1

Instead of using builtin testing framework provided by Angular can I use QUnit and FuncUnit to write the tests for an Angular application.
Currently I have QUnit and FuncUnit tests in place for my web application but we are planning to move the frontend of our web application to Angular or React. We have a single page application.

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!');
  });
});
3

Thank you so much Jennifer for the detailed example.
The reason why I asked this question was, I already have QUnit tests for my application. I was thinking if I can somehow reuse it rather than rewriting the test using Angular inbuilt testing framework.
I am new to Angular and I am confused how to call the QUnit tests in the application, where my code will sit etc. We will be using latest AngularJS version for our application.
It would be really very helpful if you could point out to me some examples.