{

Angular component testing - Input text value with test case examples


In this tutorial, How to unit test input text control on UI form in Angular application.

In my previous post, Already discussed about how to read input text value in Angular application.

I have an existing application created using the ng new cli command.

Let’s create an Angular component using the ng g c component command. It creates an angular component.

Let’s add an input text field and button binding to the template and typescript component.

In this component, We have an input type text and button On clicking the button, Displayed the entered value. The value of the input box is binding using two-way binding syntax -[(ngModel)].

Here is an Angular template component - input-text.component.html

<p>input-text works!</p>
<p><input type="text" id="username" name="username" [(ngModel)]="username"></p>
<h1> {{username}}</h1>

<button type="button" (click)="clickme()">Clickme</button>

In the typescript component, Declare two way binding variable in input-text.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-input-text',
  templateUrl: './input-text.component.html',
  styleUrls: ['./input-text.component.scss']
})
export class InputTextComponent implements OnInit {

  constructor() { }
  username: string = '';
  clickme() {
    console.log('it does nothing', this.username);
  }

  ngOnInit(): void {
  }

}

Let’s write an angular component unit testing for this input text box.

Angular unit testing input text component

By default angular, CLI generates default spec files with the following lines of code Here are steps

  • TestBed provides an angular environment for test components.
  • Default TestBed is configured with a testing module with components, directives, and services, finally compiling components using the compileComponents method.
  • Create a component using the createComponent method that returns the ComponentFixture
  • ComponentFixture is a wrapper component around the user component
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

import { InputTextComponent } from './input-text.component';

describe('InputTextComponent', () => {
  let component: InputTextComponent;
  let fixture: ComponentFixture<InputTextComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [InputTextComponent]
    })
      .compileComponents();
  });

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

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

  });

How to test the label of an input text in the Angular component

It is a test case for checking for

  • label exists or not
  • Label name contains the text Enter username value

Here are steps

  • First, the label is queried using debug element.query

  • From a given ComponentFixture, We have a debugElement to access DOM elements.

  • query method returns child elements using CSS selectors.

  • It returns the label element

  • Assert label exists and outerText contains the given text.

    Here is a test case for

  it('should check input label name', () => {
    let queryByLabel = fixture.debugElement.query(By.css("label[for=username]"));
    expect(queryByLabel).toBeTruthy();
    expect(queryByLabel.nativeElement).toBeTruthy();
    expect(queryByLabel.nativeElement.outerText).toContain("Enter username");

  })

Angular Unit testing for set and read input text values

Let’s write unit test cases for setting input text values.

  • First retrieve input element usingBy.css with id selector

  • Set the value of the input box using the nativeElement method

  • Once the value is set, Dispatch an input event using the dispatchEvent method

  • Finally detectChanges using manual detection in Angular to update DOM objects.

 it('Set Input type text value', async () => {
    const username = fixture.debugElement.query(By.css('#username'));
    username.nativeElement.value = 'john';
    username.nativeElement.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      fixture.detectChanges(); 
      console.log('sendInput : ', username.nativeElement.value);
      expect(username.nativeElement.value).toContain('john');
    });
  });

Submit button to read the input text and validate the value

These test cases cover a setting input value and do button click and validate the input text value.

  • Get button and input using testing query element
  • Change input value and issue Input event
  • manually trigger a click event on the button
  • manually reload component using detectChanges
  • Finally, assert the input value with the displayed value

Here is an example code

  it('Form submit click ', async () => {
    const submitButton = fixture.debugElement.query(By.css('#submit'));
    const username = fixture.debugElement.query(By.css('#username'));
    username.nativeElement.value = 'asdf';
    username.nativeElement.dispatchEvent(new Event('input'));

    submitButton.triggerEventHandler('click', null);

    const displayText = fixture.debugElement.query(
      By.css('h1')
    );
    // manual detection 
    fixture.detectChanges();
    expect(displayText.nativeElement.textContent).toBe('asdf');


  });

Conclusion

You learned angular component testing for the following things.

  • change and read input text value
  • input label testing on form
  • Button submit for input text form
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.