fix bugs, add more test for uploader, increase coverage

weui · Mar 1, 2016 · 6b19cfe · 6b19cfe
1 parent 5454ffe
commit 6b19cfe
Show file tree

Hide file tree

Showing 20 changed files with 508 additions and 61 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
         );
     }
 };
diff --git 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>
         );
     }
 };
diff --git 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>
         );
     }
 };
diff --git 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>
         );
     }
 };
diff --git 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
@@ -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>
         );
     }
 };
diff --git 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>
         );
     }
 };
diff --git 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
@@ -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);
+                    });
+                });
+            });
+        });
+    });
+});
diff --git a/test/mediabox_body.js 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));
+                });
+            });
+        });
+    });
+});