我有一个组件。它的值为@Input。如果调用onDelete()方法,则会有一个EventEmitter,它将发出放入的值。我正在尝试为此组件编写测试,并且我从发射器获取的值是未定义的,而不是我传递的值。
以下是测试:
import { CheckedComponent } from '../checked/checked.component';
describe('CheckedComponent', () => {
it('emits the input value on delte', () => {
let total = null;
const component = new CheckedComponent();
component.item = 'example';
component.delete.subscribe(item => {
total = item;
});
component.onDelete()
console.log("HERE", total)
expect(total).not.toBeNull();
// expect(total).toEqual('example');
});
});
注释行不起作用。总数等于"未定义,"不是'例子。'有趣的是,如果我是console.log(component.item),我仍然会得到“'示例'一块数据。
以下是实际组件:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
templateUrl: './checked.component.html',
selector: 'checked',
styleUrls: ['./checked.component.css']
})
export class CheckedComponent {
@Input('item') item;
@Output() delete = new EventEmitter()
onDelete() {
this.delete.emit(this.item.value)
}
}
不确定我在这里做错了什么。在Angular 4中测试半新。任何指导都将不胜感激。谢谢!
答案 0 :(得分:0)
当您发出this.delete.emit(this.item.value)
时,需要在单元测试中为item
分配适当的值。更新您的单元测试代码,如下所示。
const component = new CheckedComponent();
component.item = { value : 'example'};
您应该期望subscribe方法中的值。因为“total”的值可能会在稍后的时间分配“item”的值。
import { CheckedComponent } from '../checked/checked.component';
describe('CheckedComponent', () => {
it('emits the input value on delte', () => {
let value = null;
const component = new CheckedComponent();
component.item = { value : 'example'};
component.delete.subscribe(item => {
value= item;
console.log("HERE", total)
expect(value).not.toBeNull();
expect(value).toEqual('example');
});
component.onDelete()
});
});
答案 1 :(得分:0)
问题是组件期望具有VALUE的对象,而不是纯值。这修好了它:
component.item = {value:' example'};