-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #8 from kwl777/react16
React16
- Loading branch information
Showing
4 changed files
with
102 additions
and
107 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -27,3 +27,5 @@ spm_modules | |
| dist | ||
| build | ||
| assets/**/*.css | ||
| coverage | ||
| package-lock.json | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,123 +1,118 @@ | ||
| import expect from 'expect.js'; | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import TestUtils, {Simulate} from 'react-addons-test-utils'; | ||
| import assign from 'object-assign'; | ||
| import Enzyme, {mount, shallow} from 'enzyme'; | ||
| import Adapter from 'enzyme-adapter-react-15'; | ||
| import Enzyme, { mount } from 'enzyme'; | ||
| import Adapter from 'enzyme-adapter-react-16'; | ||
| import Radiogroup from '../src'; | ||
| import RadiogroupItem from '../src/RadiogroupItem'; | ||
|
|
||
| Enzyme.configure({adapter: new Adapter()}); | ||
| Enzyme.configure({ adapter: new Adapter() }); | ||
|
|
||
| function renderWithProps(someProps) { | ||
| const props = { | ||
| value: {}, | ||
| disabled: false | ||
| }; | ||
| const items = [ | ||
| {disabled: false, value: "apple", text: "苹果"}, | ||
| {value: "banana", text: "香蕉"}, | ||
| {value: "orange", text: "橘子"}, | ||
| ]; | ||
| assign(props, someProps); | ||
| let RadiogroupItems = items.map(function (v, i) { | ||
| return <RadiogroupItem disabled={v.disabled} value={v.value} text={v.text}/>; | ||
| }); | ||
| const wrapper = mount(<Radiogroup {...props}> | ||
| {RadiogroupItems} | ||
| </Radiogroup>); | ||
| return wrapper; | ||
| const props = { | ||
| value: {}, | ||
| disabled: false, | ||
| }; | ||
| const items = [ | ||
| { disabled: false, value: 'apple', text: '苹果' }, | ||
| { value: 'banana', text: '香蕉' }, | ||
| { value: 'orange', text: '橘子' }, | ||
| ]; | ||
| assign(props, someProps); | ||
| let RadiogroupItems = items.map(v => { | ||
| return <RadiogroupItem disabled={v.disabled} value={v.value} text={v.text} />; | ||
| }); | ||
| const wrapper = mount(<Radiogroup {...props}>{RadiogroupItems}</Radiogroup>); | ||
| return wrapper; | ||
| } | ||
|
|
||
| function renderWithProps2() { | ||
| class Demo extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = {}; | ||
| } | ||
| class Demo extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = {}; | ||
| } | ||
|
|
||
| handleChange(value) { | ||
| const me = this; | ||
| me.setState({ | ||
| value, | ||
| }); | ||
| } | ||
| handleChange(value) { | ||
| const me = this; | ||
| me.setState({ | ||
| value, | ||
| }); | ||
| } | ||
|
|
||
| render() { | ||
| const me = this; | ||
| const items = [ | ||
| {disabled: false, value: "apple", text: "苹果"}, | ||
| {value: "banana", text: "香蕉"}, | ||
| {value: "orange", text: "橘子"}, | ||
| ]; | ||
| let RadiogroupItems = items.map(function (v, i) { | ||
| return <RadiogroupItem disabled={v.disabled} value={v.value} text={v.text}/>; | ||
| }); | ||
| render() { | ||
| const me = this; | ||
| const items = [ | ||
| { disabled: false, value: 'apple', text: '苹果' }, | ||
| { value: 'banana', text: '香蕉' }, | ||
| { value: 'orange', text: '橘子' }, | ||
| ]; | ||
| let RadiogroupItems = items.map(v => { | ||
| return <RadiogroupItem disabled={v.disabled} value={v.value} text={v.text} />; | ||
| }); | ||
|
|
||
| return (<Radiogroup value={me.state.value} onChange={me.handleChange.bind(me)} disabled> | ||
| {RadiogroupItems} | ||
| </Radiogroup>); | ||
| } | ||
| return ( | ||
| <Radiogroup value={me.state.value} onChange={me.handleChange.bind(me)} disabled> | ||
| {RadiogroupItems} | ||
| </Radiogroup> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| return mount( | ||
| <Demo/> | ||
| ); | ||
| return mount(<Demo />); | ||
| } | ||
|
|
||
| function renderWithProps3() { | ||
| class Demo extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = {}; | ||
| } | ||
| // function renderWithProps3() { | ||
| // class Demo extends React.Component { | ||
| // constructor(props) { | ||
| // super(props); | ||
| // this.state = {}; | ||
| // } | ||
|
|
||
| handleChange(value) { | ||
| const me = this; | ||
| me.setState({ | ||
| value, | ||
| }); | ||
| } | ||
| // handleChange(value) { | ||
| // const me = this; | ||
| // me.setState({ | ||
| // value, | ||
| // }); | ||
| // } | ||
|
|
||
| render() { | ||
| const me = this; | ||
| const items = [ | ||
| {disabled: false, value: "apple", text: "苹果"}, | ||
| {value: "banana", text: "香蕉"}, | ||
| {value: "orange", text: "橘子"}, | ||
| ]; | ||
| let RadiogroupItems = items.map(function (v, i) { | ||
| return <RadiogroupItem disabled={v.disabled} value={v.value} text={v.text}/>; | ||
| }); | ||
| // render() { | ||
| // const me = this; | ||
| // const items = [ | ||
| // { disabled: false, value: 'apple', text: '苹果' }, | ||
| // { value: 'banana', text: '香蕉' }, | ||
| // { value: 'orange', text: '橘子' }, | ||
| // ]; | ||
| // let RadiogroupItems = items.map(v => { | ||
| // return <RadiogroupItem disabled={v.disabled} value={v.value} text={v.text} />; | ||
| // }); | ||
|
|
||
| return (<Radiogroup value={me.state.value} onChange={me.handleChange.bind(me)} disabled> | ||
| {RadiogroupItems} | ||
| </Radiogroup>); | ||
| } | ||
| } | ||
| // return ( | ||
| // <Radiogroup value={me.state.value} onChange={me.handleChange.bind(me)} disabled> | ||
| // {RadiogroupItems} | ||
| // </Radiogroup> | ||
| // ); | ||
| // } | ||
| // } | ||
|
|
||
| return shallow( | ||
| <Demo/> | ||
| ); | ||
| } | ||
| // return shallow(<Demo />); | ||
| // } | ||
|
|
||
| describe('Radiogroup', () => { | ||
| describe('render', () => { | ||
| it('should render correctly', (done) => { | ||
| const wrapper = renderWithProps(); | ||
| expect(wrapper.find('.kuma-radio-group-item').length).to.be(3); | ||
| done(); | ||
| }); | ||
| describe('render', () => { | ||
| it('should render correctly', done => { | ||
| const wrapper = renderWithProps(); | ||
| expect(wrapper.find('.kuma-radio-group-item').length).to.be(3); | ||
| done(); | ||
| }); | ||
| }); | ||
|
|
||
| describe('control', () => { | ||
| const wrapper = renderWithProps2(); | ||
| it('should handle control correctly', (done) => { | ||
| wrapper.instance().handleChange("apple"); | ||
| expect(wrapper.instance().state.value).to.equal("apple"); | ||
| done(); | ||
| }); | ||
| describe('control', () => { | ||
| const wrapper = renderWithProps2(); | ||
| it('should handle control correctly', done => { | ||
| wrapper.instance().handleChange('apple'); | ||
| expect(wrapper.instance().state.value).to.equal('apple'); | ||
| done(); | ||
| }); | ||
|
|
||
| }); | ||
| }); | ||
| }); |