diff --git a/gulpfile.js b/gulpfile.js index 3cf2bbb1..eb85b527 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -44,7 +44,7 @@ var tasks = [ tasks.forEach(function(task) { var run = require('gulp-run'); - gulp.task(task.cmd, task.help, ['lint'], function() { + gulp.task(task.cmd, task.help, ['lint-' + task.cmd], function() { // We expected that mocha-phantomjs print colorized results, but it isn't. // So, I take a fast way that is using gulp-run. return run('`npm bin`/mocha-phantomjs ' + task.url + ' || true').exec(); @@ -52,12 +52,14 @@ tasks.forEach(function(task) { }); -gulp.task('lint', 'ミスのおこりやすいコード・可読性の低いコードがないか検査します', function() { - var eslint = require('gulp-eslint'); +tasks.forEach(function(task) { + gulp.task('lint-' + task.cmd, 'ミスのおこりやすいコード・可読性の低いコードがないか検査します', function() { + var eslint = require('gulp-eslint'); - return gulp.src('test/**/*.js') - .pipe(eslint()) - .pipe(eslint.format()); + return gulp.src(task.src) + .pipe(eslint()) + .pipe(eslint.format()); + }); }); diff --git a/test/stage1/analytics.js b/test/stage1/analytics.js index 867daa7a..d2e4b2d1 100644 --- a/test/stage1/analytics.js +++ b/test/stage1/analytics.js @@ -1,5 +1,9 @@ (function() { 'use strict'; + // PhantomJS s not supporting web components yet. + // And some polyfills (as webcomponents/webcomponents.js) are not worked well. + if (!('registerElement' in document)) { return; } + var XFlyingSushiMonsterProto = Object.create(HTMLDivElement.prototype); XFlyingSushiMonsterProto.createdCallback = function() { this.textContent = '\uD83C\uDF63'; diff --git a/test/stage1/index.html b/test/stage1/index.html index ad288bcb..3e138bb8 100644 --- a/test/stage1/index.html +++ b/test/stage1/index.html @@ -41,6 +41,9 @@ + + + + + + + + + + diff --git a/test/stage4/style.css b/test/stage4/style.css new file mode 100644 index 00000000..2c578646 --- /dev/null +++ b/test/stage4/style.css @@ -0,0 +1,100 @@ +.js-training-container { + position: relative; +} + +.js-training { + position: relative; + z-index:10; + display: -webkit-flex; + display: flex; + list-style: none; + margin: 10px; + padding: 0; + font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; +} + +.js-training li { + -webkit-flex: 1; + flex: 1; + margin: 0; + padding: 0; + height: 40px; + line-height: 40px; + text-align: center; + color: white; + font-weight: bold; + font-size: 130%; + text-shadow: 0 1px 0 hsla(0, 0%, 0%, 0.3); +} + +.js-training #firebrick { + background-color: firebrick; + font-weight: normal; +} + +.js-training #chocolate { + background-color: chocolate; + font-weight: normal; +} + +.js-training .mediumseagreen { + background-color: mediumseagreen; + font-weight: normal; +} + +.js-training .turquoise { + background-color: turquoise; + font-weight: normal; +} + +.js-training blockquote { + background-color: steelblue; + margin: 0; + height: 40px; + font-size: 1; + font-weight: normal; +} + +.js-training [data-js-training="blueviolet"] { + background-color: blueviolet; +} + +.js-training #brown { + background-color: brown; + font-weight: normal; +} + +.js-training #darkorange { + background-color: darkorange; + font-weight: normal; +} + +.js-training .limegreen { + background-color: limegreen; + font-weight: normal; +} + +.js-training .mediumturquoise { + background-color: mediumturquoise; + font-weight: normal; +} + +.js-training p { + margin: 0; + padding: 0; + background-color: cornflowerblue; + font-weight: normal; +} + +.js-training [data-js-training="darkorchid"] { + background-color: darkorchid; +} + +.js-training-trick { + z-index: 1; + position: absolute; + top: 0; + height: 40px; + line-height: 40px; + text-indent: 60%; +} diff --git a/test/stage4/tests.js b/test/stage4/tests.js new file mode 100644 index 00000000..0c8e419f --- /dev/null +++ b/test/stage4/tests.js @@ -0,0 +1,134 @@ +'use strict'; + +describe('ステージ4（意図した通りに DOM 要素の構造を変更できるようになる）', function() { + describe('DOMインターフェース編', function() { + it('1 番の要素の click イベントで要素内の数字を 1 ずつ大きくできる', function() { + // チュートリアル + // + // 2 通りの代表的な書き方があります。 + // + // jQuery じゃない版: + // + // var element = document.getElementById('firebrick'); + // element.addEventListener('click', function() { + // element.textContent = Number(element.textContent) + 1; + // }); + // + // jQuery 版: + // + $('#firebrick').on('click', function(event) { + var $target = $(event.target); + $target.text(Number($target.text()) + 1); + }); + // + // ここに上記のどちらかのコードを記述してください。 + + + var firebrick = document.getElementById('firebrick'); + firebrick.dispatchEvent(createClickEvent()); + expect(firebrick).to.have.property('textContent', '2'); + + firebrick.dispatchEvent(createClickEvent()); + expect(firebrick).to.have.property('textContent', '3'); + }); + + + it('2 番の要素の click イベントで要素内の数字を 1 ずつ大きくできる', function() { + + // ここにコードを記述してください。 + + $('#chocolate').on('click', function(event) { + var $target = $(event.target); + $target.text(Number($target.text()) - 1); + }); + + var chocolate = document.getElementById('chocolate'); + chocolate.dispatchEvent(createClickEvent()); + expect(chocolate).to.have.property('textContent', '1'); + + chocolate.dispatchEvent(createClickEvent()); + expect(chocolate).to.have.property('textContent', '0'); + }); + + + it('3 番の要素の click イベントで要素を 10 度ずつ回転できる', function() { + + // ここにコードを記述してください。 + + var deg = 0; + $('.mediumseagreen').on('click', function(event) { + deg += 10; + $(event.target).css('transform', 'rotate(' + deg + 'deg)'); + }); + + var mediumseagreen = document.querySelector('.mediumseagreen'); + mediumseagreen.dispatchEvent(createClickEvent()); + expect(mediumseagreen).to.have.deep.property( + secret('fglyr.genafsbez'), secret('ebgngr(10qrt)')); + + mediumseagreen.dispatchEvent(createClickEvent()); + expect(mediumseagreen).to.have.deep.property( + secret('fglyr.genafsbez'), secret('ebgngr(20qrt)')); + }); + + + it('4 番の要素のに入力された角度に回転できる', function() { + + // ここにコードを記述してください。 + + $('input').on('change', function() { + var deg = $('input').val(); + $('.turquoise').css('transform', 'rotate(' + deg + 'deg)'); + }); + + var turquoise = document.querySelector('.turquoise'); + var turquoiseInput = turquoise.querySelector('input'); + + simulateChangeEvent(turquoiseInput, 10); + expect(turquoise).to.have.deep.property( + secret('fglyr.genafsbez'), secret('ebgngr(10qrt)')); + + simulateChangeEvent(turquoiseInput, 20); + expect(turquoise).to.have.deep.property( + secret('fglyr.genafsbez'), secret('ebgngr(20qrt)')); + }); + }); +}); + + +function createClickEvent() { + var event = document.createEvent('MouseEvents'); + event.initMouseEvent('click', true, true, window, + 0, 0, 0, 80, 20, false, false, false, false, 0, null); + return event; +} + +function simulateChangeEvent(inputElement, newValue) { + inputElement.value = newValue; + inputElement.dispatchEvent(createChangeEvent()); +} + +function createChangeEvent() { + var event = document.createEvent('HTMLEvents'); + event.initEvent('change', true, true); + + return event; +} + + +function secret(str) { + // Copyright (c) 2012 K.Adam White + // Released under the MIT license + // https://github.com/kadamwhite/jquery.rot13/blob/master/LICENSE-MIT + return Array.prototype.map.call(str, function(char) { + if (!char.match(/[A-Za-z]/)) { return char; } + + var charCode = char.charCodeAt(0); + if(charCode < 97) { + charCode = (charCode - 52) % 26 + 65; + } else { + charCode = (charCode - 84) % 26 + 97; + } + return String.fromCharCode(charCode); + }).join(''); +}