mixi-inc · Kuniwak · Mar 11, 2015 · Mar 11, 2015 · Mar 11, 2015 · Mar 11, 2015
diff --git a/gulpfile.js b/gulpfile.js
@@ -44,20 +44,22 @@ 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();
  });
 });
 
 
-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
@@ -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
@@ -41,6 +41,9 @@
  </script>
  <script>mocha.setup('bdd')</script>
  <script src="analytics.js"></script>
+ <script>
+ describe.skipWhenPhantomJS = window.mochaPhantomJS ? describe.skip : describe;
+ </script>
  <script src="tests.js"></script>
  <script>
  if (window.mochaPhantomJS) { mochaPhantomJS.run(); }

diff --git a/test/stage1/tests.js b/test/stage1/tests.js
@@ -1,5 +1,7 @@
 'use strict';
 
+
+
 describe('ステージ1（意図した DOM 要素を取得できるようになる）', function(){
  describe('DOM インターフェース編', function() {
  it('1 番の赤色の要素（ID は "firebrick"）が1つ取得できる', function(){
@@ -39,8 +41,8 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
  // 参考資料
  // https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName
 
- expect(elements).to.be.instanceof(HTMLCollection);
- expect(elements).to.have.property('class', elementClassName);
+ expect(elements).to.have.length(1);
+ expect(elements[0]).to.have.property('className', elementClassName);
  });
 
 
@@ -53,7 +55,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
  // 参考資料
  // https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName
 
- expect(elements).to.be.instanceof(HTMLCollection);
+ expect(elements).to.have.length(2);
  expect(elements[0]).to.have.property('className', elementClassName);
  expect(elements[1]).to.have.property('className', elementClassName);
  });
@@ -68,7 +70,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
  // 参考資料
  // https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName
 
- expect(elements).to.be.instanceof(HTMLCollection);
+ expect(elements).to.have.length(1);
  expect(elements[0]).to.have.property('tagName', elementTagName.toUpperCase());
  });
 
@@ -214,7 +216,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
 
  // チュートリアル
  //
- // 'change me!' を document.querySelector('.js-training:nth-child(2) li');
+ // 'change me!' を '.js-training:nth-child(2) li';
  // に書き換えてください。
  var selector = 'change me!';
 
@@ -325,7 +327,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
  });
 
 
- describe('エクストラステージ', function(){
+ describe.skipWhenPhantomJS('エクストラステージ', function(){
  it('動いている寿司要素を取得する', function(){
 
  // 'change me!' を書き換えてください。

diff --git a/test/stage2/tests.js b/test/stage2/tests.js
@@ -1,5 +1,6 @@
 'use strict';
 
+
 describe('ステージ2（意図した通りに DOM 要素のスタイルを変更できるようになる）', function(){
  describe('DOMインターフェース編', function() {
  it('寿司が表示されている要素の寿司を2つに増やす', function(){

diff --git a/test/stage4/.eslintrc b/test/stage4/.eslintrc
@@ -0,0 +1,11 @@
+{
+ "env": {
+ "browser": true,
+ "mocha": true
+ },
+ "globals": {
+ "$": false,
+ "jQuery": false,
+ "HTMLCollection": false
+ }
+}
diff --git a/test/stage4/index.html b/test/stage4/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>mixi JS Training</title>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link href="http://img.mixi.net/img/basic/favicon.ico" type="image/vnd.microsoft.icon" rel="icon">
+ <link href="http://img.mixi.net/img/basic/favicon.ico" type="image/vnd.microsoft.icon" rel="shortcut icon">
+ <link rel="stylesheet" href="/modules/mocha/mocha.css">
+ <link rel="stylesheet" href="../common/mocha-patch.css">
+ <link rel="stylesheet" href="style.css">
+</head>
+<body>
+ <div class="js-training-container">
+ <ul class="js-training">
+ <li id="firebrick">1</li>
+ <li id="chocolate">2</li>
+ <li class="mediumseagreen">3</li>
+ <li class="turquoise"><input type="number" value="0"></li>
+ </ul>
+ </div>
+ <div id="mocha"></div>
+ <script src="/modules/jquery/dist/jquery.js"></script>
+ <script src="/modules/mocha/mocha.js"></script>
+ <script src="/modules/chai/chai.js"></script>
+ <script src="/modules/chai-jquery/chai-jquery.js"></script>
+ <script>
+ mocha.ui('bdd');
+ mocha.reporter('html');
+ expect = chai.expect;
+ </script>
+ <script>mocha.setup('bdd')</script>
+ <script src="tests.js"></script>
+ <script>
+ if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
+ else { mocha.run(); }
+ </script>
+</body>
+</html>
diff --git a/test/stage4/style.css 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
@@ -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('');
+}