Angular 2.0.0 - 模拟组件

Question

如何模拟 Angular 2.0.0 最终版本中的组件？我在模拟一个组件时遇到问题，该组件具有我在另一个组件中用于逻辑的变量。具体来说，我想模拟一个 PrimeNG 数据表 选择。

示例代码如下。

table.component.html

        <p-dataTable
          #table
          [value]="myDatasource"
          [(selection)]="mySelections"
          ...
        >

table.component.ts

@Component({
  selector: 'my-table',
  templateUrl: './table.component.html'
})

export class TableComponent{
    @ViewChild('table') datatable;

我的-component.component.html

<my-table #mytable></my-table>

我的-component.component.ts

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html'
})

export class MyComponent {
  @ViewChild('#mytable') mytable;

  myFunction() : void  {
    if(this.mytable.table.selection.length === 0){
       console.log();
    } else{
       console.log();
    }
  }

我如何模拟它以便我可以在 table.component.ts 中为 selection 设置值] 在 my-component.component.ts?

中测试

Answer 1

banana-box [()] 语法只是 shorthand for [] ()，其中输出的名称 () 只是输入的名称 []，后缀为Change。例如

import { Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'p-datatable',
  template: `...`
})
class MockDataTable {
  @Input() value;

  @Input() selection;
  @Output() selectionChange = new EventEmitter();
}

此处输出 selectionChange 与输入 selection 同名，只是后缀为 Change。现在我们可以使用语法 [(selection)]。当我们向 selectionChange 发出一个值时，Angular 将相应地更改我们分配给它的属性。例如

@Component({
  template: '<p-datatable [(selection)]="value"></p-datatable>
})
class ParentComponent {
  value = somevalue;
}

class MockDataTable {
  @Output() selectionChange = new EventEmitter();

  click() {
    this.selectionChange('new value');
  }
}

此处，当对数据 table 调用 click 时，它会发出一个值为 new value 的新事件。因为 ParentComponent.value 绑定到 selectionChange，Angular 会自动将其值更改为 new value。

Angular 2.0.0 - 模拟组件

Angular 2.0.0 - Mocking Components

unit-testing

angular

mocking

karma-jasmine

primeng