「QUnit」の版間の差分
ナビゲーションに移動
検索に移動
imported>Administrator |
imported>Administrator |
||
4行目: | 4行目: | ||
== 使い方 == | == 使い方 == | ||
− | === | + | === テストを作る === |
<source lang="javascript"> | <source lang="javascript"> | ||
test("a basic test example", function() { | test("a basic test example", function() { | ||
12行目: | 12行目: | ||
}); | }); | ||
</source> | </source> | ||
+ | test関数にok関数やequal関数による評価を含めたテスト関数を放り込んで使う。 | ||
+ | |||
+ | === テスト実行用のHTMLページを作る === | ||
+ | <source lang="html5"> | ||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <title>QUnit: JavaScript Unit Testing</title> | ||
+ | <!-- ↓のパスは適宜書き換えること --> | ||
+ | <script src="http://code.jquery.com/jquery-latest.js"></script> | ||
+ | <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" /> | ||
+ | <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script> | ||
+ | </head> | ||
+ | <body> | ||
+ | <h1 id="qunit-header">QUnit example</h1> | ||
+ | <h2 id="qunit-banner"></h2> | ||
+ | <div id="qunit-testrunner-toolbar"></div> | ||
+ | <h2 id="qunit-userAgent"></h2> | ||
+ | <ol id="qunit-tests"></ol> | ||
+ | <div id="qunit-fixture">test markup, will be hidden</div> | ||
+ | |||
+ | <!-- テスト対象 --> | ||
+ | <script src="MyScript.js" type="text/javascript"></script> | ||
+ | |||
+ | <!-- テスト --> | ||
+ | <script src="MyScript.tests.js" type="text/javascript"></script> | ||
+ | |||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | |||
+ | === テスト実行 === | ||
+ | 上で作ったテストページにブラウザで普通にアクセスするだけ。 | ||
+ | Visual Studio を使っている場合は、ソリューションエクスプローラーでテストページを右クリックして「ブラウザーで表示」を選ぶ。 | ||
== 関連項目 == | == 関連項目 == |
2012年3月7日 (水) 02:27時点における版
QUnitとは、jQueryの中の人が作っているJavaScriptの単体テスト(ユニットテスト)を行うためのテスティングフレームワークである。
ASP.NET MVCで簡単に使える「QUnit for ASP.NET MVC」というNuGetパッケージも用意されている。
使い方
テストを作る
test("a basic test example", function() {
ok( true, "this test is fine" );
var value = "hello";
equal( value, "hello", "We expect value to be hello" );
});
test関数にok関数やequal関数による評価を含めたテスト関数を放り込んで使う。
テスト実行用のHTMLページを作る
<!DOCTYPE html>
<html>
<head>
<title>QUnit: JavaScript Unit Testing</title>
<!-- ↓のパスは適宜書き換えること -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
</head>
<body>
<h1 id="qunit-header">QUnit example</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>
<!-- テスト対象 -->
<script src="MyScript.js" type="text/javascript"></script>
<!-- テスト -->
<script src="MyScript.tests.js" type="text/javascript"></script>
</body>
</html>
テスト実行
上で作ったテストページにブラウザで普通にアクセスするだけ。 Visual Studio を使っている場合は、ソリューションエクスプローラーでテストページを右クリックして「ブラウザーで表示」を選ぶ。