模擬單元測試<ng-template> - 角2

我需要能夠模擬角的ng-template單元測試。當我嘗試運行它，我得到這個錯誤：模擬單元測試<ng-template> - 角2

Components on an embedded template: NgTemplateStub (" 
<grid-column> 
    [ERROR ->]<ng-template gridCellTemplate dataItem> 
     <custom-column-template [data]="dataItem"></custom-column-template> 
    </ng-template> 
<grid-column> 
")

這裏是我的模擬VERSON的ng-template

@Component({ 
    selector: "ng-template", 
    template: "<div><ng-content></ng-content></div>", 
}) 
export class NgTemplateStub {}

下面是實際的模板我試圖嘲弄

<grid [data]="form$ | async" [pageSize]="pageSize"> 
    <grid-column width="50"> 
     <ng-template gridCellTemplate dataItem> 
      <custom-column [dataItem]="dataItem"></custom-column> 
     </ng-template> 
    </grid-column> 
    <!-- other columns --> 
</grid>

這裏是TestModule

fixture = TestBed.configureTestingModule({ 
    declarations: [ 
     ... 
     FormsGridComponent, 
     NgTemplateStub, 
    ], 
    imports: [ 
     ... 
    ], 
    providers: [ 
     ... 
    ], 
}).createComponent(GridComponent)

是否可以模擬ng-template？

來源

2017-06-21 ed-tester

您可以創建一個模擬的gridCellTemplate指令。 –

不要以爲你想出了一個辦法呢？ – Askanison4

@ Askanison4。我不得不做一些不同的事情，因爲ng-template不是一個組件或指令（事實證明）。所以試圖爲它創建一個模擬是不可能的。不幸的是，我不記得我採取的替代路線。 –

您可以通過您的測試規範之前創建WrapperComponent實現這一點：

@Component({ 
    template: ` 
     <my-custom-component [(dataItems)]='dataBinding'> 
      <ng-template #my-template let-item> 
       <h1>{{item.Text}}</h1> 
      </ng-template> 
     </my-custom-component>` 
}) 
class WrapperComponent { 
    @ViewChild(MyCustomComponent) myCustomComponent: MyCustomComponent; 
    public dataBinding = [{ 
     Text: 'Hello' 
    },{ 
     Text: 'World' 
    }]; 
}

然後，在你beforeEach你可以到包裝的參考和試驗下的部件在每個測試用例使用方法：

beforeEach(() => { 
    ... 
    let fixture = TestBed.createComponent(WrapperComponent); 
    let wrapperComponent = fixture.componentInstance; 

    // get a reference to the actual component we want 
    let component = fixture.componentInstance.myCustomComponent; 
    let itemElement = fixture.debugElement.nativeElement; 
});

來源

2018-01-09 09:42:37 Askanison4

模擬單元測試<ng-template> - 角2

回答

相關問題