用于Angal Karma测试的Custom context.html

问题描述 投票:0回答:1

我需要为业力测试修改debug.htmlcontext.html,以便在以角度ng t运行业力测试时将所需的脚本导入html头中。

当前正在<head>index.html中导入库:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="aframe-v1.0.0.min.js"></script>
    </head>
    <body>
        <app-root></app-root>
    </body>
</html>

[angular.json中包含该库:

"scripts": [
  {
    "input": "node_modules/aframe/dist/aframe-v1.0.0.min.js",
    "inject": false,
    "bundleName": "aframe-v1.0.0.min"
  }
]

角业力测试将覆盖karma.config.js,因此预期的customContextFile覆盖将不起作用,因为它已被angular覆盖。

angular.json"test"部分中,脚本似乎也对测试没有影响。

"scripts": [
  "node_modules/aframe/dist/aframe-v1.0.0.min.js"
],

无论如何,测试环境都将是不一致的,因为测试的导入将发生在身体而非头部。

angular karma-runner aframe
1个回答
0
投票

业力的.html文件位于:

node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\karma-context.htmlnode_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\karma-debug.html

一旦此处包含A-Frame的导入(karma-context.html,那么您的单元测试将包括A-Frame并将正常运行:

// karma-context.html
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <script src="https://aframe.io/releases/1.0.1/aframe.min.js"></script>
</head>

我们可以通过创建自己的karma-context.htmlkarma-debug.html将其自动化以用于将来的测试。在scripts目录下,为两个包含A帧导入的html文件分别创建一个副本。在karma-context.html文件夹中保持karma-debug.htmlnode_modules不变。克隆您的项目时,内部的更改不会传播,因此我们的修改需要保留在其他位置。

创建一个脚本,它将在运行业力时将修改后的html复制到node_module中:

// scripts/karma-copy.test.js
const fs = require('fs');

// Modify karma-context.html
fs.copyFile(
  'src/scripts/karma-context.html',
  'node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/karma-context.html',
  (err) => {
    if (err) throw err;
  }
);

// Modify karma-debug.html
fs.copyFile(
  'src/scripts/karma-debug.html',
  'node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/karma-debug.html',
  (err) => {
    if (err) throw err;
  }
);

karma.config.js中包含脚本:

plugins: [
  require('../src/scripts/karma-copy.test.js'),
  ...
],

现在,当您关闭项目时,ng t将在<head>中包含A-Frame。

© www.soinside.com 2019 - 2024. All rights reserved.