Skip to content

Commit 7d9b06a

Browse files
KuniwakKuniwak
committed
Merge pull request mixi-inc#3 from mixi-inc/impl-stage1
ステージ1
2 parents f631c2f + 7ac39b0 commit 7d9b06a

File tree

10 files changed

+321
-87
lines changed

10 files changed

+321
-87
lines changed

‎gulp/serve.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/* eslint no-underscore-dangle:0 */
2+
'use strict';
3+
4+
var stream = require('stream');
5+
var gutil = require('gulp-util');
6+
7+
var SERVER_SCRIPT = './server.js';
8+
var PORT = 8000;
9+
10+
11+
var serve = function() {
12+
var nodemon = require('gulp-nodemon');
13+
var readable = new stream.Readable({ objectMode: true });
14+
15+
readable._read = function() {
16+
var self = this;
17+
18+
nodemon({
19+
script: SERVER_SCRIPT,
20+
watch: [SERVER_SCRIPT],
21+
env: { PORT: PORT },
22+
stdout: false
23+
})
24+
.on('readable', function() {
25+
this.stdout.on('data', function(buf) {
26+
gutil.log(String(buf));
27+
if (!String(buf).match(/SERVER_READY/)) { return; }
28+
29+
// server is ready.
30+
self.emit('end');
31+
});
32+
33+
this.stderr.on('data', function(buf) {
34+
gutil.log(gutil.colors.red(buf));
35+
});
36+
});
37+
};
38+
39+
return readable;
40+
};
41+
42+
module.exports = serve;

‎gulpfile.js‎

Lines changed: 33 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,67 @@
11
'use strict';
22

3+
var util = require('util');
34
var gulp = require('gulp-help')(require('gulp'));
4-
var mocha = require('gulp-mocha');
5-
var eslint = require('gulp-eslint');
6-
var nodemon = require('gulp-nodemon');
5+
6+
var PORT = 8000;
7+
var BASE_URL = util.format('http://localhost:%d/', PORT);
78

89
var tasks = [
910
{
10-
cmd: 'test:all',
11-
help: 'すべてのテストを実行します',
12-
src: 'test/**/*.js'
13-
}, {
14-
cmd: 'test:stage1',
11+
cmd: 'stage1',
1512
help: '意図した DOM を取得できているかテストします',
13+
url: BASE_URL + 'stage1',
1614
src: 'test/stage1.js'
1715
}, {
18-
cmd: 'test:stage2',
16+
cmd: 'stage2',
1917
help: '意図通りに DOM の構造・スタイルが変更できているかテストします',
18+
url: BASE_URL + 'stage2',
2019
src: 'test/stage2.js'
2120
}, {
22-
cmd: 'test:stage3',
21+
cmd: 'stage3',
2322
help: '意図通りにイベントを利用できているかテストします',
23+
url: BASE_URL + 'stage3',
2424
src: 'test/stage3.js'
2525
}, {
26-
cmd: 'test:stage4',
26+
cmd: 'stage4',
2727
help: '意図通りにサーバーと通信できているかテストします',
28+
url: BASE_URL + 'stage4',
2829
src: 'test/stage4.js'
2930
}, {
30-
cmd: 'test:stage5',
31+
cmd: 'stage5',
3132
help: '意図通りにモジュールを実装できているかテストします',
33+
url: BASE_URL + 'stage5',
3234
src: 'test/stage5.js'
3335
}, {
34-
cmd: 'test:stage6',
36+
cmd: 'stage6',
3537
help: 'よくあるイディオムを読み書きできているかテストします',
38+
url: BASE_URL + 'stage6',
3639
src: 'test/stage6.js'
3740
}
3841
];
3942

4043

4144
tasks.forEach(function(task) {
42-
gulp.task(task.cmd, task.help, function() {
43-
return gulp.src(task.src, { read: false }).
44-
pipe(eslint()).
45-
pipe(eslint.format()).
46-
pipe(mocha());
45+
var run = require('gulp-run');
46+
47+
gulp.task(task.cmd, task.help, ['lint'], function() {
48+
// We expected that mocha-phantomjs print colorized results, but it isn't.
49+
// So, I take a fast way that is using gulp-run.
50+
return run('`npm bin`/mocha-phantomjs ' + task.url + ' || true').exec();
4751
});
4852
});
4953

5054

55+
gulp.task('lint', 'ミスのおこりやすいコード・可読性の低いコードがないか検査します', function() {
56+
var eslint = require('gulp-eslint');
57+
58+
return gulp.src('test/**/*.js')
59+
.pipe(eslint())
60+
.pipe(eslint.format());
61+
});
62+
63+
5164
gulp.task('serve', 'サーバーを起動し、ブラウザでテストを確認できるようにします', function(){
52-
nodemon({
53-
script: './server.js',
54-
watch: ['server.js'],
55-
env: { PORT: 8000 }
56-
});
65+
var serve = require('./gulp/serve.js');
66+
return serve();
5767
});

‎package.json‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"description": "Training course repository for JavaScript by mixi",
55
"main": "index.js",
66
"scripts": {
7-
"test": "$(npm bin)/gulp test:all"
7+
"help": "$(npm bin)/gulp help"
88
},
99
"repository": {
1010
"type": "git",
@@ -26,11 +26,14 @@
2626
"gulp": "^3.8.11",
2727
"gulp-eslint": "^0.6.0",
2828
"gulp-help": "^1.3.3",
29-
"gulp-mocha": "^2.0.0",
3029
"gulp-nodemon": "^1.0.5",
30+
"gulp-run": "^1.6.6",
3131
"gulp-util": "^3.0.4",
3232
"mocha": "^2.2.0",
33-
"mocha-phantomjs": "^3.5.3",
34-
"phantomjs": "^1.9.16"
33+
"mocha-phantomjs": "^3.5.3"
34+
},
35+
"dependencies": {
36+
"chai-jquery": "^2.0.0",
37+
"jquery": "^2.1.3"
3538
}
3639
}

‎server.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ var app = express();
99
app.use(bodyParser.json({limit: '50mb'}));
1010
app.use(bodyParser.urlencoded({extended: true, limit: '50mb' }));
1111

12-
var PUBLIC_DIR = path.join(__dirname, '/test');
13-
var MODULE_DIR = path.join(__dirname, '/node_modules');
12+
var PUBLIC_DIR = path.join(__dirname, 'test');
13+
var MODULE_DIR = path.join(__dirname, 'node_modules');
1414
app.use(express.static(PUBLIC_DIR));
1515
app.use('/modules', express.static(MODULE_DIR));
1616

1717
var server = require('http').createServer(app);
1818
var PORT = 8000;
1919
var HOSTNAME = 'localhost';
2020
server.listen(PORT, HOSTNAME, function () {
21-
console.log(util.format('ブラウザで http://%s:%d/stage1 にアクセスしてください', HOSTNAME, PORT));
21+
console.log(util.format('SERVER_READY on http://%s:%d', HOSTNAME, PORT));
2222
});

‎test/.eslintrc‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
{
22
"env": {
3-
"browser": true,
43
"mocha": true
54
},
65
"globals": {

‎test/stage1/.eslintrc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"mocha": true
5+
},
6+
"globals": {
7+
"$": false,
8+
"jQuery": false,
9+
"HTMLCollection": false
10+
}
11+
}

‎test/stage1/index.html‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>Mocha</title>
4+
<title>mixi JS Training</title>
55
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link href="http://img.mixi.net/img/basic/favicon.ico" type="image/vnd.microsoft.icon" rel="icon">
8+
<link href="http://img.mixi.net/img/basic/favicon.ico" type="image/vnd.microsoft.icon" rel="shortcut icon">
79
<link rel="stylesheet" href="/modules/mocha/mocha.css" />
810
<link rel="stylesheet" href="../common/mocha-patch.css" />
911
<link rel="stylesheet" href="style.css" />
@@ -16,7 +18,7 @@
1618
<li class="turquoise" title="turquoise">4</li>
1719
<li class="turquoise" title="turquoise">4</li>
1820
<li><blockquote title="steelblue">5</blockquote></li>
19-
<li name="blueviolet" title="blueviolet">6</li>
21+
<li data-js-training="blueviolet" title="blueviolet">6</li>
2022
</ul>
2123
<ul class="js-training">
2224
<li id="brown">7</li>
@@ -25,11 +27,13 @@
2527
<li class="mediumturquoise">10</li>
2628
<li class="mediumturquoise">10</li>
2729
<li><p>11</p></li>
28-
<li name="darkorchid">12</li>
30+
<li data-js-training="darkorchid">12</li>
2931
</ul>
3032
<div id="mocha"></div>
33+
<script src="/modules/jquery/dist/jquery.js"></script>
3134
<script src="/modules/mocha/mocha.js"></script>
3235
<script src="/modules/chai/chai.js"></script>
36+
<script src="/modules/chai-jquery/chai-jquery.js"></script>
3337
<script>
3438
mocha.ui('bdd');
3539
mocha.reporter('html');
@@ -38,7 +42,8 @@
3842
<script>mocha.setup('bdd')</script>
3943
<script src="tests.js"></script>
4044
<script>
41-
mocha.run();
45+
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
46+
else { mocha.run(); }
4247
</script>
4348
</body>
4449
</html>

‎test/stage1/secret.js‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎test/stage1/style.css‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
.js-training {
2+
display: -webkit-flex;
23
display: flex;
34
list-style: none;
45
margin: 10px;
56
padding: 0;
67
}
78

89
.js-training li {
10+
-webkit-flex: 1;
911
flex: 1;
1012
margin: 0;
1113
padding: 0;
@@ -31,6 +33,7 @@
3133
}
3234

3335
.js-training .turquoise {
36+
-webkit-flex: 0.5;
3437
flex: 0.5;
3538
background-color: turquoise;
3639
}
@@ -40,10 +43,10 @@
4043
margin: 0;
4144
height: 40px;
4245
font-weight: bold;
43-
font-size: 130%;
46+
font-size: 1;
4447
}
4548

46-
.js-training [name=blueviolet] {
49+
.js-training [data-js-training="blueviolet"] {
4750
background-color: blueviolet;
4851
}
4952

@@ -60,6 +63,7 @@
6063
}
6164

6265
.js-training .mediumturquoise {
66+
-webkit-flex: 0.5;
6367
flex: 0.5;
6468
background-color: mediumturquoise;
6569
}
@@ -70,6 +74,6 @@
7074
background-color: cornflowerblue;
7175
}
7276

73-
.js-training [name="darkorchid"] {
77+
.js-training [data-js-training="darkorchid"] {
7478
background-color: darkorchid;
7579
}

0 commit comments

Comments
 (0)