Skip to content

Commit 791d43e

Browse files
author
Kuniwak
committed
Implement jQuery training
1 parent f631c2f commit 791d43e

File tree

3 files changed

+216
-38
lines changed

3 files changed

+216
-38
lines changed

‎test/stage1/index.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<li class="turquoise" title="turquoise">4</li>
1717
<li class="turquoise" title="turquoise">4</li>
1818
<li><blockquote title="steelblue">5</blockquote></li>
19-
<li name="blueviolet" title="blueviolet">6</li>
19+
<li data-js-training="blueviolet" title="blueviolet">6</li>
2020
</ul>
2121
<ul class="js-training">
2222
<li id="brown">7</li>
@@ -25,11 +25,13 @@
2525
<li class="mediumturquoise">10</li>
2626
<li class="mediumturquoise">10</li>
2727
<li><p>11</p></li>
28-
<li name="darkorchid">12</li>
28+
<li data-js-training="darkorchid">12</li>
2929
</ul>
3030
<div id="mocha"></div>
31+
<script src="/modules/jquery/dist/jquery.js"></script>
3132
<script src="/modules/mocha/mocha.js"></script>
3233
<script src="/modules/chai/chai.js"></script>
34+
<script src="/modules/chai-jquery/chai-jquery.js"></script>
3335
<script>
3436
mocha.ui('bdd');
3537
mocha.reporter('html');

‎test/stage1/style.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
font-size: 130%;
4444
}
4545

46-
.js-training [name=blueviolet] {
46+
.js-training [data-js-training="blueviolet"] {
4747
background-color: blueviolet;
4848
}
4949

@@ -70,6 +70,6 @@
7070
background-color: cornflowerblue;
7171
}
7272

73-
.js-training [name="darkorchid"] {
73+
.js-training [data-js-training="darkorchid"] {
7474
background-color: darkorchid;
7575
}

‎test/stage1/tests.js‎

Lines changed: 210 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,60 @@
1+
/* global $, jQuery, HTMLCollection */
12
'use strict';
23

34
describe('ステージ1（意図した DOM 要素を取得できるようになる）', function(){
45
describe('DOM インターフェース編', function() {
56
it('1 番の赤色の要素（ID は "firebrick"）が1つ取得できる', function(){
67
var elementId = 'firebrick';
78

8-
// 'change me!' 部分を書き換えてください。
9+
// チュートリアル
10+
//
11+
// 'change me!' を document.getElementById(elementId) に
12+
// 書き換えてください。
913
var element = 'change me!';
1014

11-
// 参考資料
12-
// https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById
13-
15+
expect(element).to.be.instanceof(HTMLElement);
1416
expect(element).to.have.property('id', elementId);
1517
});
1618

1719

1820
it('2 番の橙色の要素（ID は "chocolate"）が1つ取得できる', function(){
1921
var elementId = 'chocolate';
2022

21-
// 'change me!' 部分を書き換えてください。
23+
// 'change me!' を書き換えてください。
2224
var element = 'change me!';
2325

2426
// 参考資料
2527
// https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById
2628

29+
expect(element).to.be.instanceof(HTMLElement);
2730
expect(element).to.have.property('id', elementId);
2831
});
2932

3033

3134
it('3 番の緑色の要素（CSS クラス名は "mediumseagreen"）が1つ取得できる', function(){
3235
var elementClassName = 'mediumseagreen';
3336

34-
// 'change me!' 部分を書き換えてください。
37+
// 'change me!' を書き換えてください。
3538
var elements = 'change me!';
3639

3740
// 参考資料
3841
// https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName
3942

40-
expect(elements).to.have.length(1);
41-
expect(elements[0]).to.have.property('className', elementClassName);
43+
expect(elements).to.be.instanceof(HTMLCollection);
44+
expect(elements).to.have.property('class', elementClassName);
4245
});
4346

4447

4548
it('4 番の水色の要素（CSS クラス名は "turquoise"）が2つ取得できる', function(){
4649
var elementClassName = 'turquoise';
4750

48-
// 'change me!' 部分を書き換えてください。
51+
// 'change me!' を書き換えてください。
4952
var elements = 'change me!';
5053

5154
// 参考資料
5255
// https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName
5356

54-
expect(elements).to.have.length(2);
57+
expect(elements).to.be.instanceof(HTMLCollection);
5558
expect(elements[0]).to.have.property('className', elementClassName);
5659
expect(elements[1]).to.have.property('className', elementClassName);
5760
});
@@ -60,38 +63,32 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
6063
it('5 番の青色の要素（タグ名は "blockquote"）が1つ取得できる', function(){
6164
var elementTagName = 'blockquote';
6265

63-
// 'change me!' 部分を書き換えてください。
66+
// 'change me!' を書き換えてください。
6467
var elements = 'change me!';
6568

6669
// 参考資料
6770
// https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName
6871

69-
expect(elements).to.have.length(1);
72+
expect(elements).to.be.instanceof(HTMLCollection);
7073
expect(elements[0]).to.have.property('tagName', elementTagName.toUpperCase());
7174
});
7275

7376

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);
77+
it.skip('6 番の紫色の要素（data-js-training 属性の値は "blueviolet"）が1つ取得できる', function(){
78+
// document.querySelector を学ばないと取得することができません！
79+
// 次に進んでください。
8580
});
8681
});
8782

8883

89-
describe('ツール編', function() {
84+
describe('開発ツール編', function() {
9085
it('7 番の赤色の要素が1つ取得できる', function(){
9186

87+
// チュートリアル
88+
//
9289
// 調べたい要素の上で右クリック > 要素の検証
9390
//
94-
// 'change me!' 部分を書き換えてください。
91+
// 'change me!' を書き換えてください。
9592
var element = 'change me!';
9693

9794
expect(element).to.have.property(secret('vq'), secret('oebja'));
@@ -100,7 +97,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
10097

10198
it('8 番の橙色の要素が1つ取得できる', function(){
10299

103-
// 'change me!' 部分を書き換えてください。
100+
// 'change me!' を書き換えてください。
104101
var element = 'change me!';
105102

106103
expect(element).to.have.property(secret('vq'), secret('qnexbenatr'));
@@ -109,7 +106,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
109106

110107
it('9 番の緑色の要素が1つ取得できる', function(){
111108

112-
// 'change me!' 部分を書き換えてください。
109+
// 'change me!' を書き換えてください。
113110
var elements = 'change me!';
114111

115112
expect(elements).to.have.length(1);
@@ -119,7 +116,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
119116

120117
it('10 番の水色の要素が2つ取得できる', function(){
121118

122-
// 'change me!' 部分を書き換えてください。
119+
// 'change me!' を書き換えてください。
123120
var elements = 'change me!';
124121

125122
expect(elements).to.have.length(2);
@@ -130,22 +127,201 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
130127

131128
it('11 番の青色の要素が1つ取得できる', function(){
132129

133-
// 'change me!' 部分を書き換えてください。
130+
// 'change me!' を書き換えてください。
134131
var elements = 'change me!';
135132

136133
expect(elements).to.have.length(1);
137134
expect(elements[0]).to.have.property(secret('gntAnzr'), secret('C'));
138135
});
139136

140137

141-
it('12 番の紫色の要素が1つ取得できる', function(){
138+
it.skip('12 番の紫色の要素が1つ取得できる', function(){
139+
// document.querySelector を学ばないと取得することができません！
140+
// 次に進んでください。
141+
});
142+
});
143+
144+
145+
describe('基本 CSS セレクタ編', function() {
146+
it('1 番の赤色の要素を querySelector を使って1つ取得できる', function(){
147+
148+
// チュートリアル
149+
//
150+
// 'change me!' を document.querySelector('#firebrick'); に
151+
// 書き換えてください。
152+
var element = 'change me!';
153+
154+
// 参考資料
155+
// https://developer.mozilla.org/ja/docs/DOM/Locating_DOM_elements_using_selectors
156+
157+
expect(element).to.have.property(secret('vq'), secret('sveroevpx'));
158+
});
159+
160+
161+
it('2 番の橙色の要素を querySelector を使って1つ取得できる', function(){
142162

143-
// 'change me!' 部分を書き換えてください。
163+
// 'change me!' を書き換えてください。
164+
var element = 'change me!';
165+
166+
// 参考資料
167+
// https://developer.mozilla.org/ja/docs/Web/CSS/Reference#Selectors
168+
169+
expect(element).to.have.property(secret('vq'), secret('pubpbyngr'));
170+
});
171+
172+
173+
it('3 番の緑色の要素を querySelector を使って1つ取得できる', function(){
174+
175+
// 'change me!' を書き換えてください。
176+
var element = 'change me!';
177+
178+
expect(element).to.have.property(secret('pynffAnzr'), secret('zrqvhzfrnterra'));
179+
});
180+
181+
182+
it('4 番の水色の要素を querySelectorAll を使って2つ取得できる', function(){
183+
184+
// 'change me!' を書き換えてください。
144185
var elements = 'change me!';
145186

146-
expect(elements).to.have.length(1);
147-
expect(elements[0]).to.have.deep.property(secret('nggevohgrf.anzr.inyhr'),
148-
secret('qnexbepuvq'));
187+
expect(elements).to.have.length(2);
188+
expect(elements[0]).to.have.property(secret('pynffAnzr'), secret('ghedhbvfr'));
189+
expect(elements[1]).to.have.property(secret('pynffAnzr'), secret('ghedhbvfr'));
190+
});
191+
192+
193+
it('5 番の青色の要素を querySelector を使って1つ取得できる', function(){
194+
195+
// 'change me!' を書き換えてください。
196+
var element = 'change me!';
197+
198+
expect(element).to.have.property(secret('gntAnzr'), secret('OYBPXDHBGR'));
199+
});
200+
201+
202+
it('6 番の紫色の要素を querySelector を使って1つ取得できる', function(){
203+
204+
// 'change me!' を書き換えてください。
205+
var element = 'change me!';
206+
207+
expect(element).to.have.deep.property(secret('qngnfrg.wfGenvavat'),
208+
secret('oyhrivbyrg'));
209+
});
210+
});
211+
212+
213+
describe('応用 CSS セレクタ編', function() {
214+
it('7 番の赤色の要素を ID セレクタを使わずに1つ取得できる', function(){
215+
216+
// チュートリアル
217+
//
218+
// 'change me!' を document.querySelector('.js-training:nth-child(2) li')
219+
// に書き換えてください。
220+
var selector = 'change me!';
221+
222+
var element = document.querySelector(selector);
223+
expect(selector).to.not.have.string('#');
224+
expect(element).to.have.property(secret('vq'), secret('oebja'));
225+
});
226+
227+
228+
it('8 番の橙色の要素を ID セレクタを使わずに1つ取得できる', function(){
229+
230+
// 'change me!' を書き換えてください。
231+
var selector = 'change me!';
232+
233+
// 参考資料
234+
// https://developer.mozilla.org/ja/docs/Web/CSS/Reference#Selectors
235+
236+
var element = document.querySelector(selector);
237+
expect(selector).to.not.have.string('#');
238+
expect(element).to.have.property(secret('vq'), secret('qnexbenatr'));
239+
});
240+
241+
242+
it('12 番の紫色の要素を、属性セレクタと :nth-child(N) セレクタを使わずに1つ取得できる', function(){
243+
244+
// 'change me!' を書き換えてください。
245+
var selector = 'change me!';
246+
247+
var element = document.querySelector(selector);
248+
expect(selector).to.not.match(/\[\s*name\s*[~\|\^\$\*]?=/);
249+
expect(selector).to.not.have.string(':nth-child');
250+
expect(element).to.have.deep.property(secret('qngnfrg.wfGenvavat'),
251+
secret('qnexbepuvq'));
252+
});
253+
});
254+
255+
256+
describe('jQuery 編', function() {
257+
it('7 番の赤色の要素を jQuery を使って1つ取得できる', function(){
258+
259+
// チュートリアル
260+
//
261+
// 基本的な使い方は document.querySelectorAll と同じです。
262+
//
263+
// 'change me!' を $('#brown') に書き換えてください。
264+
var $element = 'change me!';
265+
266+
expect($element).to.be.instanceof(jQuery);
267+
expect($element).to.have.id(secret('oebja'));
268+
});
269+
270+
271+
it('8 番の橙色の要素を jQuery を使って1つ取得できる', function(){
272+
273+
// 'change me!' を書き換えてください。
274+
var $element = 'change me!';
275+
276+
// 参考情報（英語）
277+
// http://api.jquery.com/jQuery/#jQuery1
278+
279+
expect($element).to.be.instanceof(jQuery);
280+
expect($element).to.have.id(secret('qnexbenatr'));
281+
});
282+
283+
284+
it('9 番の緑色の要素を jQuery を使って1つ取得できる', function(){
285+
286+
// 'change me!' を書き換えてください。
287+
var $element = 'change me!';
288+
289+
expect($element).to.be.instanceof(jQuery);
290+
expect($element).to.have.class(secret('yvzrterra'));
291+
});
292+
293+
294+
it('10 番の水色の要素を jQuery を使って2つ取得できる', function(){
295+
296+
// 'change me!' を書き換えてください。
297+
var $element = 'change me!';
298+
299+
expect($element).to.be.instanceof(jQuery);
300+
expect($element).to.have.length(2);
301+
expect($element).to.have.class(secret('zrqvhzghedhbvfr'));
302+
});
303+
304+
305+
it('11 番の青色の要素を jQuery を使って1つ取得できる', function(){
306+
307+
// 'change me!' を書き換えてください。
308+
var $element = 'change me!';
309+
310+
expect($element).to.be.instanceof(jQuery);
311+
expect($element).to.have.length(1);
312+
expect($element.get(0)).to.have.property(secret('gntAnzr'), secret('C'));
313+
});
314+
315+
316+
it('12 番の紫色の要素を jQuery を使って1つ取得できる', function(){
317+
318+
// 'change me!' を書き換えてください。
319+
var $element = 'change me!';
320+
321+
expect($element).to.be.instanceof(jQuery);
322+
expect($element).to.have.length(1);
323+
expect($element).to.have.data(secret('wfGenvavat'),
324+
secret('qnexbepuvq'));
149325
});
150326
});
151327
});

0 commit comments

Comments
 (0)