角4的单元测试形式与双向绑定。从图

Question

更新模型的问题，我偶然发现翻过一个奇怪的问题。我正在使用基于模板的表单和双向绑定进行单元测试。这里是测试代码：

describe('Template Forms Input',() => { 

    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     imports: [BrowserModule, FormsModule], 
     declarations: [DummyFormsComponent], 
    }).compileComponents(); 
    }); 

    it('DOM input value changes the component model', fakeAsync(() => { 

    const fixture = TestBed.createComponent(DummyFormsComponent); 
    fixture.detectChanges(); 
    const dummyInputDe = fixture.debugElement.query(By.css('input')); 
    const dummyInputEl = dummyInputDe.nativeElement; 

    dummyInputEl.value = 'Super dummy'; 
    dummyInputEl.dispatchEvent(new Event('input')); 

    tick(); 
    fixture.detectChanges(); 

    expect(fixture.debugElement.query(By.css('h2')).nativeElement.textContent).toEqual('Super dummy'); 
    })); 
}); 

@Component({ 
    selector: 'dummy-forms', 
    template: ` 
    <form> 
     <input name="title" [(ngModel)]="model.anotherDummyValue"> 
    </form> 
    <h2>{{model.anotherDummyValue}}</h2> 
    ` 
}) 
class DummyFormsComponent { 

    model = { anotherDummyValue: '', date: '' }; 
} 

而且我无法通过测试。 h2总是空的。然而。如果我删除<form>标签，只保留输入在视图中。测试通过。

我觉得我做错了什么与异步行为。有人会有一个想法吗？

Answer 1

尝试在你的代码添加组件实例。更多的是我没有看到你的组件中的ngOnInit或构造函数。

component = fixture.componentInstance;

我们一般做以下方式

describe('EditComponent',() => { 
    let component: EditComponent; 
    let fixture: ComponentFixture<EditComponent>; 
    let displayText: DebugElement; 
    let editableText: DebugElement; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     imports: [ 
     FormsModule, 
     ReactiveFormsModule 
     ], 
     declarations: [ EditComponent, MockCkeditorComponent ] 
    }).compileComponents(); 
    })); 

    beforeEach(() => { 
    fixture = TestBed.createComponent(EditComponent); 
    component = fixture.componentInstance; 
    component.text = 'test input in the editor'; 
    displayText = fixture.debugElement.query(By.css('.row')); 
    editableText = fixture.debugElement.query(By.css('.editor-form')); 
    }); 

    it('should be created',() => { 
    component.ngOnInit(); 
    fixture.detectChanges(); 
    expect(component).toBeTruthy(); 
    }); 
.... 

在beforeEach declar您的组件。