jhipster : Running karma tests on component with external template

Question

Overview of the issue

Hello,

I'm trying to test the html part of a component with external template in a jhipster gateway microservice, as describe in the angular doc (https://angular.io/guide/testing#test-a-component-with-an-external-template). I've generated the banner component with angular-cli excally as in the example and set the same test. When I launch tests (yarn test), I get an error (see reproduce section below).

I've tested the same component in an empty angular project and it works fine.

I've seen in the test files generated by jhipster that the template is overrided by an empty one, but I don't understant why :

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

I don't understand what I'm doing wrong, and what should I do to make it works fine...

Thanks for your help.

Marek

Motivation for or Use Case

We should be able to test html component part in jHipster project as angular recommand it in the official doc.

Reproduce the error

Create the banner component and fill the code with example found here (https://embed.plnkr.co/?show=preview&show=app%2Fbanner.component.spec.ts)
Create the test file in the /test/javascript/spec directory, change path in the import to correctly load the component
Launch yarn test
Shoud get this kind of error

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(s)

jHipster v4.13.0 (but get same problem with jHipster v4.11)

JHipster configuration

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 configuration(s) entityName.json files generated in the .jhipster directory

No entity generated with jhipster entity

Browsers and Operating System

Operating system: ubuntu 16.04

I've tested with PhantomJS and Chrome, same results.

ElZebu · Accepted Answer

I finally found out the problem : in the webpack configuration, I removed the keepurl=true in the angular2-template-loader :

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

and then, in the spec files, don't use compileComponents function (as explain here : https://angular.io/guide/webpack - if I've correctly understood...)

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.

So you just neeed one beforeeach like this :

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

Not sure it's the best solution, but works for me !

jhipster : Running karma tests on component with external template

Answers (1)

Related Questions