Nie udało się załadować .html w Kątowymi 2.0.0 testowania

Question

mam problem z pilotowej w ruchu obrotowym 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) 
    })); 

Given składnik:

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

pojawia się błąd:

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 

Myślę, że może być tak, ponieważ konfiguracja nie jest skonfigurowana prawidłowo. Używam łyk do precompile maszynopis w JavaScripcie i mam następującą strukturę projektu:

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

Ale jeśli założymy, że plik HTML skompilowane i usuń polecenia .compileComponents() z testu pojawia się następujący błąd :

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! 

A jeśli usunąć async, otrzymuję ten błąd:

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. 

w karma-test-shim.js, ja Mam:

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

Mam nadzieję, że ktoś może mi pomóc dowiedzieć się, co robię źle w konfiguracji.

Answer 1

Sam znalazłem rozwiązanie.

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

Można by pomyśleć, że powinieneś być w stanie określić przedrostek '/ base/build /' gdzieś. Jednak nie udało mi się go jeszcze zlokalizować.

Answer 2

Można zdefiniować ścieżkę bazową i karma.conf.js jako pełnomocnik:

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

Źródło: https://github.com/angular/quickstart

Answer 3

spróbować. działa dobrze dla mnie. nie ma potrzeby przesłonięcia szablonu i nie ustawiłem żadnej ścieżki w karmie.

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

dla mnie to nie robi sprawy, gdzie ur szablon HTML jest .. chyba że u chcą, aby zastąpić go