Testing two-way binding with ngModel in Angular2

Question

I've read the documentation for testing two-way binding in Angular2. All examples are simple, too simple, actually.

It seems like they only test the out-binding...

I'll post some code to illustrate:

import { Component, Input } from "@angular/core";
import { ComponentFixture, async, TestBed, tick, fakeAsync } from 
"@angular/core/testing";
import { FormsModule } from "@angular/forms";
import { By } from "@angular/platform-browser";

@Component({
    selector: 'test',
    template: `
        <input type="text" [(ngModel)]="myValue" />
        <div>{{ myValue }}</div>
    `
})
class TestComponent {
    @Input() myValue: string
}

describe('Example', () => {
    let component: TestComponent
    let fixture: ComponentFixture<TestComponent>

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [TestComponent],
            providers: [],
            imports: [FormsModule]

        })
            .compileComponents()
    }))

    beforeEach(() => {
        fixture = TestBed.createComponent(TestComponent)
        component = fixture.componentInstance

        fixture.detectChanges()
    })

    it('should test two-way binding by setting the component member', 
        fakeAsync(() => {

            const testValue = 'Component member test'

            component.myValue = testValue // Should be the correct way to 
            test ngModel

            tick();
            fixture.detectChanges();

            // Assertion error: Expected '' to equal 'Component member test'
            // Why wasn't the value set in the textbox?
            expect(fixture.debugElement.query(By.css('input'))
.nativeElement.value).toEqual(testValue)

            //Yeah, the bananas are working. We have out-binding
            expect(fixture.debugElement
                .query(By.css('div'))
                .nativeElement
                .textContent
            ).toEqual(testValue);
    }))

    it('should test two-way binding by setting value directly on the native 
element. But that just tests the out-binding', fakeAsync(() => {
            const testValue = 'NativeElement test'

            let element = 
fixture.debugElement.query(By.css('input')).nativeElement;
            element.value = testValue // this tests only the out-binding
            element.dispatchEvent(new Event('input'));

            tick();
            fixture.detectChanges();

            //of course this is Ok, we just set it directly
            expect(fixture.debugElement.query(By.css('input'))
.nativeElement.value).toEqual(testValue)

            //Yeah, the bananas are working. We have out-binding
            expect(fixture.debugElement
                .query(By.css('div'))
                .nativeElement
                .textContent
            ).toEqual(testValue);
    }))
})

So is there a way actually test the component by setting myValue? I think that I am missing something...

yurzui · Accepted Answer · 2017-04-26 12:43:09Z

9

Try swapping two lines:

tick();
fixture.detectChanges();

so it should be

fixture.detectChanges();
tick();

It means firstly you need to set value and then wait while angular is updating control value because it will happen inside Promise.then

https://github.com/angular/angular/blob/4.1.0-rc.0/packages/forms/src/directives/ng_model.ts#L213-L214

Plunker Example

edited Apr 26, 2017 at 12:43

answered Apr 26, 2017 at 12:30

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

3 Comments

TBear Over a year ago

Ha! Okay, now the example works. But my real world code doesn't. I thing it's because detectChanges doesn't detect changes for sub-components.

TBear Over a year ago

It fails no matter my ChangeDetectionStrategy... I'm accepting your answer because it fixed the example :-)

Claudiu Hojda Over a year ago

After 5h hours of trying to see why my input does not have a correct value using fakeAsync (with fixture.whenStable works) it all comes down to swapping these two lines.....programming is fun!

Ravi Kumar · Accepted Answer · 2017-04-26 12:10:13Z

0

you have to add name attribute in your html input tag

<input type="text" [(ngModel)]="myValue" name="myValue"/>

answered Apr 26, 2017 at 12:10

Ravi Kumar

681 silver badge7 bronze badges

1 Comment

TBear Over a year ago

Thanks, but that doesn't fix the test. If you add a form-tag however, name is required.

Collectives™ on Stack Overflow

Testing two-way binding with ngModel in Angular2

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related