Question

我有一个Angular 2组件工作正常但是当我运行此代码ng test来传递所有测试时，我收到followind错误消息：

 Can't bind to 'ngModel' since it isn't a known property of 'mdl-textfield'.                                                                           
    1. If 'mdl-textfield' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.                                 
    2. If 'mdl-textfield' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.      
     ("ditedIndex !== i">{{role.name}}</span>                                                                                                             
                        <mdl-textfield *ngIf="editedIndex === i" [ERROR ->][(ngModel)]="roles[i].name" class="full-width" value={{role.name}}></mdl-textfi

ELD＆GT;

这是我的HTML：

<tr *ngFor="let role of roles; let i = index;" (click)="doSelect(role, i)">
            <td class="table-id">{{ i + 1 }}</td>
            <td>
                <span *ngIf="editedIndex !== i">{{role.name}}</span>
                <mdl-textfield *ngIf="editedIndex === i" [(ngModel)]="role.name" class="full-width" value={{role.name}}></mdl-textfield>
            </td>
            <td>
                <span *ngIf="editedIndex !== i">{{role.description}}</span>
                <mdl-textfield *ngIf="editedIndex === i" [(ngModel)]="role.description" class="full-width" value={{role.description}}></mdl-textfield>
            </td>
            <td>
                <button *ngIf="editedIndex === i" mdl-button mdl-button-type="mini-fab" mdl-colored="primary" (click)="doSave($event)"
                    mdl-ripple><mdl-icon>edit</mdl-icon></button>
                <button *ngIf="editedIndex === i" mdl-button mdl-button-type="mini-fab" mdl-colored="accent" (click)="doDelete($event, i)"
                    mdl-ripple><mdl-icon>remove</mdl-icon></button>
            </td>
        </tr>

角色是具有2个属性的模型。

为什么它在运行时工作正常，但它在测试中失败了!!

Answer 1

您需要使用任何所需的模块/组件/等配置测试台。你唯一免费获得的是FormsModule。其他一切，你需要从头开始配置。这意味着添加TestBed.configureTestingModule({ imports: [ FormsModule, AnyMDLModule ], declarations: [], providers: [] })，以及用于MDL的任何模块（组件/指令/等）

NuGet.exe Pack Client.csproj -Exclude **/*.tt

Answer 2

因为我使用自定义组件，我发现我必须将CUSTOM_ELEMENTS_SCHEMA导入到app.component.spec.ts

import { CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';

并在架构上使用它

TestBed.configureTestingModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    MdlModule,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
});

Angular 2测试得到错误

2 个答案: