失敗的角2.0.0測試

Question

加載的.html我有角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) 
    })); 

由於組件與測試牀的一個問題：

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

我得到的錯誤：

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 

我想這可能是因爲配置沒有設置正確。我使用的一口預編譯打字稿成JavaScript，和我有以下項目結構：

|_ 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 
    |_ 
    |_ 
    | 

但是，如果我假設HTML文件進行預編譯，並從測試中刪除命令.compileComponents()，我得到以下錯誤：

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! 

如果我刪除async，我得到這個錯誤：

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. 

在karma-test-shim.js，我有：

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' 
    } 
} 
}); 

我希望有人能幫助我弄清楚，什麼Im做錯誤的配置。

Answer 1

我自己找到了解決方案。

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

你會想，你應該能夠在某處定義前綴'/ base/build /'。但是，我還沒有找到它。

Answer 2

您可以定義的基本路徑我karma.conf.js作爲代理：

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

來源：https://github.com/angular/quickstart

Answer 3

嘗試。對我來說工作得很好。不需要重寫模板，也沒有在業力中設置任何路徑。

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(); 
    })); 
}); 

對我來說，不事關地方UR HTML模板是..除非ü要重寫它