Angular 2.0.0 - Mocking Components

Question

Wie verspotten Sie eine Komponente in Angular 2.0.0 Final Release? Ich habe ein Problem darin, eine Komponente zu verspotten, die eine Variable hat, die ich für Logik in einer anderen Komponente verwende. Insbesondere möchte ich eine PrimeNG Datatable Auswahl vortäuschen.

Beispielcode unten.

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; 

my-component.component.html

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

my-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(); 
    } 
    } 

Wie ich es verspotten, so dass ich Werte an die Auswahl in den table.component.ts im zu testen, setzen kann meine -component.component.ts?

Answer 1

Die bananen box [()] Syntax ist nur eine Abkürzung für [](), wo der Name der Ausgabe () nur der Name des Eingangs ist [] mit Change suffixed. Zum Beispiel

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

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

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

Hier ist der Ausgang selectionChange ist der gleiche Name wie der Eingang selection, nur mit Change suffixed. Jetzt können wir die Syntax [(selection)] verwenden. Wenn wir einen Wert an selectionChange ausgeben, ändert Angular die Eigenschaft, die wir ihm zuweisen. Zum Beispiel

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

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

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

Wenn hier click auf der Datentabelle genannt wird, gibt es ein neues Ereignis mit dem Wert new value. Da die ParentComponent.value an die selectionChange gebunden ist, ändert Angular automatisch seinen Wert auf new value.