Merge pull request #16 from ImJustAMan/master

improve list component

src/List/ListItem.tsx

@@ -64,7 +64,6 @@ const ListItem: React.FC<IListItemPropsType> = props => {
 ListItem.defaultProps = {
   subtitle: '',
   extra: '',
-  showAll: false,
   arrow: 'none',
 };
 

src/List/PropsType.ts

@@ -9,11 +9,6 @@ type listItemArrowType = 'up' | 'down' | 'horizontal' | 'none';
  * List properties
  */
 export interface IListPropsType {
-  /**
-   * @description       是否设置列表圆角
-   * @default           false
-   */
-  radius?: boolean;
   /**
    * @description       列表头部内容
    * @default           ""
@@ -44,11 +39,6 @@ export interface IListItemPropsType {
    * @type              string | React.ReactElement
    */
   extra?: renderType;
-  /**
-   * @description       列表额外内容是否换行显示全部内容
-   * @default           false
-   */
-  showAll?: boolean;
   /**
    * @description       列表尾端箭头方向 设置none时不显示
    * @default           "none"

src/List/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`List List render correctly 1`] = `
+<div
+  className="h-list"
+>
+  <div
+    className="h-list-wrap"
+  >
+    <ListItem
+      arrow="horizontal"
+      extra="extra content"
+      subtitle="subtitle"
+      thumb="logo.png"
+    >
+      title
+    </ListItem>
+  </div>
+</div>
+`;

src/List/__tests__/index.spec.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import List from '@/List';
+import toJson from 'enzyme-to-json';
+
+const { Item } = List;
+
+describe('List', () => {
+  it('List render correctly', () => {
+    const wrapper = shallow(
+      <List>
+        <Item
+          subtitle="subtitle"
+          thumb={require('../../../public/images/logo.png')}
+          extra="extra content"
+          arrow="horizontal"
+        >
+          title
+        </Item>
+      </List>,
+    );
+
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+  describe('renderHeader', () => {
+    it('renderHeader is string', () => {
+      const wrapper = shallow(<List renderHeader="renderHeader" />);
+
+      expect(wrapper.find('.h-list-header').text()).toBe('renderHeader');
+    });
+
+    it('renderHeader is function', () => {
+      const wrapper = shallow(<List renderHeader={() => 'renderHeader'} />);
+
+      expect(wrapper.find('.h-list-header').text()).toBe('renderHeader');
+    });
+  });
+  describe('renderFooter', () => {
+    it('renderFooter is string', () => {
+      const wrapper = shallow(<List renderFooter="renderFooter" />);
+
+      expect(wrapper.find('.h-list-footer').text()).toBe('renderFooter');
+    });
+
+    it('renderFooter is function', () => {
+      const wrapper = shallow(<List renderFooter={() => 'renderFooter'} />);
+
+      expect(wrapper.find('.h-list-footer').text()).toBe('renderFooter');
+    });
+  });
+  describe('ListItem', () => {
+    it('subtitle', () => {
+      const wrapper = shallow(<Item subtitle="subtitle" />);
+
+      expect(wrapper.find('.h-list-item-subtitle').text()).toBe('subtitle');
+    });
+
+    it('extra', () => {
+      const wrapper = shallow(<Item extra="extra" />);
+
+      expect(wrapper.find('.h-list-item-extra').text()).toBe('extra');
+    });
+
+    it('arrow', () => {
+      const wrapper = shallow(<Item arrow="horizontal" />);
+
+      expect(wrapper.find('.icon-arrow-right')).toBeTruthy();
+    });
+
+    it('thumb', () => {
+      const wrapper = shallow(
+        <Item thumb={require('../../../public/images/logo.png')} />,
+      );
+
+      expect(wrapper.find('.h-list-item-thumb').find('img')).toBeTruthy();
+    });
+
+    it('onPress', () => {
+      const onPress = jest.fn();
+      const wrapper = shallow(<Item onPress={onPress} />);
+      wrapper.simulate('press');
+
+      expect(onPress).toBeCalled();
+    });
+  });
+});

src/List/index.tsx

@@ -28,7 +28,6 @@ const List: React.FC<IListPropsType> & { Item: typeof ListItem } = props => {
 
 List.Item = ListItem;
 List.defaultProps = {
-  radius: false,
   renderHeader: '',
   renderFooter: '',
 };