Không tải được .html ở góc 2.0.0 thử nghiệm

Question

Tôi có một vấn đề với Testbed trong góc 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) 
    })); 

Với thành phần:

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

tôi nhận được lỗi:

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 

Tôi nghĩ có thể do cấu hình không được thiết lập đúng. Tôi đang sử dụng ngụm để precompile nguyên cảo vào JavaScript, và tôi có cấu trúc dự án sau:

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

Nhưng nếu tôi giả định rằng tập tin html được biên dịch sẵn, và loại bỏ các lệnh .compileComponents() từ kiểm tra, tôi nhận được thông báo lỗi sau :

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! 

Và nếu tôi loại bỏ các async, tôi nhận được lỗi này:

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. 

Trong karma-test-shim.js, tôi có:

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

Tôi hy vọng ai đó có thể giúp tôi tìm ra, những gì Im làm sai cấu hình.

Answer 1

Tôi đã tự tìm ra giải pháp.

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

Bạn sẽ nghĩ rằng bạn có thể xác định tiền tố '/ base/build /' ở đâu đó. Tuy nhiên, tôi chưa thể xác định được nó.

Answer 2

Bạn có thể xác định đường cơ sở i karma.conf.js như một proxy:

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

Nguồn: https://github.com/angular/quickstart

Answer 3

thử này. làm việc tốt cho tôi. không cần phải ghi đè lên mẫu và chưa thiết lập bất kỳ con đường nào trong nghiệp.

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

đối với tôi nó không có vấn đề mà ur template html là .. trừ khi u muốn ghi đè lên nó