Refactoring test by page object

index.html

@@ -16,12 +16,19 @@
 
 <div class="todo">
   <h1>Todos</h1>
-  <form class="todoForm pure-form">
+    <label>
+        <input type="checkbox">
+    </label>
+
+    <form class="todoForm pure-form">
     <input type="text" class="todoText" placeholder="What needs to be done?">
     <input type="submit" class="todoBtn pure-button pure-button-primary" value="Add New">
   </form>
 
   <ul class="todoList"></ul>
+    <label>
+        <input type="checkbox">
+    </label>
 </div>
 
 </body>

package.json

@@ -31,7 +31,7 @@
     "mocha": "^2.1.0",
     "phantomjs": "^1.9.13",
     "power-assert": "^0.10.1",
-    "testium": "^2.3.0",
+    "testium": "^2.4.0",
     "watchify": "^2.2.1"
   }
 }

test/app-e2e-test.js

@@ -2,56 +2,58 @@
 "use strict";
 var injectBrowser = require('testium/mocha');
 var assert = require("power-assert");
+var AppPage = require("./page-objects/app-page");
 var browser;
-function addTodo(text) {
-    browser.setValue('.todoText', text);
-    browser.click('.todoBtn');
-}
 describe("app-test", function () {
-    var text = 'todo text';
+    var inputText = 'todo text';
+    var page;
     before(injectBrowser());
     beforeEach(function () {
         browser = this.browser;
-        this.browser.navigateTo("/");
+        page = new AppPage(this.browser);
     });
     context("when テキストボックスに文字を入れて送信した時", function () {
         beforeEach(function () {
-            addTodo(text)
+            page.addTodo(inputText)
         });
         it("should li要素が作成されている", function () {
-            var list = browser.getElements('.todoList li');
-            assert(list.length > 0);
+            var list = page.getTodoItems();
+            assert(list.length === 1);
         });
 
         it("should リストアイテムのテキストは送信したものと一致している", function () {
-            browser.assert.elementHasText('.todoList li', text)
+            var todo = page.getTodoItems()[0];
+            var text = todo.get("text");
+            assert.equal(text, inputText);
         });
     });
-    describe("todoについて", function () {
+    describe("todo", function () {
         beforeEach(function () {
-            addTodo(text);
+            page.addTodo(inputText);
         });
-        context("checkboxをクリックしたら", function () {
-            it("should `is-complete`が追加される", function () {
-                browser.click('.todoList li input[type="checkbox"]');
+        context("when click the checkbox", function () {
+            it("should added `is-complete`", function () {
+                var todo = page.getTodoItems()[0];
+                page.toggleTodo(todo);
                 browser.assert.elementExists(".is-complete");
             });
         });
-        context("removeBtnをクリックして、confirmでキャンセルしても", function () {
-            it("li要素は消えない", function () {
+        context("when click removeBtn, then cancel confirm", function () {
+            it("should have todo item", function () {
+                var todo = page.getTodoItems()[0];
                 // confirmがfalseを返すようにする = キャンセル
                 browser.evaluate("return window.confirm = function() { return " + false + "; };");
-
-                browser.click('.todoList li .removeBtn');
-                browser.assert.elementExists(".todoList li");
+                page.removeTodo(todo);
+                assert(page.getTodoItems().length > 0);
             });
         });
-        context("removeBtnをクリックしてconfirmでOKしたら", function () {
-            it("li要素が消える", function () {
+        context("when click removeBtn, then ok to confirm", function () {
+            it("should have nottodo item", function () {
+                var todo = page.getTodoItems()[0];
                 // confirmがtrueを返すようにする = OK
                 browser.evaluate("return window.confirm = function() { return " + true + "; };");
-                browser.click('.todoList li .removeBtn');
-                browser.assert.elementDoesntExist(".todoList li");
+                page.removeTodo(todo);
+                assert(page.getTodoItems().length === 0);
             });
         });
     });

test/page-objects/app-page.js

@@ -0,0 +1,25 @@
+// LICENSE : MIT
+"use strict";
+function AppPage(browser) {
+    this.browser = browser;
+    this.browser.navigateTo("/");
+}
+AppPage.prototype.addTodo = function addTodo(text) {
+    this.browser.setValue('.todoText', text);
+    this.browser.click('.todoBtn');
+};
+AppPage.prototype.getTodoItems = function () {
+    return this.browser.getElements('.todoList li');
+};
+/**
+ * @param todo the todo Element
+ */
+AppPage.prototype.toggleTodo = function (todo) {
+    var input = todo.getElement('input[type="checkbox"]');
+    input.click();
+};
+AppPage.prototype.removeTodo = function (todo) {
+    var input = todo.getElement('.removeBtn');
+    input.click();
+};
+module.exports = AppPage;