jhipster: Laufen Karma Tests an Komponenten mit externer Vorlage

Question

Überblick über die Ausgabe

Hallo,

Ich versuche, den HTML-Teil einer Komponente mit externer Vorlage in einem jhipster Gateway Micro zu testen, wie beschreiben im eckigen Dokument (https://angular.io/guide/testing#test-a-component-with-an-external-template). Ich habe die Bannerkomponente mit angular-cli excally wie im Beispiel generiert und den gleichen Test gesetzt. Wenn ich Tests (Garnprobe) starte, erhalte ich einen Fehler (siehe Abschnitt unten reproduzieren).

Ich habe die gleiche Komponente in einem leeren eckigen Projekt getestet und es funktioniert gut.

Ich habe in den Testdateien gesehen von jhipster erzeugt, dass die Vorlage durch eine leere overrided ist, aber ich weiß nicht, warum understant:

beforeEach(async(() => { 
      TestBed.configureTestingModule({ 
       imports: [MyAppTestModule], 
       declarations: [TrucComponent], 
       providers: [ 
        TrucService 
       ] 
      }) 
      .overrideTemplate(TrucComponent, '') // If removed, get the same compile error 
      .compileComponents(); 
     })); 

Ich verstehe nicht, was ich tue falsch, und was soll ich tun, damit es funktioniert ...

Danke für Ihre Hilfe.

Marek

Motivation für oder Use Case

Wir sollten in der Lage html Bestandteil in jHipster Projekt als Winkel recommand es in dem offiziellen Dokument zu testen.

Fehler reproduzieren

1. das Banner Komponente erstellen und den Code mit Beispiel hier (https://embed.plnkr.co/?show=preview&show=app%2Fbanner.component.spec.ts)

2. Erstellen Sie die Testdatei im Verzeichnis/test/javascript/spec Verzeichnis gefunden füllen Ändern Sie den Pfad im Import, um die Komponente korrekt zu laden

3. Starten yarn test

4. Shoud diese Art von Fehlern angezeigt

20 12 2017 13:57:47.328:WARN [web-server]: 404: /%3Ch1%3E%7B%7Btitle%7D%7D%3C/h1%3E 20 12 2017 13:57:47.352:WARN [web-server]: 404: /%3Ch1%3E%7B%7Btitle%7D%7D%3C/h1%3E 20 12 2017 13:57:47.372:WARN [web-server]: 404: /%3Ch1%3E%7B%7Btitle%7D%7D%3C/h1%3E

ERROR: 'Unhandled Promise rejection:', 'Failed to load %3Ch1%3E%7B%7Btitle%7D%7D%3C/h1%3E', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', 'Failed to loadERROR: 'Unhandled Promise rejection:', 'Failed to load %3Ch1%3E%7B%7Btitle%7D%7D%3C/h1%3E', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', 'Failed to load %3Ch1%3E%7B%7Btitle%7D%7D%3C/h1%3E', undefined PhantomJS 2.1.1 (Linux 0.0.0): Executed 64 of 66 SUCCESS (0 secs/1.547 secs) ERROR: 'Unhandled Promise rejection:', 'Failed to load %3Ch1%3E%7B%7Btitle%7D%7D%3C/h1%3E', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', 'Failed to load %3Ch1%3E%7B%7Btitle%7D%7D%3C/h1%3E', undefined PhantomJS 2.1.1 (Linux 0.0.0) TestComponent should create FAILED Failed: Uncaught (in promise): Failed to load %3Ch1%3E%7B%7Btitle%7D%7D%3C/h1%3E resolvePromise@webpack:///node_modules/zone.js/dist/zone.js:784:0 <- spec/entry.ts:120708:78 resolvePromise@webpack:///node_modules/zone.js/dist/zone.js:754:0 <- spec/entry.ts:120678:31 webpack:///node_modules/zone.js/dist/zone.js:831:0 <- spec/entry.ts:120755:31 invokeTask@webpack:///node_modules/zone.js/dist/zone.js:424:0 <- spec/entry.ts:120348:36 onInvokeTask@webpack:///node_modules/zone.js/dist/proxy.js:103:0 <- spec/entry.ts:123417:49 invokeTask@webpack:///node_modules/zone.js/dist/zone.js:423:0 <- spec/entry.ts:120347:48 runTask@webpack:///node_modules/zone.js/dist/zone.js:191:0 <- spec/entry.ts:120115:57 drainMicroTaskQueue@webpack:///node_modules/zone.js/dist/zone.js:595:0 <- spec/entry.ts:120519:42 run@webpack:///node_modules/core-js/modules/es6.promise.js:87:0 <- spec/entry.ts:118081:29 webpack:///node_modules/core-js/modules/es6.promise.js:100:0 <- spec/entry.ts:118094:31 flush@webpack:///node_modules/core-js/modules/_microtask.js:18:0 <- spec/entry.ts:57932:11 Error: This test module uses the component TestComponent which is using a "templateUrl" or "styleUrls", but they were never compiled. Please call "TestBed.compileComponents" before your test. in spec/entry.ts (line 19172) _initIfNeeded@webpack:///node_modules/@angular/core/esm5/testing.js:979:0 <- spec/entry.ts:19172:87 createComponent@webpack:///node_modules/@angular/core/esm5/testing.js:1125:0 <- spec/entry.ts:19318:27 createComponent@webpack:///node_modules/@angular/core/esm5/testing.js:832:0 <- spec/entry.ts:19025:44 webpack:///src/test/javascript/spec/app/test/test.component.spec.ts:21:42 <- spec/entry.ts:115542:52 invoke@webpack:///node_modules/zone.js/dist/zone.js:391:0 <- spec/entry.ts:120315:31 onInvoke@webpack:///node_modules/zone.js/dist/proxy.js:79:0 <- spec/entry.ts:123393:45 invoke@webpack:///node_modules/zone.js/dist/zone.js:390:0 <- spec/entry.ts:120314:40 run@webpack:///node_modules/zone.js/dist/zone.js:141:0 <- spec/entry.ts:120065:49 webpack:///node_modules/zone.js/dist/jasmine-patch.js:104:0 <- spec/entry.ts:123552:37 webpack:///node_modules/@angular/core/esm5/testing.js:51:0 <- spec/entry.ts:18244:30 webpack:///node_modules/@angular/core/esm5/testing.js:102:0 <- spec/entry.ts:18295:29 invoke@webpack:///node_modules/zone.js/dist/zone.js:391:0 <- spec/entry.ts:120315:31 onInvoke@webpack:///node_modules/zone.js/dist/async-test.js:49:0 <- spec/entry.ts:122870:45 onInvoke@webpack:///node_modules/zone.js/dist/proxy.js:76:0 <- spec/entry.ts:123390:47 invoke@webpack:///node_modules/zone.js/dist/zone.js:390:0 <- spec/entry.ts:120314:40 run@webpack:///node_modules/zone.js/dist/zone.js:141:0 <- spec/entry.ts:120065:49 webpack:///node_modules/@angular/core/esm5/testing.js:97:0 <- spec/entry.ts:18290:28 onHandleError@webpack:///node_modules/zone.js/dist/async-test.js:59:0 <- spec/entry.ts:122880:31 onHandleError@webpack:///node_modules/zone.js/dist/proxy.js:84:0 <- spec/entry.ts:123398:52 handleError@webpack:///node_modules/zone.js/dist/zone.js:395:0 <- spec/entry.ts:120319:50 runGuarded@webpack:///node_modules/zone.js/dist/zone.js:157:0 <- spec/entry.ts:120081:55 _loop_1@webpack:///node_modules/zone.js/dist/zone.js:666:0 <- spec/entry.ts:120590:57 microtaskDrainDone@webpack:///node_modules/zone.js/dist/zone.js:675:0 <- spec/entry.ts:120599:24 drainMicroTaskQueue@webpack:///node_modules/zone.js/dist/zone.js:603:0 <- spec/entry.ts:120527:36 run@webpack:///node_modules/core-js/modules/es6.promise.js:87:0 <- spec/entry.ts:118081:29 webpack:///node_modules/core-js/modules/es6.promise.js:100:0 <- spec/entry.ts:118094:31 flush@webpack:///node_modules/core-js/modules/_microtask.js:18:0 <- spec/entry.ts:57932:11 Expected undefined to be truthy. webpack:///src/test/javascript/spec/app/test/test.component.spec.ts:31:36 <- spec/entry.ts:115550:37 invoke@webpack:///node_modules/zone.js/dist/zone.js:391:0 <- spec/entry.ts:120315:31 onInvoke@webpack:///node_modules/zone.js/dist/proxy.js:79:0 <- spec/entry.ts:123393:45 invoke@webpack:///node_modules/zone.js/dist/zone.js:390:0 <- spec/entry.ts:120314:40 run@webpack:///node_modules/zone.js/dist/zone.js:141:0 <- spec/entry.ts:120065:49 webpack:///node_modules/zone.js/dist/jasmine-patch.js:104:0 <- spec/entry.ts:123552:37 webpack:///node_modules/@angular/core/esm5/testing.js:51:0 <- spec/entry.ts:18244:30 webpack:///node_modules/@angular/core/esm5/testing.js:102:0 <- spec/entry.ts:18295:29 invoke@webpack:///node_modules/zone.js/dist/zone.js:391:0 <- spec/entry.ts:120315:31 onInvoke@webpack:///node_modules/zone.js/dist/async-test.js:49:0 <- spec/entry.ts:122870:45 onInvoke@webpack:///node_modules/zone.js/dist/proxy.js:76:0 <- spec/entry.ts:123390:47 invoke@webpack:///node_modules/zone.js/dist/zone.js:390:0 <- spec/entry.ts:120314:40 run@webpack:///node_modules/zone.js/dist/zone.js:141:0 <- spec/entry.ts:120065:49 webpack:///node_modules/@angular/core/esm5/testing.js:97:0 <- spec/entry.ts:18290:28 onHandleError@webpack:///node_modules/zone.js/dist/async-test.js:59:0 <- spec/entry.ts:122880:31 onHandleError@webpack:///node_modules/zone.js/dist/proxy.js:84:0 <- spec/entry.ts:123398:52 handleError@webpack:///node_modules/zone.js/dist/zone.js:395:0 <- spec/entry.ts:120319:50 runGuarded@webpack:///node_modules/zone.js/dist/zone.js:157:0 <- spec/entry.ts:120081:55 _loop_1@webpack:///node_modules/zone.js/dist/zone.js:666:0 <- spec/entry.ts:120590:57 microtaskDrainDone@webpack:///node_modules/zone.js/dist/zone.js:675:0 <- spec/entry.ts:120599:24 drainMicroTaskQueue@webpack:///node_modules/zone.js/dist/zone.js:603:0 <- spec/entry.ts:120527:36 run@webpack:///node_modules/core-js/modules/es6.promise.js:87:0 <- spec/entry.ts:118081:29 webpack:///node_modules/core-js/modules/es6.promise.js:100:0 <- spec/entry.ts:118094:31

JHipster Version (en)

jHipster v4.13.0 (aber gleiches Problem mit jHipster v4.11 bekommen)

JHipster Konfiguration

Jhipster info

openjdk version "1.8.0_151" 
OpenJDK Runtime Environment (build 1.8.0_151-8u151-b12-0ubuntu0.16.04.2-b12) 
OpenJDK 64-Bit Server VM (build 25.151-b12, mixed mode) 

git version 2.7.4 
node: v6.11.3 
npm: 3.10.10 
yeoman: 2.0.0 
yarn: 1.3.2 

Docker version 17.11.0-ce, build 1caf76c 
docker-compose version 1.17.0, build ac53b73 

.yo-rc.json

{ 
    "generator-jhipster": { 
     "promptValues": { 
       "packageName": "com.mycompany.myapp", 
       "nativeLanguage": "fr" 
     , 
     "jhipsterVersion": "4.13.0", 
     "baseName": "myApp", 
     "packageName": "com.mycompany.myapp", 
     "packageFolder": "com/mycompany/myapp", 
     "serverPort": "8080", 
     "authenticationType": "jwt", 
     "hibernateCache": "hazelcast", 
     "clusteredHttpSession": false, 
     "websocket": false, 
     "databaseType": "sql", 
     "devDatabaseType": "h2Disk", 
     "prodDatabaseType": "mysql", 
     "searchEngine": false, 
     "messageBroker": false, 
     "serviceDiscoveryType": "eureka", 
     "buildTool": "maven", 
     "enableSocialSignIn": false, 
     "enableSwaggerCodegen": false, 
     "jwtSecretKey": "eba2f264cf18b922d9e32b63d8ed8aecb16794e1", 
     "clientFramework": "angularX", 
     "useSass": true, 
     "clientPackageManager": "yarn", 
     "applicationType": "gateway", 
     "testFrameworks": [], 
     "jhiPrefix": "jhi", 
     "enableTranslation": true, 
     "nativeLanguage": "fr", 
     "languages": [ 
      "fr", 
      "en" 
     ] 
    } 
} 

Entity-Konfiguration (en) entityName.json generierten Dateien im .jhipster Verzeichnis

Kein Unternehmen generiert mit jhipster Einheit

Browser und Betriebssystem

Betriebssystem: ubuntu 16,04

Ich habe mit PhantomJS und Chrome die gleichen Ergebnisse getestet.

Answer 1

Schließlich fand ich das Problem aus:

{ 
    test: /\.ts$/, 
    loaders: ['awesome-typescript-loader', 'angular2-template-loader'], //remove ?keepUrl=true 
    exclude: /node_modules/ 
} 

und dann in den Spec-Dateien, nicht compileComponents verwenden: in der webpack Konfiguration, ich habe die keepurl = true in den angular2-template-Lader entfernt Funktion (wie erklären hier: https://angular.io/guide/webpack - wenn ich es richtig verstanden habe ...)

You don't precompile the TypeScript; Webpack transpiles the Typescript files on the fly, in memory, and feeds the emitted JS directly to Karma. There are no temporary files on disk.

The karma-test-shim tells Karma what files to pre-load and primes the Angular test framework with test versions of the providers that every app expects to be pre-loaded.

Also nur ein before wie diese Sie neeed:

beforeEach(() => { 
      TestBed.configureTestingModule({ 
       imports: [MyAppTestModule], 
       declarations: [TrucComponent], 
       providers: [ 
        TrucService 
       ] 
      }); 
     }); 

Nicht sicher, es ist die beste Lösung, aber funktioniert für mich!