在@Input,angular4中的ngOnChanges之后测试DOM更改

时间:2018-11-06 05:48:21

标签: angular

我有一个具有剑道树视图的组件。每当@Input> treeData更改时,它就会ul > li > span(动态)生成树。

  @Input('treeData') dataTree;
  @Input('treeTagsData') treeTagsData;
  @Output() ItemChange = new EventEmitter();
  constructor() { }

  ngOnChanges(changes: SimpleChanges) {
    console.log(JSON.stringify(changes));
    if(changes.hasOwnProperty('dataTree')) {
      console.log(JSON.stringify(changes.dataTree));
    }
  }

<kendo-treeview [nodes]="dataTree" textField="name" kendoTreeViewExpandable kendoTreeViewSelectable kendoTreeViewHierarchyBinding childrenField="children" (nodeClick)="treeFuncItom($event,'id')">

在我的说明中,我尝试模拟更改数据

  it('Should generate kendo tree', fakeAsync(() => {

    const span = fixture.debugElement.nativeElement.querySelectorAll('span');

    // tslint:disable-next-line:quotemark
    const currValue = [{"parentId":"0","status":"Active","_id":"5bd15ebb2ee7be0026156ceb","name":"SNMP-Cat","description":"SNMP Category","createdAt":"2018-10-25T06:12:11.707Z","updatedAt":"2018-10-25T06:12:11.707Z","__v":0}];

    const changesObj: SimpleChanges = {
      treeTagsData: new SimpleChange(null, currValue,false)
    };

    component.ngOnChanges(changesObj);

    fixture.detectChanges();
    tick(999);
    const ul = fixture.debugElement.nativeElement.querySelector('ul.k-treeview-lines > li');
    fixture.detectChanges();
    console.log(ul);

  }));

我在这里得到ul> li为空。但是在实际组件中,它可以正确渲染。我如何在spec.ts中进行检查。

这是我的新手,请帮忙。

0 个答案:

没有答案