Skip to content

Commit

Permalink
Fix PickerView that accept one-dimensional array as data property (an…
Browse files Browse the repository at this point in the history
…t-design#2815)

* fix: transform one-dimensional-array to multi-dimensional-array

* docs: add example about one-dimensional array as `data` property

* test: update test snap for new example

* test: add unit test for PickerView

* docs: add example for cascade usage

* test: update demo snapshot
  • Loading branch information
oMaten authored and doxiaodong committed Sep 6, 2018
1 parent 1ecad9b commit 8b10644
Show file tree
Hide file tree
Showing 4 changed files with 393 additions and 43 deletions.
9 changes: 8 additions & 1 deletion components/picker-view/PickerView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,16 @@ export interface IPickerView {
export default class PickerView extends React.Component<IPickerView, any> {
static defaultProps = getDefaultProps();

isMultiPicker = () => {
if (!this.props.data) { return false; }
return Array.isArray(this.props.data[0]);
}
getCol = () => {
const { data, pickerPrefixCls, indicatorStyle, itemStyle } = this.props;
return (data as PickerData[][]).map((col, index) => {

const formattedData = this.isMultiPicker() ? data : [data];

return (formattedData as PickerData[][]).map((col, index) => {
return (
<RMCPicker
key={index}
Expand Down
210 changes: 182 additions & 28 deletions components/picker-view/__tests__/__snapshots__/demo.test.js.snap
Original file line number Diff line number Diff line change
@@ -1,57 +1,211 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders ./components/picker-view/demo/basic.md correctly 1`] = `
<div
class="am-picker"
style="flex-direction:row"
>
<div>
<div
class="am-picker-col"
style="flex:1"
class="am-picker"
style="flex-direction:row"
>
<div
class="am-picker-col-mask"
/>
<div
class="am-picker-col-indicator "
/>
<div
class="am-picker-col-content"
class="am-picker-col"
style="flex:1"
>
<div
class="am-picker-col-item am-picker-col-item-selected "
class="am-picker-col-mask"
/>
<div
class="am-picker-col-indicator "
/>
<div
class="am-picker-col-content"
>
2013
<div
class="am-picker-col-item am-picker-col-item-selected "
>
2013
</div>
<div
class="am-picker-col-item "
>
2014
</div>
</div>
</div>
<div
class="am-picker-col"
style="flex:1"
>
<div
class="am-picker-col-mask"
/>
<div
class="am-picker-col-item "
class="am-picker-col-indicator "
/>
<div
class="am-picker-col-content"
>
2014
<div
class="am-picker-col-item am-picker-col-item-selected "
>
</div>
<div
class="am-picker-col-item "
>
</div>
</div>
</div>
</div>
<div
class="am-picker-col"
style="flex:1"
class="am-whitespace am-whitespace-md"
/>
<div
class="am-whitespace am-whitespace-md"
/>
<div
class="am-picker"
style="flex-direction:row"
>
<div
class="am-picker-col-mask"
/>
class="am-picker-col"
style="flex:1"
>
<div
class="am-picker-col-mask"
/>
<div
class="am-picker-col-indicator "
/>
<div
class="am-picker-col-content"
>
<div
class="am-picker-col-item am-picker-col-item-selected "
>
</div>
<div
class="am-picker-col-item "
>
</div>
</div>
</div>
</div>
<div
class="am-whitespace am-whitespace-md"
/>
<div
class="am-whitespace am-whitespace-md"
/>
<div
class="am-picker"
style="flex-direction:row;align-items:center"
>
<div
class="am-picker-col-indicator "
/>
class="am-picker-col"
style="flex:1"
>
<div
class="am-picker-col-mask"
/>
<div
class="am-picker-col-indicator "
/>
<div
class="am-picker-col-content"
>
<div
class="am-picker-col-item "
>
北京
</div>
<div
class="am-picker-col-item am-picker-col-item-selected "
>
浙江
</div>
</div>
</div>
<div
class="am-picker-col-content"
class="am-picker-col"
style="flex:1"
>
<div
class="am-picker-col-item am-picker-col-item-selected "
class="am-picker-col-mask"
/>
<div
class="am-picker-col-indicator "
/>
<div
class="am-picker-col-content"
>
<div
class="am-picker-col-item am-picker-col-item-selected "
>
杭州
</div>
<div
class="am-picker-col-item "
>
宁波
</div>
<div
class="am-picker-col-item "
>
温州
</div>
<div
class="am-picker-col-item "
>
嘉兴
</div>
<div
class="am-picker-col-item "
>
湖州
</div>
<div
class="am-picker-col-item "
>
绍兴
</div>
</div>
</div>
<div
class="am-picker-col"
style="flex:1"
>
<div
class="am-picker-col-mask"
/>
<div
class="am-picker-col-indicator "
/>
<div
class="am-picker-col-item "
class="am-picker-col-content"
>
<div
class="am-picker-col-item am-picker-col-item-selected "
>
西湖区
</div>
<div
class="am-picker-col-item "
>
上城区
</div>
<div
class="am-picker-col-item "
>
江干区
</div>
<div
class="am-picker-col-item "
>
下城区
</div>
</div>
</div>
</div>
Expand Down
94 changes: 88 additions & 6 deletions components/picker-view/__tests__/index.test.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,92 @@
// import React from 'react';
// import PickerView from '../index';
import React from 'react';
import { mount } from 'enzyme';
import PickerView from '../index';

const createMap = label => ({ label, value: label });

describe('PickerView', () => {
// No need to render Snapshot again, because of `./demo.test.js`
it('trigger event correctly', () => {
// todos: write test!
expect(true).toBe(true);
const dataWithoutCascade = [
['2018', '2019', '2020'].map(createMap),
['Blade_Runner', 'Before_Midnight', 'Shutter_Island'].map(createMap),
];

const oneDimenData = ['2018', '2019', '2020'].map(createMap);

describe('with one-dimensional data', () => {
const wrapper = mount(<PickerView data={oneDimenData} cascade={false} />);

it('should render <PickerView /> component', () => {
expect(wrapper.exists('.am-picker')).toBe(true);
});

it('should contain value match data', () => {
expect(
oneDimenData.some(
({ value }, ii) =>
!(
wrapper
.find('.am-picker-col-item')
.at(ii)
.text() === value
),
),
).toBe(false);
});

it('should select default value', () => {
expect(
wrapper.find('.am-picker-col-item-selected').text() ===
oneDimenData[0].value,
).toBe(true);
});
});

describe('without cascade effect', () => {
const wrapper = mount(
<PickerView data={dataWithoutCascade} cascade={false} />,
);

it('should render <PickerView /> component', () => {
expect(wrapper.exists('.am-picker')).toBe(true);
});

it('should contain the same length column to data', () => {
expect(wrapper.find('.am-picker').children()).toHaveLength(
dataWithoutCascade.length,
);
});

it('should contain value match data', () => {
expect(
dataWithoutCascade.some((col, i) =>
col.some(
({ value }, ii) =>
!(
wrapper
.find('.am-picker')
.childAt(i)
.find('.am-picker-col-item')
.at(ii)
.text() === value
),
),
),
).toBe(false);
});

it('should select default value', () => {
expect(
dataWithoutCascade.some(
(col, i) =>
!(
wrapper
.find('.am-picker')
.childAt(i)
.find('.am-picker-col-item-selected')
.text() === col[0].value
),
),
).toBe(false);
});
});
});
Loading

0 comments on commit 8b10644

Please sign in to comment.