模拟单元测试<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

回答

相关问题