I am new to Unit Testing in Angular. I got the karma
setup with code coverage along with angular-cli
. I have run the command ng-test and opened code coverage report. I saw 1x
,3x
etc along with my code line numbers in that coverage report. Please find the my coverage report image.
Here is my test case code app.component.spec.ts
/* tslint:disable:no-unused-variable */
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
});
});
it('should create the app', async(() => {
let fixture = TestBed.createComponent(AppComponent);
let app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
it(`should have as title 'app works!'`, async(() => {
let fixture = TestBed.createComponent(AppComponent);
let app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app works!');
}));
it('should render title in a h1 tag', async(() => {
let fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
let compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('app works!');
}));
});
I didn't understand what is the importance of that 1x,2x,3x
etc in my code report. Please help me in knowing the importance of that.
It represents the amount of times that line has been executed.
According to your code lets take a look at your title
field:
It first gets executed: expect(app).toBeTruthy();
Second: expect(app.title).toEqual('app works!');
Third: expect(compiled.querySelector('h1').textContent).toContain('app works!');
So that's why it says 3x at the left of it.