socket, event and some testing...

Author: Eduardo García Sanz

package.json

@@ -10,26 +10,30 @@
     "authors"        : [
         "Eduardo García Sanz <[email protected]>"
     ],
-    "keywords"       : ["react", "socket.io"],
+    "keywords"       : [
+        "react",
+        "socket.io"
+    ],
     "dependencies"   : {
+        "react"           : "0.13",
         "socket.io-client": "1.3"
     },
     "devDependencies": {
-        "jsdom"              : "5.4",
-        "mocha"              : "2.2",
-        "should"             : "7.0",
-        "eslint"             : "0.24",
-        "eslint-plugin-react": "2.5"
+        "proxyquire": "1.5",
+        "jsdom"     : "5.4",
+        "mocha"     : "2.2",
+        "should"    : "7.0",
+        "eslint"    : "0.24"
     },
     "scripts"        : {
         "lint": "eslint src",
         "test": "npm run lint && mocha"
     },
     "eslintConfig"   : {
-        "env"         : {
+        "env"  : {
             "node": true
         },
-        "rules"       : {
+        "rules": {
             "strict"                     : 0,
             "new-cap"                    : 0,
             "eqeqeq"                     : 2,

src/event.js

@@ -0,0 +1,31 @@
+var React  = require('react'),
+    Socket = require('./socket').socket;
+
+module.exports = React.createClass({
+    displayName         : 'SocketEvent',
+    propTypes           : {
+        socket  : React.PropTypes.string,
+        name    : React.PropTypes.string,
+        callback: React.PropTypes.func
+    },
+    getDefaultProps     : function () {
+
+        return {
+            socket: 'default'
+        };
+    },
+    componentWillMount  : function () {
+
+        Socket(this.props.socket)
+            .on(this.props.name, this.props.callback);
+    },
+    componentWillUnmount: function () {
+
+        Socket(this.props.socket)
+            .off(this.props.name, this.props.callback);
+    },
+    render              : function () {
+
+        return false;
+    }
+});

src/index.js

@@ -0,0 +1,4 @@
+module.exports = {
+    Socket: require('./socket'),
+    Event : require('./event')
+};

src/socket.js

@@ -0,0 +1,58 @@
+var React = require('react'),
+    io    = require('socket.io-client');
+
+var sockets = {};
+
+module.exports = React.createClass({
+    displayName         : 'Socket',
+    propTypes           : {
+        url    : React.PropTypes.string,
+        name   : React.PropTypes.string,
+        options: React.PropTypes.shape({
+            reconnection        : React.PropTypes.bool,
+            reconnectionAttempts: React.PropTypes.number,
+            reconnectionDelay   : React.PropTypes.number,
+            reconnectionDelayMax: React.PropTypes.number,
+            randomizationFactor : React.PropTypes.number,
+            timeout             : React.PropTypes.number
+        })
+    },
+    getDefaultProps     : function () {
+
+        return {
+            name   : 'default',
+            options: {}
+        };
+    },
+    statics             : {
+        socket: function (name) {
+
+            name = name || 'default';
+
+            if (!sockets.hasOwnProperty(name)) {
+
+                throw new Error('There is no "' + name + '" socket mounted.');
+            }
+
+            return sockets[name];
+        }
+    },
+    componentWillMount  : function () {
+
+        if (sockets.hasOwnProperty(this.props.name)) {
+
+            throw new Error('Another "' + this.props.name + '" socket is already mounted.');
+        }
+
+        sockets[this.props.name] = io(this.props.url, this.props.options);
+    },
+    componentWillUnmount: function () {
+
+        sockets[this.props.name].disconnect();
+        delete sockets[this.props.name];
+    },
+    render              : function () {
+
+        return false;
+    }
+});

test/mocha.opts

@@ -0,0 +1,4 @@
+--require should
+--reporter spec
+--ui bdd
+--recursive

test/socket.js

@@ -0,0 +1,103 @@
+var React      = require('react/addons'),
+    proxyquire = require('proxyquire'),
+    jsdom      = require('jsdom');
+
+global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
+global.window = document.defaultView;
+global.navigator = window.navigator;
+
+var MockedSocket = proxyquire('../src/socket.js', {
+    'socket.io-client': function () {
+
+        return {
+            disconnect: function () {}
+        };
+    }
+});
+
+var render = function (props, mock) {
+
+    var Socket = mock ? proxyquire('../src/socket.js', {
+        'socket.io-client': mock
+    }) : MockedSocket;
+
+    var container = document.createElement('div'),
+        component = React.createElement(Socket, props);
+
+    React.render(component, container);
+
+    return {
+        unmount: function () {
+
+            React.unmountComponentAtNode(container);
+        }
+    };
+};
+
+describe('The socket', function () {
+
+    it('connects a new io instance on mount and disconnects it on unmount', function (done) {
+
+        var props = {
+            url    : 'foo:9000',
+            options: {
+                reconnect: false
+            }
+        };
+
+        render(props, function (url, options) {
+
+            (url).should.equal(props.url);
+            (options).should.equal(props.options);
+
+            return {
+                disconnect: done
+            }
+        }).unmount();
+    });
+
+    it('throws an error on socket name duplication', function () {
+
+        var props = {
+            url : 'foo:9000',
+            name: 'foo'
+        };
+
+        render(props);
+
+        (function () {
+
+            render(props);
+
+        }).should.throw('Another "foo" socket is already mounted.');
+    });
+
+    it('throws an error when trying to get an unknown socket', function () {
+
+        (function () {
+
+            MockedSocket.socket('faa');
+
+        }).should.throw('There is no "faa" socket mounted.');
+    });
+
+    it('return a socket by its name and throws an removes it on unmount', function () {
+
+        var props = {
+            url : 'foo:9000',
+            name: 'fin'
+        };
+
+        var rendered = render(props);
+
+        MockedSocket.socket('fin').should.be.ok;
+
+        rendered.unmount();
+
+        (function () {
+
+            MockedSocket.socket('fin');
+
+        }).should.throw('There is no "fin" socket mounted.');
+    });
+});