Skip to content

Commit b8d362a

Browse files
author
Kuniwak
committed
Implement stage4
This tests will fail on PhantomJS
1 parent feec631 commit b8d362a

File tree

4 files changed

+284
-0
lines changed

4 files changed

+284
-0
lines changed

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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">1</li>
17+
<li id="chocolate">2</li>
18+
<li class="mediumseagreen">3</li>
19+
<li class="turquoise"><input type="number" value="0"></li>
20+
</ul>
21+
</div>
22+
<div id="mocha"></div>
23+
<script src="/modules/jquery/dist/jquery.js"></script>
24+
<script src="/modules/mocha/mocha.js"></script>
25+
<script src="/modules/chai/chai.js"></script>
26+
<script src="/modules/chai-jquery/chai-jquery.js"></script>
27+
<script>
28+
mocha.ui('bdd');
29+
mocha.reporter('html');
30+
expect = chai.expect;
31+
</script>
32+
<script>mocha.setup('bdd')</script>
33+
<script src="tests.js"></script>
34+
<script>
35+
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
36+
else { mocha.run(); }
37+
</script>
38+
</body>
39+
</html>

‎test/stage4/style.css‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
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+
font-weight: normal;
43+
}
44+
45+
.js-training .turquoise {
46+
background-color: turquoise;
47+
font-weight: normal;
48+
}
49+
50+
.js-training blockquote {
51+
background-color: steelblue;
52+
margin: 0;
53+
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+
}
76+
77+
.js-training .mediumturquoise {
78+
background-color: mediumturquoise;
79+
font-weight: normal;
80+
}
81+
82+
.js-training p {
83+
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;
97+
height: 40px;
98+
line-height: 40px;
99+
text-indent: 60%;
100+
}

‎test/stage4/tests.js‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
'use strict';
2+
3+
describe('ステージ4（意図した通りに DOM 要素の構造を変更できるようになる）', function() {
4+
describe('DOMインターフェース編', function() {
5+
it('1 番の要素の click イベントで要素内の数字を 1 ずつ大きくできる', function() {
6+
// チュートリアル
7+
//
8+
// 2 通りの代表的な書き方があります。
9+
//
10+
// jQuery じゃない版:
11+
//
12+
// var element = document.getElementById('firebrick');
13+
// element.addEventListener('click', function() {
14+
// element.textContent = Number(element.textContent) + 1;
15+
// });
16+
//
17+
// jQuery 版:
18+
//
19+
$('#firebrick').on('click', function(event) {
20+
var $target = $(event.target);
21+
$target.text(Number($target.text()) + 1);
22+
});
23+
//
24+
// ここに上記のどちらかのコードを記述してください。
25+
26+
27+
var firebrick = document.getElementById('firebrick');
28+
firebrick.dispatchEvent(createClickEvent());
29+
expect(firebrick).to.have.property('textContent', '2');
30+
31+
firebrick.dispatchEvent(createClickEvent());
32+
expect(firebrick).to.have.property('textContent', '3');
33+
});
34+
35+
36+
it('2 番の要素の click イベントで要素内の数字を 1 ずつ大きくできる', function() {
37+
38+
// ここにコードを記述してください。
39+
40+
$('#chocolate').on('click', function(event) {
41+
var $target = $(event.target);
42+
$target.text(Number($target.text()) - 1);
43+
});
44+
45+
var chocolate = document.getElementById('chocolate');
46+
chocolate.dispatchEvent(createClickEvent());
47+
expect(chocolate).to.have.property('textContent', '1');
48+
49+
chocolate.dispatchEvent(createClickEvent());
50+
expect(chocolate).to.have.property('textContent', '0');
51+
});
52+
53+
54+
it('3 番の要素の click イベントで要素を 10 度ずつ回転できる', function() {
55+
56+
// ここにコードを記述してください。
57+
58+
var deg = 0;
59+
$('.mediumseagreen').on('click', function(event) {
60+
deg += 10;
61+
$(event.target).css('transform', 'rotate(' + deg + 'deg)');
62+
});
63+
64+
var mediumseagreen = document.querySelector('.mediumseagreen');
65+
mediumseagreen.dispatchEvent(createClickEvent());
66+
expect(mediumseagreen).to.have.deep.property(
67+
secret('fglyr.genafsbez'), secret('ebgngr(10qrt)'));
68+
69+
mediumseagreen.dispatchEvent(createClickEvent());
70+
expect(mediumseagreen).to.have.deep.property(
71+
secret('fglyr.genafsbez'), secret('ebgngr(20qrt)'));
72+
});
73+
74+
75+
it('4 番の要素のに入力された角度に回転できる', function() {
76+
77+
// ここにコードを記述してください。
78+
79+
$('input').on('change', function() {
80+
var deg = $('input').val();
81+
$('.turquoise').css('transform', 'rotate(' + deg + 'deg)');
82+
});
83+
84+
var turquoise = document.querySelector('.turquoise');
85+
var turquoiseInput = turquoise.querySelector('input');
86+
87+
simulateChangeEvent(turquoiseInput, 10);
88+
expect(turquoise).to.have.deep.property(
89+
secret('fglyr.genafsbez'), secret('ebgngr(10qrt)'));
90+
91+
simulateChangeEvent(turquoiseInput, 20);
92+
expect(turquoise).to.have.deep.property(
93+
secret('fglyr.genafsbez'), secret('ebgngr(20qrt)'));
94+
});
95+
});
96+
});
97+
98+
99+
function createClickEvent() {
100+
var event = document.createEvent('MouseEvents');
101+
event.initMouseEvent('click', true, true, window,
102+
0, 0, 0, 80, 20, false, false, false, false, 0, null);
103+
return event;
104+
}
105+
106+
function simulateChangeEvent(inputElement, newValue) {
107+
inputElement.value = newValue;
108+
inputElement.dispatchEvent(createChangeEvent());
109+
}
110+
111+
function createChangeEvent() {
112+
var event = document.createEvent('HTMLEvents');
113+
event.initEvent('change', true, true);
114+
115+
return event;
116+
}
117+
118+
119+
function secret(str) {
120+
// Copyright (c) 2012 K.Adam White
121+
// Released under the MIT license
122+
// https://github.com/kadamwhite/jquery.rot13/blob/master/LICENSE-MIT
123+
return Array.prototype.map.call(str, function(char) {
124+
if (!char.match(/[A-Za-z]/)) { return char; }
125+
126+
var charCode = char.charCodeAt(0);
127+
if(charCode < 97) {
128+
charCode = (charCode - 52) % 26 + 65;
129+
} else {
130+
charCode = (charCode - 84) % 26 + 97;
131+
}
132+
return String.fromCharCode(charCode);
133+
}).join('');
134+
}

0 commit comments

Comments
 (0)