Angular 业力测试的自定义 context.html
Custom context.html for Angular Karma test
我需要修改 debug.html
和 context.html
以进行业力测试,以便在 angular 中进行 运行 业力测试时将所需的脚本导入 html head =] ng t
.
当前在index.html
的<head>
导入一个库:
<!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"
],
测试环境无论如何都会不一致,因为测试导入会发生在 body,而不是头部。
业力的 .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
文件分别创建一个副本。在 node_modules
文件夹中保持 karma-context.html
和 karma-debug.html
不变。克隆项目时不会传播内部更改,因此我们的修改需要存在于其他地方。
创建一个脚本,将修改后的 html
复制到 node_module when karma 运行s:
// 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。
我需要修改 debug.html
和 context.html
以进行业力测试,以便在 angular 中进行 运行 业力测试时将所需的脚本导入 html head =] ng t
.
当前在index.html
的<head>
导入一个库:
<!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"
],
测试环境无论如何都会不一致,因为测试导入会发生在 body,而不是头部。
业力的 .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
文件分别创建一个副本。在 node_modules
文件夹中保持 karma-context.html
和 karma-debug.html
不变。克隆项目时不会传播内部更改,因此我们的修改需要存在于其他地方。
创建一个脚本,将修改后的 html
复制到 node_module when karma 运行s:
// 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。