您好，感谢您抽出时间阅读我的问题！
我想问一下，因为我开始使用Javascript进行单元测试，而我正在使用Jasmine / Karma。
我正在尝试测试一个函数：
export function setRenderer() {
threeD = document.getElementById('container');
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
});
renderer.setSize(threeD.clientWidth, threeD.clientHeight);
let blueColor = 0x607d8b;
let alpha = 1;
renderer.setClearColor(blueColor, alpha);
threeD.appendChild(renderer.domElement);
}
上一个函数正在加载到index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>AMI - Lesson 04</title>
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="https://use.edgefonts.net/source-code-pro.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/dataarts/dat.gui/master/build/dat.gui.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mrdoob/stats.js/master/build/stats.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<!-- AMI -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ami.js/0.0.22/ami.min.js"></script>
##
</head>
<body>
<div id="my-gui-container">
</div>
<div id="my-lut-container">
<div>CT
<div id="my-lut-canvases-l0" class="my-lut-canvases"></div>
</div>
<div>Segmentation
<div id="my-lut-canvases-l1" class="my-lut-canvases"></div>
</div>
</div>
<div id="container"></div>
<script src="stats.js"></script>
<script src="loader.js"></script>
<script src="handleSeries.js"></script>
<script src="scene.js"></script>
<script src="gui.js"></script>
<script src="dicomDataUrl.js"></script>
<script src="controls.js"></script>
<script src="camera.js"></script>
<script src="renderer.js"></script>
<script src="animator.js"></script>
<script type="text/javascript" src="demo.js"></script>
<!-- google analytics -->
</body>
</html>
使用div来操作它来创建渲染器。
另外，因为它可以真正帮助我发布k arma.conf.js ：
const packageJSON = require('./package.json');
('use strict');
process.env.CHROME_BIN = require('puppeteer').executablePath()
module.exports = function (karma) {
karma.set({
// frameworks to use
frameworks: ['jasmine', 'sinon'],
// list of files / patterns to load in the browser
files: [
'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.16.0/polyfill.min.js',
`https://cdnjs.cloudflare.com/ajax/libs/three.js/${packageJSON.config.threeVersion}/three.js`,
// ,
// 'src/core/*.spec.js',
//'specs/**/*.spec.js',
'mySpecs/**/*.spec.js',
{pattern: 'data/**/*', included: false, watched: false, served: true}
],
reporters: ['spec'],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'mySpecs/**/*.spec.js': ['webpack']
//'specs/**/*.spec.js': ['webpack']
// 'src/core/*.spec.js': ['browserify']
},
browsers: ['ChromeHeadless'],
// web server port
// port: 9876,
// colors: true,
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: karma.LOG_WARN,
autoWatch: false,
singleRun: true,
colors: true,
webpack: {
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: [/node_modules/, 'external/**/*']
}
]
}
},
webpackMiddleware: {
// webpack-dev-middleware configuration
// i. e.
stats: 'errors-only'
}
});
};
我尝试了以下内容：
/* globals describe, it, expect, beforeEach*/
import {setRenderer} from '../../lessons/04/renderer'
describe('Configuration', () => {
it('should true be true', () => {
expect(true).toBe(true);
});
});
describe('Renderer', () => {
it('should be created', () => {
var newDiv = document.createElement("div");
newDiv.id = 'container';
document.body.appendChild(newDiv);
setRenderer();
expect(document.getElementById('container').toBe(newDiv);
});
});
第一个测试是因为我正在检查Karma和Jasmine是否配置良好，而且它们是，因为它通过了。
重点是测试输出：
Configuration
V should true be true
Renderer
× should be created
ReferenceError: threeD is not defined
at setRenderer (mySpecs/lesson04/test.spec.js:101:12)
at UserContext.<anonymous> (mySpecs/lesson04/test.spec.js:88:90)
HeadlessChrome 0.0.0 (Windows 8.1 0.0.0): Executed 2 of 2 (1 FAILED) (0.033 secs / 0.011 secs)
TOTAL: 1 FAILED, 1 SUCCESS
1) should be created
Renderer
ReferenceError: threeD is not defined
at setRenderer (mySpecs/lesson04/test.spec.js:101:12)
at UserContext.<anonymous> (mySpecs/lesson04/test.spec.js:88:90)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
我认为这是因为期望失败了，但看起来原因是不同的，因为如果我改变了一个简单的true.toBe.false的期望，输出是：
HeadlessChrome 0.0.0 (Windows 8.1 0.0.0): Executed 2 of 2 (1 FAILED) (0.034 secs / 0.013 secs)
TOTAL: 1 FAILED, 1 SUCCESS
1) should be created
Renderer
ReferenceError: threeD is not defined
at setRenderer (mySpecs/lesson04/test.spec.js:101:12)
at UserContext.<anonymous> (mySpecs/lesson04/test.spec.js:88:90)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
我正在尝试学习如何进行单元测试，因为我认为这是一种很好的编程方式，但是我不知道如何继续这个例子。
以下是回购中的测试：https://github.com/AtlasULPGC/AtlasULPGC.github.io/blob/master/mySpecs/lesson04/test.spec.js
渲染器功能： https://github.com/AtlasULPGC/AtlasULPGC.github.io/blob/master/lessons/04/renderer.js
index.html https://github.com/AtlasULPGC/AtlasULPGC.github.io/blob/master/lessons/04/index.html
感谢您花时间阅读这个问题！