Генерация событий на DOM узалх нано-блоков

Gruntfile.js

@@ -2,9 +2,7 @@
 module.exports = function (grunt) {
     'use strict';
 
-    grunt.loadNpmTasks('grunt-contrib-jshint');
-    grunt.loadNpmTasks("grunt-jscs-checker");
-    grunt.loadNpmTasks('grunt-mocha-phantomjs');
+    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks)
 
     var gruntConfig = {};
 
@@ -13,7 +11,8 @@ module.exports = function (grunt) {
             jshintrc: '.jshintrc'
         },
         files: [
-            'blocks/*/*.js'
+            'blocks/**/**.js',
+            'src/**/**.js'
         ]
     };
 
@@ -29,7 +28,26 @@ module.exports = function (grunt) {
         all: ['unittests/index.html']
     };
 
+    gruntConfig.shell = {
+        rebuildNanoislands: {
+            command: "make"
+        }
+    };
+
+    gruntConfig.watch = {
+        test: {
+            files: [
+                "<%= jshint.files %>",
+                "unittests/**/*.js"
+            ],
+            tasks: [
+                "shell:rebuildNanoislands",
+                "mocha_phantomjs"
+            ]
+        }
+    };
+
     grunt.initConfig(gruntConfig);
 
     grunt.registerTask('default', ['jshint', 'jscs', 'mocha_phantomjs']);
-};
+};

Makefile

@@ -17,7 +17,7 @@ unittests/tests.yate.js: $(shellshell find $(CURDIR)/unittests -name '*.yate') n
 nanoislands.ie.css: $(shell find . -name '*.styl') node_modules
 	node build/build-styl.js ie > $@
 
-nanoislands.js: $(CURDIR)/blocks/nanoislands.js $(shell find $(CURDIR)/blocks -name '*.js') node_modules
+nanoislands.js: $(CURDIR)/blocks/nanoislands.js $(shell find $(CURDIR)/blocks -name '*.js') $(shell find $(CURDIR)/src -name '*.js') node_modules
 	$(NPM_BIN)/borschik --input=blocks/nanoislands.js --minimize=no --output=nanoislands.js
 
 node_modules:

blocks/dom-emitter.js

@@ -0,0 +1,21 @@
+/**
+ * @desc Класс который генерирует события на
+ * корневом узле блока.
+ */
+(function() {
+    nb.define('DomEmitter', $.extend({
+        /**
+         * @desc Генерирует событие на блоке и
+         * корневом узле этого блока
+         * @param {String} eventName The name of event
+         * @param {Object} eventObject The object which will be pass to handlers
+         * of event
+         */
+        trigger: function(eventName, eventObject) {
+            var $node = $(this.node);
+
+            $node.trigger.apply($node, arguments);
+            return this.emit.apply(this, arguments);
+        }
+    }, new nb.Emitter()));
+}());

blocks/nanoislands.js

@@ -1,6 +1,9 @@
 /* borschik:include:../node_modules/es5-shim/es5-shim.js */
 /* borschik:include:../libs/nanoblocks.js */
 
+/* borschik:include:../src/emitter.js */
+/* borschik:include:dom-emitter.js */
+
 /* borschik:include:button/button.js */
 /* borschik:include:tooltip/tooltip.js */
 /* borschik:include:checkbox/checkbox.js */

blocks/select/select.js

@@ -319,4 +319,4 @@ nb.define('select', {
         this.trigger('nb-select_destroyed');
         nb.destroy(this.node.getAttribute('id'));
     }
-});
+}, 'DomEmitter');

package.json

@@ -31,7 +31,11 @@
         "mocha-phantomjs": "*",
         "phantomjs": "*",
         "jscs": "1.0.11",
-        "expect.js": "*"
+        "expect.js": "*",
+        "grunt-contrib-watch": "~0.5.3",
+        "grunt-shell": "~0.6.1",
+        "matchdep": "~0.3.0",
+        "sinon": "~1.7.3"
     },
     "engines": {
         "node": "*"

src/emitter.js

@@ -0,0 +1,48 @@
+/**
+ * @desc Класс реализованный на jQuery, который позволяет генерировать и прослушивать
+ * события на объекте
+ */
+(function() {
+    var Emitter = function() {};
+
+    /**
+     * @desc Add event handler
+     * @param {String} eventName The name of event
+     * @param {Function} eventHandler The handler of event on the object
+     * @return {Function} The handler of event
+     */
+    Emitter.prototype.on = function(eventName, eventHandler) {
+        var $this = $(this);
+
+        $this.on.apply($this, arguments);
+
+        return eventHandler;
+    };
+
+    /**
+     * @desc Remove event handler from object
+     * @param {String} eventName The name of event
+     * @param {Function} eventHandler Then event handler function
+     * @return {Function} The event handler function
+     */
+    Emitter.prototype.off = function(eventName, eventHandler) {
+        var $this = $(this);
+
+        $this.off.apply($this, arguments);
+
+        return eventHandler;
+    };
+
+    /**
+     * @desc Trigger event on the object
+     * @param {String} eventName The name of event
+     * @param {Object} [eventObject] The object which pass to handlers
+     */
+    Emitter.prototype.emit = function(eventName, eventObject) {
+        var $this = $(this);
+
+        return $this.trigger.apply($this, arguments);
+    };
+
+    nb.Emitter = Emitter;
+}());

unittests/aftereach.js

@@ -1,5 +1,12 @@
-afterEach(function() {
-    // clear blocks
-    nb.destroy();
-    $('.content').empty();
-});
+(function(globalSinon) {
+    beforeEach(function() {
+        sinon = globalSinon.sandbox.create();
+    });
+
+    afterEach(function() {
+        sinon.restore();
+        // clear blocks
+        nb.destroy();
+        $('.content').empty();
+    });
+}(sinon));

unittests/index.html

@@ -18,6 +18,7 @@
 
     <script type="text/javascript" src="../node_modules/mocha-phantomjs/node_modules/mocha/mocha.js"></script>
     <script type="text/javascript" src="../node_modules/expect.js/expect.js"></script>
+    <script type="text/javascript" src="../node_modules/sinon/pkg/sinon.js"></script>
     <script src="../libs/jquery-ui/jquery-ui-1.10.3.nanoislands.min.js"></script>
 
     <script src="../node_modules/yate/lib/runtime.js"></script>
@@ -40,6 +41,8 @@
 
     <script src="spec/button.js"></script>
     <script src="spec/checkbox.js"></script>
+    <script src="spec/emitter.js"></script>
+    <script src="spec/select.js"></script>
 
     <script type="text/javascript">
         if (window.mochaPhantomJS) {

unittests/spec/emitter.js

@@ -0,0 +1,87 @@
+/*global beforeEach, describe, it, expect, sinon*/
+describe("Emitter Tests", function() {
+    beforeEach(function() {
+        this.emitter = new nb.Emitter();
+    });
+
+    describe('#on', function() {
+        it('should implement interface #on', function() {
+            expect(this.emitter.on).to.be.ok();
+        });
+    });
+
+    describe('#off', function() {
+        it('should implement interface #off', function() {
+            expect(this.emitter.off).to.be.ok();
+        });
+
+        it('should remove handler of event from object', function() {
+            var eventHandler = this.emitter.on('test', sinon.stub());
+
+            this.emitter.off('test', eventHandler);
+            this.emitter.emit('test');
+
+            expect(eventHandler.called).to.be.equal(false);
+        });
+    });
+
+    describe('#emit', function() {
+        it('should implement interface #trigger', function() {
+            expect(this.emitter.emit).to.be.ok();
+        });
+
+        it('should trigger event on object', function() {
+            var eventHandler = this.emitter.on('test', sinon.stub());
+
+            this.emitter.emit('test');
+
+            expect(eventHandler.called).to.be.equal(true);
+        });
+    });
+
+    describe('How add emitter functionality to nanoblock', function() {
+        beforeEach(function() {
+            nb.define('test', {}, 'DomEmitter');
+            this.bTest = nb.block($('<div data-nb="test"/>').get(0));
+        });
+
+        it('should trigger event on nanoblock', function() {
+            var eventHandler = this.bTest.on('test', sinon.stub());
+
+            this.bTest.trigger('test');
+
+            expect(eventHandler.called).to.be.equal(true);
+        });
+
+        it('should trigger event on nanoblock node', function() {
+            var eventHandler = sinon.stub();
+            $(this.bTest.node).on('test', eventHandler);
+
+            this.bTest.trigger('test');
+
+            expect(eventHandler.called).to.be.equal(true);
+        });
+
+        it('should trigger event on nanoblock node without duplicate', function() {
+            var eventHandler = sinon.stub();
+            $(this.bTest.node).on('test', eventHandler);
+
+            this.bTest.trigger('test');
+
+            expect(eventHandler.calledOnce).to.be.equal(true);
+        });
+
+        it('should bubbling event triggered on nanoblock', function() {
+            var $rootNode = $('<div id="rootNode"><b data-nb="test" /></div>');
+            var eventHandler = sinon.stub();
+
+            this.bTest = nb.block($rootNode.find('[data-nb="test"]').get(0));
+
+            $rootNode.on('test', eventHandler);
+
+            this.bTest.trigger('test');
+
+            expect(eventHandler.called).to.be.equal(true);
+        });
+    });
+});

unittests/spec/select.js

@@ -0,0 +1,14 @@
+/*global beforeEach, describe, it, expect, sinon*/
+describe("Select Tests", function() {
+    it('should bubbling event nb-select_changed', function() {
+        var $rootNode = $('<div><div data-nb="select"/></div>');
+        var eventHandler = sinon.stub();
+
+        this.bSelect = nb.block($rootNode.find('[data-nb="select"]').get(0));
+        $rootNode.on('nb-select_changed', eventHandler);
+
+        this.bSelect.trigger('nb-select_changed');
+
+        expect(eventHandler.called).to.be.equal(true);
+    });
+});