From 75b3d0adc92459dd74a5528475b7ce14bdc12e58 Mon Sep 17 00:00:00 2001
From: Bala Clark <bala.clark@clock.co.uk>
Date: Tue, 14 Jul 2015 10:14:57 +0200
Subject: [PATCH] load indicator module

---
 app/comic-book.js                | 12 +++++++++
 app/index.js                     | 15 +----------
 app/view/load-indicator.js       | 30 +++++++++++++++++++---
 package.json                     | 14 ++++++++--
 test/lib/load-indicator.js       | 14 ----------
 test/view/load-indicator.test.js | 44 ++++++++++++++++++++++++++++++++
 6 files changed, 95 insertions(+), 34 deletions(-)
 create mode 100644 app/comic-book.js
 delete mode 100644 test/lib/load-indicator.js
 create mode 100644 test/view/load-indicator.test.js

diff --git a/app/comic-book.js b/app/comic-book.js
new file mode 100644
index 0000000..25dbd8d
--- /dev/null
+++ b/app/comic-book.js
@@ -0,0 +1,12 @@
+module.exports = ComicBook
+
+let loadIndicator = require('./view/load-indicator')
+
+function ComicBook () {
+  return {
+    replace (selector) {
+      console.log(selector, loadIndicator())
+    }
+  }
+}
+
diff --git a/app/index.js b/app/index.js
index 4f2ae30..2ab0e62 100644
--- a/app/index.js
+++ b/app/index.js
@@ -1,15 +1,2 @@
-'use strict'
-
-let loadIndicator = require('./view/load-indicator')
-
-function ComicBook () {
-  return {
-    replace (selector) {
-      console.log(selector, loadIndicator())
-    }
-  }
-}
-
-// TODO properly export in various formats
-window.ComicBook = ComicBook
+window.ComicBook = require('./comic-book')
 
diff --git a/app/view/load-indicator.js b/app/view/load-indicator.js
index 8034362..81f1a78 100644
--- a/app/view/load-indicator.js
+++ b/app/view/load-indicator.js
@@ -1,7 +1,29 @@
-'use strict'
-
+let EventEmitter = require('events').EventEmitter
+let $ = require('jquery')
 let template = require('./template/load-indicator.handlebars')
 
-module.exports = function loadIndicator () {
-  console.log(template())
+class LoadIndicator extends EventEmitter {
+  constructor () {
+    super()
+    this.render().hide()
+  }
+
+  render () {
+    this.$el = $(template())
+    this.el = this.$el.get(0)
+    return this
+  }
+
+  show () {
+    this.$el.show()
+    this.emit('show', this)
+  }
+
+  hide () {
+    this.$el.hide()
+    this.emit('hide', this)
+  }
 }
+
+module.exports = LoadIndicator
+
diff --git a/package.json b/package.json
index a5c52f7..6fe2a36 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,8 @@
     "build": "npm run build",
     "buildjs": "rm -f dist/*.js && browserify --transform babelify --transform browserify-handlebars app/index.js --debug | exorcist dist/comicbook.js.map > dist/comicbook.js",
     "pretest": "standard",
-    "test": "mochify --transform babelify --transform browserify-handlebars test/**/*.js"
+    "test": "mochify -R spec --transform babelify --transform browserify-handlebars test/**/*.test.js",
+    "test-watch": "mochify --watch -R min --transform babelify --transform browserify-handlebars test/**/*.test.js"
   },
   "repository": {
     "type": "git",
@@ -28,7 +29,11 @@
   "standard": {
     "global": [
       "describe",
-      "it"
+      "it",
+      "before",
+      "beforeEach",
+      "after",
+      "afterEach"
     ],
     "ignore": [
       "assets",
@@ -45,9 +50,14 @@
     "cssmin": "^0.4.3",
     "exorcist": "^0.4.0",
     "handlebars": "^3.0.3",
+    "jquery": "^1.9.1",
     "mochify": "^2.10.0",
     "phantomjs": "^1.9.17",
     "standard": "^4.5.3",
     "uglify-js": "^2.4.23"
+  },
+  "dependencies": {
+    "jquery": "^1.11.3",
+    "zepto": "0.0.4"
   }
 }
diff --git a/test/lib/load-indicator.js b/test/lib/load-indicator.js
deleted file mode 100644
index e6b2c1d..0000000
--- a/test/lib/load-indicator.js
+++ /dev/null
@@ -1,14 +0,0 @@
-'use strict'
-
-let loadIndicator = require('../../app/view/load-indicator')
-
-describe('#loadIndicator()', function () {
-
-  it('should render', function () {
-    console.log(loadIndicator())
-  })
-
-  it('should emit a "show" event')
-
-  it('should emit a "hide" event')
-})
diff --git a/test/view/load-indicator.test.js b/test/view/load-indicator.test.js
new file mode 100644
index 0000000..b95c6ce
--- /dev/null
+++ b/test/view/load-indicator.test.js
@@ -0,0 +1,44 @@
+let assert = require('chai').assert
+let LoadIndicator = require('../../app/view/load-indicator')
+
+describe('#loadIndicator()', function () {
+
+  it('should render on init', function () {
+    let indicator = new LoadIndicator()
+    assert.equal(indicator.el.outerHTML
+      , '<div id="cb-loading-overlay" class="cb-control" style="display: none; "></div>')
+  })
+
+  it('should show', function () {
+    let indicator = new LoadIndicator()
+    assert.equal(indicator.el.style.display, 'none')
+    indicator.show()
+    assert.equal(indicator.el.style.display, 'block')
+  })
+
+  it('should hide', function () {
+    let indicator = new LoadIndicator()
+    indicator.show()
+    indicator.hide()
+    assert.equal(indicator.el.style.display, 'none')
+  })
+
+  it('should emit a "show" event', function (done) {
+    let indicator = new LoadIndicator()
+    indicator.on('show', function (e) {
+      assert.deepEqual(indicator, e)
+      done()
+    })
+    indicator.show()
+  })
+
+  it('should emit a "hide" event', function (done) {
+    let indicator = new LoadIndicator()
+    indicator.on('hide', function (e) {
+      assert.deepEqual(indicator, e)
+      done()
+    })
+    indicator.hide()
+  })
+
+})