Angular unit test input value

Question

I have been reading official Angular2 documentation for unit testing (https://angular.io/docs/ts/latest/guide/testing.html) but I am struggling with setting a component's input field value so that its reflected in the component property (bound via ngModel). The screen works fine in the browser, but in the unit test I cannot seem to be able to set the fields value.

I am using below code. "fixture" is properly initialized as other tests are working fine. "comp" is instance of my component, and the input field is bound to "user.username" via ngModel.

it('should update model...', async(() => {
    let field: HTMLInputElement = fixture.debugElement.query(By.css('#user')).nativeElement;
    field.value = 'someValue'
    field.dispatchEvent(new Event('input'));
    fixture.detectChanges();

    expect(field.textContent).toBe('someValue');
    expect(comp.user.username).toBe('someValue');
  }));

My version of Angular2: "@angular/core": "2.0.0"

Paul Samsotha · Accepted Answer · 2019-07-10 11:39:44Z

123

Inputs don't have textContent, only a value. So expect(field.textContent).toBe('someValue'); is useless. That's probably what's failing. The second expectation should pass though. Here's a complete test.

@Component({
  template: `<input type="text" [(ngModel)]="user.username"/>`
})
class TestComponent {
  user = { username: 'peeskillet' };
}

describe('component: TestComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule],
      declarations: [ TestComponent ]
    });
  });

  it('should be ok', async(() => {
    let fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      let input = fixture.debugElement.query(By.css('input'));
      let el = input.nativeElement;

      expect(el.value).toBe('peeskillet');

      el.value = 'someValue';
      el.dispatchEvent(new Event('input'));

      expect(fixture.componentInstance.user.username).toBe('someValue');
    });
  }));
});

The important part is the first fixture.whenStable(). There is some asynchronous setup with the forms that occurs, so we need to wait for that to finish after we do fixture.detectChanges(). If you are using fakeAsync() instead of async(), then you would just call tick() after fixture.detectChanges().

edited Jul 10, 2019 at 11:39

answered Dec 9, 2016 at 15:54

Paul Samsotha

210k39 gold badges503 silver badges756 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Zyga Over a year ago

mine wasnt working even without the first 'expect' actually. But yours is working fine thankfully, no idea why tho, I assume its because its after whenStable() is resolved? Thanks for the help anyway.

Paul Samsotha Over a year ago

If you were setting up the component in the beforeEach, making the beforeEach async, then calling fixture.detectChanges after creating the component, would probably work with the code above without the need to call whenStable. If you did this with the code above you can get rid of everything except for what's in the then callback. I think that would work also. The async beforeEach should pretty much do the same thing that whenStable would do, which is wait for the async tasks to complete before exiting the beforeEach

Kieran Over a year ago

fixture.whenStable().then(() => { - was the missing bit for me thanks.

Jacob Stamm Over a year ago

...peeskillet?

Paul Samsotha Over a year ago

@JacobStamm yeah? That was my SO username before I changed it to my real name.

|

ktretyak · Accepted Answer · 2017-09-07 20:43:50Z

22

Just add

fixture.detectChanges();

fixture.whenStable().then(() => {
  // here your expectation
})

answered Sep 7, 2017 at 20:43

ktretyak

32.2k11 gold badges48 silver badges65 bronze badges

2 Comments

Adam Hughes Over a year ago

Is it fair to say it's a good idea to always use fixture.whenStable() in every test? Like as a noob is it a good idea or only use in certain cases?

Antoniossss Over a year ago

Any explanation why is it needed (as it is indeed in case of ngModel....)

Dumbo · Accepted Answer · 2019-05-21 08:49:15Z

7

Use your expect/assert within the whenStable.then function like this:

component.label = 'blah';
fixture.detectChanges();

fixture.whenStable().then(() => {
    expect(component.label).toBe('blah');
}

edited May 21, 2019 at 8:49

Dumbo

1,8471 gold badge21 silver badges36 bronze badges

answered Feb 14, 2018 at 1:45

Akash Yellappa

2,35431 silver badges21 bronze badges

Comments

Francesco Borzi · Accepted Answer · 2025-01-21 19:21:07Z

0

Don't forget ReactiveFormsModule

None of the other answers worked for me until I realised I had to import ReactiveFormsModule in my test in order to make it work.

Then the following just works:

nativeElement.value = value;
nativeElement.dispatchEvent(new Event('input'));
fixture.detectChanges();

no need to use fixture.whenStable().

answered Jan 21 at 19:21

Francesco Borzi

63.2k56 gold badges203 silver badges280 bronze badges

Comments

James Jenkinson · Accepted Answer · 2022-04-12 14:59:54Z

If you want to implement Unit Testing with @Input content then go through this below code.

testing.component.ts

    import { Component, OnInit } from '@angular/core';
    @Component({
      selector: 'app-testing',
      templateUrl: `<app-input [message]='text'></app-input>`,
      styleUrls: ['./testing.component.css']
    })
    export class TestingComponent implements OnInit {
    public text = 'input message';
      constructor() { }
    
      ngOnInit() {
      }
    
    }

input.component.ts

    import { Component, OnInit, Input } from '@angular/core';
    
    @Component({
      selector: 'app-input',
      templateUrl: `<div *ngIf="message">{{message}}</div>`,
      styleUrls: ['./input.component.css']
    })
    export class InputComponent implements OnInit {
    @Input() public message: string;
      constructor() { }
    
      ngOnInit() {
        console.log(this.message);
      }
    
    }

input.component.spec.ts

    import { async, ComponentFixture, TestBed } from '@angular/core/testing';
    
    import { InputComponent } from './input.component';
    import { TestingComponent } from '../testing/testing.component';
    
    describe('InputComponent', () => {
      let component: InputComponent;
      let fixture: ComponentFixture<InputComponent>;
    
      beforeEach(async(() => {
        TestBed.configureTestingModule({
          declarations: [ InputComponent, TestingComponent ]
        })
        .compileComponents();
      }));
    
      beforeEach(() => {
        fixture = TestBed.createComponent(InputComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });
    
      it('should create', () => {
        expect(component).toBeTruthy();
      });
    
      it('should correctly render the passed @Input value', () => {
        component.message = 'test input';
        fixture.detectChanges();
        expect(fixture.nativeElement.innerText).toBe('test input');
      });
    
    });

Collectives™ on Stack Overflow

Angular unit test input value

5 Answers 5

7 Comments

2 Comments

Comments

Don't forget ReactiveFormsModule

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

2 Comments

Comments

Don't forget ReactiveFormsModule

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related