load indicator module

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())
+    }
+  }
+}
+

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')
 

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
+

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"
   }
 }

test/lib/load-indicator.js

@@ -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')
-})

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()
+  })
+
+})