jhipster：使用外部模板在组件上运行业力测试

Posted 2023-03-13

【中文标题】jhipster：使用外部模板在组件上运行业力测试

【英文标题】：jhipster : Running karma tests on component with external template

【发布时间】：2018-06-03 20:15:38

【问题描述】：

问题概述

你好，

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

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

我在 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目录下创建测试文件，在import中修改路径以正确加载组件

启动yarn test

应该会出现这种错误

20 12 2017 13:57:47.328:WARN [网络服务器]: 404: /%3Ch1%3E%7B%7Btitle%7D%7D%3C/h1%3E 20 12 2017 13:57:47.352:WARN [网络服务器]：404：/%3Ch1%3E%7B%7Btitle%7D%7D%3C/h1%3E 20 12 2017 13：57：47.372：警告[网络服务器]：404： /%3Ch1%3E%7B%7Btitle%7D%7D%3C/h1%3E

ERROR: '未处理的 Promise 拒绝:', '加载失败 %3Ch1%3E%7B%7Btitle%7D%7D%3C/h1%3E', ';区域：'，'ProxyZone'，'; 任务：', 'Promise.then', ';值：'，'加载失败ERROR：'未处理 承诺拒绝：'，'加载失败 %3Ch1%3E%7B%7Btitle%7D%7D%3C/h1%3E', ';区域：'，'ProxyZone'，'; 任务：', 'Promise.then', ';值：','加载失败 %3Ch1%3E%7B%7Btitle%7D%7D%3C/h1%3E'，未定义的 PhantomJS 2.1.1（Linux 0.0.0)：执行 64 次，共 66 次成功（0 秒 / 1.547 秒）错误：'未处理的承诺拒绝：'，'加载失败 %3Ch1%3E%7B%7Btitle%7D%7D%3C/h1%3E', ';区域：'，'ProxyZone'，'; 任务：', 'Promise.then', ';值：','加载失败 %3Ch1%3E%7B%7Btitle%7D%7D%3C/h1%3E'，未定义的 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

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

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

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

浏览器和操作系统

操作系统：ubuntu 16.04

我用 PhantomJS 和 Chrome 测试过，结果相同。

【问题讨论】：

同样的问题 :(

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

【参考方案1】：

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

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

然后，在规范文件中，不要使用 compileComponents 函数（在这里解释：https://angular.io/guide/webpack - 如果我理解正确的话......）

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

karma-test-shim 告诉 Karma 要预加载哪些文件，并使用每个应用都希望预加载的提供程序的测试版本来为 Angular 测试框架做准备。

所以你只需要一个像这样的beforeeach：

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

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