我已经阅读了在 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 来实际测试组件？我想我错过了一些东西......