mixi-inc · Kuniwak · Mar 10, 2015 · Mar 10, 2015 · Mar 10, 2015 · Mar 10, 2015
diff --git a/gulp/serve.js 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
@@ -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
@@ -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
@@ -9,14 +9,14 @@ 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));
 
 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
@@ -1,6 +1,5 @@
 {
   "env": {
-    "browser": true,
     "mocha": true
   },
   "globals": {

diff --git a/test/stage1/.eslintrc 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
@@ -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" />
@@ -16,7 +18,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 +27,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');
@@ -38,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
diff --git a/test/stage1/style.css b/test/stage1/style.css
@@ -1,11 +1,13 @@
 .js-training {
+  display: -webkit-flex;
   display: flex;
   list-style: none;
   margin: 10px;
   padding: 0;
 }
 
 .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,10 +43,10 @@
   margin: 0;
   height: 40px;
   font-weight: bold;
-  font-size: 130%;
+  font-size: 1;
 }
 
-.js-training [name=blueviolet] {
+.js-training [data-js-training="blueviolet"] {
   background-color: blueviolet;
 }
 
@@ -60,6 +63,7 @@
 }
 
 .js-training .mediumturquoise {
+  -webkit-flex: 0.5;
   flex: 0.5;
   background-color: mediumturquoise;
 }
@@ -70,6 +74,6 @@
   background-color: cornflowerblue;
 }
 
-.js-training [name="darkorchid"] {
+.js-training [data-js-training="darkorchid"] {
   background-color: darkorchid;
 }