Add more test

Kuniwak · Kuniwak · commit 654e2ef2bdc1 · 2015-03-16T13:13:25.000+09:00
diff --git a/server.js b/server.js
@@ -14,6 +14,14 @@ var MODULE_DIR = path.join(__dirname, 'node_modules');
 app.use(express.static(PUBLIC_DIR));
 app.use('/modules', express.static(MODULE_DIR));
 
+
+app.get('/api/heavy', function(req, res) {
+  setTimeout(function() {
+    res.send('// do nothing');
+  }, 1000);
+});
+
+
 var server = require('http').createServer(app);
 var PORT = 8000;
 var HOSTNAME = 'localhost';
diff --git a/test/stage4/index.html b/test/stage4/index.html
@@ -16,7 +16,7 @@
       <li id="firebrick">1</li>
       <li id="chocolate">2</li>
       <li class="mediumseagreen">3</li>
-      <li class="turquoise"><input type="number" value="0"></li>
+      <li class="turquoise">4<input type="number" value="0"></li>
     </ul>
   </div>
   <div id="mocha"></div>
@@ -35,5 +35,11 @@
     if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
     else { mocha.run(); }
   </script>
+  <script src="/api/heavy"></script>
+  <div class="js-training-container">
+    <ul class="js-training">
+      <li class="steelblue">5 &#x1f433;</li>
+    </ul>
+  </div>
 </body>
 </html>
diff --git a/test/stage4/style.css b/test/stage4/style.css
@@ -45,56 +45,27 @@
 .js-training .turquoise {
   background-color: turquoise;
   font-weight: normal;
+  text-align: right;
 }
 
-.js-training blockquote {
-  background-color: steelblue;
-  margin: 0;
+.js-training .turquoise input {
+  background-color: hsla(0, 0%, 0%, 0.1);
+  width: 3em;
   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;
-}
+  border: none;
+  margin-left: 15%;
+  padding: 0 0 0 12px;
 
-.js-training .mediumturquoise {
-  background-color: mediumturquoise;
-  font-weight: normal;
+  font-size: inherit;
+  color: inherit;
+  text-shadow: inherit;
+  text-align: center;
 }
 
-.js-training p {
+.js-training .steelblue {
+  background-color: steelblue;
   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%;
+  font-size: 1;
+  font-weight: normal;
 }
diff --git a/test/stage4/tests.js b/test/stage4/tests.js
@@ -64,7 +64,7 @@ describe('ステージ4（意図通りにイベントを利用できる）', fun
     });
 
 
-    it('4 番の要素のに入力された角度に回転できる', function() {
+    it('4 番の要素を入力された角度に回転できる', function() {
 
       // ここにコードを記述してください。
 
@@ -80,6 +80,23 @@ describe('ステージ4（意図通りにイベントを利用できる）', fun
       expect(turquoise).to.have.deep.property(
         secret('fglyr.genafsbez'), secret('ebgngr(20qrt)'));
     });
+
+
+    it('5 番の要素の内容を取得できる', function(done) {
+
+      // このテストは、画面下部の .steelblue 要素の内容が "5 (クジラの絵文字)" で
+      // あることを確認する意図があります。画面上は 5 とクジラの絵文字が正しく
+      // 表示されています。しかし、テストは失敗しているようです。
+      //
+      // このテストが意図通り成功するようにテストコードを修正してください。
+      //
+      // なお、expect(steelblue).to.be.null は上記のテストの要件を満たして
+      // いないので、正解ではありません。
+
+      var steelblue = document.querySelector('.steelblue');
+      expect(steelblue).to.have.property('textContent', '5 \uD83D\uDC33');
+      done();
+    });
   });
 });
 
