Failed to load .html in Angular 2.0.0 test

Question

I have a problem with TestBed in Angular 2.0.0

beforeEach( async(() => { TestBed.configureTestingModule({ declarations: [ SomethingComponent ] }).compileComponents(); // compile template })); beforeEach(() => { fixture = TestBed.createComponent(SomethingComponent); comp = fixture.componentInstance; }); it('test', async(() => { fixture.detectChanges(); expect(true) })); 

Based on the component:

 @Component({ templateUrl: 'app/components/something/something.component.html' }) 

I get an error message:

 Firefox 48.0.0 (Mac OS X 10.11.0) Failed: Uncaught (in promise): Failed to load app/components/something/something.component.html resolvePromise@node _modules/zone.js/dist/zone.js:429:31 resolvePromise@node _modules/zone.js/dist/zone.js:414:17 scheduleResolveOrReject/<@node_modules/zone.js/dist/zone.js:462:17 ZoneDelegate.prototype.invokeTask@node _modules/zone.js/dist/zone.js:236:23 ProxyZoneSpec.prototype.onInvokeTask@node _modules/zone.js/dist/proxy.js:96:20 ZoneDelegate.prototype.invokeTask@node _modules/zone.js/dist/zone.js:235:23 Zone.prototype.runTask@node _modules/zone.js/dist/zone.js:136:28 drainMicroTaskQueue@node _modules/zone.js/dist/zone.js:368:25 ZoneTask/ this.invoke@node _modules/zone.js/dist/zone.js:308:25 

I think this may be because the configuration is not configured correctly. I use gulp to precompile TypeScript in JavaScript, and I have the following project structure:

 |_ grails-app |_ frontend |_ angular |_ app | |_ components | | |_ something | | |_ something.component.ts | | |_ something.component.html | |_ model | |_ test | |_ app.module.ts | |_ app.routing.ts | |_ main.ts |_ assets |_ build | |_ app | |_ components | | |_ something | | |_ something.component.html | | |_ something.component.js | | |_ something.component.js.map | |_ | |_ | | |_ node_modules |_ gulpfile.js |_ karma.conf.js |_ karma-test-shim.js |_ systemjs.config |_ |_ | 

But if I assume that the html file is precompiled and removed from the test the .compileComponents() command, I get the following error:

 Firefox 48.0.0 (Mac OS X 10.11.0) Error: Cannot create the component SomethingComponent as it was not imported into the testing module! 

And if I remove async , I will get this error:

 Firefox 48.0.0 (Mac OS X 10.11.0) Error: This test module uses the component SomethingComponent which is using a "templateUrl", but they were never compiled. Please call "TestBed.compileComponents" before your test. 

In karma-test-shim.js , I have:

 System.config({ baseURL: '/base/', paths: { // paths serve as alias 'npm:': 'node_modules/' }, map: { 'app': '/base/build/app/', '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', // angular testing umd bundles '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js', '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js', '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js', '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js', '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js', '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js', '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js', '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js', // other libraries 'rxjs': 'npm:rxjs' }, packages: { 'app': { defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' } } }); 

I hope someone helps me figure out what I'm doing wrong in the configuration.

Answer 1

You can define the base path i karma.conf.js as a proxy:

 // Proxied base paths for loading assets proxies: { // required for component assets fetched by Angular compiler "/app/": '/base/build/app/' }, 

Source: https://github.com/angular/quickstart

Answer 2

I found a solution myself.

 beforeEach( async(() => { TestBed.configureTestingModule({ declarations: [ SomethingComponent ] }) .overrideComponent(SomethingComponent, { set: { templateUrl: '/base/build/app/components/something/something.component.html' }} ) .compileComponents(); // compile template })); 

You might think that you should be able to define the prefix '/ base / build /' somewhere. However, I still could not find it.

Answer 3

try it. works great for me. there is no need to redefine the template and not set any path in karma.

 describe('test something', () => { //mock service if need to or ignore it class MockService { getActionOutput(body: string) { return Observable.from(['something']); } } beforeEach(() => { TestBed.configureTestingModule({ declarations: [ SomethingComponent ], imports: [ // HttpModule, etc. ], providers: [ BaseRequestOptions, MockBackend, { provide: Http, useFactory: function(backend: ConnectionBackend, defaultOptions: BaseRequestOptions) { return new Http(backend, defaultOptions); }, deps: [MockBackend, BaseRequestOptions] }, //Mock service if need to or ignore it {provide: SomeService, useClass: MockService} ] }); fixture = TestBed.createComponent(SomeComponent); component = fixture.componentInstance; }); it('should work something', async(() => { expect(component).toBeDefined(); })); }); 

for me it doesn't matter where ur html template is .. if u doesn't want to override it