Add testing with jsdom.

update travis.yml for latest node.

.travis.yml

@@ -1,6 +1,5 @@
 language: node_js
 node_js:
-  - "0.10"
-  - "0.11"
+  - "5.10.1"
 after_script:
-  - npm run coveralls
+  - npm run coveralls

package.json

@@ -32,6 +32,7 @@
   },
   "devDependencies": {
     "browserify": "^12.0.1",
+    "chai": "^3.5.0",
     "ecstatic": "^1.4.0",
     "gulp": "^3.9.0",
     "gulp-autowatch": "1.0.2",
@@ -40,20 +41,24 @@
     "gulp-jshint": "^2.0.0",
     "gulp-livereload": "^3.8.1",
     "gulp-sourcemaps": "^1.6.0",
+    "jsdom": "^8.4.0",
     "jshint": "^2.x",
     "jshint-stylish": "^2.1.0",
     "merge-stream": "^1.0.0",
-    "mocha": "^2.3.4",
-    "react-dom": "^0.14.0",
+    "mocha": "^2.4.5",
+    "react-addons-test-utils": "^15.0.1",
+    "react-dom": "^0.14.0 || ^15.0.0",
+    "react-tools": "^0.13.3",
     "reactify": "^1.1.1",
     "should": "^8.0.2",
+    "sinon": "^1.17.3",
     "vinyl-buffer": "1.0.0",
     "vinyl-source-stream": "^1.1.0",
     "watchify": "^3.6.1"
   },
   "scripts": {
     "lint": "jshint ./src --reporter=node_modules/jshint-stylish --exclude node_modules",
-    "test": "npm run-script lint"
+    "test": "NODE_PATH=$NODE_PATH:$PWD/src $(npm bin)/mocha -R dot --compilers .:test/compiler.js --require ./test/setup.js test/*_test.js"
   },
   "engines": {
     "node": ">= 0.10"

test/compiler.js

@@ -0,0 +1,14 @@
+// test/compiler.js
+var fs = require('fs'),
+  ReactTools = require('react-tools'),
+  origJs = require.extensions['.js'];
+
+require.extensions['.js'] = function(module, filename) {
+  // optimization: external code never needs compilation.
+  if (filename.indexOf('node_modules/') >= 0) {
+    return (origJs || require.extensions['.js'])(module, filename);
+  }
+  var content = fs.readFileSync(filename, 'utf8');
+  var compiled = ReactTools.transform(content, {harmony: true});
+  return module._compile(compiled, filename);
+};

test/index_test.js

@@ -0,0 +1,119 @@
+var React = require('react');
+var MediaQuery = require('index');
+var mm = { default: require('matchmedia') };
+var assert = require('chai').assert;
+var sinon = require('sinon');
+var TestUtils = require('react-addons-test-utils');
+
+describe('MediaQuery', function() {
+  describe('when query matches', function() {
+    before(function() {
+      this.mmStub = sinon.stub(mm, 'default').returns({
+        matches: true,
+        addListener: function() {},
+        removeListener: function() {}
+      });
+    });
+    after(function() {
+      this.mmStub.restore();
+    });
+    it('renders children', function() {
+      const mq = (
+        <MediaQuery query="all">
+          <div className="childComponent"/>
+        </MediaQuery>
+      );
+      const e = TestUtils.renderIntoDocument(mq);
+      assert.isNotFalse(TestUtils.findRenderedDOMComponentWithClass(e, 'childComponent'));
+    });
+    it('renders text node', function() {
+      const mq = (
+        <MediaQuery query="all">
+          1231
+        </MediaQuery>
+      );
+      const e = TestUtils.renderIntoDocument(mq);
+      assert.isNotFalse(TestUtils.findAllInRenderedTree(e, function(c) {return true;}));
+    });
+    it('renders the wrapper', function() {
+      const mq = (
+        <MediaQuery query="all" component="section">
+          <div className="childComponent"/>
+        </MediaQuery>
+      );
+      const e = TestUtils.renderIntoDocument(mq);
+      assert.isNotFalse(TestUtils.findRenderedDOMComponentWithTag(e, 'section'));
+    });
+    it('renders a div when theres multiple children', function() {
+      const mq = (
+        <MediaQuery query="all">
+          <span className="childComponent"/>
+          <span className="childComponent"/>
+        </MediaQuery>
+      );
+      const e = TestUtils.renderIntoDocument(mq);
+      assert.isNotFalse(TestUtils.findRenderedDOMComponentWithTag(e, 'div'));
+    });
+    it('passes extra props', function() {
+      const mq = (
+        <MediaQuery query="all" className="passedProp">
+          <div/>
+        </MediaQuery>
+      );
+      const e = TestUtils.renderIntoDocument(mq);
+      assert.isNotFalse(TestUtils.findRenderedDOMComponentWithClass(e, 'passedProp'));
+    });
+    it('uses query prop if it has one', function() {
+      const mq = (
+        <MediaQuery query="all" className="passedProp">
+          <div/>
+        </MediaQuery>
+      );
+      const e = TestUtils.renderIntoDocument(mq);
+      assert.equal(e.query, 'all');
+    });
+    it('builds query from props', function() {
+      const mq = (
+        <MediaQuery all className="passedProp">
+          <div/>
+        </MediaQuery>
+      );
+      const e = TestUtils.renderIntoDocument(mq);
+      assert.equal(e.query, 'all');
+    });
+    it('builds query from values', function() {
+      const mq = (
+        <MediaQuery orientation="portrait" className="passedProp">
+          <div/>
+        </MediaQuery>
+      );
+      const e = TestUtils.renderIntoDocument(mq);
+      assert.equal(e.query, '(orientation: portrait)');
+    });
+    it('throws if theres no query', function() {
+      const mq = (
+        <MediaQuery>
+          <div className="childComponent"></div>
+        </MediaQuery>
+      );
+      assert.throws(() => (TestUtils.renderIntoDocument(mq)), 'Invalid or missing MediaQuery!');
+    });
+    it('throws if theres a bad query', function() {
+      const mq = (
+        <MediaQuery>
+          <div className="childComponent"></div>
+        </MediaQuery>
+      );
+      assert.throws(() => (TestUtils.renderIntoDocument(mq)), 'Invalid or missing MediaQuery!');
+    });
+  });
+  it('renders nothing when no matches', function() {
+    const mq = (
+      <MediaQuery maxWidth={300}>
+        <div className="childComponent"/>
+      </MediaQuery>
+    );
+    const e = TestUtils.renderIntoDocument(mq);
+    assert.throws(() => (TestUtils.findRenderedDOMComponentWithClass(e, 'childComponent')), /Did not find exactly one match/);
+  });
+});

test/mediaQuery_test.js

@@ -0,0 +1,70 @@
+var assert = require('chai').assert;
+var mediaQuery = require('mediaQuery');
+
+describe('mediaQuery', function() {
+  it('has types and features in [all]', function() {
+    assert.deepEqual(Object.keys(mediaQuery.all), Object.keys(mediaQuery.types).concat(Object.keys(mediaQuery.features)));
+  });
+  it('has all media types', function () {
+    var types = [
+      'all',
+      'grid',
+      'aural',
+      'braille',
+      'handheld',
+      'print',
+      'projection',
+      'screen',
+      'tty',
+      'tv',
+      'embossed'
+    ];
+    assert.deepEqual(Object.keys(mediaQuery.types), types);
+  });
+  it('has matchers', function() {
+    const matchers = [
+      'orientation',
+      'scan',
+      'aspectRatio',
+      'deviceAspectRatio',
+      'height',
+      'deviceHeight',
+      'width',
+      'deviceWidth',
+      'color',
+      'colorIndex',
+      'monochrome',
+      'resolution'
+    ];
+    matchers.push('type');
+    assert.deepEqual(Object.keys(mediaQuery.matchers), matchers);
+  });
+  it('has features', function() {
+    const features = [
+      'minAspectRatio',
+      'maxAspectRatio',
+      'minDeviceAspectRatio',
+      'maxDeviceAspectRatio',
+      'minHeight',
+      'maxHeight',
+      'minDeviceHeight',
+      'maxDeviceHeight',
+      'minWidth',
+      'maxWidth',
+      'minDeviceWidth',
+      'maxDeviceWidth',
+      'minColor',
+      'maxColor',
+      'minColorIndex',
+      'maxColorIndex',
+      'minMonochrome',
+      'maxMonochrome',
+      'minResolution',
+      'maxResolution'
+    ];
+    const keys = features.concat(Object.keys(mediaQuery.matchers));
+    keys.splice(keys.indexOf('type'), 1);
+
+    assert.deepEqual(Object.keys(mediaQuery.features), keys);
+  });
+});

test/setup.js

@@ -0,0 +1,13 @@
+var jsdom = require('jsdom').jsdom;
+var matchMedia = require('matchmedia');
+
+process.env.NODE_ENV = 'test';
+
+global.document = jsdom('<!doctype html><html><body><div id="app"></div></body></html>', {
+  url: 'http://test.page'
+});
+global.window = document.defaultView;
+global.self = global.window;
+global.navigator = global.window.navigator;
+
+global.window.matchMedia = matchMedia;

test/toQuery_test.js

@@ -0,0 +1,25 @@
+var assert = require('chai').assert;
+var toQuery = require('toQuery');
+
+describe('toQuery', function() {
+  it('makes number rules', function() {
+    const q = toQuery({minWidth: 760});
+    assert.equal(q, '(min-width: 760px)');
+  });
+  it('makes true rules', function() {
+    const q = toQuery({all: true});
+    assert.equal(q, 'all');
+  });
+  it('makes negative rules', function() {
+    const q = toQuery({all: false});
+    assert.equal(q, 'not all');
+  });
+  it('makes regular rules', function() {
+    const q = toQuery({orientation: 'portrait'});
+    assert.equal(q, '(orientation: portrait)');
+  });
+  it('handles multiple rules', function() {
+    const q = toQuery({orientation: 'portrait', minWidth: 760});
+    assert.equal(q, '(min-width: 760px) and (orientation: portrait)');
+  });
+});