Yasemin testinde şablon ayrıştırma hatası ancak gerçek uygulama değil

Question

Köşeli bir açısal 2 bileşenini test etmek için bir Jasmine spec geliştirdim MiddleRowComponent.

zone.js:388 Unhandled Promise rejection: Template parse errors: 
'circles' is not a known element: 
1. If 'circles' is an Angular component, then verify that it is part of this module. 
2. If 'circles' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("</div> 
     <div class="col-md-10 col-sm-12 offset-md-1 flex-xs-middle" id="circles-div"> 
     [ERROR ->]<circles (onWordChanged)="onWordChanged($event)"></circles> 
     </div> 
     <div class="col-md-10 "): MiddleRowComponent@9:9 
'custom-button' is not a known element: 

Ancak

ben sadece normal gibi tarayıcıda benim web uygulaması çalıştırırsanız, hata oluşmaz: Ben yasemin testi çalıştırdığınızda, bu hatayı veriyor. circles gerçekten modülün bir parçasıdır. Ve custom-button, içe aktarılan bir paylaşılan modülün bir parçasıdır. İşte module.ts geçerli:

import { NgModule }   from '@angular/core'; 
import { CommonModule }  from '@angular/common'; 
import { SharedModule } from '../shared/shared.module'; 
import * as LandingPage from './index'; 

@NgModule({ 
    imports: [ CommonModule, SharedModule ], 
    declarations: [ 
     LandingPage.MiddleRowComponent, 
     LandingPage.LandingPageComponent, 
     LandingPage.CirclesComponent 
    ], 
    exports: [ LandingPage.LandingPageComponent ], 
}) 
export class LandingPageModule { } 

Her şey ithal ve olması ve onu test etmeden uygulamayı çalıştırırken çalışır gerektiği gibi ilan edilir. Bileşen şablonunu ayrı bir şablon dosyasından almanın asenkron doğası göz önüne alındığında, beforeEach çalışmasını yapmak için done kullanın. Testi bir jasmine spec koşucu html dosyası ile berbat ediyorum. Bileşenlerim, MiddleRowComponent'un, jasmine testinde bilinen öğeler olmadığı halde, uygulamayı normal olarak çalıştırırken nasıl oluyor?

import 'zone.js/dist/long-stack-trace-zone.js'; 
import 'zone.js/dist/async-test.js'; 
import 'zone.js/dist/fake-async-test.js'; 
import 'zone.js/dist/sync-test.js'; 
import 'zone.js/dist/proxy.js'; 
import 'zone.js/dist/jasmine-patch.js'; 

import { ComponentFixture, TestBed } from '@angular/core/testing'; 
import { 
    BrowserDynamicTestingModule, 
    platformBrowserDynamicTesting 
} from '@angular/platform-browser-dynamic/testing'; 
import { By } from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 

import { MiddleRowComponent } from './middle-row.component'; 

let comp: MiddleRowComponent; 
let fixture: ComponentFixture<MiddleRowComponent>; 
let de: DebugElement; 
let el: HTMLElement; 

describe('MiddleRowComponent',() => { 
    var fixture: any; 
    var comp: any; 
    beforeAll(() => { 
     TestBed.resetTestEnvironment(); 
     TestBed.initTestEnvironment(BrowserDynamicTestingModule, 
      platformBrowserDynamicTesting()); 
    }); 

    beforeEach((done) => { 
     TestBed.configureTestingModule({ 
      declarations: [MiddleRowComponent], // declare the test component 
     }).compileComponents().then(() => { 
      fixture = TestBed.createComponent(MiddleRowComponent); 
      comp = fixture.componentInstance; // MiddleRowComponent test instance 
      // query for the title <h1> by CSS element selector 
      de = fixture.debugElement.query(By.css('h1')); 
      el = de.nativeElement; 
      done(); 
     }); 
    }); 

    it('should display original title',() => { 
     fixture.detectChanges(); 
     expect(el.textContent).toContain(comp.word); 
    }); 

    it('should display a different test title',() => { 
     comp.word = 'Test Title'; 
     fixture.detectChanges(); 
     expect(el.textContent).toContain('Test Title'); 
    }); 
}); 

tam hata:

zone.js:388 Unhandled Promise rejection: Template parse errors: 
'circles' is not a known element: 
1. If 'circles' is an Angular component, then verify that it is part of this module. 
2. If 'circles' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("</div> 
     <div class="col-md-10 col-sm-12 offset-md-1 flex-xs-middle" id="circles-div"> 
     [ERROR ->]<circles (onWordChanged)="onWordChanged($event)"></circles> 
     </div> 
     <div class="col-md-10 "): MiddleRowComponent@9:9 
'custom-button' is not a known element: 
1. If 'custom-button' is an Angular component, then verify that it is part of this module. 
2. If 'custom-button' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" 
     </div> 
     <div class="col-md-10 offset-md-1 flex-xs-middle" id="try-now-div"> 
     [ERROR ->]<custom-button buttonName="try now" (click)="tryNowClick()"></custom-button> 
     </div> 
    </div> 
"): MiddleRowComponent@12:9 ; Zone: ProxyZone ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: 
'circles' is not a known element: 
1. If 'circles' is an Angular component, then verify that it is part of this module. 
2. If 'circles' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("</div> 
     <div class="col-md-10 col-sm-12 offset-md-1 flex-xs-middle" id="circles-div"> 
     [ERROR ->]<circles (onWordChanged)="onWordChanged($event)"></circles> 
     </div> 
     <div class="col-md-10 "): MiddleRowComponent@9:9 
'custom-button' is not a known element: 
1. If 'custom-button' is an Angular component, then verify that it is part of this module. 
2. If 'custom-button' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" 
     </div> 
     <div class="col-md-10 offset-md-1 flex-xs-middle" id="try-now-div"> 
     [ERROR ->]<custom-button buttonName="try now" (click)="tryNowClick()"></custom-button> 
     </div> 
    </div> 
"): MiddleRowComponent@12:9 
    at TemplateParser.parse (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:7730:21) 
    at RuntimeCompiler._compileTemplate (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17573:53) 
    at eval (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17493:64) 
    at Set.forEach (native) 
    at RuntimeCompiler._compileComponents (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17493:21) 
    at createResult (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17404:21) 
    at ZoneDelegate.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:232:26) 
    at ProxyZoneSpec.onInvoke (http://localhost:3002/node_modules/zone.js/dist/proxy.js:79:39) 
    at ZoneDelegate.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:231:32) 
    at Zone.run (http://localhost:3002/node_modules/zone.js/dist/zone.js:114:43)consoleError @ zone.js:388_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339 
zone.js:390 Error: Uncaught (in promise): Error: Template parse errors:(…) 

Answer 1

Eh, sadece MiddleRowComponent ilan etti senin testin modül İşte

yasemin spec olduğunu. Bu yüzden CircleComponent bilmediği:

TestBed.configureTestingModule({ 
    declarations: [MiddleRowComponent], // declare the test component 
}) 

test modülünün beyanlarına gerekli tüm bileşenler ekleyin veya test modülünün ithalatında LandingPageModule ekleyin.

Answer 2

Benzer bir sorunla karşılaştım ve bu sayfayı buldum ve JB Nizet'in cevabı bana bir çözüm getirirken, benim için de işe yaramadı. Asıl soruya katı cevabından uzaklaşmaya çalışmıyorum, sadece gelecek olan kişiye yardım etmeye çalışıyorum.

Benim özel bileşenimin (bu örnekte MiddleRowComponent) üçüncü taraf bir bileşen kullanması dışında benim sorunum tamamen OP'ler gibiydi. Gerçek uygulamada gayet iyi çalışmış olsa da, şablonumda kullanılan üçüncü taraf etiketi hakkında birim testi hatası verildi. Benim için çözüm ayrıca benim test modülünde üçüncü parti için bir imports içerecek şekilde oldu:

TestBed.configureTestingModule({ 
    declarations: [MiddleRowComponent], 
    imports: [TheThirdPartyModule] 
}) 

Sonra birim testler hatasız çalıştı. Umarım yardımcı olur!