JavaScript用のテストフレームワーク「QUnit」の導入方法。備忘録。
環境はEclipse。
#ダウンロード
https://qunitjs.com/
→「qunit-1.18.0.js」を右クリック→名前を付けてリンク先を保存
→「qunit-1.18.0.css」を右クリック→名前を付けてリンク先を保存
#コーディング
hello.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="hello.js"></script>
<script type="text/javascript">
var greeting = new Greeting();
alert( greeting.hello("Taka") );
</script>
</body>
</html>
hello.js
var Greeting = function() {
this.hello = function(name) {
return 'Hello, ' + name;
};
};
テスト用
hello_qunit.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Example</title>
<link rel="stylesheet" href="qunit-1.18.0.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="qunit-1.18.0.js"></script>
<script src="../src/hello.js"></script>
<script src="hello_qunit.js"></script>
</body>
</html>
hello_qunit.js
var greeting = new Greeting();
QUnit.test('JavaScript QUnit Tests', function(assert) {
assert.equal(greeting.hello('Mike'), 'Hello, Mike');
assert.equal(greeting.hello('Janet'), 'Hello, Janet');
assert.equal(greeting.hello('David'), 'Hi, Ted');
});
#表示 hello_qunit.html ![image](https://qiita-image-store.s3.amazonaws.com/0/60528/17198653-8f3f-66f7-714c-7737e6805286.png)
参照 http://easyramble.com/how-to-use-qunit.html