技術ブログ - 毎日が成長!

‘JavaScript’ タグのついている投稿

JasmineによるJavaScriptのテスト その1

2010年11月30日 by ogura

JasmineによるJavaScriptのテスト その1

こんにちは、プログラマのおぐらです。

弊社のクラウドマネージメントサービス Cloudworksでは、JavaScriptのテストにJasmineというフレームワークを利用しています。Jasmine自体はとてもよく出来ていて便利なソフトウェアなのですが、まだリリースされて日が浅いということもあってあまり日本語の情報がありません。そこで、Cloudworks担当のエンジニア Y氏にJasmineの社内向けチュートリアルを作ってもらったところ、なかなかの大作が仕上がり、社内だけで利用するにはもったいないデキでしたので技術ブログのコンテンツとしても掲載させていただくことになりました。

これから何回かに分けて掲載していきますので、「JavaScriptをどうテストしよう?」とお悩みの方はぜひ参考にしてみてください。

Jasmineとは?

JasminePivotal Labsが開発を行っているJavaScript用のテスティングフレームワークです。Behavior-Driven Development(BDD)という概念に基づいて設計されており、テストコードが、PHPUnitやJUnitなどのxUnit系のテストコードよりも、より自然言語(特に英語)で記述された要求仕様書のように見える事が特徴です。

Jasmineによるテストコードは以下のようになります。

上記のdescribeitはテスト用のメソッドですが、メソッド名まで含めて英語で読み下すと、

Describe Jasmine. (Jasmine について述べる)
it makes testing JavaScript awesome! (それは、JavaScript のテストを最高にする!)

というように自然言語風に読むことができます。

インストール

インストールは、基本的にダウンロードしたzipファイルを展開するだけです。また、RubyのRubyGems環境がインストールされているのであれば、gemコマンドによりインストールする事も可能です。

今後、このチュートリアルでは、Jasmineをインストールしたディレクトリを「プロジェクトディレクトリ」と呼んでいきます。

JavaScript単独のプロジェクトで使用する場合

  1. ダウンロードページからzipファイルをダウンロードします(このチュートリアルではjasmine-standalone-1.0.1.zipを使用)
  2. ダウンロードしたzipファイルを展開します。展開されたディレクトリは以下の構造になります

    $ tree
    .
    ├── SpecRunner.html
    ├── lib
    │   └── jasmine-1.0.1
    │       ├── MIT.LICENSE
    │       ├── jasmine-html.js
    │       ├── jasmine.css
    │       └── jasmine.js
    ├── spec
    │   ├── PlayerSpec.js
    │   └── SpecHelper.js
    └── src
    ├── Player.js
    └── Song.js
    
    4 directories, 9 files
    
  3. 展開されたディレクトリのSpecRunner.html"ファイルをブラウザで開きます。以下のようなテスト結果画面が表示されればインストール成功です(画面右上の「show」のチェックボックスをチェックすると、テスト結果が展開されます) テスト結果

Rubyプロジェクトとともに使用する場合

  1. jasminegemコマンドでインストールします

    $ gem install jasmine
    
  2. プロジェクトディレクトリでjasmine initコマンドを実行します

    $ jasmine init
    Jasmine has been installed with example specs.
    
    To run the server:
    
    rake jasmine
    
    To run the automated CI task with Selenium:
    
    rake jasmine:ci
    
  3. プロジェクトディレクトリでrake jasmineコマンドを実行して、Webサーバを起動します(WebサーバはCtrl+Cで終了します)

    $ rake jasmine
    (in /home/foo/src/jasmine_standalone)
    your tests are here:
    

http://localhost:8888/

    [2010-11-19 16:18:24] INFO  WEBrick 1.3.1
    [2010-11-19 16:18:24] INFO  ruby 1.8.7 (2010-01-10) [i486-linux]
    [2010-11-19 16:18:30] INFO  WEBrick::HTTPServer#start: pid=6329 port=8888
  1. ブラウザでhttp://localhost:8888/にアクセスすると、以下のように「JavaScript単独のプロジェクトで使用する場合」と同様のページが表示されます

    テスト結果

今回はここまで。次回は実際に簡単なテストを作成してみようと思います。

 

ruby+html+javascriptでデスクトップアプリケーション開発

2010年7月14日 by kawaguchi

こんにちわ、技術ブログ担当の川口です。

今回はちょっと変化球で勝負、ということでRuby+HTML+JavaScriptで
デスクトップアプリケーションが簡単に作れる「bowline」ライブラリを
紹介してみたいと思います。

bowlineは「titanium(クロスプラットフォーム環境)」を元に作られた
Ruby GUIフレームワークで特徴としては下記のような点が挙げられます。

  • gemパッケージ
  • MVCモデルフレームワーク
  • Webベース(WebKit)による画面設計

現状では動作するのはMaxOS XとUbuntuのようですがこれから先
マルチプラットフォーム対応も見込まれているそうなので将来的には
windows上で動作するアプリケーションもコードの変更を行わずに
作成できる様になるかもしれません。

bowlineの公式ページ

公式でサポートしている開発環境は下記の通りです。

  • Mac OSX 10.5以上 or Ubuntu
  • Ruby 1.9
  • Bowline gemライブラリ

※今回はMac OSX 10.5.8 , ruby 1.9.1環境で検証しています。
※webkitのアーキテクチャが32bitでなければ動作しません。
※このライブラリは32bitモードでコンパイルされたrubyが必要です。
 (Snow Leopardデフォルトのrubyでは正常に動作しない可能性が高いです)

bowlineインストール


bowline自体はgemコマンドで簡単にインストール可能です。
(rubyとgemのインストールは各自で行っているものとします)

$ sudo gem install bowline

テストアプリケーションの作成


インストールが完了したらお決まりの「hello world」アプリを作ってみましょう!
公式のInstallページに手順がありますのでそれに沿って作成していくことにします。

※今回は「/User/kawaguchi/bowline」の下に「helloworld」を作成して検証します。

$ cd /User/kawaguchi
$ mkdir bowline
$ cd bowline
$ bowline-gen app helloworld
Generating with app generator:
[ADDED]  vendor
[ADDED]  lib
(中略)
[ADDED]  config/boot.rb
[ADDED]  README

これで「/User/kawaguchi/bowline/helloworld」が作成され、ディレクトリ内には
アプリケーションの雛形が作成されています。
しかしこれだけでは動作することはできません。
必要なライブラリを「helloworld」アプリへ組み込む必要があります。

$ cd helloworld
$ bowline-bundle
Calculating dependencies...
Updating source: http://rubygems.org
Updating source: http://gems.rubyforge.org
/opt/local/lib/ruby/gems/1.9.1/gems/bowline-bundler-0.0.4/lib/bowline/bundler/resolver.rb:115
Caching: activemodel-3.0.0.beta4.gem
(中略)
Installing bowline (0.9.3)
**************************************************

Thank you for installing Bowline.

If you're on Linux, please install the WebKit library:
sudo apt-get install libwebkit-dev

**************************************************
Done.

最後に注意として「もしLinux使ってるならWebkitライブラリもインストールしてね」
メッセージが出ますがMac OSX上では標準で組み込まれているので問題有りません。

これでアプリケーション起動用スクリプトを実行してすれば動作する筈ですが・・・・

$ ./script/run
You don't have tzinfo installed in your application. Please add it to your Gemfile and run bundle install
no such file to load -- tzinfo
・・・

どうやら’tzinfo’ライブラリが必要ですがインストールされていない模様。
gemコマンドで’tzinfo’ライブラリをインストールします。

$ sudo gem install tzinfo

これでバッチリ動・・・きません。
実はgemとしてインストールしてもbowlineアプリケーションが参照している
gemライブラリディレクトリは[helloword/vendor/gems/1.9.1/gems/]以下であり、
[bowline-bundle]コマンドによってダウンロードしてきたものだけとなっています。

よってbundleコマンド実行時に’tzinfo’ライブラリもgemライブラリとして
インストールするように設定ファイルに設定します。

$ vi Gemfile
# Edit this Gemfile to bundle your application's dependencies.
source 'http://rubygems.org'

gem "bowline"
gem "tzinfo"            <=================== これを追記
## Bundle the gems you use: 
# gem "bj" 
# gem "hpricot", "0.6" 
# gem "sqlite3-ruby", :require_as =&gt; "sqlite3"

これで準備は完了です。もう一度bundleしなおして実行してみましょう。

$ bowline-bundle
$ ./script/run

これだけではメリットが分かりづらいかもしれません。
公式のインストールページの下部にgithubへのリンクがあり、サンプルコードとしてtwitterクライアントアプリケーションが公開されていますのでそれを実行してみましょう。

gitコマンドを利用してダウンロードします。
(gitコマンドやgithubに関する説明は割愛させていただきます)

$ cd /User/kawaguchi/bowline
$ git clone git://github.com/maccman/bowline-twitter ./twitter
$ cd twitter

「/User/kawaguchi/bowline/twitter」ディレクトリが作成され、 ファイルが展開されていることを確認してください。
このままでは動作しませんので2つ程設定を変更します。

(application.ymlファイル作成)
デフォルトでは「config/application.exmple.yml」ファイルしかないのでリネームして
「config/application.yml」ファイルとして保存してください。

$ mv config/application.example.yml config/application.yml 

(tiwtterアカウントを設定)
先程のapplication.ymlファイルにtiwtterアカウント情報を設定します。

$vi config/application.yml
username: (twitterアカウント)
password: (twitterパスワード)

設定が完了したら早速bundleして実行してみましょう。
こちらのGemfileにはちゃんと’tzinfo’が追記されているので編集しなくても良いです。

$ bowline-bundle
$ ./script/run</code></blockquote>

無事に起動したでしょうか?
ちなみにこのクライアントアプリの仕様はこんな感じです。

  • 60秒毎に更新
  • 更新は最新データ20件ずつ
  • 既存データの下部に追記されていく
  • つぶやいた際にも更新

まだまだ情報が少ないので大変ですが、今後のマルチプラットフォーム化やバージョンアップに期待がかかるライブラリとして今回紹介させていただきました。

 

PAGE TOP