在Angular2中使用ngModel测试双向绑定

TBear

我已经阅读了在Angular2中测试双向绑定的文档。实际上,所有示例都很简单,也太简单。

看来他们只测试外装...

我将发布一些代码来说明:

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);
    }))
})

因此,有没有一种方法可以通过设置myValue来实际测试组件?我想我缺少了一些东西...

yurzui

尝试交换两行:

tick();
fixture.detectChanges();

所以应该是

fixture.detectChanges();
tick();

这意味着首先需要设置值,然后等待角度更新控制值,因为它将在内部发生 Promise.then

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

柱塞示例

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Angular2中使用不带ngModel的双向绑定编写自定义指令

在Angular 2中使用NgModel和可变绑定属性进行双向绑定?

Angular2 ngModel 双向绑定不起作用

Angular2中的setAttribute用于双向数据绑定

Angular2:如何将ngModel与其他组件的双向绑定变量链接?

使用双向绑定将<select>中的Angular2 <option>默认

Angular NgModel双向绑定单元测试

选择Angular2的双向绑定

Angular 2,primeng:嵌套* ngFor中的双向绑定和* ngFor中Primeng中的ngModel

用Jest测试Angular中的双向绑定

使用ngModel的Angular 2双向绑定不起作用

如何在Angular Material中不使用ngModel设置双向绑定

用ngModel进行Angular 2双向数据绑定

Angular2从ngFor绑定ngModel

(意外行为)Angular 模板中的条件双向绑定 [(ngModel)]

在 Angular2 中使用 ngModel 进行选择框验证

如何在Angular2中使用* ngFor动态生成ngModel?

在angular2中使用[(ngModel)]时初始化空白表格

angular2测试:由于它不是'input'的已知属性,因此无法绑定到'ngModel'

从父组件到子组件的angular2中的双向数据绑定

Angular2是否可以使用带有复选框的双向绑定?

Angular 双向绑定不起作用 [(NgModel)]

Angular2组件@Input双向绑定

在angular2 / typescript中提交之前限制双向绑定

Angular2双向数据绑定

Angular2:父/子组件内部的双向绑定

Angular2:Map对象上的双向绑定

嵌套 ngFor 与双向数据绑定 Angular2

如何测试Angular 2双向绑定输入值