Testing an Angular 6 component that includes a dynamic variable rendered in HTML

Question

Testing an Angular 6 component that includes a dynamic variable rendered in HTML

Hello! I'm a newcomer to Angular testing and I've hit a roadblock. The issue lies with the username variable within a component that is responsible for displaying the logged-in username on an HTML page. Take a look at the test file below:

describe('HeaderComponent', () => {
  let component: HeaderComponent;
  let fixture: ComponentFixture<HeaderComponent>;
  let app;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ HeaderComponent, DialogListConfigurationComponent, DialogConfirmNewConfigurationComponent ],
      providers: [ MessageService, JwtHelperService, AuthService ],  
      imports: [ DialogModule, MenubarModule, FontAwesomeModule, RouterTestingModule, TreeModule, HttpClientTestingModule, JwtModule.forRoot({
        config: {
          tokenGetter: () => {
            return sessionStorage.getItem(environment.tokenName);
          },
          blacklistedRoutes: [
            '/api/login',
          ]
        }
      }), ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HeaderComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

The relevant component code is as follows:

export class HeaderComponent implements OnInit {
  @Output() sidebarEvent = new EventEmitter();
  @Output() clickOkButtonListConfigurationsEvent = new EventEmitter();
  username: String = this.authService.decodeToken.username;
  items = [] as MenuItem[];
  dialogListConfigurationVisible: boolean = false;
  faUserCircle = faUserCircle;
  defaultConfigurations: Configuration[];
  configurationCreated: boolean = false;
  dialogConfirmCreationVisible: boolean = false;
  constructor(private configurationService: ConfigurationService, private authService: AuthService) { }

  ngOnInit() {
  ...
  }

You can find the auth service method here:

get decodeToken(): Jwt {
  return this.jwtHelper.decodeToken(this.getSessionToken);
}

The current issue causing the should create test to fail is

TypeError: Cannot read property 'username' of null

. Any ideas?

angular typescript karma-jasmine

Answer 1

Answer №1

When testing a component, it is necessary to simulate the behavior of its AuthService by using a mock version.

This can be achieved by providing an object in the initialization code of the module.

TestBed.configureTestingModule({
  declarations: [ HeaderComponent, DialogListConfigurationComponent, DialogConfirmNewConfigurationComponent ],
  providers: [
    MessageService,
    JwtHelperService,
    {provide: AuthService, useClass: AuthServiceMock} ],  
  imports: [ DialogModule, MenubarModule, FontAwesomeModule, RouterTestingModule, TreeModule, HttpClientTestingModule, JwtModule.forRoot({
    config: {
      tokenGetter: () => {
        return sessionStorage.getItem(environment.tokenName);
      },
      //Exclude this URL from JWT (doesn't add the authentication header)
      blacklistedRoutes: [
        '/api/login',
      ]
    }
  }), ]
})
.compileComponents();

The AuthServiceMock should adhere to the same interface as the original AuthService. It could look something like this:

export class AuthServiceMock {
  // ...
  decodeToken: {
    username: 'testUser'
  };
}

Prior to creating the component, configure the mock class unless a default value is set inside the mock.

NOTE: While it's possible to skip creating a mock and directly manipulate the values, this approach might compromise the separation of concerns within your tests.

beforeEach(() => {
    let authServiceMock: AuthServiceMock = TestBed.get(AuthService);
    authServiceMock.decodeToken = { username: 'anotheruser' };

    fixture = TestBed.createComponent(HeaderComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

By following these steps, the HeaderComponent should successfully execute the

this.authService.decodedToken.username

line.

It is advisable to mock dependencies that rely on external data sources for consistency in testing.

If certain dependencies of the original AuthService are not essential for testing purposes, such as the JwtHelperService, they can be excluded from the test module's provider list.

Answer 2

When testing a component, it is necessary to simulate the behavior of its AuthService by using a mock version.

This can be achieved by providing an object in the initialization code of the module.

TestBed.configureTestingModule({
  declarations: [ HeaderComponent, DialogListConfigurationComponent, DialogConfirmNewConfigurationComponent ],
  providers: [
    MessageService,
    JwtHelperService,
    {provide: AuthService, useClass: AuthServiceMock} ],  
  imports: [ DialogModule, MenubarModule, FontAwesomeModule, RouterTestingModule, TreeModule, HttpClientTestingModule, JwtModule.forRoot({
    config: {
      tokenGetter: () => {
        return sessionStorage.getItem(environment.tokenName);
      },
      //Exclude this URL from JWT (doesn't add the authentication header)
      blacklistedRoutes: [
        '/api/login',
      ]
    }
  }), ]
})
.compileComponents();

The AuthServiceMock should adhere to the same interface as the original AuthService. It could look something like this:

export class AuthServiceMock {
  // ...
  decodeToken: {
    username: 'testUser'
  };
}

Prior to creating the component, configure the mock class unless a default value is set inside the mock.

NOTE: While it's possible to skip creating a mock and directly manipulate the values, this approach might compromise the separation of concerns within your tests.

beforeEach(() => {
    let authServiceMock: AuthServiceMock = TestBed.get(AuthService);
    authServiceMock.decodeToken = { username: 'anotheruser' };

    fixture = TestBed.createComponent(HeaderComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

By following these steps, the HeaderComponent should successfully execute the

this.authService.decodedToken.username

line.

It is advisable to mock dependencies that rely on external data sources for consistency in testing.

If certain dependencies of the original AuthService are not essential for testing purposes, such as the JwtHelperService, they can be excluded from the test module's provider list.

Answer 3

Answer №2

After reading the solution provided by @Thatkookooguy, I realized the issue and decided to include these two lines within the beforeEach function to avoid using a mock object:

const authService: AuthService = TestBed.get(AuthService);
authService.saveToken("token string");

Answer 4

After reading the solution provided by @Thatkookooguy, I realized the issue and decided to include these two lines within the beforeEach function to avoid using a mock object:

const authService: AuthService = TestBed.get(AuthService);
authService.saveToken("token string");

Testing an Angular 6 component that includes a dynamic variable rendered in HTML

Answer №1

Answer №2

Similar questions

Having trouble with loading JavaScript during ng build --prod process

When working with JSON in Angular, the JSON pipe may display an empty string for values that are "undefined"

Exploring the nested component structure in Angular4 (RC5)

Implement an overflow property at the end of an Angular 2 animation

When utilizing Ionic with Angular, it is difficult to access the hardware back button on mobile devices that have buttons located within the display/screen

Unable to display complete content of Ionic 3 webpage

What is preventing the tree shaking of "providers" within components or modules?

The current date is indicating that the date string provided is invalid for interpretation by dayjs()

The numerical value of zero in React Native TypeScript is being interpreted as NaN

If I exclusively utilize TypeScript with Node, is it possible to transpile it to ES6?

Position components in Angular 2 based on an array's values

What is the process for obtaining the Angular.json file for my NX Workspace?

Displaying rows in a mat-table based on a certain condition

Update the configuration to change the localization code for Angular to a different language

Top tips for accessing and modifying an immutable object within a component retrieved from an RXJS/NGRX store in Angular

Creating an overlay that dynamically renders components

Encountering a CORS problem following a successful API request within an ABP application

Unable to successfully install Angular CLI through npm

In a situation where Typescript fails to provide enforcement, how can you effectively indicate that a function is not defined for specific value(s)?

Typescript is being lenient with incorrect use of generics, contrary to my expectations of error being thrown