我已经阅读了在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来实际测试组件?我想我缺少了一些东西...
尝试交换两行:
tick();
fixture.detectChanges();
所以应该是
fixture.detectChanges();
tick();
这意味着首先需要设置值,然后等待角度更新控制值,因为它将在内部发生 Promise.then
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句