Angular Karma 测试的自定义 context.html答案

【问题标题】：Custom context.html for Angular Karma testAngular Karma 测试的自定义 context.html
【发布时间】：2020-04-13 06:13:02
【问题描述】：

我需要修改debug.html 和context.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"
  }
]

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

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

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

无论如何，测试环境都会不一致，因为测试的导入会发生在主体而不是头部。

【问题讨论】：

标签： angular karma-runner aframe

【解决方案1】：

因果报应的.html 文件位于：

node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\karma-context.html node_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.html 和 karma-debug.html 来自动执行此操作以供将来测试。在scripts 目录下，为包括A-Frame 导入的html 文件分别创建一个副本。保持karma-context.html 和karma-debug.html 未修改在您的node_modules 文件夹中。当您的项目被克隆时，内部的更改不会传播，因此我们的修改需要保存在其他地方。

创建一个脚本，在 karma 运行时将修改后的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。

【讨论】：