Skip to content

Commit f631c2f

Browse files
author
Kuniwak
committed
Implementing stage1
1 parent 2094a41 commit f631c2f

File tree

6 files changed

+338
-0
lines changed

6 files changed

+338
-0
lines changed

‎test/.eslintrc‎

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

‎test/common/mocha-patch.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@charset "utf-8";
2+
3+
#mocha {
4+
position: relative;
5+
}
6+
7+
#mocha-stats {
8+
position: absolute !important;
9+
top: -45px !important;
10+
}
11+
12+
#mocha .suite {
13+
margin-bottom: 0.8em;
14+
}
15+
16+
#mocha .suite h1 {
17+
margin-bottom: 0.5em;
18+
}
19+
20+
#mocha .suite .suite h1 {
21+
margin-bottom: 0.5em;
22+
}
23+
24+
#mocha .test {
25+
margin-bottom: 0.5em;
26+
}

‎test/stage1/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Mocha</title>
5+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="/modules/mocha/mocha.css" />
8+
<link rel="stylesheet" href="../common/mocha-patch.css" />
9+
<link rel="stylesheet" href="style.css" />
10+
</head>
11+
<body>
12+
<ul class="js-training">
13+
<li id="firebrick" title="firebrick">1</li>
14+
<li id="chocolate" title="chocolate">2</li>
15+
<li class="mediumseagreen" title="mediumseagreen">3</li>
16+
<li class="turquoise" title="turquoise">4</li>
17+
<li class="turquoise" title="turquoise">4</li>
18+
<li><blockquote title="steelblue">5</blockquote></li>
19+
<li name="blueviolet" title="blueviolet">6</li>
20+
</ul>
21+
<ul class="js-training">
22+
<li id="brown">7</li>
23+
<li id="darkorange">8</li>
24+
<li class="limegreen">9</li>
25+
<li class="mediumturquoise">10</li>
26+
<li class="mediumturquoise">10</li>
27+
<li><p>11</p></li>
28+
<li name="darkorchid">12</li>
29+
</ul>
30+
<div id="mocha"></div>
31+
<script src="/modules/mocha/mocha.js"></script>
32+
<script src="/modules/chai/chai.js"></script>
33+
<script>
34+
mocha.ui('bdd');
35+
mocha.reporter('html');
36+
expect = chai.expect;
37+
</script>
38+
<script>mocha.setup('bdd')</script>
39+
<script src="tests.js"></script>
40+
<script>
41+
mocha.run();
42+
</script>
43+
</body>
44+
</html>

‎test/stage1/secret.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
'use strict';
2+
3+
function secret(str) {
4+
return Array.prototype.map.call(str, function(char) {
5+
if(!char.match(/[A-Za-z]/)) return char;
6+
7+
var charCode = char.charCodeAt(0);
8+
if(charCode < 97) {
9+
charCode = (charCode - 52) % 26 + 65;
10+
} else {
11+
charCode = (charCode - 84) % 26 + 97;
12+
}
13+
return String.fromCharCode(charCode);
14+
}).join('');
15+
};

‎test/stage1/style.css‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
.js-training {
2+
display: flex;
3+
list-style: none;
4+
margin: 10px;
5+
padding: 0;
6+
}
7+
8+
.js-training li {
9+
flex: 1;
10+
margin: 0;
11+
padding: 0;
12+
height: 40px;
13+
line-height: 40px;
14+
text-align: center;
15+
color: white;
16+
font-weight: bold;
17+
font-size: 130%;
18+
text-shadow: 0 1px 0 hsla(0, 0%, 0%, 0.3);
19+
}
20+
21+
.js-training #firebrick {
22+
background-color: firebrick;
23+
}
24+
25+
.js-training #chocolate {
26+
background-color: chocolate;
27+
}
28+
29+
.js-training .mediumseagreen {
30+
background-color: mediumseagreen;
31+
}
32+
33+
.js-training .turquoise {
34+
flex: 0.5;
35+
background-color: turquoise;
36+
}
37+
38+
.js-training blockquote {
39+
background-color: steelblue;
40+
margin: 0;
41+
height: 40px;
42+
font-weight: bold;
43+
font-size: 130%;
44+
}
45+
46+
.js-training [name=blueviolet] {
47+
background-color: blueviolet;
48+
}
49+
50+
.js-training #brown {
51+
background-color: brown;
52+
}
53+
54+
.js-training #darkorange {
55+
background-color: darkorange;
56+
}
57+
58+
.js-training .limegreen {
59+
background-color: limegreen;
60+
}
61+
62+
.js-training .mediumturquoise {
63+
flex: 0.5;
64+
background-color: mediumturquoise;
65+
}
66+
67+
.js-training p {
68+
margin: 0;
69+
padding: 0;
70+
background-color: cornflowerblue;
71+
}
72+
73+
.js-training [name="darkorchid"] {
74+
background-color: darkorchid;
75+
}

‎test/stage1/tests.js‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
'use strict';
2+
3+
describe('ステージ1（意図した DOM 要素を取得できるようになる）', function(){
4+
describe('DOM インターフェース編', function() {
5+
it('1 番の赤色の要素（ID は "firebrick"）が1つ取得できる', function(){
6+
var elementId = 'firebrick';
7+
8+
// 'change me!' 部分を書き換えてください。
9+
var element = 'change me!';
10+
11+
// 参考資料
12+
// https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById
13+
14+
expect(element).to.have.property('id', elementId);
15+
});
16+
17+
18+
it('2 番の橙色の要素（ID は "chocolate"）が1つ取得できる', function(){
19+
var elementId = 'chocolate';
20+
21+
// 'change me!' 部分を書き換えてください。
22+
var element = 'change me!';
23+
24+
// 参考資料
25+
// https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById
26+
27+
expect(element).to.have.property('id', elementId);
28+
});
29+
30+
31+
it('3 番の緑色の要素（CSS クラス名は "mediumseagreen"）が1つ取得できる', function(){
32+
var elementClassName = 'mediumseagreen';
33+
34+
// 'change me!' 部分を書き換えてください。
35+
var elements = 'change me!';
36+
37+
// 参考資料
38+
// https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName
39+
40+
expect(elements).to.have.length(1);
41+
expect(elements[0]).to.have.property('className', elementClassName);
42+
});
43+
44+
45+
it('4 番の水色の要素（CSS クラス名は "turquoise"）が2つ取得できる', function(){
46+
var elementClassName = 'turquoise';
47+
48+
// 'change me!' 部分を書き換えてください。
49+
var elements = 'change me!';
50+
51+
// 参考資料
52+
// https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName
53+
54+
expect(elements).to.have.length(2);
55+
expect(elements[0]).to.have.property('className', elementClassName);
56+
expect(elements[1]).to.have.property('className', elementClassName);
57+
});
58+
59+
60+
it('5 番の青色の要素（タグ名は "blockquote"）が1つ取得できる', function(){
61+
var elementTagName = 'blockquote';
62+
63+
// 'change me!' 部分を書き換えてください。
64+
var elements = 'change me!';
65+
66+
// 参考資料
67+
// https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName
68+
69+
expect(elements).to.have.length(1);
70+
expect(elements[0]).to.have.property('tagName', elementTagName.toUpperCase());
71+
});
72+
73+
74+
it('6 番の紫色の要素（name 属性の値は "blueviolet"）が1つ取得できる', function(){
75+
var elementNameAttr = 'blueviolet';
76+
77+
// 'change me!' 部分を書き換えてください。
78+
var elements = 'change me!';
79+
80+
// 参考資料
81+
// https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByName
82+
83+
expect(elements).to.have.length(1);
84+
expect(elements[0].attributes.name.value).to.equal(elementNameAttr);
85+
});
86+
});
87+
88+
89+
describe('ツール編', function() {
90+
it('7 番の赤色の要素が1つ取得できる', function(){
91+
92+
// 調べたい要素の上で右クリック > 要素の検証
93+
//
94+
// 'change me!' 部分を書き換えてください。
95+
var element = 'change me!';
96+
97+
expect(element).to.have.property(secret('vq'), secret('oebja'));
98+
});
99+
100+
101+
it('8 番の橙色の要素が1つ取得できる', function(){
102+
103+
// 'change me!' 部分を書き換えてください。
104+
var element = 'change me!';
105+
106+
expect(element).to.have.property(secret('vq'), secret('qnexbenatr'));
107+
});
108+
109+
110+
it('9 番の緑色の要素が1つ取得できる', function(){
111+
112+
// 'change me!' 部分を書き換えてください。
113+
var elements = 'change me!';
114+
115+
expect(elements).to.have.length(1);
116+
expect(elements[0]).to.have.property(secret('pynffAnzr'), secret('yvzrterra'));
117+
});
118+
119+
120+
it('10 番の水色の要素が2つ取得できる', function(){
121+
122+
// 'change me!' 部分を書き換えてください。
123+
var elements = 'change me!';
124+
125+
expect(elements).to.have.length(2);
126+
expect(elements[0]).to.have.property(secret('pynffAnzr'), secret('zrqvhzghedhbvfr'));
127+
expect(elements[1]).to.have.property(secret('pynffAnzr'), secret('zrqvhzghedhbvfr'));
128+
});
129+
130+
131+
it('11 番の青色の要素が1つ取得できる', function(){
132+
133+
// 'change me!' 部分を書き換えてください。
134+
var elements = 'change me!';
135+
136+
expect(elements).to.have.length(1);
137+
expect(elements[0]).to.have.property(secret('gntAnzr'), secret('C'));
138+
});
139+
140+
141+
it('12 番の紫色の要素が1つ取得できる', function(){
142+
143+
// 'change me!' 部分を書き換えてください。
144+
var elements = 'change me!';
145+
146+
expect(elements).to.have.length(1);
147+
expect(elements[0]).to.have.deep.property(secret('nggevohgrf.anzr.inyhr'),
148+
secret('qnexbepuvq'));
149+
});
150+
});
151+
});
152+
153+
154+
function secret(str) {
155+
// Copyright (c) 2012 K.Adam White
156+
// Released under the MIT license
157+
// https://github.com/kadamwhite/jquery.rot13/blob/master/LICENSE-MIT
158+
return Array.prototype.map.call(str, function(char) {
159+
if (!char.match(/[A-Za-z]/)) { return char; }
160+
161+
var charCode = char.charCodeAt(0);
162+
if(charCode < 97) {
163+
charCode = (charCode - 52) % 26 + 65;
164+
} else {
165+
charCode = (charCode - 84) % 26 + 97;
166+
}
167+
return String.fromCharCode(charCode);
168+
}).join('');
169+
}

0 commit comments

Comments
 (0)