test: add table selectionbox test

components/checkbox/Checkbox.jsx

@@ -15,6 +15,7 @@ export default {
     isGroup: Boolean,
     value: [String, Number, Boolean],
     name: String,
+    id: String,
     indeterminate: Boolean,
     type: PropTypes.string.def('checkbox'),
     autoFocus: Boolean,
@@ -113,6 +114,7 @@ export default {
       checkboxClass, name, $slots, sChecked,
       onFocus,
       onBlur,
+      id,
     } = this
     const {
       prefixCls,
@@ -136,7 +138,7 @@ export default {
         <span class={checkboxClass}>
           <input name={name} type='checkbox' disabled={disabled}
             class={`${prefixCls}-input`} checked={sChecked}
-            onChange={onChange} ref='input'
+            onChange={onChange} ref='input' id={id}
             onFocus={onFocus}
             onBlur={onBlur}
           />

components/radio/Radio.jsx

@@ -13,6 +13,7 @@ export default {
     isGroup: Boolean,
     value: PropTypes.any,
     name: String,
+    id: String,
   },
   model: {
     prop: 'checked',
@@ -87,13 +88,13 @@ export default {
     },
   },
   render () {
-    const { classes, checkboxClass, disabled, prefixCls, stateChecked, handleChange, name, $slots } = this
+    const { id, classes, checkboxClass, disabled, prefixCls, stateChecked, handleChange, name, $slots } = this
     return (
       <label class={classes}>
         <span class={checkboxClass}>
           <input name={name} type='radio' disabled={disabled}
             class={`${prefixCls}-input`} checked={stateChecked}
-            onChange={handleChange}
+            onChange={handleChange} id={id}
           />
           <span class={`${prefixCls}-inner`} />
         </span>

components/table/__tests__/SelectionBox.test.js

@@ -0,0 +1,145 @@
+import Vue from 'vue'
+import { mount } from '@vue/test-utils'
+import createStore from '../createStore'
+import SelectionBox from '../SelectionBox'
+
+const getDefaultStore = (selectedRowKeys) => {
+  return createStore({
+    selectedRowKeys: selectedRowKeys || [],
+    selectionDirty: false,
+  })
+}
+
+describe('SelectionBox', () => {
+  it('unchecked by selectedRowKeys ', () => {
+    const wrapper = mount(SelectionBox, {
+      propsData: {
+        store: getDefaultStore(),
+        rowIndex: '1',
+        disabled: false,
+        onChange: () => {},
+        defaultSelection: [],
+      },
+      listeners: {
+        change: () => {},
+      },
+      sync: false,
+    })
+
+    expect(wrapper.vm.$data).toEqual({ checked: false })
+  })
+
+  it('checked by selectedRowKeys ', () => {
+    const wrapper = mount(SelectionBox, {
+      propsData: {
+        store: getDefaultStore(['1']),
+        rowIndex: '1',
+        disabled: false,
+        onChange: () => {},
+        defaultSelection: [],
+      },
+      listeners: {
+        change: () => {},
+      },
+      sync: false,
+    })
+
+    expect(wrapper.vm.$data).toEqual({ checked: true })
+  })
+
+  it('checked by defaultSelection', () => {
+    const wrapper = mount(SelectionBox, {
+      propsData: {
+        store: getDefaultStore(),
+        rowIndex: '1',
+        disabled: false,
+        onChange: () => {},
+        defaultSelection: ['1'],
+      },
+      listeners: {
+        change: () => {},
+      },
+      sync: false,
+    })
+
+    expect(wrapper.vm.$data).toEqual({ checked: true })
+  })
+
+  it('checked when store change', () => {
+    const store = getDefaultStore()
+    const wrapper = mount(SelectionBox, {
+      propsData: {
+        store: store,
+        rowIndex: '1',
+        disabled: false,
+        defaultSelection: [],
+      },
+      listeners: {
+        change: () => {},
+      },
+      sync: false,
+    })
+
+    store.setState({
+      selectedRowKeys: ['1'],
+      selectionDirty: true,
+    })
+
+    expect(wrapper.vm.$data).toEqual({ checked: true })
+  })
+
+  it('passes props to Checkbox', (done) => {
+    const checkboxProps = {
+      name: 'testName',
+      id: 'testId',
+    }
+    const wrapper = mount(SelectionBox, {
+      propsData: {
+        store: getDefaultStore(),
+        rowIndex: '1',
+        disabled: false,
+        defaultSelection: ['1'],
+        ...checkboxProps,
+      },
+      listeners: {
+        change: () => {},
+      },
+      sync: false,
+    })
+    Vue.nextTick(() => {
+      wrapper.findAll({ name: 'ACheckbox' }).wrappers.forEach((box) => {
+        expect(box.props().name).toEqual(checkboxProps.name)
+        expect(box.props().id).toEqual(checkboxProps.id)
+      })
+      done()
+    })
+  })
+
+  it('passes props to Radios', (done) => {
+    const radioProps = {
+      name: 'testName',
+      id: 'testId',
+    }
+    const wrapper = mount(SelectionBox, {
+      propsData: {
+        store: getDefaultStore(),
+        rowIndex: '1',
+        disabled: false,
+        defaultSelection: ['1'],
+        type: 'radio',
+        ...radioProps,
+      },
+      listeners: {
+        change: () => {},
+      },
+      sync: false,
+    })
+    Vue.nextTick(() => {
+      wrapper.findAll({ name: 'ARadio' }).wrappers.forEach((radio) => {
+        expect(radio.props().name).toEqual(radioProps.name)
+        expect(radio.props().id).toEqual(radioProps.id)
+      })
+      done()
+    })
+  })
+})

components/table/__tests__/Table.filter.test.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { mount, render } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Table from '..'
 
 function $$ (className) {
@@ -266,90 +266,107 @@ describe('Table.filter', () => {
     }, 1000)
   })
 
-  // it('works with JSX in controlled mode', () => {
+  it('works with JSX in controlled mode', (done) => {
-  //   const { Column } = Table
+    const { Column } = Table
 
-  //   const App = {
+    const App = {
-  //     data () {
+      data () {
-  //       return {
+        return {
-  //         filters: {},
+          filters: {},
-  //       }
+        }
-  //     },
+      },
-  //     methods: {
+      methods: {
-  //       handleChange (pagination, filters) {
+        handleChange (pagination, filters) {
-  //         this.setState({ filters })
+          this.filters = filters
-  //       },
+        },
-  //     },
+      },
-  //     render () {
+      render () {
-  //       return (
+        return (
-  //         <Table dataSource={data} onChange={this.handleChange}>
+          <Table dataSource={data} onChange={this.handleChange}>
-  //           <Column
+            <Column
-  //             title='name'
+              title='name'
-  //             dataIndex='name'
+              dataIndex='name'
-  //             key='name'
+              key='name'
-  //             filters={[
+              filters={[
-  //               { text: 'Jack', value: 'Jack' },
+                { text: 'Jack', value: 'Jack' },
-  //               { text: 'Lucy', value: 'Lucy' },
+                { text: 'Lucy', value: 'Lucy' },
-  //             ]}
+              ]}
-  //             filteredValue={this.state.filters.name}
+              filteredValue={this.filters.name}
-  //             onFilter={filterFn}
+              onFilter={filterFn}
-  //           />
+            />
-  //         </Table>
+          </Table>
-  //       )
+        )
-  //     },
+      },
-  //   }
+    }
 
-  //   const wrapper = mount(App)
+    const wrapper = mount(App, { sync: false })
-  //   const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent())
+    const dropdownWrapper = mount({
+      render () {
+        return wrapper.find({ name: 'Trigger' }).vm.getComponent()
+      },
+    }, { sync: false, attachToDocument: true })
 
-  //   dropdownWrapper.find('MenuItem').at(0).trigger('click')
+    new Promise((reslove) => {
-  //   dropdownWrapper.find('.confirm').trigger('click')
+      Vue.nextTick(() => {
-  //   wrapper.update()
+        dropdownWrapper.find({ name: 'MenuItem' }).trigger('click')
-  //   expect(renderedNames(wrapper)).toEqual(['Jack'])
+        dropdownWrapper.find('.confirm').trigger('click')
+        reslove()
+      })
+    }).then(() => {
+      expect(renderedNames(wrapper)).toEqual(['Jack'])
+      dropdownWrapper.find('.clear').trigger('click')
+      setTimeout(() => {
+        expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry'])
+        Promise.resolve()
+      }, 0)
+    }).finally(() => {
+      done()
+    })
+  })
 
-  //   dropdownWrapper.find('.clear').trigger('click')
+  it('works with grouping columns in controlled mode', (done) => {
-  //   wrapper.update()
+    const columns = [
-  //   expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry'])
+      {
-  // })
+        title: 'group',
-
+        key: 'group',
-  // it('works with grouping columns in controlled mode', () => {
+        children: [
-  //   const columns = [
+          {
-  //     {
+            title: 'Name',
-  //       title: 'group',
+            dataIndex: 'name',
-  //       key: 'group',
+            key: 'name',
-  //       children: [
+            filters: [
-  //         {
+              { text: 'Jack', value: 'Jack' },
-  //           title: 'Name',
+              { text: 'Lucy', value: 'Lucy' },
-  //           dataIndex: 'name',
+            ],
-  //           key: 'name',
+            onFilter: filterFn,
-  //           filters: [
+            filteredValue: ['Jack'],
-  //             { text: 'Jack', value: 'Jack' },
+          },
-  //             { text: 'Lucy', value: 'Lucy' },
+          {
-  //           ],
+            title: 'Age',
-  //           onFilter: filterFn,
+            dataIndex: 'age',
-  //           filteredValue: ['Jack'],
+            key: 'age',
-  //         },
+          },
-  //         {
+        ],
-  //           title: 'Age',
+      },
-  //           dataIndex: 'age',
+    ]
-  //           key: 'age',
+    const testData = [
-  //         },
+      { key: 0, name: 'Jack', age: 11 },
-  //       ],
+      { key: 1, name: 'Lucy', age: 20 },
-  //     },
+      { key: 2, name: 'Tom', age: 21 },
-  //   ]
+      { key: 3, name: 'Jerry', age: 22 },
-  //   const testData = [
+    ]
-  //     { key: 0, name: 'Jack', age: 11 },
+    const wrapper = mount(Table, {
-  //     { key: 1, name: 'Lucy', age: 20 },
+      propsData: {
-  //     { key: 2, name: 'Tom', age: 21 },
+        columns,
-  //     { key: 3, name: 'Jerry', age: 22 },
+        dataSource: testData,
-  //   ]
+      },
-  //   const wrapper = mount(Table, {
+      sync: false,
-  //     columns,
+    })
-  //     dataSource: testData,
+    Vue.nextTick(() => {
-  //   })
+      expect(renderedNames(wrapper)).toEqual(['Jack'])
-
+      done()
-  //   expect(renderedNames(wrapper)).toEqual(['Jack'])
+    })
-  // })
+  })
 
 //   it('confirm filter when dropdown hidden', (done) => {
 //     const handleChange = jest.fn()

components/table/interface.js

@@ -173,6 +173,7 @@ export const SelectionBoxProps = {
   rowIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   name: PropTypes.string,
   disabled: PropTypes.bool,
+  id: PropTypes.string,
   // onChange: React.ChangeEventHandler<HTMLInputElement>;
 }