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.
Code coverage, also called test coverage, tells you which parts of your code are executed by running the unit and integration tests. Code coverage is typically expressed as percent values, for example, 79% statements, 53% branches, 74% functions, 78% lines.
Open the index. html file inside the /coverage folder to see a report with your source code and code coverage values.
What is Branch Testing? Branch coverage is a testing method, which aims to ensure that each one of the possible branch from each decision point is executed at least once and thereby ensuring that all reachable code is executed. That is, every branch taken each way, true and false.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With