Unit testing angular2 @input couldn't pass data

Question

I have declared a component like this

export class Component {

  private selectedFieldType: string;
  private enableAddCheck: boolean = false;

  @Input('itemX') item;
}

and i have a html for two binding like this

Field : <input [(ngModel)]="item.fieldLabel" type="text" class="input-bars">

So i have created the unit testing code like this to check the two way binding like this

beforeEach(async(() => {


    // refine the test module by declaring the test component
    TestBed.configureTestingModule({
      imports: [ FormsModule ],
      declarations: [Component , DND_DIRECTIVES],
      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
      providers: [
        { provide: ComponentFixtureAutoDetect, useValue: true },
         DND_PROVIDERS ]
    })

    // create component and test fixture
    fixture = TestBed.createComponent(Component );

    // get test component from the fixture
    comp = fixture.componentInstance;



  }));

  it('To check fieldLabel to way binding from inputbox to data', () => {

    comp.item = {
      fieldLabel: 'text'
    };

    comp.ngOnInit();

    fixture.detectChanges();

    let fieldTypeInput: HTMLInputElement;

    const input = fixture.debugElement.query(By.css('input'));

    fieldTypeInput = input[0].nativeElement;
    fieldTypeInput.value = 'field';

    fixture.detectChanges();

    expect(comp.item.fieldLabel).toBe('field');

  });

But it's giving 'fieldLabel' undefined error for me.

How to pass the data to @input in my component through the unit test??

First of all, your given component doesn't implement NgOnInit interface. — Fals
– Fals, Commented Dec 9, 2016 at 11:13
I said, that the example that you provided has an error, Where's the NgOnInit? — Fals
– Fals, Commented Dec 9, 2016 at 11:16
Why are you calling comp.ngOnInit(); explicitely? I think this should be automatically called by angular 2 component lifecycle (if correctly used as Fals pointed out) and not by you — Petr Adam
– Petr Adam, Commented Dec 9, 2016 at 11:17

Paul Samsotha · Accepted Answer · 2016-12-09 11:40:48Z

1

After you change manually change the input value

fieldTypeInput.value = 'field';

you still need to dispatch the input event. It does not happen just because you change the value. The event is what Angular listens for in order to get the new value to process

import {dispatchEvent} from '@angular/platform-browser/testing/browser_util';

fieldTypeInput.value = 'field';
dispatchEvent(fieldTypeInput, 'input');

Also, as the event processing is asynchronous, you need to wait for it stablize. To do that, you can use fixture.whenStable, but then you also need to make the test async

import { async } from '@angular/core/testing'

it('..', async(() => {
  ...

  fieldTypeInput.value = 'field';
  dispatchEvent(fieldTypeInput, 'input');

  fixture.whenStable().then(() => {
    // do expectations here
  })
})

answered Dec 9, 2016 at 11:40

Paul Samsotha

210k39 gold badges503 silver badges756 bronze badges

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

1 Comment

Kokulan Over a year ago

It's not working the error is coming because the data i pass like comp.item = { fieldLabel: 'text' }; didn't get passed to it

Collectives™ on Stack Overflow

Unit testing angular2 @input couldn't pass data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related