v0.1.0 release

ngokevin · ngokevin · commit d7154d631828 · 2015-08-24T12:51:24.000-07:00
diff --git a/README.md b/README.md
@@ -9,6 +9,11 @@ from file reading.
 - **as** (React.PropTypes.string): what format the FileReader should read the
   file as (i.e., ```buffer```, ```binary```, ```url```, ```text```). Defaults
   to ```url```.
+- **children** (React.PropTypes.any): if children is passed into
+  FileReaderInput, then the component will hide the native file input and
+  instead display ```children```. Whenever the custom ```children``` are
+  clicked, the component will trigger the native file input prompt. This
+  allows complete control over styling an display.
 - **onChange** (React.PropTypes.func): callback ```function(event, results)```.
   Results will be an array of arrays, the size of which depending on how many
   files were selected. Each result will be an array of two items:
diff --git a/karma.conf.js b/karma.conf.js
@@ -10,7 +10,7 @@ module.exports = function(config) {
 
     // frameworks to use
     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['mocha', 'browserify'],
+    frameworks: ['browserify', 'mocha'],
 
 
     // list of files / patterns to load in the browser
@@ -19,7 +19,6 @@ module.exports = function(config) {
       'lib/*.js'
     ],
 
-
     // list of files to exclude
     exclude: [
     ],
@@ -28,7 +27,7 @@ module.exports = function(config) {
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
-      'lib/*.js': [ 'browserify' ],
+      'lib/index.js': [ 'browserify' ],
       'test.js': [ 'browserify' ]
     },
 
@@ -63,6 +62,6 @@ module.exports = function(config) {
 
     // Continuous Integration mode
     // if true, Karma captures browsers, runs the tests and exits
-    singleRun: false
+    singleRun: false,
   })
 }
diff --git a/package.json b/package.json
@@ -1,18 +1,16 @@
 {
   "name": "react-file-reader-input",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "description": "React file input component for complete control over styling and abstraction from file reading.",
   "main": "./lib/index.js",
   "devDependencies": {
     "babel": "^5.4.7",
     "babel-runtime": "^5.8.20",
-    "jsdom": "^3.1.2",
     "karma": "^0.13.9",
     "karma-browserify": "^4.3.0",
     "karma-firefox-launcher": "^0.1.6",
     "karma-mocha": "^0.2.0",
     "mocha": "^2.2.5",
-    "mocha-jsdom": "^1.0.0",
     "react": "^0.13.3"
   },
   "peerDependencies": {
@@ -21,7 +19,7 @@
   "scripts": {
     "build:lib": "babel --stage 0 src --out-dir lib",
     "pretest": "babel --stage 0 test.es6 -o test.js && npm run build:lib",
-    "test": "mocha test.js",
+    "test": "karma start",
     "prepublish": "npm run build:lib"
   },
   "repository": {
diff --git a/src/index.js b/src/index.js
@@ -64,7 +64,7 @@ export default class FileInput extends React.Component {
     React.findDOMNode(this.refs._reactFileReaderInput).click();
   }
   render() {
-    const hiddenInputStyle = this.props.children ?{
+    const hiddenInputStyle = this.props.children ? {
       // If user passes in children, display children and hide input.
       position: 'absolute',
       top: '-9999px'
diff --git a/test.es6 b/test.es6
@@ -1,20 +1,13 @@
 import assert from 'assert';
-import _jsdom from 'jsdom';
-import mochaJsdom from 'mocha-jsdom';
+import React from 'react/addons';
 
 import FileInput from './lib/index';
 
 
-global.document = _jsdom.jsdom('<html><body></body></html>');
-global.window = document.parentWindow;
-global.navigator = window.navigator;
-const jsdom = mochaJsdom.bind(this, {skipWindowCheck: true});
+const test = React.addons.TestUtils;
 
 
 describe('FileInput', () => {
-  jsdom();
-  const React = require('react/addons');
-
   let div;
   beforeEach(() => {
     div = document.createElement('div');
@@ -24,6 +17,41 @@ describe('FileInput', () => {
   });
 
   it('renders', () => {
-    React.addons.TestUtils.renderIntoDocument(<FileInput/>, div);
+    const fileInput = test.renderIntoDocument(
+      <FileInput className="input"/>, div);
+
+    const input = test.findRenderedDOMComponentWithTag(fileInput, 'input');
+    assert.ok(input);
+    assert.ok(!input.props.children);
+    assert.deepEqual(input.props.style, {});
+    assert.equal(input.props.type, 'file');
+  });
+
+  it('can hide input with children', () => {
+    const fileInput = test.renderIntoDocument(<FileInput className="input">
+      <p>Input</p>
+    </FileInput>, div);
+
+    const input = test.findRenderedDOMComponentWithTag(fileInput, 'input');
+    assert.ok(!input.props.children);
+    assert.ok(Object.keys(input.props.style).length);
+    assert.equal(input.props.type, 'file');
+
+    const p = test.findRenderedDOMComponentWithTag(fileInput, 'p');
+    assert.ok('p');
+  });
+
+  it('can hide input with children', () => {
+    const fileInput = test.renderIntoDocument(<FileInput className="input">
+      <p>Input</p>
+    </FileInput>, div);
+
+    const input = test.findRenderedDOMComponentWithTag(fileInput, 'input');
+    assert.ok(!input.props.children);
+    assert.ok(input.props.style);
+    assert.equal(input.props.type, 'file');
+
+    const p = test.findRenderedDOMComponentWithTag(fileInput, 'p');
+    assert.ok('p');
   });
 });
diff --git a/test.js b/test.js
@@ -6,36 +6,72 @@ var _assert = require('assert');
 
 var _assert2 = _interopRequireDefault(_assert);
 
-var _jsdom2 = require('jsdom');
+var _reactAddons = require('react/addons');
 
-var _jsdom3 = _interopRequireDefault(_jsdom2);
-
-var _mochaJsdom = require('mocha-jsdom');
-
-var _mochaJsdom2 = _interopRequireDefault(_mochaJsdom);
+var _reactAddons2 = _interopRequireDefault(_reactAddons);
 
 var _libIndex = require('./lib/index');
 
 var _libIndex2 = _interopRequireDefault(_libIndex);
 
-global.document = _jsdom3['default'].jsdom('<html><body></body></html>');
-global.window = document.parentWindow;
-global.navigator = window.navigator;
-var jsdom = _mochaJsdom2['default'].bind(undefined, { skipWindowCheck: true });
+var test = _reactAddons2['default'].addons.TestUtils;
 
 describe('FileInput', function () {
-  jsdom();
-  var React = require('react/addons');
-
   var div = undefined;
   beforeEach(function () {
     div = document.createElement('div');
   });
   afterEach(function () {
-    React.unmountComponentAtNode(div);
+    _reactAddons2['default'].unmountComponentAtNode(div);
   });
 
   it('renders', function () {
-    React.addons.TestUtils.renderIntoDocument(React.createElement(_libIndex2['default'], null), div);
+    var fileInput = test.renderIntoDocument(_reactAddons2['default'].createElement(_libIndex2['default'], { className: 'input' }), div);
+
+    var input = test.findRenderedDOMComponentWithTag(fileInput, 'input');
+    _assert2['default'].ok(input);
+    _assert2['default'].ok(!input.props.children);
+    _assert2['default'].deepEqual(input.props.style, {});
+    _assert2['default'].equal(input.props.type, 'file');
+  });
+
+  it('can hide input with children', function () {
+    var fileInput = test.renderIntoDocument(_reactAddons2['default'].createElement(
+      _libIndex2['default'],
+      { className: 'input' },
+      _reactAddons2['default'].createElement(
+        'p',
+        null,
+        'Input'
+      )
+    ), div);
+
+    var input = test.findRenderedDOMComponentWithTag(fileInput, 'input');
+    _assert2['default'].ok(!input.props.children);
+    _assert2['default'].ok(Object.keys(input.props.style).length);
+    _assert2['default'].equal(input.props.type, 'file');
+
+    var p = test.findRenderedDOMComponentWithTag(fileInput, 'p');
+    _assert2['default'].ok('p');
+  });
+
+  it('can hide input with children', function () {
+    var fileInput = test.renderIntoDocument(_reactAddons2['default'].createElement(
+      _libIndex2['default'],
+      { className: 'input' },
+      _reactAddons2['default'].createElement(
+        'p',
+        null,
+        'Input'
+      )
+    ), div);
+
+    var input = test.findRenderedDOMComponentWithTag(fileInput, 'input');
+    _assert2['default'].ok(!input.props.children);
+    _assert2['default'].ok(input.props.style);
+    _assert2['default'].equal(input.props.type, 'file');
+
+    var p = test.findRenderedDOMComponentWithTag(fileInput, 'p');
+    _assert2['default'].ok('p');
   });
 });

Original file line number	Diff line number	Diff line change
`@@ -64,7 +64,7 @@ export default class FileInput extends React.Component {`
`64`	`64`	`React.findDOMNode(this.refs._reactFileReaderInput).click();`
`65`	`65`	`}`
`66`	`66`	`render() {`
`67`		`- const hiddenInputStyle = this.props.children ?{`
	`67`	`+ const hiddenInputStyle = this.props.children ? {`
`68`	`68`	`// If user passes in children, display children and hide input.`
`69`	`69`	`position: 'absolute',`
`70`	`70`	`top: '-9999px'`