Skip to content

Commit 63c5535

Browse files
author
Kuniwak
committed
Implement Stage2
1 parent efe7a56 commit 63c5535

File tree

4 files changed

+390
-0
lines changed

4 files changed

+390
-0
lines changed

‎test/stage2/.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/stage2/index.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
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+
<link rel="stylesheet" href="style.css">
12+
</head>
13+
<body>
14+
<div class="js-training-container">
15+
<ul class="js-training">
16+
<li id="firebrick">&#x1f363;</li>
17+
<li id="chocolate">&#x1f36b;</li>
18+
<li class="mediumseagreen">3</li>
19+
<li class="turquoise">4</li>
20+
<li><blockquote>5</blockquote></li>
21+
<li data-js-training="blueviolet">6</li>
22+
</ul>
23+
<div class="js-training-trick">&#x1f420;&#x1f420;</div>
24+
</div>
25+
<div class="js-training-container">
26+
<ul class="js-training">
27+
<li id="brown">&#x1f363;</li>
28+
<li id="darkorange">&#x1f36b;</li>
29+
<li class="limegreen">9</li>
30+
<li class="mediumturquoise">10</li>
31+
<li><p>11</p></li>
32+
<li data-js-training="darkorchid">12</li>
33+
</ul>
34+
<div class="js-training-trick">&#x1f420;&#x1f420;</div>
35+
</div>
36+
<div id="mocha"></div>
37+
<script src="/modules/jquery/dist/jquery.js"></script>
38+
<script src="/modules/mocha/mocha.js"></script>
39+
<script src="/modules/chai/chai.js"></script>
40+
<script src="/modules/chai-jquery/chai-jquery.js"></script>
41+
<script>
42+
mocha.ui('bdd');
43+
mocha.reporter('html');
44+
expect = chai.expect;
45+
</script>
46+
<script>mocha.setup('bdd')</script>
47+
<script src="tests.js"></script>
48+
<script>
49+
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
50+
else { mocha.run(); }
51+
</script>
52+
</body>
53+
</html>

‎test/stage2/style.css‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
.js-training-container {
2+
position: relative;
3+
}
4+
5+
.js-training {
6+
position: relative;
7+
z-index:10;
8+
display: -webkit-flex;
9+
display: flex;
10+
list-style: none;
11+
margin: 10px;
12+
padding: 0;
13+
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
14+
}
15+
16+
.js-training li {
17+
-webkit-flex: 1;
18+
flex: 1;
19+
margin: 0;
20+
padding: 0;
21+
height: 40px;
22+
line-height: 40px;
23+
text-align: center;
24+
color: white;
25+
font-weight: bold;
26+
font-size: 130%;
27+
text-shadow: 0 1px 0 hsla(0, 0%, 0%, 0.3);
28+
}
29+
30+
.js-training #firebrick {
31+
background-color: firebrick;
32+
font-weight: normal;
33+
}
34+
35+
.js-training #chocolate {
36+
background-color: chocolate;
37+
font-weight: normal;
38+
}
39+
40+
.js-training .mediumseagreen {
41+
background-color: mediumseagreen;
42+
}
43+
44+
.js-training .turquoise {
45+
background-color: turquoise;
46+
}
47+
48+
.js-training blockquote {
49+
background-color: steelblue;
50+
margin: 0;
51+
height: 40px;
52+
font-weight: bold;
53+
font-size: 1;
54+
}
55+
56+
.js-training [data-js-training="blueviolet"] {
57+
background-color: blueviolet;
58+
}
59+
60+
.js-training #brown {
61+
background-color: brown;
62+
font-weight: normal;
63+
}
64+
65+
.js-training #darkorange {
66+
background-color: darkorange;
67+
font-weight: normal;
68+
}
69+
70+
.js-training .limegreen {
71+
background-color: limegreen;
72+
}
73+
74+
.js-training .mediumturquoise {
75+
background-color: mediumturquoise;
76+
}
77+
78+
.js-training p {
79+
margin: 0;
80+
padding: 0;
81+
background-color: cornflowerblue;
82+
}
83+
84+
.js-training [data-js-training="darkorchid"] {
85+
background-color: darkorchid;
86+
}
87+
88+
.js-training-trick {
89+
z-index: 1;
90+
position: absolute;
91+
top: 0;
92+
height: 40px;
93+
line-height: 40px;
94+
text-indent: 60%;
95+
}

‎test/stage2/tests.js‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
'use strict';
2+
3+
describe('ステージ2（意図した通りに DOM 要素の構造・スタイルを変更できるようになる）', function(){
4+
describe('DOMインターフェース編', function() {
5+
it('寿司が表示されている要素の寿司を2つに増やす', function(){
6+
var element;
7+
8+
// チュートリアル
9+
//
10+
// ここに以下のコードを記述してください。
11+
//
12+
// element = document.getElementById('firebrick');
13+
// element.textContent = element.textContent + element.textContent;
14+
15+
16+
expect(element).to.have.property(secret('vq'), secret('sveroevpx'));
17+
expect(element).to.have.deep.property(
18+
secret('grkgPbagrag'), '\uD83C\uDF63\uD83C\uDF63');
19+
});
20+
21+
22+
it('チョコが表示されている要素のチョコを2つに増やす', function(){
23+
var element;
24+
25+
// ここにコードを記述してください。
26+
// 変更した HTML 要素は element 変数に代入してください。
27+
28+
29+
// 参考情報
30+
// https://developer.mozilla.org/ja/docs/Web/API/Node/textContent
31+
32+
expect(element).to.have.property(secret('vq'), secret('pubpbyngr'));
33+
expect(element).to.have.deep.property(
34+
secret('grkgPbagrag'), '\uD83C\uDF6B\uD83C\uDF6B');
35+
});
36+
37+
38+
it('3 番の要素の背景色を "limegreen" に変更する', function(){
39+
var element;
40+
41+
// ここにコードを記述してください。
42+
// 変更した HTML 要素は element 変数に代入してください。
43+
44+
45+
// 参考情報
46+
// https://developer.mozilla.org/ja/search?q=css+%E8%89%B2
47+
48+
expect(element).to.have.property(
49+
secret('pynffAnzr'), secret('zrqvhzfrnterra'));
50+
51+
expect(element).to.have.deep.property(
52+
secret('fglyr.onpxtebhaqPbybe'), normalizeColor('limegreen'));
53+
});
54+
55+
56+
it('4 番の要素を 50% の透明度に変更する', function(){
57+
var element;
58+
59+
// ここにコードを記述してください。
60+
// 変更した HTML 要素は element 変数に代入してください。
61+
62+
63+
// 参考情報
64+
// https://developer.mozilla.org/ja/search?q=css+%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6
65+
66+
expect(element).to.have.property(
67+
secret('pynffAnzr'), secret('ghedhbvfr'));
68+
69+
expect(element).to.have.deep.property(
70+
secret('fglyr.bcnpvgl'), '0.5');
71+
});
72+
73+
74+
it('5 番の要素を時計回り方向に 10 度回転させる', function(){
75+
var element;
76+
77+
// ここにコードを記述してください。
78+
// 変更した HTML 要素は element 変数に代入してください。
79+
80+
81+
// 参考情報
82+
// https://developer.mozilla.org/ja/search?q=css+%E5%9B%9E%E8%BB%A2
83+
84+
expect(element).to.have.property(
85+
secret('gntAnzr'), secret('OYBPXDHBGR'));
86+
87+
expect(element).to.have.deep.property(
88+
secret('fglyr.genafsbez'), secret('ebgngr(10qrt)'));
89+
});
90+
91+
92+
it('6 番の要素を上に 20px 移動させる', function(){
93+
var element;
94+
95+
// ここにコードを記述してください。
96+
// 変更した HTML 要素は element 変数に代入してください。
97+
98+
// 参考情報
99+
// https://developer.mozilla.org/ja/docs/Web/CSS/top
100+
101+
expect(element).to.have.deep.property(
102+
secret('qngnfrg.wfGenvavat'), secret('oyhrivbyrg'));
103+
104+
expect(element).to.have.deep.property(
105+
secret('fglyr.gbc'), secret('-20ck'));
106+
107+
expect(element).to.have.deep.property(
108+
secret('fglyr.cbfvgvba'), secret('eryngvir'));
109+
});
110+
});
111+
112+
113+
describe('jQuery 編', function() {
114+
it('寿司が表示されている要素の寿司を jQuery を使って2つに増やす', function(){
115+
var $element;
116+
117+
// チュートリアル
118+
//
119+
// ここに以下のコードを記述してください。
120+
//
121+
// $element = document.getElementById('brown');
122+
// $element.textContent = $element.textContent + $element.textContent;
123+
124+
125+
expect($element).to.be.instanceof(jQuery);
126+
expect($element).to.have.id(secret('oebja'));
127+
expect($element).to.have.text('\uD83C\uDF63\uD83C\uDF63');
128+
});
129+
130+
131+
it('チョコが表示されている要素のチョコを jQuery を使って2つに増やす', function(){
132+
var $element;
133+
134+
// ここにコードを記述してください。
135+
// 変更した HTML 要素は $element 変数に代入してください。
136+
137+
138+
// 参考情報
139+
// http://api.jquery.com/category/manipulation/
140+
141+
expect($element).to.be.instanceof(jQuery);
142+
expect($element).to.have.id(secret('qnexbenatr'));
143+
expect($element).to.have.text('\uD83C\uDF6B\uD83C\uDF6B');
144+
});
145+
146+
147+
it('9 番の要素の背景色を jQuery を使って "mediumseagreen" に変更する', function(){
148+
var $element;
149+
150+
// ここにコードを記述してください。
151+
// 変更した HTML 要素は $element 変数に代入してください。
152+
153+
154+
// 参考情報
155+
// http://api.jquery.com/category/css/
156+
157+
expect($element).to.be.instanceof(jQuery);
158+
expect($element).to.have.class(secret('yvzrterra'));
159+
expect($element).to.have.css(
160+
secret('onpxtebhaq-pbybe'), normalizeColor('mediumseagreen'));
161+
});
162+
163+
164+
it('10 番の要素を jQuery を使って 50% の透明度に変更する', function(){
165+
var $element;
166+
167+
// ここにコードを記述してください。
168+
// 変更した HTML 要素は $element 変数に代入してください。
169+
170+
171+
expect($element).to.be.instanceof(jQuery);
172+
expect($element).to.have.class(secret('zrqvhzghedhbvfr'));
173+
expect($element).to.have.css(secret('bcnpvgl'), '0.5');
174+
});
175+
176+
177+
it('5 番の要素を jQuery を使って時計回り方向に 10 度回転させる', function(){
178+
var $element;
179+
180+
// ここにコードを記述してください。
181+
// 変更した HTML 要素は $element 変数に代入してください。
182+
183+
184+
expect($element).to.be.instanceof(jQuery);
185+
186+
expect($element.get(0)).to.have.property(
187+
secret('gntAnzr'), secret('C'));
188+
189+
expect($element).to.have.css(secret('genafsbez')).not.equal('none');
190+
});
191+
192+
193+
it('6 番の要素を jQuery を使って上に 20px 移動させる', function(){
194+
var $element;
195+
196+
// ここにコードを記述してください。
197+
// 変更した HTML 要素は $element 変数に代入してください。
198+
199+
200+
expect($element).to.be.instanceof(jQuery);
201+
expect($element).to.have.data(secret('wfGenvavat'), secret('qnexbepuvq'));
202+
expect($element).to.have.css(secret('gbc'), secret('-20ck'));
203+
expect($element).to.have.css(secret('cbfvgvba'), secret('eryngvir'));
204+
});
205+
});
206+
});
207+
208+
209+
function secret(str) {
210+
// Copyright (c) 2012 K.Adam White
211+
// Released under the MIT license
212+
// https://github.com/kadamwhite/jquery.rot13/blob/master/LICENSE-MIT
213+
return Array.prototype.map.call(str, function(char) {
214+
if (!char.match(/[A-Za-z]/)) { return char; }
215+
216+
var charCode = char.charCodeAt(0);
217+
if(charCode < 97) {
218+
charCode = (charCode - 52) % 26 + 65;
219+
} else {
220+
charCode = (charCode - 84) % 26 + 97;
221+
}
222+
return String.fromCharCode(charCode);
223+
}).join('');
224+
}
225+
226+
function normalizeColor(value) {
227+
// ブラウザごとに color の値がまちまちに読まれるのを、正規化する
228+
var elem = document.createElement('div');
229+
elem.style.color = value;
230+
return elem.style.color;
231+
}

0 commit comments

Comments
 (0)