From 791d43ee34545849f8723f64d585dac68cef661c Mon Sep 17 00:00:00 2001
From: Kuniwak <yuki.kokubun@mixi.co.jp>
Date: Tue, 10 Mar 2015 10:08:37 +0900
Subject: [PATCH 1/5] Implement jQuery training

---
 test/stage1/index.html |   6 +-
 test/stage1/style.css  |   4 +-
 test/stage1/tests.js   | 244 +++++++++++++++++++++++++++++++++++------
 3 files changed, 216 insertions(+), 38 deletions(-)

diff --git a/test/stage1/index.html b/test/stage1/index.html
index 77cfa43c..6c354c82 100644
--- a/test/stage1/index.html
+++ b/test/stage1/index.html
@@ -16,7 +16,7 @@
       <li class="turquoise" title="turquoise">4</li>
       <li class="turquoise" title="turquoise">4</li>
       <li><blockquote title="steelblue">5</blockquote></li>
-      <li name="blueviolet" title="blueviolet">6</li>
+      <li data-js-training="blueviolet" title="blueviolet">6</li>
     </ul>
     <ul class="js-training">
       <li id="brown">7</li>
@@ -25,11 +25,13 @@
       <li class="mediumturquoise">10</li>
       <li class="mediumturquoise">10</li>
       <li><p>11</p></li>
-      <li name="darkorchid">12</li>
+      <li data-js-training="darkorchid">12</li>
     </ul>
     <div id="mocha"></div>
+    <script src="/modules/jquery/dist/jquery.js"></script>
     <script src="/modules/mocha/mocha.js"></script>
     <script src="/modules/chai/chai.js"></script>
+    <script src="/modules/chai-jquery/chai-jquery.js"></script>
     <script>
       mocha.ui('bdd');
       mocha.reporter('html');
diff --git a/test/stage1/style.css b/test/stage1/style.css
index 669a1f94..2e4d4e2d 100644
--- a/test/stage1/style.css
+++ b/test/stage1/style.css
@@ -43,7 +43,7 @@
   font-size: 130%;
 }
 
-.js-training [name=blueviolet] {
+.js-training [data-js-training="blueviolet"] {
   background-color: blueviolet;
 }
 
@@ -70,6 +70,6 @@
   background-color: cornflowerblue;
 }
 
-.js-training [name="darkorchid"] {
+.js-training [data-js-training="darkorchid"] {
   background-color: darkorchid;
 }
diff --git a/test/stage1/tests.js b/test/stage1/tests.js
index 6bcedfd1..ba6fab4a 100644
--- a/test/stage1/tests.js
+++ b/test/stage1/tests.js
@@ -1,3 +1,4 @@
+/* global $, jQuery, HTMLCollection */
 'use strict';
 
 describe('ステージ1（意図した DOM 要素を取得できるようになる）', function(){
@@ -5,12 +6,13 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('1 番の赤色の要素（ID は "firebrick"）が1つ取得できる', function(){
       var elementId = 'firebrick';
 
-      // 'change me!' 部分を書き換えてください。
+      // チュートリアル
+      //
+      // 'change me!' を document.getElementById(elementId) に
+      // 書き換えてください。
       var element = 'change me!';
 
-      // 参考資料
-      // https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById
-
+      expect(element).to.be.instanceof(HTMLElement);
       expect(element).to.have.property('id', elementId);
     });
 
@@ -18,12 +20,13 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('2 番の橙色の要素（ID は "chocolate"）が1つ取得できる', function(){
       var elementId = 'chocolate';
 
-      // 'change me!' 部分を書き換えてください。
+      // 'change me!' を書き換えてください。
       var element = 'change me!';
 
       // 参考資料
       // https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById
 
+      expect(element).to.be.instanceof(HTMLElement);
       expect(element).to.have.property('id', elementId);
     });
 
@@ -31,27 +34,27 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('3 番の緑色の要素（CSS クラス名は "mediumseagreen"）が1つ取得できる', function(){
       var elementClassName = 'mediumseagreen';
 
-      // 'change me!' 部分を書き換えてください。
+      // 'change me!' を書き換えてください。
       var elements = 'change me!';
 
       // 参考資料
       // https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName
 
-      expect(elements).to.have.length(1);
-      expect(elements[0]).to.have.property('className', elementClassName);
+      expect(elements).to.be.instanceof(HTMLCollection);
+      expect(elements).to.have.property('class', elementClassName);
     });
 
 
     it('4 番の水色の要素（CSS クラス名は "turquoise"）が2つ取得できる', function(){
       var elementClassName = 'turquoise';
 
-      // 'change me!' 部分を書き換えてください。
+      // 'change me!' を書き換えてください。
       var elements = 'change me!';
 
       // 参考資料
       // https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName
 
-      expect(elements).to.have.length(2);
+      expect(elements).to.be.instanceof(HTMLCollection);
       expect(elements[0]).to.have.property('className', elementClassName);
       expect(elements[1]).to.have.property('className', elementClassName);
     });
@@ -60,38 +63,32 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('5 番の青色の要素（タグ名は "blockquote"）が1つ取得できる', function(){
       var elementTagName = 'blockquote';
 
-      // 'change me!' 部分を書き換えてください。
+      // 'change me!' を書き換えてください。
       var elements = 'change me!';
 
       // 参考資料
       // https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName
 
-      expect(elements).to.have.length(1);
+      expect(elements).to.be.instanceof(HTMLCollection);
       expect(elements[0]).to.have.property('tagName', elementTagName.toUpperCase());
     });
 
 
-    it('6 番の紫色の要素（name 属性の値は "blueviolet"）が1つ取得できる', function(){
-      var elementNameAttr = 'blueviolet';
-
-      // 'change me!' 部分を書き換えてください。
-      var elements = 'change me!';
-
-      // 参考資料
-      // https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByName
-
-      expect(elements).to.have.length(1);
-      expect(elements[0].attributes.name.value).to.equal(elementNameAttr);
+    it.skip('6 番の紫色の要素（data-js-training 属性の値は "blueviolet"）が1つ取得できる', function(){
+      // document.querySelector を学ばないと取得することができません！
+      // 次に進んでください。
     });
   });
 
 
-  describe('ツール編', function() {
+  describe('開発ツール編', function() {
     it('7 番の赤色の要素が1つ取得できる', function(){
 
+      // チュートリアル
+      //
       // 調べたい要素の上で右クリック > 要素の検証
       //
-      // 'change me!' 部分を書き換えてください。
+      // 'change me!' を書き換えてください。
       var element = 'change me!';
 
       expect(element).to.have.property(secret('vq'), secret('oebja'));
@@ -100,7 +97,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
 
     it('8 番の橙色の要素が1つ取得できる', function(){
 
-      // 'change me!' 部分を書き換えてください。
+      // 'change me!' を書き換えてください。
       var element = 'change me!';
 
       expect(element).to.have.property(secret('vq'), secret('qnexbenatr'));
@@ -109,7 +106,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
 
     it('9 番の緑色の要素が1つ取得できる', function(){
 
-      // 'change me!' 部分を書き換えてください。
+      // 'change me!' を書き換えてください。
       var elements = 'change me!';
 
       expect(elements).to.have.length(1);
@@ -119,7 +116,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
 
     it('10 番の水色の要素が2つ取得できる', function(){
 
-      // 'change me!' 部分を書き換えてください。
+      // 'change me!' を書き換えてください。
       var elements = 'change me!';
 
       expect(elements).to.have.length(2);
@@ -130,7 +127,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
 
     it('11 番の青色の要素が1つ取得できる', function(){
 
-      // 'change me!' 部分を書き換えてください。
+      // 'change me!' を書き換えてください。
       var elements = 'change me!';
 
       expect(elements).to.have.length(1);
@@ -138,14 +135,193 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     });
 
 
-    it('12 番の紫色の要素が1つ取得できる', function(){
+    it.skip('12 番の紫色の要素が1つ取得できる', function(){
+      // document.querySelector を学ばないと取得することができません！
+      // 次に進んでください。
+    });
+  });
+
+
+  describe('基本 CSS セレクタ編', function() {
+    it('1 番の赤色の要素を querySelector を使って1つ取得できる', function(){
+
+      // チュートリアル
+      //
+      // 'change me!' を document.querySelector('#firebrick'); に
+      // 書き換えてください。
+      var element = 'change me!';
+
+      // 参考資料
+      // https://developer.mozilla.org/ja/docs/DOM/Locating_DOM_elements_using_selectors
+
+      expect(element).to.have.property(secret('vq'), secret('sveroevpx'));
+    });
+
+
+    it('2 番の橙色の要素を querySelector を使って1つ取得できる', function(){
 
-      // 'change me!' 部分を書き換えてください。
+      // 'change me!' を書き換えてください。
+      var element = 'change me!';
+
+      // 参考資料
+      // https://developer.mozilla.org/ja/docs/Web/CSS/Reference#Selectors
+
+      expect(element).to.have.property(secret('vq'), secret('pubpbyngr'));
+    });
+
+
+    it('3 番の緑色の要素を querySelector を使って1つ取得できる', function(){
+
+      // 'change me!' を書き換えてください。
+      var element = 'change me!';
+
+      expect(element).to.have.property(secret('pynffAnzr'), secret('zrqvhzfrnterra'));
+    });
+
+
+    it('4 番の水色の要素を querySelectorAll を使って2つ取得できる', function(){
+
+      // 'change me!' を書き換えてください。
       var elements = 'change me!';
 
-      expect(elements).to.have.length(1);
-      expect(elements[0]).to.have.deep.property(secret('nggevohgrf.anzr.inyhr'),
-                                                secret('qnexbepuvq'));
+      expect(elements).to.have.length(2);
+      expect(elements[0]).to.have.property(secret('pynffAnzr'), secret('ghedhbvfr'));
+      expect(elements[1]).to.have.property(secret('pynffAnzr'), secret('ghedhbvfr'));
+    });
+
+
+    it('5 番の青色の要素を querySelector を使って1つ取得できる', function(){
+
+      // 'change me!' を書き換えてください。
+      var element = 'change me!';
+
+      expect(element).to.have.property(secret('gntAnzr'), secret('OYBPXDHBGR'));
+    });
+
+
+    it('6 番の紫色の要素を querySelector を使って1つ取得できる', function(){
+
+      // 'change me!' を書き換えてください。
+      var element = 'change me!';
+
+      expect(element).to.have.deep.property(secret('qngnfrg.wfGenvavat'),
+                                            secret('oyhrivbyrg'));
+    });
+  });
+
+
+  describe('応用 CSS セレクタ編', function() {
+    it('7 番の赤色の要素を ID セレクタを使わずに1つ取得できる', function(){
+
+      // チュートリアル
+      //
+      // 'change me!' を document.querySelector('.js-training:nth-child(2) li')
+      // に書き換えてください。
+      var selector = 'change me!';
+
+      var element = document.querySelector(selector);
+      expect(selector).to.not.have.string('#');
+      expect(element).to.have.property(secret('vq'), secret('oebja'));
+    });
+
+
+    it('8 番の橙色の要素を ID セレクタを使わずに1つ取得できる', function(){
+
+      // 'change me!' を書き換えてください。
+      var selector = 'change me!';
+
+      // 参考資料
+      // https://developer.mozilla.org/ja/docs/Web/CSS/Reference#Selectors
+
+      var element = document.querySelector(selector);
+      expect(selector).to.not.have.string('#');
+      expect(element).to.have.property(secret('vq'), secret('qnexbenatr'));
+    });
+
+
+    it('12 番の紫色の要素を、属性セレクタと :nth-child(N) セレクタを使わずに1つ取得できる', function(){
+
+      // 'change me!' を書き換えてください。
+      var selector = 'change me!';
+
+      var element = document.querySelector(selector);
+      expect(selector).to.not.match(/\[\s*name\s*[~\|\^\$\*]?=/);
+      expect(selector).to.not.have.string(':nth-child');
+      expect(element).to.have.deep.property(secret('qngnfrg.wfGenvavat'),
+                                            secret('qnexbepuvq'));
+    });
+  });
+
+
+  describe('jQuery 編', function() {
+    it('7 番の赤色の要素を jQuery を使って1つ取得できる', function(){
+
+      // チュートリアル
+      //
+      // 基本的な使い方は document.querySelectorAll と同じです。
+      //
+      // 'change me!' を $('#brown') に書き換えてください。
+      var $element = 'change me!';
+
+      expect($element).to.be.instanceof(jQuery);
+      expect($element).to.have.id(secret('oebja'));
+    });
+
+
+    it('8 番の橙色の要素を jQuery を使って1つ取得できる', function(){
+
+      // 'change me!' を書き換えてください。
+      var $element = 'change me!';
+
+      // 参考情報（英語）
+      // http://api.jquery.com/jQuery/#jQuery1
+
+      expect($element).to.be.instanceof(jQuery);
+      expect($element).to.have.id(secret('qnexbenatr'));
+    });
+
+
+    it('9 番の緑色の要素を jQuery を使って1つ取得できる', function(){
+
+      // 'change me!' を書き換えてください。
+      var $element = 'change me!';
+
+      expect($element).to.be.instanceof(jQuery);
+      expect($element).to.have.class(secret('yvzrterra'));
+    });
+
+
+    it('10 番の水色の要素を jQuery を使って2つ取得できる', function(){
+
+      // 'change me!' を書き換えてください。
+      var $element = 'change me!';
+
+      expect($element).to.be.instanceof(jQuery);
+      expect($element).to.have.length(2);
+      expect($element).to.have.class(secret('zrqvhzghedhbvfr'));
+    });
+
+
+    it('11 番の青色の要素を jQuery を使って1つ取得できる', function(){
+
+      // 'change me!' を書き換えてください。
+      var $element = 'change me!';
+
+      expect($element).to.be.instanceof(jQuery);
+      expect($element).to.have.length(1);
+      expect($element.get(0)).to.have.property(secret('gntAnzr'), secret('C'));
+    });
+
+
+    it('12 番の紫色の要素を jQuery を使って1つ取得できる', function(){
+
+      // 'change me!' を書き換えてください。
+      var $element = 'change me!';
+
+      expect($element).to.be.instanceof(jQuery);
+      expect($element).to.have.length(1);
+      expect($element).to.have.data(secret('wfGenvavat'),
+                                    secret('qnexbepuvq'));
     });
   });
 });

From cf169961f8044ea4065c394ea7cde31e42d3d025 Mon Sep 17 00:00:00 2001
From: Kuniwak <yuki.kokubun@mixi.co.jp>
Date: Tue, 10 Mar 2015 11:21:35 +0900
Subject: [PATCH 2/5] Fix broken layout on Safari

---
 test/stage1/style.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/test/stage1/style.css b/test/stage1/style.css
index 2e4d4e2d..31dc3a63 100644
--- a/test/stage1/style.css
+++ b/test/stage1/style.css
@@ -1,4 +1,5 @@
 .js-training {
+  display: -webkit-flex;
   display: flex;
   list-style: none;
   margin: 10px;
@@ -6,6 +7,7 @@
 }
 
 .js-training li {
+  -webkit-flex: 1;
   flex: 1;
   margin: 0;
   padding: 0;
@@ -31,6 +33,7 @@
 }
 
 .js-training .turquoise {
+  -webkit-flex: 0.5;
   flex: 0.5;
   background-color: turquoise;
 }
@@ -40,7 +43,7 @@
   margin: 0;
   height: 40px;
   font-weight: bold;
-  font-size: 130%;
+  font-size: 1;
 }
 
 .js-training [data-js-training="blueviolet"] {
@@ -60,6 +63,7 @@
 }
 
 .js-training .mediumturquoise {
+  -webkit-flex: 0.5;
   flex: 0.5;
   background-color: mediumturquoise;
 }

From f50554df34b21c5e37e9b818d9995f11d707fd5e Mon Sep 17 00:00:00 2001
From: Kuniwak <yuki.kokubun@mixi.co.jp>
Date: Tue, 10 Mar 2015 11:21:56 +0900
Subject: [PATCH 3/5] Put favicon

---
 test/stage1/index.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/test/stage1/index.html b/test/stage1/index.html
index 6c354c82..d47d133a 100644
--- a/test/stage1/index.html
+++ b/test/stage1/index.html
@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Mocha</title>
+    <title>mixi JS Training</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="http://img.mixi.net/img/basic/favicon.ico" type="image/vnd.microsoft.icon" rel="icon">
+    <link href="http://img.mixi.net/img/basic/favicon.ico" type="image/vnd.microsoft.icon" rel="shortcut icon">
     <link rel="stylesheet" href="/modules/mocha/mocha.css" />
     <link rel="stylesheet" href="../common/mocha-patch.css" />
     <link rel="stylesheet" href="style.css" />

From 5d88ef0b336bbf6a94f5a073fc59e580b2e1abe8 Mon Sep 17 00:00:00 2001
From: Kuniwak <yuki.kokubun@mixi.co.jp>
Date: Tue, 10 Mar 2015 11:22:18 +0900
Subject: [PATCH 4/5] Fix abs path

---
 server.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/server.js b/server.js
index 17947fc3..105214cd 100644
--- a/server.js
+++ b/server.js
@@ -9,8 +9,8 @@ var app = express();
 app.use(bodyParser.json({limit: '50mb'}));
 app.use(bodyParser.urlencoded({extended: true, limit: '50mb' }));
 
-var PUBLIC_DIR = path.join(__dirname, '/test');
-var MODULE_DIR = path.join(__dirname, '/node_modules');
+var PUBLIC_DIR = path.join(__dirname, 'test');
+var MODULE_DIR = path.join(__dirname, 'node_modules');
 app.use(express.static(PUBLIC_DIR));
 app.use('/modules', express.static(MODULE_DIR));
 

From 7ac39b0b20f1a8987824a69d779b11c5f1802ddc Mon Sep 17 00:00:00 2001
From: Kuniwak <yuki.kokubun@mixi.co.jp>
Date: Tue, 10 Mar 2015 17:52:20 +0900
Subject: [PATCH 5/5] We can take exams by CI

---
 gulp/serve.js          | 42 +++++++++++++++++++++++++++++++
 gulpfile.js            | 56 +++++++++++++++++++++++++-----------------
 package.json           | 11 ++++++---
 server.js              |  2 +-
 test/.eslintrc         |  1 -
 test/stage1/.eslintrc  | 11 +++++++++
 test/stage1/index.html |  3 ++-
 test/stage1/secret.js  | 15 -----------
 test/stage1/tests.js   |  1 -
 9 files changed, 96 insertions(+), 46 deletions(-)
 create mode 100644 gulp/serve.js
 create mode 100644 test/stage1/.eslintrc
 delete mode 100644 test/stage1/secret.js

diff --git a/gulp/serve.js b/gulp/serve.js
new file mode 100644
index 00000000..9b370b15
--- /dev/null
+++ b/gulp/serve.js
@@ -0,0 +1,42 @@
+/* eslint no-underscore-dangle:0 */
+'use strict';
+
+var stream = require('stream');
+var gutil = require('gulp-util');
+
+var SERVER_SCRIPT = './server.js';
+var PORT = 8000;
+
+
+var serve = function() {
+  var nodemon = require('gulp-nodemon');
+  var readable = new stream.Readable({ objectMode: true });
+
+  readable._read = function() {
+    var self = this;
+
+    nodemon({
+      script: SERVER_SCRIPT,
+      watch: [SERVER_SCRIPT],
+      env: { PORT: PORT },
+      stdout: false
+    })
+    .on('readable', function() {
+      this.stdout.on('data', function(buf) {
+        gutil.log(String(buf));
+        if (!String(buf).match(/SERVER_READY/)) { return; }
+
+        // server is ready.
+        self.emit('end');
+      });
+
+      this.stderr.on('data', function(buf) {
+        gutil.log(gutil.colors.red(buf));
+      });
+    });
+  };
+
+  return readable;
+};
+
+module.exports = serve;
diff --git a/gulpfile.js b/gulpfile.js
index 9e1847d3..3cf2bbb1 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,57 +1,67 @@
 'use strict';
 
+var util = require('util');
 var gulp = require('gulp-help')(require('gulp'));
-var mocha = require('gulp-mocha');
-var eslint = require('gulp-eslint');
-var nodemon = require('gulp-nodemon');
+
+var PORT = 8000;
+var BASE_URL = util.format('http://localhost:%d/', PORT);
 
 var tasks = [
   {
-    cmd: 'test:all',
-    help: 'すべてのテストを実行します',
-    src: 'test/**/*.js'
-  }, {
-    cmd: 'test:stage1',
+    cmd: 'stage1',
     help: '意図した DOM を取得できているかテストします',
+    url: BASE_URL + 'stage1',
     src: 'test/stage1.js'
   }, {
-    cmd: 'test:stage2',
+    cmd: 'stage2',
     help: '意図通りに DOM の構造・スタイルが変更できているかテストします',
+    url: BASE_URL + 'stage2',
     src: 'test/stage2.js'
   }, {
-    cmd: 'test:stage3',
+    cmd: 'stage3',
     help: '意図通りにイベントを利用できているかテストします',
+    url: BASE_URL + 'stage3',
     src: 'test/stage3.js'
   }, {
-    cmd: 'test:stage4',
+    cmd: 'stage4',
     help: '意図通りにサーバーと通信できているかテストします',
+    url: BASE_URL + 'stage4',
     src: 'test/stage4.js'
   }, {
-    cmd: 'test:stage5',
+    cmd: 'stage5',
     help: '意図通りにモジュールを実装できているかテストします',
+    url: BASE_URL + 'stage5',
     src: 'test/stage5.js'
   }, {
-    cmd: 'test:stage6',
+    cmd: 'stage6',
     help: 'よくあるイディオムを読み書きできているかテストします',
+    url: BASE_URL + 'stage6',
     src: 'test/stage6.js'
   }
 ];
 
 
 tasks.forEach(function(task) {
-  gulp.task(task.cmd, task.help, function() {
-    return gulp.src(task.src, { read: false }).
-      pipe(eslint()).
-      pipe(eslint.format()).
-      pipe(mocha());
+  var run = require('gulp-run');
+
+  gulp.task(task.cmd, task.help, ['lint'], function() {
+    // We expected that mocha-phantomjs print colorized results, but it isn't.
+    // So, I take a fast way that is using gulp-run.
+    return run('`npm bin`/mocha-phantomjs ' + task.url + ' || true').exec();
   });
 });
 
 
+gulp.task('lint', 'ミスのおこりやすいコード・可読性の低いコードがないか検査します', function() {
+  var eslint = require('gulp-eslint');
+
+  return gulp.src('test/**/*.js')
+    .pipe(eslint())
+    .pipe(eslint.format());
+});
+
+
 gulp.task('serve', 'サーバーを起動し、ブラウザでテストを確認できるようにします', function(){
-  nodemon({
-    script: './server.js',
-    watch: ['server.js'],
-    env: { PORT: 8000 }
-  });
+  var serve = require('./gulp/serve.js');
+  return serve();
 });
diff --git a/package.json b/package.json
index 73780b25..c5b25c3a 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "Training course repository for JavaScript by mixi",
   "main": "index.js",
   "scripts": {
-    "test": "$(npm bin)/gulp test:all"
+    "help": "$(npm bin)/gulp help"
   },
   "repository": {
     "type": "git",
@@ -26,11 +26,14 @@
     "gulp": "^3.8.11",
     "gulp-eslint": "^0.6.0",
     "gulp-help": "^1.3.3",
-    "gulp-mocha": "^2.0.0",
     "gulp-nodemon": "^1.0.5",
+    "gulp-run": "^1.6.6",
     "gulp-util": "^3.0.4",
     "mocha": "^2.2.0",
-    "mocha-phantomjs": "^3.5.3",
-    "phantomjs": "^1.9.16"
+    "mocha-phantomjs": "^3.5.3"
+  },
+  "dependencies": {
+    "chai-jquery": "^2.0.0",
+    "jquery": "^2.1.3"
   }
 }
diff --git a/server.js b/server.js
index 105214cd..62db7a6e 100644
--- a/server.js
+++ b/server.js
@@ -18,5 +18,5 @@ var server = require('http').createServer(app);
 var PORT = 8000;
 var HOSTNAME = 'localhost';
 server.listen(PORT, HOSTNAME, function () {
-  console.log(util.format('ブラウザで http://%s:%d/stage1 にアクセスしてください', HOSTNAME, PORT));
+  console.log(util.format('SERVER_READY on http://%s:%d', HOSTNAME, PORT));
 });
diff --git a/test/.eslintrc b/test/.eslintrc
index 25b8df79..1a13a3ee 100644
--- a/test/.eslintrc
+++ b/test/.eslintrc
@@ -1,6 +1,5 @@
 {
   "env": {
-    "browser": true,
     "mocha": true
   },
   "globals": {
diff --git a/test/stage1/.eslintrc b/test/stage1/.eslintrc
new file mode 100644
index 00000000..ddbc632c
--- /dev/null
+++ b/test/stage1/.eslintrc
@@ -0,0 +1,11 @@
+{
+  "env": {
+    "browser": true,
+    "mocha": true
+  },
+  "globals": {
+    "$": false,
+    "jQuery": false,
+    "HTMLCollection": false
+  }
+}
diff --git a/test/stage1/index.html b/test/stage1/index.html
index d47d133a..f2ede4ae 100644
--- a/test/stage1/index.html
+++ b/test/stage1/index.html
@@ -42,7 +42,8 @@
     <script>mocha.setup('bdd')</script>
     <script src="tests.js"></script>
     <script>
-      mocha.run();
+      if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
+      else { mocha.run(); }
     </script>
   </body>
 </html>
diff --git a/test/stage1/secret.js b/test/stage1/secret.js
deleted file mode 100644
index 985e4279..00000000
--- a/test/stage1/secret.js
+++ /dev/null
@@ -1,15 +0,0 @@
-'use strict';
-
-function secret(str) {
-  return Array.prototype.map.call(str, function(char) {
-    if(!char.match(/[A-Za-z]/)) return char;
-
-    var charCode = char.charCodeAt(0);
-    if(charCode < 97) {
-      charCode = (charCode - 52) % 26 + 65;
-    } else {
-      charCode = (charCode - 84) % 26 + 97;
-    }
-    return String.fromCharCode(charCode);
-  }).join('');
-};
diff --git a/test/stage1/tests.js b/test/stage1/tests.js
index ba6fab4a..2ccc6497 100644
--- a/test/stage1/tests.js
+++ b/test/stage1/tests.js
@@ -1,4 +1,3 @@
-/* global $, jQuery, HTMLCollection */
 'use strict';
 
 describe('ステージ1（意図した DOM 要素を取得できるようになる）', function(){