From af4aa3c4443a4908fc4e6038a8dd84aa2cd739f4 Mon Sep 17 00:00:00 2001 From: masazdream Date: Mon, 20 Jul 2015 07:54:16 +0900 Subject: [PATCH 1/2] stage1 --- public/stage1/tests.js | 57 ++++++++++++++++++++++-------------------- 1 file changed, 30 insertions(+), 27 deletions(-) diff --git a/public/stage1/tests.js b/public/stage1/tests.js index 46f1ed45..0b70ef36 100644 --- a/public/stage1/tests.js +++ b/public/stage1/tests.js @@ -12,7 +12,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな // 'change me!' を document.getElementById(elementId) に // 書き換え、ブラウザをリロードしてみてください。 var elementId = 'firebrick'; - var element = 'change me!'; + var element = document.getElementById(elementId); expect(element).to.be.instanceof(HTMLElement); expect(element).to.have.property('id', elementId); @@ -27,7 +27,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな // 'change me!' を書き換えてください。 var elementId = 'chocolate'; - var element = 'change me!'; + var element = document.getElementById(elementId); expect(element).to.be.instanceof(HTMLElement); expect(element).to.have.property('id', elementId); @@ -41,7 +41,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな // 'change me!' を書き換えてください。 var elementClassName = 'mediumseagreen'; - var elements = 'change me!'; + var elements = document.getElementsByClassName(elementClassName); expect(elements).to.have.length(1); expect(elements[0]).to.have.property('className', elementClassName); @@ -55,7 +55,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな // 'change me!' を書き換えてください。 var elementClassName = 'turquoise'; - var elements = 'change me!'; + var elements = document.getElementsByClassName(elementClassName); expect(elements).to.have.length(2); expect(elements[0]).to.have.property('className', elementClassName); @@ -70,7 +70,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな // 'change me!' を書き換えてください。 var elementTagName = 'blockquote'; - var elements = 'change me!'; + var elements = document.getElementsByTagName(elementTagName); expect(elements).to.have.length(1); expect(elements[0]).to.have.property('tagName', elementTagName.toUpperCase()); @@ -93,7 +93,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな // すると、開発ツール上で
  • ... が選択されます。 // このことから、7 番の赤色の要素の ID は brown だということがわかります。 // では、'change me!' を document.getElementById('brown') に書き換えてみましょう。 - var element = 'change me!'; + var element = document.getElementById('brown'); expect(element).to.have.property(secret('vq'), secret('oebja')); }); @@ -102,7 +102,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('8 番の橙色の要素が1つ取得できる', function() { // 'change me!' を書き換えてください。 - var element = 'change me!'; + var element = document.getElementById('darkorange'); expect(element).to.have.property(secret('vq'), secret('qnexbenatr')); }); @@ -111,7 +111,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('9 番の緑色の要素が1つ取得できる', function() { // 'change me!' を書き換えてください。 - var elements = 'change me!'; + var elements = document.getElementsByClassName('limegreen'); expect(elements).to.have.length(1); expect(elements[0]).to.have.property(secret('pynffAnzr'), secret('yvzrterra')); @@ -121,7 +121,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('10 番の水色の要素が2つ取得できる', function() { // 'change me!' を書き換えてください。 - var elements = 'change me!'; + var elements = document.getElementsByClassName('mediumturquoise'); expect(elements).to.have.length(2); expect(elements[0]).to.have.property(secret('pynffAnzr'), secret('zrqvhzghedhbvfr')); @@ -135,7 +135,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな // // なお、11 番の青色の要素は li 要素ではありません！ // よくみると、色がついているのはさらに内側の要素のようです。 - var elements = 'change me!'; + var elements = document.getElementsByTagName('p'); expect(elements).to.have.length(1); expect(elements[0]).to.have.property(secret('gntAnzr'), secret('C')); @@ -152,7 +152,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな // // 'change me!' を document.querySelector('#firebrick') に // 書き換えてください。 - var element = 'change me!'; + var element = document.querySelector('#firebrick'); expect(element).to.have.property(secret('vq'), secret('sveroevpx')); @@ -164,7 +164,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('2 番の橙色の要素を querySelector を使って1つ取得できる', function() { // 'change me!' を書き換えてください。 - var element = 'change me!'; + var element = document.querySelector('#chocolate'); expect(element).to.have.property(secret('vq'), secret('pubpbyngr')); @@ -176,7 +176,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('3 番の緑色の要素を querySelector を使って1つ取得できる', function() { // 'change me!' を書き換えてください。 - var element = 'change me!'; + var element = document.querySelector('.mediumseagreen'); expect(element).to.have.property(secret('pynffAnzr'), secret('zrqvhzfrnterra')); }); @@ -185,7 +185,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('4 番の水色の要素を querySelectorAll を使って2つ取得できる', function() { // 'change me!' を書き換えてください。 - var elements = 'change me!'; + var elements = document.querySelectorAll('.turquoise'); expect(elements).to.have.length(2); expect(elements[0]).to.have.property(secret('pynffAnzr'), secret('ghedhbvfr')); @@ -196,7 +196,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('5 番の青色の要素を querySelector を使って1つ取得できる', function() { // 'change me!' を書き換えてください。 - var element = 'change me!'; + var element = document.querySelector('blockquote[title="steelblue"]'); expect(element).to.have.property(secret('gntAnzr'), secret('OYBPXDHBGR')); }); @@ -205,7 +205,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('6 番の紫色の要素を querySelector を使って1つ取得できる', function() { // 'change me!' を書き換えてください。 - var element = 'change me!'; + var element = document.querySelector('li[title="blueviolet"][data-js-training="blueviolet"]'); expect(element).to.have.deep.property(secret('qngnfrg.wfGenvavat'), secret('oyhrivbyrg')); @@ -220,7 +220,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな // // 'change me!' を '.js-training:nth-child(2) li' // に書き換えてください。 - var selector = 'change me!'; + var selector = '.js-training:nth-child(2) li'; var element = document.querySelector(selector); expect(selector).to.not.have.string('#'); @@ -231,7 +231,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('8 番の橙色の要素を ID セレクタを使わずに1つ取得できる', function() { // 'change me!' を書き換えてください。 - var selector = 'change me!'; + var selector = ".js-training:nth-child(2) li:nth-child(2)"; var element = document.querySelector(selector); expect(selector).to.not.have.string('#'); @@ -245,7 +245,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('12 番の紫色の要素を、属性セレクタと :nth-child(N) セレクタを使わずに1つ取得できる', function() { // 'change me!' を書き換えてください。 - var selector = 'change me!'; + var selector = "li[data-js-training='darkorchid']"; var element = document.querySelector(selector); expect(selector).to.not.match(/\[\s*name\s*[~\|\^\$\*]?=/); @@ -265,7 +265,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな // 基本的な使い方は document.querySelectorAll と同じです。 // // 'change me!' を $('#brown') に書き換えてください。 - var $element = 'change me!'; + var $element = $('#brown'); expect($element).to.be.instanceof(jQuery); expect($element).to.have.id(secret('oebja')); @@ -275,7 +275,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('8 番の橙色の要素を jQuery を使って1つ取得できる', function() { // 'change me!' を書き換えてください。 - var $element = 'change me!'; + var $element = $('#darkorange'); expect($element).to.be.instanceof(jQuery); expect($element).to.have.id(secret('qnexbenatr')); @@ -288,7 +288,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('9 番の緑色の要素を jQuery を使って1つ取得できる', function() { // 'change me!' を書き換えてください。 - var $element = 'change me!'; + var $element = $(".limegreen"); expect($element).to.be.instanceof(jQuery); expect($element).to.have.class(secret('yvzrterra')); @@ -298,7 +298,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('10 番の水色の要素を jQuery を使って2つ取得できる', function() { // 'change me!' を書き換えてください。 - var $element = 'change me!'; + var $element = $(".mediumturquoise"); expect($element).to.be.instanceof(jQuery); expect($element).to.have.length(2); @@ -309,7 +309,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('11 番の青色の要素を jQuery を使って1つ取得できる', function() { // 'change me!' を書き換えてください。 - var $element = 'change me!'; + var $element = $("li>p"); expect($element).to.be.instanceof(jQuery); expect($element).to.have.length(1); @@ -320,7 +320,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('12 番の紫色の要素を jQuery を使って1つ取得できる', function() { // 'change me!' を書き換えてください。 - var $element = 'change me!'; + var $element = $("[data-js-training=darkorchid]"); expect($element).to.be.instanceof(jQuery); expect($element).to.have.length(1); @@ -334,9 +334,12 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな it('動いている寿司要素を取得する', function() { // 'change me!' を書き換えてください。 - var element = 'change me!'; + var $element = document.querySelector("x-flying-sushi-monster"); - expect(element).to.have.deep.property( + //$element = $("x-flying-sushi-monster"); + + //expect($element).to.be.instanceof(jQuery); + expect($element).to.have.deep.property( secret('grkgPbagrag'), '\uD83C\uDF63'); }); }); From b5aecbead57c73bf67e74c8d72fd860fae500aec Mon Sep 17 00:00:00 2001 From: masazdream Date: Mon, 20 Jul 2015 16:57:44 +0900 Subject: [PATCH 2/2] stage2, stage3, stage4 --- public/stage2/tests.js | 47 +++++++++++++++++++++++------------------- public/stage3/tests.js | 32 ++++++++++++++++++---------- public/stage4/tests.js | 31 +++++++++++++++++++++++----- 3 files changed, 73 insertions(+), 37 deletions(-) diff --git a/public/stage2/tests.js b/public/stage2/tests.js index b430dfdc..0a2adccd 100644 --- a/public/stage2/tests.js +++ b/public/stage2/tests.js @@ -11,8 +11,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // // var element = document.getElementById('firebrick'); // element.textContent = element.textContent + element.textContent; - var element = 'change me!'; - + var element = document.getElementById('firebrick'); + element.textContent = element.textContent + element.textContent; expect(element).to.have.property(secret('vq'), secret('sveroevpx')); expect(element).to.have.deep.property( @@ -24,7 +24,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // ここにコードを記述してください。 // 変更した DOM 要素は element 変数に代入してください。 - var element = 'change me!'; + var element = document.getElementById('chocolate'); + element.textContent = element.textContent + element.textContent; expect(element).to.have.property(secret('vq'), secret('pubpbyngr')); @@ -40,8 +41,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // ここにコードを記述してください。 // 変更した DOM 要素は element 変数に代入してください。 - var element = 'change me!'; - + var element = document.getElementsByClassName('mediumseagreen')[0]; + element.style.backgroundColor = 'limegreen'; expect(element).to.have.property( secret('pynffAnzr'), secret('zrqvhzfrnterra')); @@ -58,7 +59,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // ここにコードを記述してください。 // 変更した DOM 要素は element 変数に代入してください。 - var element = 'change me!'; + var element = document.getElementsByClassName('turquoise')[0]; + element.style.opacity = 0.5; expect(element).to.have.property( @@ -76,8 +78,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // ここにコードを記述してください。 // 変更した DOM 要素は element 変数に代入してください。 - var element = 'change me!'; - + var element = document.getElementsByTagName('blockquote')[0]; + element.style.transform = 'rotate(10deg)'; expect(element).to.have.property( secret('gntAnzr'), secret('OYBPXDHBGR')); @@ -97,8 +99,9 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // // なお、上に 20px 移動させる方法は複数ありますが、今回は top 属性を // 使う方法を使ってください。 - var element = 'change me!'; - + var element = document.querySelector('li[data-js-training="blueviolet"]'); + element.style.position = 'relative'; + element.style.top = '-20px'; expect(element).to.have.deep.property( secret('qngnfrg.wfGenvavat'), secret('oyhrivbyrg')); @@ -127,8 +130,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // // var $element = $('#brown'); // $element.text($element.text() + $element.text()); - var $element = 'change me!'; - + var $element = $('#brown'); + $element.text($element.text() + $element.text()); expect($element).to.be.instanceof(jQuery); expect($element).to.have.id(secret('oebja')); @@ -140,8 +143,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // ここにコードを記述してください。 // 変更した DOM 要素は $element 変数に代入してください。 - var $element = 'change me!'; - + var $element = $('#darkorange'); + $element.text($element.text() + $element.text()); expect($element).to.be.instanceof(jQuery); expect($element).to.have.id(secret('qnexbenatr')); @@ -156,8 +159,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // ここにコードを記述してください。 // 変更した DOM 要素は $element 変数に代入してください。 - var $element = 'change me!'; - + var $element = $('.limegreen'); + $element.css('background-color', 'mediumseagreen'); expect($element).to.be.instanceof(jQuery); expect($element).to.have.class(secret('yvzrterra')); @@ -173,8 +176,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // ここにコードを記述してください。 // 変更した DOM 要素は $element 変数に代入してください。 - var $element = 'change me!'; - + var $element = $('.mediumturquoise'); + $element.css('opacity', '0.5'); expect($element).to.be.instanceof(jQuery); expect($element).to.have.class(secret('zrqvhzghedhbvfr')); @@ -186,7 +189,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // ここにコードを記述してください。 // 変更した DOM 要素は $element 変数に代入してください。 - var $element = 'change me!'; + var $element = $("li>p"); + $element.css('transform', 'rotate(10deg)'); expect($element).to.be.instanceof(jQuery); @@ -205,8 +209,9 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス // // なお、上に 20px 移動させる方法は複数ありますが、今回は top 属性を // 使う方法を使ってください。 - var $element = 'change me!'; - + var $element = $('[data-js-training=darkorchid]'); + $element.css('position', 'relative'); + $element.css('top', '-20px'); expect($element).to.be.instanceof(jQuery); expect($element).to.have.data(secret('wfGenvavat'), secret('qnexbepuvq')); diff --git a/public/stage3/tests.js b/public/stage3/tests.js index fa3cb6f2..5ba463aa 100644 --- a/public/stage3/tests.js +++ b/public/stage3/tests.js @@ -11,7 +11,9 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で // var element = document.querySelector('#firebrick'); // var ghost = document.querySelector('.firebrick-ghost'); // element.removeChild(ghost); - + var element = document.querySelector('#firebrick'); + var ghost = document.querySelector('.firebrick-ghost'); + element.removeChild(ghost); var firebrick = document.getElementById('firebrick'); expect(firebrick.childNodes.length).to.equal(1); @@ -22,7 +24,9 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で it('2 番の要素からインベーダー要素を除去する', function() { // ここにコードを記述してください。 - + var element = document.getElementById('chocolate'); + var invador = document.getElementsByClassName('chocolate-space-invader')[0]; + element.removeChild(invador); var darkorange = document.getElementById('chocolate'); expect(darkorange.childNodes.length).to.equal(1); @@ -33,8 +37,11 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で it('3 番の要素の左右の幽霊要素をすべて除去する', function() { // ここにコードを記述してください。 - - + var element = document.querySelector('.mediumseagreen'); + while(document.querySelector('.mediumseagreen-ghosts')){ + var ghosts = document.querySelector('.mediumseagreen-ghosts'); + element.removeChild(ghosts); + } var darkorange = document.querySelector('.mediumseagreen'); expect(darkorange).to.have.property('textContent', '3\uD83C\uDF3F'); }); @@ -45,7 +52,8 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で elementToAdd.textContent = '\uD83D\uDC2C'; // 上の elementToAdd を追加するコードをここに記述してください。 - + var element = document.querySelector('.turquoise'); + element.appendChild(elementToAdd); var turquoise = document.querySelector('.turquoise'); expect(turquoise.childNodes.length).to.equal(2); @@ -60,7 +68,8 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で // 上の elementToAdd を、5 番の青色の要素の最初に追加するコードを // ここに記述してください。 - + var element = document.querySelector('li>blockquote'); + element.insertBefore(elementToAdd, element.firstChild); var blockquote = document.querySelector('blockquote'); expect(blockquote.childNodes.length).to.equal(2); @@ -79,7 +88,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で // ここに以下のコードを記述してください。 // // $('.brown-ghost').remove(); - + $('.brown-ghost').remove(); var $brown = $('#brown'); expect($brown.children()).to.have.length(0); @@ -90,7 +99,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で it('7 番の要素からインベーダー要素を除去する', function() { // ここにコードを記述してください。 - + $('.darkorange-space-invader').remove(); var $darkorange = $('#darkorange'); expect($darkorange.children()).to.have.length(0); @@ -104,7 +113,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で it('8 番の要素の左右の幽霊要素をすべて除去する', function() { // ここにコードを記述してください。 - + $('.limegreen-ghosts').remove(); var $limegreen = $('.limegreen'); expect($limegreen).to.have.text('8\uD83C\uDF3F'); @@ -115,7 +124,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で var $elementToAdd = $('\uD83D\uDC2C'); // 上の $elementToAdd を追加するコードをここに記述してください。 - + $('.mediumturquoise').append($elementToAdd); var $mediumturquoise = $('.mediumturquoise'); expect($mediumturquoise.children()).to.have.length(1); @@ -127,7 +136,8 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で var $elementToAdd = $('\uD83D\uDC1F'); // 上の $elementToAdd を追加するコードをここに記述してください。 - + var $element = $("li>p"); + $element.prepend($elementToAdd); var $p = $('p'); expect($p.children()).to.have.length(1); diff --git a/public/stage4/tests.js b/public/stage4/tests.js index 599536b6..b107cfff 100644 --- a/public/stage4/tests.js +++ b/public/stage4/tests.js @@ -23,7 +23,10 @@ describe('ステージ4（意図通りにイベントを利用できる）', fun // }); // // ここに上記のどちらかのコードを記述してください。 - + var element = document.getElementById('firebrick'); + element.addEventListener('click', function(){ + element.textContent = Number(element.textContent) + 1; + }); var firebrick = document.getElementById('firebrick'); firebrick.dispatchEvent(createClickEvent()); @@ -37,6 +40,11 @@ describe('ステージ4（意図通りにイベントを利用できる）', fun it('2 番の要素の click イベントで要素内の数字を 1 ずつ小さくできる', function() { // ここにコードを記述してください。 + var $element = $('#chocolate'); + $element.on('click', function(event){ + var $target = $(event.target); + $target.text(Number($target.text()) - 1); + }); var chocolate = document.getElementById('chocolate'); @@ -51,6 +59,13 @@ describe('ステージ4（意図通りにイベントを利用できる）', fun it('3 番の要素の click イベントで要素を 10 度ずつ回転できる', function() { // ここにコードを記述してください。 + var $element = $('.mediumseagreen'); + var degree = 0; + $element.on('click', function(event){ + var $target = $(event.target); + degree = degree + 10; + $target.css('transform', 'rotate(' + degree + 'deg)'); + }) var mediumseagreen = document.querySelector('.mediumseagreen'); @@ -67,6 +82,11 @@ describe('ステージ4（意図通りにイベントを利用できる）', fun it('4 番の要素を入力された角度に回転できる', function() { // ここにコードを記述してください。 + var $element = $('.turquoise'); + var $input = $('[type=number]'); + $input.change(function(event){ + $element.css('transform', 'rotate(' + $input.val() + 'deg)'); + }); var turquoise = document.querySelector('.turquoise'); @@ -92,10 +112,11 @@ describe('ステージ4（意図通りにイベントを利用できる）', fun // // なお、expect(steelblue).to.be.null は上記のテストの要件を満たして // いないので、正解ではありません。 - - var steelblue = document.querySelector('.steelblue'); - expect(steelblue).to.have.property('textContent', '5 \uD83D\uDC33'); - done(); + document.addEventListener('DOMContentLoaded', function(){ + var steelblue = document.querySelector('.steelblue'); + expect(steelblue).to.have.property('textContent', '5 \uD83D\uDC33'); + done(); + }); }); }); });