2008年10月6日月曜日

QUnit Getting Started!

前回のエントリ JavaScript Unit Testing Frameworks では、JavaScript の Unit テストのためのフレームワークをいくつか紹介しました。今回は、その中から、jQuery 公式の Unit テストフレームワーク、QUnit 利用方法を簡単に紹介します。

QUnit は 2008/5 月に jQuery プロジェクトの top-level のプロジェクトとして開発が進められるようになったプロジェクトです。
QUnit is the unit testrunner for the jQuery project. It got promoted to a top-level project in May 2008 to make it easier to use in other projects, with focus on jQuery UI. Every plugin developer can leverage the testsuite to unit test their code. QUnit - jQuery JavaScript Library
プロジェクト採用されたのは最近ですが、既に jQuery プロジェクトの内部ソースコードのテストでは利用されている Unit Test フレームワークです。

本フレームワークは回帰テストに適しており、バグ報告が上がってきた場合は、そのバグを発生させるテストを書き、テストを通過するコードを書くことで、書き出したスクリプトの品質を向上させることができます。
また、Test Driven Development: TDD を日頃の習慣としているプログラマなら、十分なユニットテストのカバレッジを保証することで、安心してリファクタリングを進めていくことができます。
jQuery を利用する JavaScript プログラマーには大変嬉しい Unit Test フレームワークが登場した、と言えるのではないでしょうか?

jQuery は XUnit 直系のテストフレームワークではありませんが、提供している API の機能は XUnit を意識したものとなっています。QUnit から提供されている API は現在のところ、必要最低限というところですが、その分テストの基本に集中できます。
本エントリでは QUnit の基本的な利用方法を見てみることにします。

環境構築

まず、テストフレームワークを利用するための環境を構築しましょう。以下のコマンドから、testrunner.js 及び、 testsuite.css をダウンロードします。
$ cd public/javascripts
# jQuery をダウンロード (本エントリでは 1.2.6)
$ wget http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js

# testrunner.js をダウンロード
$ wget http://dev.jquery.com/view/trunk/qunit/testrunner.js

# テスト対象となるスクリプトを記述する JavaScript ファイルを生成
$ touch subjected-script.js

# サンプルテストコードを記述する JavaScript ファイルを生成
$ touch testing-example.js

# testsuite.css をダウンロード
$ cd ../stylesheets
$ wget http://dev.jquery.com/view/trunk/qunit/testsuite.css

# サンプルコードを動作させる html を生成
$ cd ../
$ touch unit-test-demo.html

Getting Started!

早速 QUnit を利用してみましょう。 API は QUnit のページ の Documentation から参照することができます。
まず、テスト対象となるスクリプトを、ここでは、 subjected-script.js というファイル名にして記述します。
function Person(name) {
this.name = name;
}
このコードをテストするコードを unit-test-demo.js というファイル名にして、記述します。
$(document).ready(function() {
// テスト対象のモジュールを記述
module("Person Constructor");
// テストする項目を記述
test("初期化時に name がセットされること", function() {
var person = new Person('Naofumi HAIDA');
equals(person.name, 'Naofumi HAIDA');
});
});
最後に、Test を走らせるための以下のような html, testing-example.html を public 直下に記述します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Js Testing Demo</title>
<link rel="stylesheet" href="/stylesheets/testsuite.css" type="text/css" media="screen" />
<script type="text/javascript" src="/javascripts/jquery-1.2.6.min.js"></script>
<script src="/javascripts/testrunner.js"></script>
<script src="/javascripts/subjected-script.js"></script>
<script src="/javascripts/unit-test-demo.js"></script>
</head>
<body>
<h1>QUnit example</h1>
<h2 id="banner"></h2>
<h2 id="userAgent"></h2>
<ol id="tests"></ol>
<div id="main"></div>
</body>
</html>
ここまで来たら、/testing-example.html にアクセスしてみてください。
テストが通っていたら、以下のように表示されます。
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; ja-JP-mac; rv:1.9.0.3) Gecko/2008092414 Firefox/3.0.3

1. Person Constructor module: 初期化時に name がセットされること (0, 1, 1)

JavaScript Unit Testing Frameworks

JavaScirpt の Unit Testing フレームワークを調査してみました。
調査してみると想像以上に、大変沢山あることが分かりました。。

全てを比較している暇はないので、選定基準を設け、有望そうなものをピックアックすることにしました。選定基準は以下のようになります。
  • Intuitive, simple, but enough API support.
  • Easy to introduce.
    • If possible, we don't want to introduce any other run time.
  • Ajax testing support (if possible)
  • Enough matured or active community supports
  • It's more better if the framework have a good compatibility with jQuery.
  • It may be useful also if the frameworks can be scripted, or at least callable fro CLI.
この元では、以下の 3 つが有望そうな JavaScript Unit Testing フレームワークとなります。これらの特徴及び、長所、短所を整理すると以下のようになります。(英語ですみません。。)
  • JsUnit
    • Feature:
      JsUnit is a Unit Testing framework for client-side (in-browser) JavaScript.
      It is essentially a port of JUnit to JavaScript.
      Also included is a platform for automating the execution of tests on multiple browsers and mutiple machines running different OSs.
      This goes a long way to addressing the old problem of inconsistency in JavaScript implementations across browsers.

    • Pros: Very matuared. (Its development began in January 2001.

    • Cons: Now thier community is less active than other frameworks'. (JavaScript and the browser is changing rapidly now, so it's a critical problem.)

  • YUI Test
    • Feature:
      Yahoo User Interface Test: YUI Test is a testing framework for browser-based JavaScript solutions.
      Using YUI Test, you can easily add unit testing to your JavaScript solutions.YUI Test features:

      • Rapid creation of test cases through simple syntax.
      • Advanced failure detection for methods that throw errors.
      • Grouping of related test cases using test suites.
      • Asynchronous tests for testing events and Ajax communication.
      • DOM Event simulation in all A-grade browsers.

    • Pros:
      • YUI Test does derive some characteristics from nUnit and JUnit.
      • Ajax support officialy.
      • Many Documents

    • Cons:
      • Not OSS.
      • Not a direct port from any specific xUnit framework.
      • Althogh this script may have good compatibility with YUI, it's not certain that it also have it with jQuery.

  • QUnit
    • Feature:
      QUnit is the unit testrunner for the jQuery project.
      It got promoted to a top-level project in May 2008 to make it easier to use in other projects, with focus on jQuery UI.
      It's especially useful for regression testing

    • Pros:
      • The community is very active.
      • It must be good compatible with jQuery.

    • Cons: This project started just only month ago.(This script have been being used for jQuery itself since the jQuery project started, though.)

2008年10月2日木曜日

Books I read during my summer vacation

夏休みだったのですが、2 冊、大変面白い本に出会いました。
その 2 冊が、 "Pro JavaScript Design Patterns (Recipes: a Problem-Solution Ap)"、 それから、"My Job Went to India: And All I Got Was This Lousy Book (Pragmatic Programmers)" です。

Pro JavaScript Design Patterns は、Yahoo や Google のフロントエンジニアが著した本です。

モバイルでも利用できることもあり、 JavaScript の利用拡大は近年ますます加速しています。(Google がその性能をより向上させるため、Google Chrome では JavaScript の VM を新規開発した、というのは一部の人にとっては大きなニュースでした。)

今や JavaScript を利用した、インタラクティブなユーザインターフェースの実現というのは、良いサイトには当たり前のものとなって、ビッグビジネスを展開しているサイトほど、JavaScript の利用をシビアに考え、様々なテクニックを駆使しながら、ユーザの操作性を向上させています。平均的なサイトと技術の差は拡大していく一方です。

この原因のひとつとして、言語としては JavaScript は未成熟な故、様々な書き方ができるため、学習しづらい、というものがあります。(トライアンドエラーで独自にノウハウを貯めるしかないんですよね。。)

本書では、 JavaScript (prototype は使えるけれども) について、効率の良くソフトウェアデザインをするためのデザインパターン (定石のようなもの) を書き出したものです。

もともと僕は本格的に Design Pattern の勉強をしたことがなかったのですが、本書では、Design Pattern を丁寧に解説し、また豊富な例を掲載してくれていて、大変勉強になりました。
僕のオススメ JavaScript 本中で、"Pro Javascript Techniques (Pro)" と並び、Top 2 入りです。

Private 変数の作り方、クロージャを利用したオブジェクト指向の実現、プロトタイプベースの継承、インターフェースの使い方、などなどなど。読みながら、"Wow! How cool!" って何回も思いました。



それから My Job Went to India もタイムリーだった。

経済が下降し、職はインドなどのオフショアへ移行していく。
さらにエンジニアにとっては、技術は現在進行形で変化していくものです。
オフショアに職が移行し、ほぼ仕事を失いつつあるエンジニアは、この全く予測のできないマーケットの中で、如何に生きるべきか、が書いてあります。

この本は、以下の 6 セクションから成り立っています。
  • Choosing Your Market
  • Investing in Your Product
  • Executing
  • Marketing... Not Just for Suits
  • Maintaining Your Edge
  • If You Can't Beat 'Em
これらのテーマについて、エンジニアが持つべきマインドセットを述べてくれています。
さて、著者が、良く生きたいと願うエンジニアに対し、この本の中で、伝えようとしたことは、恐らく以下の 3 つです。
  • 良い選択次第である。
    • フォーカスすべきテクノロジーと、マスターすべきビジネスドメインを決定すること。その上で自分の時間とエネルギーをその正しい(と思われる)エリアに集中させること。
  • スキル次第である。
    • 低コストのオフショアの技術者や、高コストの自国の技術者と競い合っていくために、自分のスキルを高めていくための、体系だった計画を立てていく必要があります。
    • またオフショアでコモデイティ化した技術でなく、高い需要ののある技術を学んでいく方法を学ぶ必要があります。
  • マーケティング次第である。
    • あらゆる製品や、サービス同様、もし誰も自分のことを知らなければ、誰も自分を買わない。どのようにして自分を会社に、その業界に売り込んでいくべきかを学ぶ必要があります。
僕は最近、
  • やりたいことは他にもあるけれど、エンジニアリングは技術の終着がない点でキリがない。(だから面白いのだけれども)
  • 同僚にも外国人が何名かジョインして、英語でコミュニケーションをする機会も増えてきて、オフショア、という言葉を意識するようになった
という理由もあり、時間を能動的に振り回しながら、より沢山のことを学び、アウトプットしてくためには、どうしたもんか、と考えていたこともあり参考になりました。
もはや座右の書ですな。

ちなみに、上記 2 冊は洋書なのですが、洋書だと、本の内容が仮に駄目でも、最悪英語の勉強にはなる点で、時間投資しやすいという利点がありますね。また、日本では書籍化されていない情報も、洋書なら手に入ることが多いのも利点です。
今回ここで挙げた 2 冊は、内容も素晴しく、かつ英語の勉強にもなる点で、特した気分です。

僕の本はもはや赤線だらけで、とても人に貸せる代物ではないですが、興味が沸いた方は、購入して読んでみてください。