2014年08月28日

RequireJS 入門

RequireJSはJavaScriptをモジュール開発するためのツール。

JavaScriptはグローバル領域が共通なので複数のモジュールを利用しようとするとバッティングするおそれがある。基本的にはグローバル使うな!となるが他のモジュールなどでどの名前空間を使うかなど色々決めなくてはいけない。

var Fuga = function() {};

var NameSpace = {}
NameSpace.Fuga = function() {}


RequireJSを使うとコレを簡単にすることができる。

まず、以下の様なディレクトリ構成だと考える。script/module/fuga.jsとscript/module/hoge.jsが独立したモジュールである

.
├── index.html
└── script
├── lib
│   ├── jquery-1.11.1.min.js
│   └── require.js
├── main.js
└── module
   ├── fuga.js
   └── hoge.js

まず、index.htmlではrequire.jsを読みこみ、data-main属性にメインのスクリプトのURLを記述する。

<script data-main="script/main.js" src="script/lib/require.js"></script>


まず、main.jsに以下のように設定してみよう。module/fuga.jsの読み込みが終了した際にコールバック関数が実行されます。

require([
'module/fuga'
], function(fuga) {
console.log(fuga.doo())
});


fuga.jsには以下のように記述してみる。

define({
bar:"fuga",
foo:"hoge",
doo:function(){
return this.bar+this.foo
}
});


main.jsがfuga.jsを読み込み、defineの定義内容はdefine()で指定ができる。これは以下のように記述することもできる。

define(function(){
var fuga = {
bar:"fuga",
foo:"hoge",
doo:function(){
return this.bar+this.foo
}
}
return fuga;
});


他のモジュールやライブラリを参照して利用したい場合は以下のように記述を行う。

define([
'lib/jquery-1.11.1.min'
], function(){
var fuga = {
bar:"fuga",
foo:"hoge",
doo:function(){
return this.bar+this.foo+$("body").text();
}
}
return fuga;
});
タグ:RequireJS
posted by ねこまんま at 17:54 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする

2014年08月27日

GruntでJade

GruntでJadeをコンパイルしようとすると以下のようにする。ただこれだと対象ファイルが増えるたびに手動でGruntfile.jsにファイルを追加していかなくていはいけない。

module.exports = function(grunt) {
grunt.initConfig({
jade: {
compile: {
files: {
"dest/sample1.html": ["jade/sample1.jade"],
"dest/sample2.html": ["jade/sample2.jade"],
"dest/sample3.html": ["jade/sample3.jade"],
}
}
}
});
}


これは以下のようにするとjadeディレクトリ内のjadeファイルが更新された際にdestに書きだすようにすることができる。

module.exports = function(grunt) {
grunt.initConfig({
jade: {
compile: {
files: [ {
expand: true,
cwd: "jade/",
src: "*.jade",
dest: "dest/",
ext: ".html"
}]
}
}
});
}


あと、以下のように指定するとjadeディレクトリにある_xxx.jadeみないなアンスコ付きのファイルはコンパイル対象化から外すことができる。

module.exports = function(grunt) {
grunt.initConfig({
jade: {
compile: {
files: [ {
expand: true,
cwd: "jade/",
src: [
"*.jade",
"!_*.jade"
],
dest: "dest/",
ext: ".html"
}]
}
}
});
}


Gruntは面倒くさいので、みんなgulpを使おうよ。
タグ:Grunt JADE
posted by ねこまんま at 12:36 | Comment(0) | TrackBack(0) | Grunt | 更新情報をチェックする

jasmine-jqueryとkarmaでの自動テスト

jasmineのfixture(テスト用のHTMLをロードする奴)であるjasmine-jquerykarmaを利用しようとする色々とハマったのでメモ。

まず、karmaではconfigのfilesに指定したファイルしか読み込みが出来ない。そこでkarma.conf.jsのfilesにfixturesで読み込むURLを指定しなくてはいけない。オプションでincluded:falseを指定しないと初回で読み込まれてしまうので注意。

module.exports = function(config) {
config.set({
(中略)
files: [
'module/lib/jquery-1.11.1.js',
'module/lib/underscore-min.js',
'module/lib/backbone-min.js',
(中略)
{ pattern: 'fixtures/*.inc', included: false }
],
(中略)
});
}



また、filesで指定したファイルはbaseディレクトリ配下に読み込まれるので以下のようにKarma経由の場合(ポート番号9876)とブラウザ経由の場合でfixturesPathパスを変更する必要がある。

if(location.port==9876){
jasmine.getFixtures().fixturesPath = 'base/fixtures/';
}else{
jasmine.getFixtures().fixturesPath = '../fixtures/';
}


一番ハマったのは以下のコマンドでインストールした「karma-jasmine」のバージョンが古かったこと。jasmine-jqueryの組み合わせるとclearTimeoutがundefinedとか訳の分からないエラーが出てしまった

npm install karma-jasmine --save-dev


以下のコマンドじゃないと2系のkarma-jasmineはインストール出来ない

npm install karma-jasmine@2_0 --save-dev
posted by ねこまんま at 11:52 | Comment(0) | TrackBack(0) | test | 更新情報をチェックする

2014年08月08日

Selenium入門

Seleniumの使い方。

まずはRuby Gemをインストール

gem install selenium-webdriver


test.rbなど適当なファイル名で以下の内容を記述。

require "selenium-webdriver"
# Firefox用のドライバを使う
driver = Selenium::WebDriver.for :firefox
# Googleにアクセス
driver.navigate.to "http://google.com"
# `q`というnameを持つ要素を取得
element = driver.find_element(:name, 'q')
# `Hello WebDriver!`という文字を、上記で取得したinput要素に入力
element.send_keys "Hello WebDriver!"
# submitを実行する(つまり検索する)
element.submit
# 表示されたページのタイトルをコンソールに出力
puts driver.title
# テストを終了する(ブラウザを終了させる)
driver.quit


以下のコマンドでSeleniumが実行される。

ruby tesr.rb


参考:WebのUIテスト自動化 - Seleniumを使ってみる - Qiita

ちょっと上記のスクリプトだと表示が微妙だったが以下のコードのほうが良さげだった。

require "selenium-webdriver"
driver = Selenium::WebDriver.for :firefox
driver.get "http://www.google.co.jp/"
driver.find_element(:class,"gsfi").send_key "Selenium"
driver.find_element(:name,"btnK").submit
driver.close


参考:Ruby - Selenium 入門 - Qiita
タグ:Selenium
posted by ねこまんま at 15:08 | Comment(0) | TrackBack(0) | test | 更新情報をチェックする

Karmaでmocha + chaiのテストを自動化

Karma + を利用すればテストが自動化できるので自動化してみました。

ひとまずはkarmaをインストール。

npm install -g karma
karma --version


このままでは「-bash: karma: command not found」と怒られてしまうのでkarma-cliもインストール。

npm install -g karma-cli
karma --version


これでちゃんとバージョンが表示される。

Karma version: 0.12.21


まずは設定ファイルの作成。対話式で作成できます。

karma init


まず、

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.

と利用するフレームワークについて聞かれる。QUnitJasmineMochaから選択できるのでひとまずはMochaを選択(tabか下ボタンで候補をきりかえられます)

次に、

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.

Require.jsを利用するかどうか聞かれます。「no」でEnter

Do you want to capture a browser automatically ?
Press tab to list possible options. Enter empty string to move to the next question.

次に、利用するブラウザを聞かれます。PhantomJSでヘッドレステストなんかもできますがターゲットブラウザ以外でテストするのもあれなのでChromeとFirefoxを選択。(WinならIEとかも指定するとよいかも)

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.

次にスクリプトの場所が聞かれます。"js/*.js" or "test/**/*Spec.js"みたいにして読み込むファイルを指定しましょう。
ちなみにChaiやSinon.JS、jQueryなんかMocha以外にライブラリも指定しておく必要があります。

あと、mocha.run();を実行しているファイルを読み込んじゃうとテストが2回走ってしまいます。ここでハマった。

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.

swpファイルの出力場所が聞かれます。これは無視。

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.

ファイルを監視するか聞かれるので「yes」。

これで「karma.conf.js」が作られます。

karma start


と打つと自動でブラウザが立ち上がりテストが開始されます。また、監視ファイルが更新された際にも再テストが自動で行われます。
タグ:KARMA mocha chai test
posted by ねこまんま at 11:26 | Comment(0) | TrackBack(0) | test | 更新情報をチェックする

2014年08月05日

Mocha+Chai+Sinon.JS 入門

最近注目のテストフレームワーク「Mocha」、軽量ですがアサーション機能すらありませんので別のライブラリを組み合わせて使うのが一般的。今回はアサーションライブラリとして「Chai」とテストタブル用にSinon.JSをチョイス。

Mocha



Mochaはnode.jsでも利用できますがクライアントJavaScriptではGitHubからダウンロードしたmocha.cssとmocha.jsを読み込みます、今回はChaiとSinon.JSを読み込んだ以下のテンプレートで解説をします。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="mocha.css">
</head>
<body>
<div id="mocha"></div>
<script src="mocha.js"></script>
<script src="chai.js"></script>
<script src="sinon-1.10.3.js"></script>
<script>
mocha.setup('bdd');
var expect = chai.expect;
window.onload = function() {
mocha.run();
};
</script>
<script src="テストするコード"></script>
<script src="テストコード"></script>
<div id="sandbox"></div>
</body>
</html>


以下の箇所ではmochaの設定でスタイルをBDD(ビヘイビア駆動開発 )にしてchaiのexpectを利用するようにしています。

mocha.setup('bdd');
var expect = chai.expect;
window.onload = function() {
mocha.run();
};



テストコードではJasmineと同じようにdescribe()で見出しをつけて記述していきます。

describe('テスト内容', function() {
//テストコード
});


describe()は入れ子でも利用できます。

describe('テスト内容1', function() {
describe('テスト内容1-1', function() {
//テストコード
});
describe('テスト内容1-2', function() {
//テストコード
});
});


テストはit()を利用して記述します。

describe('テスト内容', function() {
it("メソッドが存在する", function() {
//テストコード
});
});


実際のテストでは以下のアサーションメソッドを利用利します。

describe('テスト内容', function() {
it("aがおんなじ", function() {
expect("a").to.equal("a");
});
});


これでブラウザを見ればテストが成功しているのがわかります。

chaiの利用方法



mochaはBDDを利用する場合はJasmineと利用方法が変わらないので問題ないでしょう。chaiは少し利用方法が違います。

.toや.equalといったメソッドをチェーンさせながら記述します。

たとえば以下のように.notを追加することでaとbは同じじゃない、つまり異なることをテストしています。

describe('テスト内容', function() {
it("aとbがちがう", function() {
expect("a").to.not.equal("b");
});
});


参考:Expect / Should - Chai

Sinon.JSの使い方



Sinon.JSはテストダブルを行うことができます。

たとえば次のような謎のメソッドがあったとします。

var a = function(){
b();
}
var b = function(){
return "b";
}


a.b()のテストは以下の様な感じでできます。

it("bのテスト", function() {
var value = b();
expect(value).to.equal("b");
});


しかし、a()のテストはできません。a()ではb()が実行されているかテストしたいのです。Sinon.JSを利用すると以下のようにテストできます。

it("aのテスト", function() {
var spy = sinon.spy(window,'b');
a();
expect(spy.callCount).to.equal(1);
});
posted by ねこまんま at 21:41 | Comment(0) | TrackBack(0) | test | 更新情報をチェックする

Jasmine入門

Jasmineは様々な機能が盛り込まれた汎用型のJavaScriptテストフレームワーク。

ダウンロードしたファイルの中からdist/jasmine-standalone-2.0.1.zipを解凍して利用します。以下のようにtest用のHTMLを作成しします。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jasmine Example</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.0.1/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-2.0.1/jasmine.css">
<script src="lib/jasmine-2.0.1/jasmine.js"></script>
<script src="lib/jasmine-2.0.1/jasmine-html.js"></script>
<script src="lib/jasmine-2.0.1/boot.js"></script>
<script src="テストするJS"></script>
<script>
//テストコード
</script>
</head>
<body>
</body>
</html>


テストコードではdescribe()で見出しをつけて記述していきます。

describe('テスト内容', function() {
//テストコード
});


describe()は入れ子でも利用できます。

describe('テスト内容1', function() {
describe('テスト内容1-1', function() {
//テストコード
});
describe('テスト内容1-2', function() {
//テストコード
});
});



テストはit()を利用して記述します。

describe('テスト内容', function() {
it("メソッドが存在する", function() {
//テストコード
});
});


実際のテストでは以下のアサーションメソッドを利用利します。

expect(A).toEqual(B)

expect(A).toEqual(B)でAとBの値が等しいかテストを行います。

describe('テスト内容', function() {
it('expect("a").toEqual("a")', function() {
expect("a").toEqual("a");
});
});


expect(A).toBe(B)

expect(A).toBe(B)でAとBが同じオブジェクトかテストを行います。

以下の場合は異なるオブジェクトとしてテストは失敗します。

describe('テスト内容', function() {
it('expect(bar1).toBe(bar2)', function() {
var bar1 = {"foo":"daaa"};
var bar2 = {"foo":"daaa"};
expect(bar1).toBe(bar2);
});
});


以下の場合は同じオブジェクトとしてテストは成功します。

describe('テスト内容', function() {
it('expect(bar1).toBe(bar2)', function() {
var bar1 = {"foo":"daaa"};
var bar2 = bar1;
expect(bar1).toBe(bar2);
});
});


expext(A).toBeDefined()

expext(A).toBeDefined()ではAが定義されているかテストをします。

以下の場合はbar1は定義されていないのでテストは失敗します。

describe('テスト内容', function() {
it('expect(bar1).toBeDefined()', function() {
expect(bar1).toBeDefined();
});
});


以下の場合はbar1は定義されているのでテストは成功します。

describe('テスト内容', function() {
it('expect(bar1).toBeDefined()', function() {
var bar1="aa";
expect(bar1).toBeDefined();
});
});


他にも、

expect(A).toBeNull()でAがNULLであるかテストを行う
expect(A).toBeTruthy()でAがtrueであるかテストを行う
expect(A).toBeFalsy()でAがfalseであるかテストを行う
expect(A).toContain(B)でAにBが含まれているかテストを行う
expect(A).toBeLessThan(B)でAよりBが小さいかテストを行う
expect(A).toBeGreaterThan(b)でBよりAが小さいかテストを行う
expect(fn).toThrow(e)でfnが例外をスローするかテストを行う

などが可能です。

beforeEach()やafterEach()を利用するとit()が実行される前後に処理を差し込むことができます。

次のようなコードを実行すると

describe('テスト内容', function() {
beforeEach(function(){
console.log("beforeEach");
});
it('test1', function() {
console.log("test1");
expect("a").toEqual("a");
});
it('test2', function() {
console.log("test2");
expect("a").toEqual("a");
});
afterEach(function(){
console.log("afterEach");
});
});


以下の様にコンソールが表示されます

beforeEach
test1
afterEach
beforeEach
test2
afterEach


参考 : JasmineによるJavaScriptのテスト その4 « サーバーワークス エンジニアブログ
タグ:test JASMINE
posted by ねこまんま at 17:15 | Comment(0) | TrackBack(0) | test | 更新情報をチェックする