Search code examples
javascriptunit-testingangularistanbulkarma-coverage

what does 1x 3x etc mean in karma code coverage report in Angular Unit testing?


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.

enter image description here

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.


Solution

  • 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.