模拟 <ng-template> 进行单元测试 - Angular 2答案

【问题标题】：Mock the <ng-template> for unit test - Angular 2模拟 <ng-template> 进行单元测试 - Angular 2
【发布时间】：2017-06-21 23:07:13
【问题描述】：

我需要能够模拟 Angular 的 ng-template 进行单元测试。当我尝试运行它时，出现此错误：

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>
")

这是我的模拟版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>

这里是测试模块

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

可以模拟ng-template吗？

【问题讨论】：

你可以创建一个模拟 gridCellTemplate 指令。
不认为你曾经想出解决这个问题的方法吗？
@Askanison4。我不得不做一些不同的事情，因为 ng-template 不是组件或指令（事实证明）。所以试图为它创建一个模拟是不可能的。不幸的是，我不记得我选择的替代路线了。
我实际上通过几个答案的组合找到了一种很好的方法。我会在这里发布它作为答案，以防将来对其他人有所帮助

标签： angular unit-testing templates jasmine

【解决方案1】：

您可以通过在测试规范之前创建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;
});

【讨论】：