Question

问题概述

您好，

我试图在jhipster网关微服务中使用外部模板测试组件的html部分，如angular doc（https://angular.io/guide/testing#test-a-component-with-an-external-template）中所述。我已经像示例中那样使用angular-cli生成了横幅组件，并设置了相同的测试。当我启动测试（纱线测试）时，我收到错误（请参阅下面的重现部分）。

我在一个空的角项目中测试了相同的组件，它工作正常。

我在jhipster生成的测试文件中看到模板被一个空模板覆盖，但我不明白为什么：

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

我不明白我做错了什么，我该怎么办才能让它运作良好......

感谢您的帮助。

马立克

动机或用例

我们应该能够在jHipster项目中测试html组件部分作为角度推荐在官方文档中。

重现错误

创建横幅组件并使用此处的示例填充代码（https://embed.plnkr.co/?show=preview&show=app%2Fbanner.component.spec.ts）
在/ test / javascript / spec目录中创建测试文件，更改导入中的路径以正确加载组件
启动yarn test
Shoud得到这种错误

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

错误：＆＃39;未处理的承诺拒绝：＆＃39;，＆＃39;无法加载   ％3Ch1％3E％7B％7B标题％7D％7D％3C / h1％3E＆＃39;，＆＃39 ;;区域：＆＃39;，＆＃39; ProxyZone＆＃39;，＆＃39 ;;   任务：＆＃39;，＆＃39; Promise.then＆＃39;，＆＃39 ;;值：＆＃39;，＆＃39;无法加载ERROR：＆＃39;未处理   承诺拒绝：＆＃39;，＆＃39;无法加载   ％3Ch1％3E％7B％7B标题％7D％7D％3C / h1％3E＆＃39;，＆＃39 ;;区域：＆＃39;，＆＃39; ProxyZone＆＃39;，＆＃39 ;;   任务：＆＃39;，＆＃39; Promise.then＆＃39;，＆＃39 ;;值：＆＃39;，＆＃39;无法加载   ％3Ch1％3E％7B％7Btitle％7D％7D％3C / h1％3E＆＃39 ;, undefined PhantomJS 2.1.1（Linux   0.0.0）：执行64成功中的64（0秒/1.547秒）错误：＆＃39;未处理的承诺拒绝：＆＃39;，＆＃39;无法加载   ％3Ch1％3E％7B％7B标题％7D％7D％3C / h1％3E＆＃39;，＆＃39 ;;区域：＆＃39;，＆＃39; ProxyZone＆＃39;，＆＃39 ;;   任务：＆＃39;，＆＃39; Promise.then＆＃39;，＆＃39 ;;值：＆＃39;，＆＃39;无法加载   ％3Ch1％3E％7B％7Btitle％7D％7D％3C / h1％3E＆＃39 ;, undefined PhantomJS 2.1.1（Linux   0.0.0）TestComponent应该创建FAILED失败：未捕获（承诺）：无法加载％3Ch1％3E％7B％7Btitle％7D％7D％3C / h1％3E   resolvePromise @ webpack：///node_modules/zone.js/dist/zone.js：784：0＆lt; -   规格/ entry.ts：120708：78   resolvePromise @ webpack：///node_modules/zone.js/dist/zone.js：754：0＆lt; -   规格/ entry.ts：120678：31   webpack：///node_modules/zone.js/dist/zone.js：831：0＆lt; -   规格/ entry.ts：120755：31   invokeTask @ webpack：///node_modules/zone.js/dist/zone.js：424：0＆lt; -   规格/ entry.ts：120348：36   onInvokeTask @ webpack：///node_modules/zone.js/dist/proxy.js：103：0＆lt; -   规格/ entry.ts：123417：49   invokeTask @ webpack：///node_modules/zone.js/dist/zone.js：423：0＆lt; -   规格/ entry.ts：120347：48   runTask @ webpack：///node_modules/zone.js/dist/zone.js：191：0＆lt; -   规格/ entry.ts：120115：57   drainMicroTaskQueue @的WebPack：///node_modules/zone.js/dist/zone.js：595：0   ＆lt; - spec / entry.ts:120519:42   run @ webpack：///node_modules/core-js/modules/es6.promise.js:87：0＆lt; -   规格/ entry.ts：118081：29   webpack：///node_modules/core-js/modules/es6.promise.js：100：0＆lt; -   规格/ entry.ts：118094：31   flush @ webpack：///node_modules/core-js/modules/_microtask.js:18：0＆lt; -   spec / entry.ts:57932：11错误：此测试模块使用该组件   使用＆＃34; templateUrl＆＃34;的TestComponent或＆＃34; styleUrls＆＃34;，但他们   从未编译过。请致电＆＃34; TestBed.compileComponents＆＃34;之前   你的考试。在spec / entry.ts（第19172行）   _initIfNeeded @的WebPack：///node_modules/@angular/core/esm5/testing.js：979：0   ＆lt; - spec / entry.ts:19172:87   createComponent @的WebPack：///node_modules/@angular/core/esm5/testing.js：1125：0   ＆lt; - spec / entry.ts:19318:27   createComponent @的WebPack：///node_modules/@angular/core/esm5/testing.js：832：0   ＆lt; - spec / entry.ts:19025:44   的WebPack：///src/test/javascript/spec/app/test/test.component.spec.ts：21：42   ＆lt; - spec / entry.ts:115542:52   调用@ webpack：///node_modules/zone.js/dist/zone.js：391：0＆lt; -   规格/ entry.ts：120315：31   onInvoke @ webpack：///node_modules/zone.js/dist/proxy.js：79：0＆lt; -   规格/ entry.ts：123393：45   调用@ webpack：///node_modules/zone.js/dist/zone.js：390：0＆lt; -   规格/ entry.ts：120314：40   run @ webpack：///node_modules/zone.js/dist/zone.js：141：0＆lt; -   规格/ entry.ts：120065：49   webpack：///node_modules/zone.js/dist/jasmine-patch.js：104：0＆lt; -   规格/ entry.ts：123552：37   webpack：///node_modules/@angular/core/esm5/testing.js:51：0＆lt; -   规格/ entry.ts：18244：30   webpack：///node_modules/@angular/core/esm5/testing.js：102：0＆lt; -   规格/ entry.ts：18295：29   调用@ webpack：///node_modules/zone.js/dist/zone.js：391：0＆lt; -   规格/ entry.ts：120315：31   onInvoke @ webpack：///node_modules/zone.js/dist/async-test.js：49：0＆lt; -   规格/ entry.ts：122870：45   onInvoke @ webpack：///node_modules/zone.js/dist/proxy.js:76：0＆lt; -   规格/ entry.ts：123390：47   调用@ webpack：///node_modules/zone.js/dist/zone.js：390：0＆lt; -   规格/ entry.ts：120314：40   run @ webpack：///node_modules/zone.js/dist/zone.js：141：0＆lt; -   规格/ entry.ts：120065：49   webpack：///node_modules/@angular/core/esm5/testing.js:97：0＆lt; -   规格/ entry.ts：18290：28   @的OnHandleError的WebPack：///node_modules/zone.js/dist/async-test.js：59：0   ＆lt; - spec / entry.ts:122880:31   onHandleError @ webpack：///node_modules/zone.js/dist/proxy.js:84：0＆lt; -   规格/ entry.ts：123398：52   handleError @ webpack：///node_modules/zone.js/dist/zone.js：395：0＆lt; -   规格/ entry.ts：120319：50   runGuarded @ webpack：///node_modules/zone.js/dist/zone.js：157：0＆lt; -   规格/ entry.ts：120081：55   _loop_1 @ webpack：///node_modules/zone.js/dist/zone.js：666：0＆lt; - spec / entry.ts:120590:57   microtaskDrainDone @的WebPack：///node_modules/zone.js/dist/zone.js：675：0   ＆lt; - spec / entry.ts:120599:24   drainMicroTaskQueue @的WebPack：///node_modules/zone.js/dist/zone.js：603：0   ＆lt; - spec / entry.ts:120527:36   run @ webpack：///node_modules/core-js/modules/es6.promise.js:87：0＆lt; -   规格/ entry.ts：118081：29   webpack：///node_modules/core-js/modules/es6.promise.js：100：0＆lt; -   规格/ entry.ts：118094：31   flush @ webpack：///node_modules/core-js/modules/_microtask.js:18：0＆lt; -   spec / entry.ts:57932：11预计未定义为真正的。   的WebPack：///src/test/javascript/spec/app/test/test.component.spec.ts：31：36   ＆lt; - spec / entry.ts:115550:37   调用@ webpack：///node_modules/zone.js/dist/zone.js：391：0＆lt; -   规格/ entry.ts：120315：31   onInvoke @ webpack：///node_modules/zone.js/dist/proxy.js：79：0＆lt; -   规格/ entry.ts：123393：45   调用@ webpack：///node_modules/zone.js/dist/zone.js：390：0＆lt; -   规格/ entry.ts：120314：40   run @ webpack：///node_modules/zone.js/dist/zone.js：141：0＆lt; -   规格/ entry.ts：120065：49   webpack：///node_modules/zone.js/dist/jasmine-patch.js：104：0＆lt; -   规格/ entry.ts：123552：37   webpack：///node_modules/@angular/core/esm5/testing.js:51：0＆lt; -   规格/ entry.ts：18244：30   webpack：///node_modules/@angular/core/esm5/testing.js：102：0＆lt; -   规格/ entry.ts：18295：29   调用@ webpack：///node_modules/zone.js/dist/zone.js：391：0＆lt; -   规格/ entry.ts：120315：31   onInvoke @ webpack：///node_modules/zone.js/dist/async-test.js：49：0＆lt; -   规格/ entry.ts：122870：45   onInvoke @ webpack：///node_modules/zone.js/dist/proxy.js:76：0＆lt; -   规格/ entry.ts：123390：47   调用@ webpack：///node_modules/zone.js/dist/zone.js：390：0＆lt; -   规格/ entry.ts：120314：40   run @ webpack：///node_modules/zone.js/dist/zone.js：141：0＆lt; -   规格/ entry.ts：120065：49   webpack：///node_modules/@angular/core/esm5/testing.js:97：0＆lt; -   规格/ entry.ts：18290：28   @的OnHandleError的WebPack：///node_modules/zone.js/dist/async-test.js：59：0   ＆lt; - spec / entry.ts:122880:31   onHandleError @ webpack：///node_modules/zone.js/dist/proxy.js:84：0＆lt; -   规格/ entry.ts：123398：52   handleError @ webpack：///node_modules/zone.js/dist/zone.js：395：0＆lt; -   规格/ entry.ts：120319：50   runGuarded @ webpack：///node_modules/zone.js/dist/zone.js：157：0＆lt; -   规格/ entry.ts：120081：55   _loop_1 @ webpack：///node_modules/zone.js/dist/zone.js：666：0＆lt; - spec / entry.ts:120590:57   microtaskDrainDone @的WebPack：///node_modules/zone.js/dist/zone.js：675：0   ＆lt; - spec / entry.ts:120599:24   drainMicroTaskQueue @的WebPack：///node_modules/zone.js/dist/zone.js：603：0   ＆lt; - spec / entry.ts:120527:36   run @ webpack：///node_modules/core-js/modules/es6.promise.js:87：0＆lt; -   规格/ entry.ts：118081：29   webpack：///node_modules/core-js/modules/es6.promise.js：100：0＆lt; -   规格/ entry.ts：118094：31

JHipster版本

jHipster v4.13.0（但与jHipster v4.11有同样的问题）

JHipster配置

Jhipster信息

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"
        ]
    }
}

entityName.json目录中生成的实体配置.jhipster文件

没有使用jhipster实体生成的实体

浏览器和操作系统

操作系统：ubuntu 16.04

我已经使用PhantomJS和Chrome进行了测试，结果相同。

Answer 1

我终于发现了问题：在webpack配置中，我在angular2-template-loader中删除了keepurl = true：

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

然后，在spec文件中，不要使用compileComponents函数（如下所示：https://angular.io/guide/webpack - 如果我已正确理解...）

您不预编译TypeScript; Webpack在内存中动态转换Typescript文件，并将发出的JS直接提供给Karma。磁盘上没有临时文件。

karma-test-shim告诉Karma要预加载哪些文件并使用每个应用程序预期预加载的提供程序的测试版本来填充Angular测试框架。

所以你只需要这样一个人：

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

不确定这是最好的解决方案，但对我有用！

jhipster：使用外部模板

1 个答案: