test: add antd testcase

Author: xudafeng

.travis.yml

@@ -12,6 +12,6 @@ install:
   - npm i
 script:
   - npm run lint
-  - npm run serve && npm run test
+  - npm run serve && npm run test:antd
 after_script:
   - npm install coveralls@2 && cat ./coverage/lcov.info | coveralls

antd-sample/app.jsx

@@ -9,6 +9,7 @@ import 'antd/dist/antd.css';
 import './app.less';
 
 import fetch from './common/fetch';
+import Login from './login.jsx';
 
 import {
   Layout,
@@ -22,14 +23,9 @@ import {
 const columns = [{
   title: 'Name',
   dataIndex: 'name',
-  // specify the condition of filtering result
-  // here is that finding the name started with `value`
-  onFilter: (value, record) => record.name.indexOf(value) === 0,
-  sorter: (a, b) => a.name.length - b.name.length,
 }, {
   title: 'Age',
   dataIndex: 'age',
-  defaultSortOrder: 'descend',
   sorter: (a, b) => a.age - b.age,
 }, {
   title: 'Address',
@@ -41,27 +37,23 @@ const columns = [{
     text: 'New York',
     value: 'New York',
   }],
-  filterMultiple: false,
-  onFilter: (value, record) => record.address.indexOf(value) === 0,
-  sorter: (a, b) => a.address.length - b.address.length,
 }];
 
-function onChange (pagination, filters, sorter) {
-  console.log('params', pagination, filters, sorter);
-}
-
 const Header = Layout.Header;
 const Footer = Layout.Footer;
 const Content = Layout.Content;
 
 const Option = Select.Option;
 
+const isLogin = location.hash === '#login';
+
 class App extends React.Component {
   constructor (props) {
     super(props);
     this.state = {
       loading: true,
       dataList: [],
+      buttonText: 'button',
     };
   }
 
@@ -89,23 +81,36 @@ class App extends React.Component {
     });
   }
 
+  onSelectChange(e) {
+    this.setState({
+      buttonText: e,
+    });
+  }
+
   render () {
+    if (isLogin) {
+      return <Login />;
+    }
     return (
       <Layout>
         <Header className="header"></Header>
         <Content style={{ padding: 30 }}>
-          <Select className="test-list" defaultValue="lucy" style={{ width: 120 }}>
+          <Select
+            className="test-list"
+            defaultValue="lucy"
+            onChange={this.onSelectChange.bind(this)}
+          >
             <Option value="jack">Jack</Option>
             <Option value="lucy">Lucy</Option>
             <Option value="disabled" disabled>Disabled</Option>
             <Option value="fourth">fourth</Option>
           </Select>
-          <Button onClick={this.doNotification.bind(this)}>A Button</Button>
+          <Button onClick={this.doNotification.bind(this)}>{this.state.buttonText}</Button>
           <Spin
             tip="Loading..."
             spinning={this.state.loading}
           >
-            <Table columns={columns} dataSource={this.state.dataList} onChange={onChange} />
+            <Table columns={columns} dataSource={this.state.dataList} />
           </Spin>
         </Content>
         <Footer/>

antd-sample/app.less

@@ -3,3 +3,8 @@
 body {
   font-family: "ProximaNova-Light", "Avenir Next", -apple-system-body, "Helvetica Neue", "Helvetica", sans-serif;
 }
+
+.test-list {
+  width: 120px;
+  margin: 10px 0;
+}

antd-sample/login.jsx

@@ -0,0 +1,77 @@
+'use strict';
+
+import 'intl';
+import React from 'react';
+
+import {
+  Form,
+  Icon,
+  Input,
+  Button,
+  Checkbox,
+} from 'antd';
+
+import './login.less';
+
+class NormalLoginForm extends React.Component {
+  handleSubmit = (e) => {
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        console.log('Received values of form: ', values);
+      }
+    });
+  }
+
+  render() {
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <Form onSubmit={this.handleSubmit} className="login-form">
+        <Form.Item>
+          {getFieldDecorator('userName', {
+            rules: [{ required: true, message: 'Please input your username!' }],
+          })(
+            <Input accessbilityId="username" prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('password', {
+            rules: [{ required: true, message: 'Please input your Password!' }],
+          })(
+            <Input accessbilityId="password" prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('remember', {
+            valuePropName: 'checked',
+            initialValue: true,
+          })(
+            <Checkbox>Remember me</Checkbox>
+          )}
+          <a className="login-form-forgot" href="">Forgot password</a>
+          <Button accessbilityId="login" type="primary" htmlType="submit" className="login-form-button">
+            Log in
+          </Button>
+          Or <a href="">register now!</a>
+        </Form.Item>
+      </Form>
+    );
+  }
+}
+
+const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm);
+
+export default class Login extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+    };
+  }
+
+  componentWillMount () {
+  }
+
+  render () {
+    return <WrappedNormalLoginForm />;
+  }
+}

antd-sample/login.less

@@ -0,0 +1,15 @@
+@import 'mixin.less';
+
+.login-form {
+  max-width: 350px;
+  margin: 0 auto;
+  margin-top: 15%;
+}
+
+.login-form-forgot {
+  float: right;
+}
+
+.login-form-button {
+  width: 100%;
+}

antd-sample/new-page.jsx

@@ -82,10 +82,10 @@ class App extends Component {
             >
               <div className="home">
                 <h1 style={{
-                   marginTop: '10%'
+                  marginTop: '10%'
                 }}>{CONSTANTS.TITLE}</h1>
                 <Button style={{
-                   marginTop: '70%'
+                  marginTop: '70%'
                 }} onClick={this.logoutHandle.bind(this)}>
                   List
                 </Button>
@@ -94,9 +94,9 @@ class App extends Component {
             <TabBar.Item
               icon={
                 <div style={{
-                width: '22px',
-                height: '22px',
-                background: `url(./img/[email protected]) center center /  54px 42px no-repeat` }}
+                  width: '22px',
+                  height: '22px',
+                  background: `url(./img/[email protected]) center center /  54px 42px no-repeat` }}
                 />
               }
               selectedIcon={
@@ -114,7 +114,7 @@ class App extends Component {
                   selectedTab: 'Webview'
                 });
               }}
-              >
+            >
               webview
             </TabBar.Item>
             <TabBar.Item
@@ -172,7 +172,7 @@ class App extends Component {
                 <h1>{CONSTANTS.TITLE}</h1>
                 <img alt={CONSTANTS.TITLE} src={`./img/avatar.png`} />
                 <Button style={{
-                   marginTop: '70%'
+                  marginTop: '70%'
                 }} onClick={this.logoutHandle.bind(this)}>Logout</Button>
               </div>
             </TabBar.Item>