Skip to content

Commit c4338eb

Browse files
KuniwakKuniwak
committed
Merge pull request mixi-inc#7 from mixi-inc/impl-stage5
Implement stage5
2 parents 26bc6a0 + 5244fc2 commit c4338eb

File tree

8 files changed

+158
-47
lines changed

8 files changed

+158
-47
lines changed

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"devDependencies": {
2323
"body-parser": "^1.12.0",
2424
"chai": "^2.1.1",
25+
"chai-as-promised": "^4.3.0",
2526
"express": "^4.12.2",
2627
"gulp": "^3.8.11",
2728
"gulp-eslint": "^0.6.0",
@@ -35,6 +36,7 @@
3536
"dependencies": {
3637
"bootstrap": "^3.3.2",
3738
"chai-jquery": "^2.0.0",
38-
"jquery": "^2.1.3"
39+
"jquery": "^2.1.3",
40+
"whatwg-fetch": "^0.7.0"
3941
}
4042
}

‎server.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,14 @@ var MODULE_DIR = path.join(__dirname, 'node_modules');
1414
app.use(express.static(PUBLIC_DIR));
1515
app.use('/modules', express.static(MODULE_DIR));
1616

17+
18+
app.get('/api/heavy', function(req, res) {
19+
setTimeout(function() {
20+
res.send('// do nothing');
21+
}, 1000);
22+
});
23+
24+
1725
var server = require('http').createServer(app);
1826
var PORT = 8000;
1927
var HOSTNAME = 'localhost';

‎test/stage4/index.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<li id="firebrick">1</li>
1717
<li id="chocolate">2</li>
1818
<li class="mediumseagreen">3</li>
19-
<li class="turquoise"><input type="number" value="0"></li>
19+
<li class="turquoise">4<input type="number" value="0"></li>
2020
</ul>
2121
</div>
2222
<div id="mocha"></div>
@@ -35,5 +35,11 @@
3535
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
3636
else { mocha.run(); }
3737
</script>
38+
<script src="/api/heavy"></script>
39+
<div class="js-training-container">
40+
<ul class="js-training">
41+
<li class="steelblue">5 &#x1f433;</li>
42+
</ul>
43+
</div>
3844
</body>
3945
</html>

‎test/stage4/style.css‎

Lines changed: 15 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -45,56 +45,27 @@
4545
.js-training .turquoise {
4646
background-color: turquoise;
4747
font-weight: normal;
48+
text-align: right;
4849
}
4950

50-
.js-training blockquote {
51-
background-color: steelblue;
52-
margin: 0;
51+
.js-training .turquoise input {
52+
background-color: hsla(0, 0%, 0%, 0.1);
53+
width: 3em;
5354
height: 40px;
54-
font-size: 1;
55-
font-weight: normal;
56-
}
57-
58-
.js-training [data-js-training="blueviolet"] {
59-
background-color: blueviolet;
60-
}
61-
62-
.js-training #brown {
63-
background-color: brown;
64-
font-weight: normal;
65-
}
66-
67-
.js-training #darkorange {
68-
background-color: darkorange;
69-
font-weight: normal;
70-
}
71-
72-
.js-training .limegreen {
73-
background-color: limegreen;
74-
font-weight: normal;
75-
}
55+
border: none;
56+
margin-left: 15%;
57+
padding: 0 0 0 12px;
7658

77-
.js-training .mediumturquoise {
78-
background-color: mediumturquoise;
79-
font-weight: normal;
59+
font-size: inherit;
60+
color: inherit;
61+
text-shadow: inherit;
62+
text-align: center;
8063
}
8164

82-
.js-training p {
65+
.js-training .steelblue {
66+
background-color: steelblue;
8367
margin: 0;
84-
padding: 0;
85-
background-color: cornflowerblue;
86-
font-weight: normal;
87-
}
88-
89-
.js-training [data-js-training="darkorchid"] {
90-
background-color: darkorchid;
91-
}
92-
93-
.js-training-trick {
94-
z-index: 1;
95-
position: absolute;
96-
top: 0;
9768
height: 40px;
98-
line-height: 40px;
99-
text-indent: 60%;
69+
font-size: 1;
70+
font-weight: normal;
10071
}

‎test/stage4/tests.js‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ describe('ステージ4（意図通りにイベントを利用できる）', fun
6464
});
6565

6666

67-
it('4 番の要素のに入力された角度に回転できる', function() {
67+
it('4 番の要素を入力された角度に回転できる', function() {
6868

6969
// ここにコードを記述してください。
7070

@@ -80,6 +80,23 @@ describe('ステージ4（意図通りにイベントを利用できる）', fun
8080
expect(turquoise).to.have.deep.property(
8181
secret('fglyr.genafsbez'), secret('ebgngr(20qrt)'));
8282
});
83+
84+
85+
it('5 番の要素の内容を取得できる', function(done) {
86+
87+
// このテストは、画面下部の .steelblue 要素の内容が "5 (クジラの絵文字)" で
88+
// あることを確認する意図があります。画面上は 5 とクジラの絵文字が正しく
89+
// 表示されています。しかし、テストは失敗しているようです。
90+
//
91+
// このテストが意図通り成功するようにテストコードを修正してください。
92+
//
93+
// なお、expect(steelblue).to.be.null は上記のテストの要件を満たして
94+
// いないので、正解ではありません。
95+
96+
var steelblue = document.querySelector('.steelblue');
97+
expect(steelblue).to.have.property('textContent', '5 \uD83D\uDC33');
98+
done();
99+
});
83100
});
84101
});
85102

‎test/stage5/.eslintrc‎

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

‎test/stage5/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>mixi JS Training</title>
5+
<meta charset="UTF-8">
6+
<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">
9+
<link rel="stylesheet" href="/modules/mocha/mocha.css">
10+
<link rel="stylesheet" href="../common/mocha-patch.css">
11+
</head>
12+
<body>
13+
<div id="mocha"></div>
14+
<script src="/modules/jquery/dist/jquery.js"></script>
15+
<script src="/modules/mocha/mocha.js"></script>
16+
<script src="/modules/chai/chai.js"></script>
17+
<script src="/modules/chai-jquery/chai-jquery.js"></script>
18+
<script src="/modules/chai-as-promised/lib/chai-as-promised.js"></script>
19+
<script src="/modules/whatwg-fetch/fetch.js"></script>
20+
<script>
21+
mocha.ui('bdd');
22+
mocha.reporter('html');
23+
expect = chai.expect;
24+
</script>
25+
<script>mocha.setup('bdd')</script>
26+
<script src="tests.js"></script>
27+
<script>
28+
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
29+
else { mocha.run(); }
30+
</script>
31+
</body>
32+
</html>

‎test/stage5/tests.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
'use strict';
2+
3+
describe('ステージ5（意図通りに非同期処理を利用できる）', function() {
4+
describe('通信編', function() {
5+
it('Github の mixi-inc の organization の情報を取得できる', function() {
6+
var mixiOrg;
7+
8+
// チュートリアル
9+
//
10+
// ここに下記のコードを記述してください。
11+
//
12+
// mixiOrg = fetch('https://api.github.com/orgs/mixi-inc').
13+
// then(function(response) {
14+
// return response.json();
15+
// });
16+
17+
18+
return expect(mixiOrg).to.eventually.have.property('id', 1089312);
19+
20+
// Github API に関する参考情報
21+
// https://developer.github.com/v3/repos/
22+
});
23+
24+
25+
it('Github API を使って、mixi-inc/JavaScriptTraining の情報を取得できる', function(){
26+
var repositry = 'mixi-inc/JavaScriptTraining';
27+
var mixiRepo;
28+
29+
// コードをここに記述してください。
30+
31+
32+
return expect(mixiRepo).to.eventually.have.property(
33+
'full_name', repositry);
34+
});
35+
36+
37+
it('Github API を使って、VimL、Emacs Lisp でスターが最も多いプロダクト名を' +
38+
'それぞれ 1 つずつ取得できる', function(){
39+
var languages = [ 'VimL', '"Emacs Lisp"' ];
40+
var mostPopularRepos;
41+
42+
// コードをここに記述してください。
43+
// なお、 mostPopularRepos は Promise インスタンスであることを
44+
// 意図しています。
45+
46+
47+
return expect(mostPopularRepos).to.eventually.have.length(2);
48+
49+
// fetch API に関する参考情報
50+
// https://github.com/github/fetch
51+
//
52+
// Github API に関する参考情報
53+
// https://developer.github.com/v3/search/
54+
//
55+
// Promise に関する参考情報
56+
// https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise
57+
//
58+
// Promise 参考情報（重量級）
59+
// http://azu.github.io/promises-book/
60+
});
61+
});
62+
});

0 commit comments

Comments
 (0)