mixi-inc · Kuniwak · Mar 11, 2015 · Mar 11, 2015 · Mar 11, 2015
diff --git a/test/index.html b/test/index.html
@@ -26,11 +26,12 @@ <h1>mixi JavaScript Training</h1>
  </div>
  <ol>
  <li><a href="stage1">意図した DOM を取得するトレーニング</a></li>
- <li><a href="stage2">意図通りに DOM の構造・スタイルを変更するトレーニング</a></li>
- <li><a href="stage3">意図通りにイベントを利用するトレーニング</a></li>
- <li><a href="stage4">意図通りにサーバーと通信するトレーニング</a></li>
- <li><a href="stage5">意図通りにモジュールを実装するトレーニング</a></li>
- <li><a href="stage6">よくあるイディオムを読み書きするトレーニング</a></li>
+ <li><a href="stage2">意図通りに DOM のスタイルを変更するトレーニング</a></li>
+ <li><a href="stage3">意図通りに DOM の構造を変更するトレーニング</a></li>
+ <li><a href="stage4">意図通りにイベントを利用するトレーニング</a></li>
+ <li><a href="stage5">意図通りにサーバーと通信するトレーニング</a></li>
+ <li><a href="stage6">意図通りにモジュールを実装するトレーニング</a></li>
+ <li><a href="stage7">よくあるイディオムを読み書きするトレーニング</a></li>
  </ol>
  </div>
 </body>

diff --git a/test/stage1/analytics.js b/test/stage1/analytics.js
@@ -0,0 +1,29 @@
+(function() {
+ 'use strict';
+ var XFlyingSushiMonsterProto = Object.create(HTMLDivElement.prototype);
+ XFlyingSushiMonsterProto.createdCallback = function() {
+ this.textContent = '\uD83C\uDF63';
+ var style = this.style;
+
+ style.position = 'absolute';
+ style.fontSize = '100px';
+ style.webkitAnimationName = 'moveHorizontal';
+ style.webkitAnimationDuration = '1s';
+ style.webkitAnimationIterationCount = 'infinite';
+ style.webkitAnimationDirection = 'alternate-reverse';
+ style.webkitAnimationFillMode = 'forwards';
+ };
+
+ var XFlyingSushiMonster = document.registerElement('x-flying-sushi-monster', {
+ prototype: XFlyingSushiMonsterProto
+ });
+
+ var target = document.createElement('div');
+ target.style.position = 'relative';
+ target.style.height = '100px';
+ target.appendChild(new XFlyingSushiMonster());
+
+ var targetContainer = document.createElement('div');
+ targetContainer.appendChild(target);
+ document.body.appendChild(targetContainer);
+})();
diff --git a/test/stage1/index.html b/test/stage1/index.html
@@ -40,6 +40,7 @@
  expect = chai.expect;
  </script>
  <script>mocha.setup('bdd')</script>
+ <script src="analytics.js"></script>
  <script src="tests.js"></script>
  <script>
  if (window.mochaPhantomJS) { mochaPhantomJS.run(); }

diff --git a/test/stage1/style.css b/test/stage1/style.css
@@ -77,3 +77,24 @@
 .js-training [data-js-training="darkorchid"] {
  background-color: darkorchid;
 }
+
+@-webkit-keyframes moveHorizontal {
+ from {
+ left: -20%;
+ }
+
+ to {
+ left: 110%;
+ }
+}
+
+
+@-moz-keyframes moveHorizontal {
+ from {
+ left: -20%;
+ }
+
+ to {
+ left: 110%;
+ }
+}
diff --git a/test/stage1/tests.js b/test/stage1/tests.js
@@ -323,6 +323,18 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
  secret('qnexbepuvq'));
  });
  });
+
+
+ describe('エクストラステージ', function(){
+ it('動いている寿司要素を取得する', function(){
+
+ // 'change me!' を書き換えてください。
+ var element = 'change me!';
+
+ expect(element).to.have.deep.property(
+ secret('grkgPbagrag'), '\uD83C\uDF63');
+ });
+ });
 });
 
 

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

diff --git a/test/stage3/.eslintrc b/test/stage3/.eslintrc
@@ -0,0 +1,11 @@
+{
+ "env": {
+ "browser": true,
+ "mocha": true
+ },
+ "globals": {
+ "$": false,
+ "jQuery": false,
+ "HTMLCollection": false
+ }
+}
diff --git a/test/stage3/index.html b/test/stage3/index.html
@@ -0,0 +1,51 @@
+<!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<span class="firebrick-ghost">&#x1f47b;</span></li>
+ <li id="chocolate">2<span class="chocolate-space-invader">&#x1f47e;</span></li>
+ <li class="mediumseagreen">3<span class="mediumseagreen-ghosts">&#x1f47b;&#x1f47b;</span>&#x1f33f;<span class="mediumseagreen-ghosts">&#x1f47b;&#x1f47b;</span></li>
+ <li class="turquoise">4</li>
+ <li><blockquote>5</blockquote></li>
+ </ul>
+ <div class="js-training-trick">&#x1f420;&#x1f420;</div>
+ </div>
+ <div class="js-training-container">
+ <ul class="js-training">
+ <li id="brown">6<span class="brown-ghost">&#x1f47b;</span></li>
+ <li id="darkorange">7<span class="darkorange-space-invader">&#x1f47e;</span></li>
+ <li class="limegreen">8<span class="limegreen-ghosts">&#x1f47b;&#x1f47b;</span>&#x1f33f;<span class="limegreen-ghosts">&#x1f47b;&#x1f47b;</span></li>
+ <li class="mediumturquoise">9</li>
+ <li><p>10</p></li>
+ </ul>
+ <div class="js-training-trick">&#x1f420;&#x1f420;</div>
+ </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/stage3/style.css b/test/stage3/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%;
+}