diff --git a/example/pages/cell/index.js b/example/pages/cell/index.js
index 0982978..d4ae536 100644
--- a/example/pages/cell/index.js
+++ b/example/pages/cell/index.js
@@ -240,7 +240,7 @@ export default class CellDemo extends React.Component {
                                 maxCount={6}
                                 files={this.state.demoFiles}
                                 onError={msg => alert(msg)}
-                                onChange={file => {
+                                onChange={(file,e) => {
                                     let newFiles = [...this.state.demoFiles, {url:file.data}];
                                     this.setState({
                                         demoFiles: newFiles
diff --git a/src/components/form/textarea.js b/src/components/form/textarea.js
index e22f9a0..11f1b7b 100644
--- a/src/components/form/textarea.js
+++ b/src/components/form/textarea.js
@@ -29,7 +29,7 @@ export default class TextArea extends React.Component {
     }
 
     render(){
-        const { className, children, showCounter, maxlength, ...others } = this.props;
+        const { className, children, showCounter, maxlength, onChange, ...others } = this.props;
         const cls = classNames({
             weui_textarea: true,
             [className]: className
diff --git a/src/components/form/uploader.js b/src/components/form/uploader.js
index b4b501b..410f0c7 100644
--- a/src/components/form/uploader.js
+++ b/src/components/form/uploader.js
@@ -4,6 +4,7 @@
 
 
 import React, { Component, PropTypes } from 'react';
+import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 
 export default class Uploader extends React.Component {
@@ -30,26 +31,45 @@ export default class Uploader extends React.Component {
     };
 
     handleFile(file,cb) {
-        let reader = new FileReader();
+        let reader;
+        if(typeof FileReader !== 'undefined') {
+           reader = new FileReader();
+        } else {
+           if(window.FileReader) reader = new window.FileReader();
+        }
+
         reader.onload = e => {
-            let img = new Image();
+            let img;
+            if(typeof Image !== 'undefined') {
+               img = new Image();
+            } else {
+               if(window.Image) img = new window.Image();
+            }
             img.onload = ()=>{
                 let w = Math.min(this.props.maxWidth, img.width);
                 let h = img.height * (w / img.width);
                 let canvas = document.createElement('canvas');
                 let ctx = canvas.getContext('2d');
-                canvas.width = w;
-                canvas.height = h;
-                ctx.drawImage(img, 0, 0, w, h);
-                let base64 = canvas.toDataURL('image/png');
-                cb({
-                    lastModified: file.lastModified,
-                    lastModifiedDate: file.lastModifiedDate,
-                    name: file.name,
-                    size: file.size,
-                    type: file.type,
-                    data: base64
-                });
+
+                //check canvas support, for test
+                if(ctx){
+                    canvas.width = w;
+                    canvas.height = h;
+                    ctx.drawImage(img, 0, 0, w, h);
+
+                    let base64 = canvas.toDataURL('image/png');
+
+                    cb({
+                        lastModified: file.lastModified,
+                        lastModifiedDate: file.lastModifiedDate,
+                        name: file.name,
+                        size: file.size,
+                        type: file.type,
+                        data: base64
+                    },e);
+                }else{
+                    cb(file, e);
+                }
             };
             img.src = e.target.result;
         }
@@ -70,9 +90,11 @@ export default class Uploader extends React.Component {
         for(let key in _files) {
             if (!_files.hasOwnProperty(key)) continue;
             let file = _files[key];
-            this.handleFile(file, _file=>{
+
+            this.handleFile(file, (_file,e)=>{
                 if(this.props.onChange) this.props.onChange(_file, e);
-            });
+                ReactDOM.findDOMNode(this.refs.uploader).value='';
+            },e);
         }
     }
 
@@ -120,6 +142,7 @@ export default class Uploader extends React.Component {
                     </ul>
                     <div className="weui_uploader_input_wrp">
                         <input
+                        ref="uploader"//let react to reset after onchange
                         className="weui_uploader_input"
                         type="file"
                         accept="image/jpg,image/jpeg,image/png,image/gif"
diff --git a/src/components/mediabox/mediabox.js b/src/components/mediabox/mediabox.js
index 853a5fd..d140b6b 100644
--- a/src/components/mediabox/mediabox.js
+++ b/src/components/mediabox/mediabox.js
@@ -9,27 +9,25 @@ import classNames from 'classnames';
 
 export default class MediaBox extends React.Component {
     static propTypes = {
-        access: React.PropTypes.bool,
         type: React.PropTypes.string
     };
 
     static defaultProps = {
-        access: false,
         type: 'text'
     };
 
     render() {
-        const {children, type, ...others} = this.props;
+        const {children, type, className, ...others} = this.props;
         const Component = this.props.href ? 'a' : 'div';
-        const className = classNames({
+        const cls = classNames({
             weui_media_box: true,
             weui_media_appmsg: type === 'appmsg',
             weui_media_text: type === 'text',
             weui_media_small_appmsg: type === 'small_appmsg',
-        });
+        }, className);
 
         return (
-            <Component className={className} {...others}>{children}</Component>
+            <Component className={cls} {...others}>{children}</Component>
         );
     }
 };
\ No newline at end of file
diff --git a/src/components/mediabox/mediabox_body.js b/src/components/mediabox/mediabox_body.js
index db53bfd..335b87a 100644
--- a/src/components/mediabox/mediabox_body.js
+++ b/src/components/mediabox/mediabox_body.js
@@ -9,13 +9,13 @@ import classNames from 'classnames';
 
 export default class PanelBody extends React.Component {
     render() {
-        const {children, ...others} = this.props;
-        const className = classNames({
+        const {children, className, ...others} = this.props;
+        const cls = classNames({
             weui_media_bd: true
-        });
+        }, className);
 
         return (
-            <div className={className} {...others}>{children}</div>
+            <div className={cls} {...others}>{children}</div>
         );
     }
 };
\ No newline at end of file
diff --git a/src/components/mediabox/mediabox_desc.js b/src/components/mediabox/mediabox_desc.js
index babd49f..a48aa78 100644
--- a/src/components/mediabox/mediabox_desc.js
+++ b/src/components/mediabox/mediabox_desc.js
@@ -9,13 +9,13 @@ import classNames from 'classnames';
 
 export default class MediaBoxDescription extends React.Component {
     render() {
-        const {children, ...others} = this.props;
-        const className = classNames({
+        const {children, className, ...others} = this.props;
+        const cls = classNames({
             weui_media_desc: true
-        });
+        }, className);
 
         return (
-            <p className={className} {...others}>{children}</p>
+            <p className={cls} {...others}>{children}</p>
         );
     }
 };
\ No newline at end of file
diff --git a/src/components/mediabox/mediabox_header.js b/src/components/mediabox/mediabox_header.js
index df63a95..8ff3e27 100644
--- a/src/components/mediabox/mediabox_header.js
+++ b/src/components/mediabox/mediabox_header.js
@@ -9,10 +9,10 @@ import classNames from 'classnames';
 
 export default class MediaBoxHeader extends React.Component {
     render() {
-        const {children, ...others} = this.props;
-        const className = classNames({
+        const {children, className, ...others} = this.props;
+        const clz = classNames({
             weui_media_hd: true
-        });
+        }, className);
 
         let childrenWithProps = React.Children.map(children, child => {
             if(child.type == 'img' && !child.props.className){
@@ -23,7 +23,7 @@ export default class MediaBoxHeader extends React.Component {
         });
 
         return (
-            <div className={className} {...others}>{childrenWithProps}</div>
+            <div className={clz} {...others}>{childrenWithProps}</div>
         );
     }
 };
\ No newline at end of file
diff --git a/src/components/mediabox/mediabox_info.js b/src/components/mediabox/mediabox_info.js
index 2612e71..6d8c590 100644
--- a/src/components/mediabox/mediabox_info.js
+++ b/src/components/mediabox/mediabox_info.js
@@ -24,13 +24,13 @@ export default class MediaBoxInfo extends React.Component {
     }
 
     render() {
-        const {children, data, ...others} = this.props;
-        const className = classNames({
+        const {children, data, className, ...others} = this.props;
+        const cls = classNames({
             weui_media_info: true
-        });
+        }, className);
 
         return (
-            <ul className={className} {...others}>
+            <ul className={cls} {...others}>
                 {data.length > 0 ? this.renderData(data) : children}
             </ul>
         );
diff --git a/src/components/mediabox/mediabox_info_meta.js b/src/components/mediabox/mediabox_info_meta.js
index 8c53cd2..b13cd77 100644
--- a/src/components/mediabox/mediabox_info_meta.js
+++ b/src/components/mediabox/mediabox_info_meta.js
@@ -17,14 +17,14 @@ export default class MediaBoxInfoMeta extends React.Component {
     };
 
     render() {
-        const {children, extra, ...others} = this.props;
-        const className = classNames({
+        const {children, extra, className, ...others} = this.props;
+        const cls = classNames({
             weui_media_info_meta: true,
             weui_media_info_meta_extra: extra
-        });
+        }, className);
 
         return (
-            <li className={className} {...others}>{children}</li>
+            <li className={cls} {...others}>{children}</li>
         );
     }
 };
\ No newline at end of file
diff --git a/src/components/mediabox/mediabox_title.js b/src/components/mediabox/mediabox_title.js
index d3db748..961b55a 100644
--- a/src/components/mediabox/mediabox_title.js
+++ b/src/components/mediabox/mediabox_title.js
@@ -9,13 +9,13 @@ import classNames from 'classnames';
 
 export default class MediaBoxTitle extends React.Component {
     render() {
-        const {children, ...others} = this.props;
-        const className = classNames({
+        const {children, className, ...others} = this.props;
+        const cls = classNames({
             weui_media_title: true
-        });
+        }, className);
 
         return (
-            <h4 className={className} {...others}>{children}</h4>
+            <h4 className={cls} {...others}>{children}</h4>
         );
     }
 };
\ No newline at end of file
diff --git a/test/grid.js b/test/grid.js
index 182e0e3..168ef43 100644
--- a/test/grid.js
+++ b/test/grid.js
@@ -17,7 +17,7 @@ const testIcon =
 describe('<Grid></Grid>', ()=> {
 
     [<testIcon/>, false].map(icon => {
-        ['testlabe', false].map(label => {
+        ['testlabe', null].map(label => {
             describe(`<Grid icon="${icon}" label="${label}"></Grid>`, ()=> {
                 const child = <Grid><GridIcon><testIcon/></GridIcon><GridLabel>testLabel</GridLabel></Grid>;
                 const customWrapper = shallow(<Grid><GridIcon><testIcon/></GridIcon><GridLabel>testLabel</GridLabel></Grid>);
diff --git a/test/mediabox.js b/test/mediabox.js
new file mode 100644
index 0000000..7e1d544
--- /dev/null
+++ b/test/mediabox.js
@@ -0,0 +1,68 @@
+/**
+ * Created by n7best
+ */
+
+"use strict";
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import assert from 'assert';
+import WeUI from '../src/index';
+
+const {MediaBox} = WeUI;
+
+describe('<MediaBox></MediaBox>', () => {
+    [true, false].map(isHyperLink => {
+        ['appmsg', 'text', 'small_appmsg'].map((type)=> {
+            [undefined, null, '', 'custom_class'].map((clazz)=>{
+                describe(`<MediaBox type="${type}" href="${isHyperLink}" className="${clazz}"></MediaBox>`, ()=> {
+                    const label = 'ok';
+                    const href = 'https://weixin.qq.com';
+                    let wrapper;
+                    if (isHyperLink) {
+                        wrapper = shallow(
+                            <MediaBox type={type} href={href} className={clazz}>{label}</MediaBox>
+                        );
+                    }
+                    else {
+                        wrapper = shallow(
+                            <MediaBox type={type} className={clazz}>{label}</MediaBox>
+                        );
+                    }
+
+                    it('should render <MediaBox></MediaBox> component', () => {
+                        assert(wrapper.instance() instanceof MediaBox);
+                    });
+
+                    it('should render be a MediaBox without `href` attribute', ()=> {
+                        if (!isHyperLink) {
+                            assert(wrapper.type() === 'div');
+                        }
+                    });
+
+                    it('should render be a `a` with `href` attribute', ()=> {
+                        if (isHyperLink) {
+                            assert(wrapper.type() === 'a');
+                            assert(wrapper.prop('href') === href);
+                        }
+                    });
+
+                    it(`should have class with "weui_media_box" & weui_media_${type}`, ()=> {
+                        assert(wrapper.hasClass('weui_media_box'));
+                        assert(wrapper.hasClass(`weui_media_${type}`));
+                    });
+
+                    it(`should have custom class name ${clazz}`, ()=>{
+                        if (clazz) {
+                            assert(wrapper.hasClass(`${clazz}`));
+                        }
+                    });
+
+                    it(`should have text ${label}`, ()=> {
+                        assert(wrapper.text() === label);
+                    });
+                });
+            });
+        });
+    });
+});
\ No newline at end of file
diff --git a/test/mediabox_body.js b/test/mediabox_body.js
new file mode 100644
index 0000000..ddc01c8
--- /dev/null
+++ b/test/mediabox_body.js
@@ -0,0 +1,42 @@
+/**
+ * Created by n7best
+ */
+
+"use strict";
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import assert from 'assert';
+import WeUI from '../src/index';
+
+const {MediaBoxBody} = WeUI;
+
+describe('<MediaBoxBody></MediaBoxBody>', ()=> {
+    [undefined, null, '', 'custom_class'].map((clazz)=>{
+        ['MediaBox body wording', <img src="http://mmrb.github.io/avatar/jf.jpg" />, <div><h2 className="title">文章标题</h2><p className="desc">文章描述</p></div>].map((child)=>{
+            describe(`<MediaBoxBody className=${clazz}>${child}</MediaBoxBody>`, ()=>{
+                const wrapper = shallow(
+                    <MediaBoxBody className={clazz}>{child}</MediaBoxBody>
+                );
+
+                it(`should render <MediaBoxBody></MediaBoxBody> component `, ()=>{
+                    assert(wrapper.instance() instanceof MediaBoxBody);
+                });
+
+                it(`should have 'weui_media_bd' class name`, ()=>{
+                    assert(wrapper.hasClass(`weui_media_bd`));
+                });
+
+                it(`should have custom class name ${clazz}`, ()=>{
+                    if (clazz) {
+                        assert(wrapper.hasClass(`${clazz}`));
+                    }
+                });
+
+                it(`should have child ${child}`, ()=>{
+                    assert(wrapper.contains(child));
+                });
+            });
+        });
+    });
+});
\ No newline at end of file
diff --git a/test/mediabox_desc.js b/test/mediabox_desc.js
new file mode 100644
index 0000000..e6017b7
--- /dev/null
+++ b/test/mediabox_desc.js
@@ -0,0 +1,42 @@
+/**
+ * Created by n7best
+ */
+
+"use strict";
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import assert from 'assert';
+import WeUI from '../src/index';
+
+const {MediaBoxDescription} = WeUI;
+
+describe('<MediaBoxDescription></MediaBoxDescription>', ()=> {
+    [undefined, null, '', 'custom_class'].map((clazz)=>{
+        ['MediaBox Description wording', <img src="http://mmrb.github.io/avatar/jf.jpg" />, <div><h2 className="title">文章标题</h2><p className="desc">文章描述</p></div>].map((child)=>{
+            describe(`<MediaBoxDescription className=${clazz}>${child}</MediaBoxDescription>`, ()=>{
+                const wrapper = shallow(
+                    <MediaBoxDescription className={clazz}>{child}</MediaBoxDescription>
+                );
+
+                it(`should render <MediaBoxDescription></MediaBoxDescription> component `, ()=>{
+                    assert(wrapper.instance() instanceof MediaBoxDescription);
+                });
+
+                it(`should have 'weui_media_desc' class name`, ()=>{
+                    assert(wrapper.hasClass(`weui_media_desc`));
+                });
+
+                it(`should have custom class name ${clazz}`, ()=>{
+                    if (clazz) {
+                        assert(wrapper.hasClass(`${clazz}`));
+                    }
+                });
+
+                it(`should have child ${child}`, ()=>{
+                    assert(wrapper.contains(child));
+                });
+            });
+        });
+    });
+});
\ No newline at end of file
diff --git a/test/mediabox_header.js b/test/mediabox_header.js
new file mode 100644
index 0000000..abbffee
--- /dev/null
+++ b/test/mediabox_header.js
@@ -0,0 +1,50 @@
+/**
+ * Created by n7best.
+ */
+
+"use strict";
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import assert from 'assert';
+import WeUI from '../src/index';
+
+const {MediaBoxHeader} = WeUI;
+
+describe('<MediaBoxHeader></MediaBoxHeader>', ()=> {
+    [undefined, null, '', 'custom_class'].map((clazz)=>{
+        ['MediaBox header wording', <img src="http://mmrb.github.io/avatar/jf.jpg" />, <p>MediaBox header wording</p>].map((child)=>{
+            describe(`<MediaBoxHeader className=${clazz}>${child}</MediaBoxHeader>`, ()=>{
+                const wrapper = shallow(
+                    <MediaBoxHeader className={clazz}>{child}</MediaBoxHeader>
+                );
+
+                it(`should render <MediaBoxHeader></MediaBoxHeader> component `, ()=>{
+                    assert(wrapper.instance() instanceof MediaBoxHeader);
+                });
+
+                it(`should have 'weui_media_hd' class name`, ()=>{
+                    assert(wrapper.hasClass(`weui_media_hd`));
+                });
+
+                it(`should have custom class name ${clazz}`, ()=>{
+                    if (clazz) {
+                        assert(wrapper.hasClass(`${clazz}`));
+                    }
+                });
+
+                it(`should have child ${child}`, ()=>{
+                    if(wrapper.children().first().type() !== 'img'){
+                        assert(wrapper.contains(child));
+                    }
+                });
+
+                it(`should render img child without classname with weui_media_appmsg_thumb class`, ()=>{
+                    if(wrapper.children().first().type() == 'img'){
+                        assert(wrapper.children().first().hasClass(`weui_media_appmsg_thumb`));
+                    }
+                });
+            });
+        });
+    });
+});
\ No newline at end of file
diff --git a/test/mediabox_info.js b/test/mediabox_info.js
new file mode 100644
index 0000000..eb9936f
--- /dev/null
+++ b/test/mediabox_info.js
@@ -0,0 +1,65 @@
+/**
+ * Created by n7best.
+ */
+
+"use strict";
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import assert from 'assert';
+import WeUI from '../src/index';
+
+const {MediaBoxInfo, MediaBoxInfoMeta} = WeUI;
+const testdata = [
+    {
+        label: 'no extra'
+    },
+    {
+        label: 'yes extra',
+        extra: true
+    }
+];
+
+describe('<MediaBoxInfo></MediaBoxInfo>', ()=> {
+    [testdata, []].map(data=>{
+        [true, false].map(extra=>{
+            [undefined, null, '', 'custom_class'].map((clazz)=>{
+                ['MediaBox Info wording', <img src="http://mmrb.github.io/avatar/jf.jpg" />, <p>MediaBox Info wording</p>].map((child)=>{
+                    describe(`<MediaBoxInfo data=${data} className=${clazz} extra=${extra}>${child}</MediaBoxInfo>`, ()=>{
+                        const wrapper = shallow(
+                            <MediaBoxInfo data={data} className={clazz} extra={extra}>{child}</MediaBoxInfo>
+                        );
+
+                        it(`should render <MediaBoxInfo></MediaBoxInfo> component `, ()=>{
+                            assert(wrapper.instance() instanceof MediaBoxInfo);
+                        });
+
+                        it(`should have 'weui_media_info' class name`, ()=>{
+                            assert(wrapper.hasClass(`weui_media_info`));
+                        });
+
+                        it(`should have custom class name ${clazz}`, ()=>{
+                            if (clazz) {
+                                assert(wrapper.hasClass(`${clazz}`));
+                            }
+                        });
+
+                        it(`should render testDatas with 2 metas, second one with extra tag`, ()=>{
+                            if(data.length > 0){
+                                assert(wrapper.find(MediaBoxInfoMeta).first().shallow().hasClass(`weui_media_info_meta`));
+                                assert(wrapper.find(MediaBoxInfoMeta).last().shallow().hasClass(`weui_media_info_meta`));
+                                assert(wrapper.find(MediaBoxInfoMeta).last().shallow().hasClass(`weui_media_info_meta_extra`));
+                            }
+                        });
+
+                        it(`should have child ${child}`, ()=>{
+                            if(data.length == 0){
+                                assert(wrapper.contains(child));
+                            }
+                        });
+                    });
+                });
+            });
+        });
+    });
+});
\ No newline at end of file
diff --git a/test/mediabox_info_meta.js b/test/mediabox_info_meta.js
new file mode 100644
index 0000000..4147224
--- /dev/null
+++ b/test/mediabox_info_meta.js
@@ -0,0 +1,50 @@
+/**
+ * Created by n7best.
+ */
+
+"use strict";
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import assert from 'assert';
+import WeUI from '../src/index';
+
+const {MediaBoxInfoMeta} = WeUI;
+
+describe('<MediaBoxInfoMeta></MediaBoxInfoMeta>', ()=> {
+    [true, false].map(extra=>{
+        [undefined, null, '', 'custom_class'].map((clazz)=>{
+            ['MediaBox InfoMeta wording', <img src="http://mmrb.github.io/avatar/jf.jpg" />, <p>MediaBox InfoMeta wording</p>].map((child)=>{
+                describe(`<MediaBoxInfoMeta className=${clazz} extra=${extra}>${child}</MediaBoxInfoMeta>`, ()=>{
+                    const wrapper = shallow(
+                        <MediaBoxInfoMeta className={clazz} extra={extra}>{child}</MediaBoxInfoMeta>
+                    );
+
+                    it(`should render <MediaBoxInfoMeta></MediaBoxInfoMeta> component `, ()=>{
+                        assert(wrapper.instance() instanceof MediaBoxInfoMeta);
+                    });
+
+                    it(`should have 'weui_media_info_meta' class name`, ()=>{
+                        assert(wrapper.hasClass(`weui_media_info_meta`));
+                    });
+
+                    it(`should have 'weui_media_info_meta_extra' class name if extra is true`, ()=>{
+                        if(extra) assert(wrapper.hasClass(`weui_media_info_meta_extra`));
+                    });
+
+                    it(`should have custom class name ${clazz}`, ()=>{
+                        if (clazz) {
+                            assert(wrapper.hasClass(`${clazz}`));
+                        }
+                    });
+
+                    it(`should have child ${child}`, ()=>{
+                        if(wrapper.children().first().type() !== 'img'){
+                            assert(wrapper.contains(child));
+                        }
+                    });
+                });
+            });
+        });
+    });
+});
\ No newline at end of file
diff --git a/test/mediabox_title.js b/test/mediabox_title.js
new file mode 100644
index 0000000..5fa7970
--- /dev/null
+++ b/test/mediabox_title.js
@@ -0,0 +1,42 @@
+/**
+ * Created by n7best
+ */
+
+"use strict";
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import assert from 'assert';
+import WeUI from '../src/index';
+
+const {MediaBoxTitle} = WeUI;
+
+describe('<MediaBoxTitle></MediaBoxTitle>', ()=> {
+    [undefined, null, '', 'custom_class'].map((clazz)=>{
+        ['MediaBox Title wording', <img src="http://mmrb.github.io/avatar/jf.jpg" />, <div><h2 className="title">文章标题</h2><p className="desc">文章描述</p></div>].map((child)=>{
+            describe(`<MediaBoxTitle className=${clazz}>${child}</MediaBoxTitle>`, ()=>{
+                const wrapper = shallow(
+                    <MediaBoxTitle className={clazz}>{child}</MediaBoxTitle>
+                );
+
+                it(`should render <MediaBoxTitle></MediaBoxTitle> component `, ()=>{
+                    assert(wrapper.instance() instanceof MediaBoxTitle);
+                });
+
+                it(`should have 'weui_media_title' class name`, ()=>{
+                    assert(wrapper.hasClass(`weui_media_title`));
+                });
+
+                it(`should have custom class name ${clazz}`, ()=>{
+                    if (clazz) {
+                        assert(wrapper.hasClass(`${clazz}`));
+                    }
+                });
+
+                it(`should have child ${child}`, ()=>{
+                    assert(wrapper.contains(child));
+                });
+            });
+        });
+    });
+});
\ No newline at end of file
diff --git a/test/textarea.js b/test/textarea.js
index 0e0aeb4..578daef 100644
--- a/test/textarea.js
+++ b/test/textarea.js
@@ -16,8 +16,11 @@ describe('<TextArea></TextArea>', ()=> {
         [true, false].map(showCounter=>{
             [undefined, null, 'custom_class'].map(clazz => {
                 describe(`<TextArea className=${clazz} showCounter=${showCounter} defaultValue=${defaultValue}></TextArea>`, ()=> {
+                    let testValue = null;
+                    const testOnChange = (e)=>testValue = e.target.value;
+
                     const wrapper = shallow(
-                        <TextArea className={clazz} showCounter={showCounter} defaultValue={defaultValue}/>
+                        <TextArea className={clazz} showCounter={showCounter} defaultValue={defaultValue} onChange={testOnChange}/>
                     );
 
                     it(`should render <TextArea></TextArea> component`, ()=> {
@@ -40,13 +43,21 @@ describe('<TextArea></TextArea>', ()=> {
                         }
                     });
 
-                    //require mount but currently not working
-                    /*it(`should have state of textCounter 5 after simulation input`, ()=> {
-                        let _textarea = wrapper.find('textarea').get(0);
-                        _textarea.value = 'hello';
-                        wrapper.find('textarea').first().simulate('change');
+                    it(`should have state of textCounter 5 after simulation input`, ()=> {
+                        let _textarea = wrapper.find('textarea');
+                        _textarea.simulate('change',{target:{value:'hello'}});
                         assert.equal(5,wrapper.state().textCounter);
-                    });*/
+                    });
+
+                    it(`should have return the on change event if onChange is state`, ()=> {
+                        let _textarea = wrapper.find('textarea'),
+                            testString = 'hello';
+                        //reset
+                        testValue = null;
+
+                        _textarea.simulate('change',{target:{value:testString}});
+                        assert.equal(testString,testValue);
+                    });
 
                     it(`should have custom class name ${clazz} when className is not null or empty`, ()=>{
                         if (clazz) {
diff --git a/test/uploader.js b/test/uploader.js
index 11f30aa..d703e44 100644
--- a/test/uploader.js
+++ b/test/uploader.js
@@ -5,9 +5,12 @@
 "use strict";
 
 import React from 'react';
+import ReactDOM from 'react-dom';
+import TestUtils from 'react-addons-test-utils';
 import { shallow } from 'enzyme';
 import assert from 'assert';
 import WeUI from '../src/index';
+var jsdom = require('jsdom');
 
 const {Uploader} = WeUI;
 const files = [
@@ -39,10 +42,9 @@ describe('<Uploader></Uploader>', ()=> {
         [undefined, 5, 30].map(maxCount=> {
             [files, []].map(files=> {
                 describe(`<Uploader lang=${lang} title=${title} files=${files} maxCount=${maxCount}></Uploader>`, ()=> {
-                    let verifyFiles = {};
                     let verifyErrors;
                     const wrapper = shallow(
-                        <Uploader lang={lang} title={title} files={files} maxCount={maxCount} onError={msg=>verifyErrors=msg} onChange={_files=>verifyFiles=_files}/>
+                        <Uploader lang={lang} title={title} files={files} maxCount={maxCount} onError={msg=>verifyErrors=msg}/>
                     );
 
                     it('should render <Uploader></Uploader> component', () => {
@@ -129,11 +131,65 @@ describe('<Uploader></Uploader>', ()=> {
                         }
                     });
 
-                    it('should render files', () => {
-                        //currently can't test filereaders
+                    it('should return nothing on event when no file is chose', () => {
+                        let beforeHtml = bd.last().html();
+                        let input = assert(bd.last().find('input'));
+                        let changefiles = [];
+                        bd.last().find('input').simulate('change',{target:{files:changefiles}});
+                        assert.equal(bd.last().html(),beforeHtml);
+
                     });
                 });
             });
         });
     });
-});
\ No newline at end of file
+});
+describe('<Uploader></Uploader>', ()=> {
+    let verifyFiles = {};
+    let changefiles = {target:{files:{ 0: {
+        name:'foo.jpg',
+        size: 500001,
+        lastModified: 1452633679000,
+        lastModifiedDate: new Date(),
+        type: "image/jpeg"
+    }}}};
+    before(function (done) {
+        //setup jsdom
+       global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
+       global.window = document.defaultView;
+       global.navigator = {userAgent: 'node.js'};
+
+       //real handler
+       var changeHandle = (_files)=>{
+            verifyFiles = _files;
+            done();
+       };
+
+       //setup uploader
+       var uploader = TestUtils.renderIntoDocument(
+           <Uploader onChange={changeHandle}/>
+       );
+       //get node
+       var uploaderNode = ReactDOM.findDOMNode(uploader);
+
+       //mock event to trigger async
+       var event = document.createEvent("HTMLEvents");
+       event.initEvent('onChange', true, true);
+       event.eventName = "onChange";
+
+       //mock handler
+       uploaderNode.addEventListener("onChange", function(e) {
+         //trigger real handler
+         uploader.handleChange = uploader.handleChange.bind(uploader);
+         uploader.handleChange(changefiles);
+       });
+
+       setTimeout(function(){
+           uploaderNode.dispatchEvent(event);
+       }, 50);
+    })
+
+    it('should process files when input a image', () => {
+        assert.equal(verifyFiles, changefiles.target.files[0]);
+    });
+});