时间戳

首页 > 解决方案 > Angular Karma 测试的自定义 context.html

angular - Angular Karma 测试的自定义 context.html

问题描述

我需要修改debug.html和context.htmlkarma 测试，以便在 angular 中运行 karma 测试时将所需的脚本导入到 html 头中ng t。

当前在<head>of中导入一个库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's"test"部分中，脚本似乎对测试也没有影响。

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

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

标签： angularkarma-runneraframe

解决方案

业力的.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. 在目录下，为包含 A-Frame 导入的scripts两个文件分别创建一个副本。在您的文件夹中html保留karma-context.html和karma-debug.html未修改。node_modules当您的项目被克隆时，内部的更改不会传播，因此我们的修改需要存在于其他地方。

创建一个脚本，html在 karma 运行时将修改后的内容复制到 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>.

推荐阅读