refactor(test): implement app-page object

encapsulating information about the elements on your application page

Author: azu

test/app-e2e-test.js

@@ -4,55 +4,56 @@ 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

@@ -2,5 +2,26 @@
 "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) {
+    // @todo https://github.com/groupon-testium/webdriver-http-sync doesn't implemented Element#getElement.
+    var input = todo.getElement('input[type="checkbox"]');
+    input.click();
+};
+AppPage.prototype.removeTodo = function (todo) {
+    // @todo https://github.com/groupon-testium/webdriver-http-sync doesn't implemented Element#getElement.
+    var input = todo.getElement('.removeBtn');
+    input.click();
+};
 module.exports = AppPage;