LoginSignup
4
5

More than 5 years have passed since last update.

QUnit導入方法

Last updated at Posted at 2015-05-01

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');
});

配置
image


表示

hello_qunit.html
image



参照
http://easyramble.com/how-to-use-qunit.html

4
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
5