góc 2 RC6: 'mẫu-list' không phải là một yếu tố được biết đến

Question

Đơn giản chỉ cần chạy ứng dụng tôi nhận được không có lỗi và nó hoạt động tốt, nhưng khi tôi chạy thử nghiệm của tôi, tôi nhận được lỗi sau:

'pattern-list' is not a known element: 
    1. If 'pattern-list' is an Angular component, then verify that it is part of this module. 
    2. If 'pattern-list' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. (" 
     [ERROR ->]<pattern-list></pattern-list> 

Tôi đã có vấn đề này đầu tiên khi tôi chỉ chạy ứng dụng với 'npm-start' và tôi đã giải quyết nó thêm thành phần cần thiết vào app.module trong phần khai báo. Nhưng bây giờ như tôi muốn thử nghiệm tôi nhận được cùng một lỗi và tôi không biết tại sao. Đây là mã của tôi:

app.module.ts

@NgModule({ 
    imports: [ BrowserModule, FormsModule, HttpModule, ReactiveFormsModule ], 
    declarations: [ AppComponent, PatternListComponent, PatternDetailComponent, WidgetListComponent, 
    FormComponent, DefaultWidget, LabelComponent, CheckboxWidget ], 
    bootstrap: [ AppComponent ], 
    providers: [ WidgetService ] 
}) 
export class AppModule { } 

app.component.ts

@Component({ 
    selector: 'my-app', 
    template: ` 
      <pattern-list></pattern-list> 
      ` 
    }) 
    export class AppComponent { } 

pattern.list.component:

@Component({ 
    selector: 'pattern-list', 
    template: ` 
    <div class="patterns"> 
     <pattern-detail *ngFor="let p of patternDetails" [metadata]="p" 
     (selectPattern)="selectPattern(p)"></pattern-detail> 
    </div> 
    <div *ngIf="selectedPattern" class="widget-list"> 
     <widget-list [pattern]="selectedPattern"> 
     </widget-list> 
    </div> 
    `, 
    styleUrls: ['/css/styles.css'] 
}) 
export class PatternListComponent implements OnInit{ 
    selectedPattern: PatternDetails; 
    constructor(private http: Http) { 
    } 

    patternDetails: PatternDetails[]; 

    ngOnInit() { 
    this.getPatterns(); 
    } 

    getPatterns() { 
    this.http.get('/app/assets/patternDetails.json') 
     .map((res:Response) => res.json()) 
     .subscribe(
     data => { this.patternDetails = data.patternList; }, 
     err => console.error('The problem is: ' + err), 
     () => console.log('done') 
    ); 
    console.log(this.patternDetails); 
    } 

    selectPattern(pattern: PatternDetails) { 
    this.selectedPattern = pattern; 
    this.setSelectedProperty(pattern); 
    } 

    setSelectedProperty(selectedPattern: PatternDetails) { 
    for (var p in this.patternDetails) { 
     if (this.patternDetails[p] == selectedPattern) { 
     this.patternDetails[p].selected = true; 
     } else { 
     this.patternDetails[p].selected = false; 
     } 
    } 
    } 
} 

tập tin thử nghiệm của tôi : app.component.spec.ts

describe('AppComponent with TCB', function() { 
    beforeEach(() => { 
    TestBed.configureTestingModule({declarations: [AppComponent]}); 
    }); 
    describe('asdfasdf', function() { 
    beforeEach(async(() => { 
     TestBed.compileComponents(); 
    })); 
    it('should instantiate component',() => { 
     let fixture = TestBed.createComponent(AppComponent); 
     expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent'); 
    }); 
    }); 
}); 

Tôi đang sử dụng webpack, tôi không chắc liệu điều đó có quan trọng hay không.

Answer 1

tôi nghĩ rằng bạn cần

TestBed.configureTestingModule({imports: [AppModule]}); 

Answer 2

Như micronyks mentined trong câu trả lời của ông tôi cần phải thêm phụ thuộc khác của tôi trong tờ khai của configureTestingModule. Vì vậy, nếu tôi sửa đổi cấu hình mô-đun của mình trong thử nghiệm như sau:

TestBed.configureTestingModule({declarations: [AppComponent,PatternListComponent]}); 

nó sẽ hoạt động. Có vẻ như bạn cần thêm mọi phụ thuộc vào khai báo configureTestingModule.

Answer 3

Cách tiếp cận hiện tại để tránh các lỗi này khi kiểm tra các thành phần là làm cho các bài kiểm tra của chúng cạn. Theo the official docs:

Add NO_ERRORS_SCHEMA to the testing module's schemas metadata to tell the compiler to ignore unrecognized elements and attributes. You no longer have to declare irrelevant components and directives.

Vì vậy, bạn chỉ có thể nhập khẩu NO_ERRORS_SCHEMA và thêm nó vào thử nghiệm mô-đun cấu hình của bạn:

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

TestBed.configureTestingModule({ 
    schemas: [ NO_ERRORS_SCHEMA ] 
}) 

Nhưng phải nhận thức:

Shallow component tests with NO_ERRORS_SCHEMA greatly simplify unit testing of complex templates. However, the compiler no longer alerts you to mistakes such as misspelled or misused components and directives.