@angular 2.4.5，@ angular-cli 1.0.0-rc.1，karma 1.4.1，@ angular / material 2.0.0-beta.2
我无法使用包含材料设计代码的简单应用程序进行基础运行测试。
//帐户edit.component.html
<mat-card tdMediaToggle="gt-xs" [mediaClasses]="['push']" [@transition]="pageState">
<mat-toolbar color="primary">
<span>{{accountForm.get('accountName').value}}</span>
<span flex></span>
</mat-toolbar>
<mat-divider></mat-divider>
<mat-card-content class="push-bottom-none">
<form [formGroup]="accountForm">
<div layout="row">
<mat-input-container flex>
<input mdInput
type="text"
placeholder="Account Name"
formControlName="accountName"
[focus]="inputFocused">
<mat-hint align="start">
<span [hidden]="accountForm.get('accountName').pristine || !accountForm.get('accountName').errors?.required" class="tc-red-600">Account name is required</span>
<span [hidden]="accountForm.get('accountName').pristine || !accountForm.get('accountName').errors?.maxlength" class="tc-red-600">Maximum length is 50 characters</span>
</mat-hint>
<mat-hint align="end">{{characterCount("accountName")}} / 50</mat-hint>
</mat-input-container>
</div>
<div layout="row">
<mat-input-container flex>
<input mdInput
type="text"
placeholder="Status"
formControlName="status">
</mat-input-container>
</div>
</form>
</mat-card-content>
<mat-divider></mat-divider>
<mat-card-actions>
<button mat-button [disabled]="!accountForm.valid" color="primary" (click)="save()">SAVE</button>
<button mat-button (click)="openConfirm()">CANCEL</button>
</mat-card-actions>
</mat-card>
//帐户edit.component.spec
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { AccountEditComponent } from './account-edit.component';
import { MaterialModule } from "@angular/material";
describe('AccountEditComponent', () => {
let component: AccountEditComponent;
let fixture: ComponentFixture<AccountEditComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AccountEditComponent ],
imports: [MaterialModule],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AccountEditComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
// Karma Spec-List
Failed: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'mediaClasses' since it isn't a known property of 'mat-card'.
1. If 'mat-card' is an Angular component and it has 'mediaClasses' input, then verify that it is part of this module.
2. If 'mat-card' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
("<mat-card tdMediaToggle="gt-xs" [ERROR ->][mediaClasses]="['push']" [@transition]="pageState">
<mat-toolbar color="primary">
<span>{{acco"): AccountEditComponent@0:32
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("
<mat-divider></mat-divider>
<mat-card-content class="push-bottom-none">
<form [ERROR ->][formGroup]="accountForm">
<div layout="row">
<mat-input-container flex>
"): AccountEditComponent@7:10
Can't bind to 'focus' since it isn't a known property of 'input'. (" placeholder="Account Name"
formControlName="accountName"
[ERROR ->][focus]="inputFocused">
<mat-hint align="start">
<span [hidden]="accountForm.ge"): AccountEditComponent@14:17
Error: Template parse errors:
Can't bind to 'mediaClasses' since it isn't a known property of 'mat-card'.
1. If 'mat-card' is an Angular component and it has 'mediaClasses' input, then verify that it is part of this module.
2. If 'mat-card' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
("<mat-card tdMediaToggle="gt-xs" [ERROR ->][mediaClasses]="['push']" [@transition]="pageState">
<mat-toolbar color="primary">
<span>{{acco"): AccountEditComponent@0:32
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("
<mat-divider></mat-divider>
<mat-card-content class="push-bottom-none">
<form [ERROR ->][formGroup]="accountForm">
<div layout="row">
<mat-input-container flex>
"): AccountEditComponent@7:10
Can't bind to 'focus' since it isn't a known property of 'input'. (" placeholder="Account Name"
formControlName="accountName"
[ERROR ->][focus]="inputFocused">
<mat-hint align="start">
<span [hidden]="accountForm.ge"): AccountEditComponent@14:17
at SyntaxError.ZoneAwareError (http://localhost:9877/base/src/polyfills.ts?cfbbd9932b8de37e7e2bb2d6bc6b813677eb5dd9:24495:33)
at SyntaxError.BaseError [as constructor] (http://localhost:9877/base/src/test.ts?cb11aab543fb05b4ed5bf4b4760f4f7c2197d07c:107390:16)
at new SyntaxError (http://localhost:9877/base/src/test.ts?cb11aab543fb05b4ed5bf4b4760f4f7c2197d07c:9004:16)
at TemplateParser.parse (http://localhost:9877/base/src/test.ts?cb11aab543fb05b4ed5bf4b4760f4f7c2197d07c:25187:19)
at JitCompiler._compileTemplate (http://localhost:9877/base/src/test.ts?cb11aab543fb05b4ed5bf4b4760f4f7c2197d07c:77984:68)
at http://localhost:9877/base/src/test.ts?cb11aab543fb05b4ed5bf4b4760f4f7c2197d07c:77867:62
at Set.forEach (native)
at JitCompiler._compileComponents (http://localhost:9877/base/src/test.ts?cb11aab543fb05b4ed5bf4b4760f4f7c2197d07c:77867:19)
at createResult (http://localhost:9877/base/src/test.ts?cb11aab543fb05b4ed5bf4b4760f4f7c2197d07c:77769:19)
at ZoneDelegate.invoke (http://localhost:9877/base/src/polyfills.ts?cfbbd9932b8de37e7e2bb2d6bc6b813677eb5dd9:23837:26)
at AsyncTestZoneSpec.onInvoke (http://localhost:9877/base/src/test.ts?cb11aab543fb05b4ed5bf4b4760f4f7c2197d07c:180937:39)
at ProxyZoneSpec.onInvoke (http://localhost:9877/base/src/test.ts?cb11aab543fb05b4ed5bf4b4760f4f7c2197d07c:181639:39)
at ZoneDelegate.invoke (http://localhost:9877/base/src/polyfills.ts?cfbbd9932b8de37e7e2bb2d6bc6b813677eb5dd9:23836:32)
at Zone.run (http://localhost:9877/base/src/polyfills.ts?cfbbd9932b8de37e7e2bb2d6bc6b813677eb5dd9:23629:43)
at http://localhost:9877/base/src/polyfills.ts?cfbbd9932b8de37e7e2bb2d6bc6b813677eb5dd9:24216:57
我在这里缺少什么？谢谢！