test: update table test

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

@@ -132,9 +132,12 @@ describe('Table.rowSelection', () => {
   // https://github.com/ant-design/ant-design/issues/4020
   it('handles defaultChecked', async () => {
     const rowSelection = {
-      getCheckboxProps: record => ({
+      getCheckboxProps: record => {
+        return {
+          props: {
             defaultChecked: record.key === 0,
-      }),
+          }}
+      },
     }
 
     const wrapper = mount(Table, getTableOptions({ rowSelection }))
@@ -145,13 +148,13 @@ describe('Table.rowSelection', () => {
       expect(checkboxs.at(2).vnode.data.domProps.checked).toBe(false)
       checkboxs.at(2).element.checked = true
       checkboxs.at(2).trigger('change')
-    })
+    }, 0)
 
     await asyncExpect(() => {
       const checkboxs = wrapper.findAll('input')
       expect(checkboxs.at(1).vnode.data.domProps.checked).toBe(true)
       expect(checkboxs.at(2).vnode.data.domProps.checked).toBe(true)
-    })
+    }, 1000)
   })
 
   it('can be controlled', async () => {
@@ -268,133 +271,146 @@ describe('Table.rowSelection', () => {
     expect(handleSelectInvert).toBeCalledWith([1, 2, 3])
   })
 
-  // it('fires selection event', () => {
+  it('fires selection event', () => {
-  //   const handleSelectOdd = jest.fn()
+    const handleSelectOdd = jest.fn()
-  //   const handleSelectEven = jest.fn()
+    const handleSelectEven = jest.fn()
-  //   const rowSelection = {
+    const rowSelection = {
-  //     selections: [{
+      selections: [{
-  //       key: 'odd',
+        key: 'odd',
-  //       text: '奇数项',
+        text: '奇数项',
-  //       onSelect: handleSelectOdd,
+        onSelect: handleSelectOdd,
-  //     }, {
+      }, {
-  //       key: 'even',
+        key: 'even',
-  //       text: '偶数项',
+        text: '偶数项',
-  //       onSelect: handleSelectEven,
+        onSelect: handleSelectEven,
-  //     }],
+      }],
-  //   }
+    }
-  //   const wrapper = mount(Table, getTableOptions({ rowSelection }))
+    const wrapper = mount(Table, getTableOptions({ rowSelection }))
-
+
-  //   const dropdownWrapper = mount({
+    const dropdownWrapper = mount({
-  //     render () {
+      render () {
-  //       return wrapper.find({ name: 'Trigger' }).vm.getComponent()
+        return wrapper.find({ name: 'Trigger' }).vm.getComponent()
-  //     },
+      },
-  //   })
+    }, { sync: false })
-  //   expect(dropdownWrapper.find('.ant-dropdown-menu-item').length).toBe(4)
+    expect(dropdownWrapper.findAll('.ant-dropdown-menu-item').length).toBe(4)
-
+
-  //   dropdownWrapper.find('.ant-dropdown-menu-item > div').at(2).trigger('click')
+    dropdownWrapper.findAll('.ant-dropdown-menu-item > div').at(2).trigger('click')
-  //   expect(handleSelectOdd).toBeCalledWith([0, 1, 2, 3])
+    expect(handleSelectOdd).toBeCalledWith([0, 1, 2, 3])
-
+
-  //   dropdownWrapper.find('.ant-dropdown-menu-item > div').at(3).trigger('click')
+    dropdownWrapper.findAll('.ant-dropdown-menu-item > div').at(3).trigger('click')
-  //   expect(handleSelectEven).toBeCalledWith([0, 1, 2, 3])
+    expect(handleSelectEven).toBeCalledWith([0, 1, 2, 3])
-  // })
+  })
-
+
-  // it('could hide default selection options', () => {
+  it('could hide default selection options', () => {
-  //   const rowSelection = {
+    const rowSelection = {
-  //     hideDefaultSelections: true,
+      hideDefaultSelections: true,
-  //     selections: [{
+      selections: [{
-  //       key: 'odd',
+        key: 'odd',
-  //       text: '奇数项',
+        text: '奇数项',
-  //     }, {
+      }, {
-  //       key: 'even',
+        key: 'even',
-  //       text: '偶数项',
+        text: '偶数项',
-  //     }],
+      }],
-  //   }
+    }
-  //   const wrapper = mount(Table, getTableOptions({ rowSelection }))
+    const wrapper = mount(Table, getTableOptions({ rowSelection }))
-  //   const dropdownWrapper = mount({
+    const dropdownWrapper = mount({
-  //     render () {
+      render () {
-  //       return wrapper.find({ name: 'Trigger' }).vm.getComponent()
+        return wrapper.find({ name: 'Trigger' }).vm.getComponent()
-  //     },
+      },
-  //   })
+    }, { sync: false })
-  //   expect(dropdownWrapper.find('.ant-dropdown-menu-item').length).toBe(2)
+    expect(dropdownWrapper.findAll('.ant-dropdown-menu-item').length).toBe(2)
-  // })
+  })
-
+
-  // it('handle custom selection onSelect correctly when hide default selection options', () => {
+  it('handle custom selection onSelect correctly when hide default selection options', () => {
-  //   const handleSelectOdd = jest.fn()
+    const handleSelectOdd = jest.fn()
-  //   const handleSelectEven = jest.fn()
+    const handleSelectEven = jest.fn()
-  //   const rowSelection = {
+    const rowSelection = {
-  //     hideDefaultSelections: true,
+      hideDefaultSelections: true,
-  //     selections: [{
+      selections: [{
-  //       key: 'odd',
+        key: 'odd',
-  //       text: '奇数项',
+        text: '奇数项',
-  //       onSelect: handleSelectOdd,
+        onSelect: handleSelectOdd,
-  //     }, {
+      }, {
-  //       key: 'even',
+        key: 'even',
-  //       text: '偶数项',
+        text: '偶数项',
-  //       onSelect: handleSelectEven,
+        onSelect: handleSelectEven,
-  //     }],
+      }],
-  //   }
+    }
-  //   const wrapper = mount(Table, getTableOptions({ rowSelection }))
+    const wrapper = mount(Table, getTableOptions({ rowSelection }))
-
+
-  //   const dropdownWrapper = mount({
+    const dropdownWrapper = mount({
-  //     render () {
+      render () {
-  //       return wrapper.find({ name: 'Trigger' }).vm.getComponent()
+        return wrapper.find({ name: 'Trigger' }).vm.getComponent()
-  //     },
+      },
-  //   })
+    }, { sync: false })
-  //   expect(dropdownWrapper.find('.ant-dropdown-menu-item').length).toBe(2)
+    expect(dropdownWrapper.findAll('.ant-dropdown-menu-item').length).toBe(2)
-
+
-  //   dropdownWrapper.find('.ant-dropdown-menu-item > div').at(0).trigger('click')
+    dropdownWrapper.findAll('.ant-dropdown-menu-item > div').at(0).trigger('click')
-  //   expect(handleSelectOdd).toBeCalledWith([0, 1, 2, 3])
+    expect(handleSelectOdd).toBeCalledWith([0, 1, 2, 3])
-
+
-  //   dropdownWrapper.find('.ant-dropdown-menu-item > div').at(1).trigger('click')
+    dropdownWrapper.findAll('.ant-dropdown-menu-item > div').at(1).trigger('click')
-  //   expect(handleSelectEven).toBeCalledWith([0, 1, 2, 3])
+    expect(handleSelectEven).toBeCalledWith([0, 1, 2, 3])
-  // })
+  })
-
+
-  // // https://github.com/ant-design/ant-design/issues/4245
+  // https:// github.com/ant-design/ant-design/issues/4245
-  // it('handles disabled checkbox correctly when dataSource changes', () => {
+  it('handles disabled checkbox correctly when dataSource changes', async () => {
-  //   const rowSelection = {
+    const rowSelection = {
-  //     getCheckboxProps: record => ({ disabled: record.disabled }),
+      getCheckboxProps: record => {
-  //   }
+        return { props: { disabled: record.disabled }}
-  //   const wrapper = mount(Table, getTableOptions({ rowSelection }))
+      },
-  //   const newData = [
+    }
-  //     { key: 0, name: 'Jack', disabled: true },
+    const wrapper = mount(Table, getTableOptions({ rowSelection }))
-  //     { key: 1, name: 'Lucy', disabled: true },
+    const newData = [
-  //   ]
+      { key: 7, name: 'Jack', disabled: true },
-  //   wrapper.setProps({ dataSource: newData })
+      { key: 8, name: 'Lucy', disabled: true },
-  //   wrapper.find('input').forEach((checkbox) => {
+    ]
-  //     expect(checkbox.props().disabled).toBe(true)
+    await asyncExpect(() => {
-  //   })
+      wrapper.setProps({ dataSource: newData })
-  // })
+    })
-
+    await asyncExpect(() => {
-  // // https://github.com/ant-design/ant-design/issues/4779
+      wrapper.findAll('input').wrappers.forEach((checkbox) => {
-  // it('should not switch pagination when select record', () => {
+        expect(checkbox.vnode.data.attrs.disabled).toBe(true)
-  //   const newData = []
+      })
-  //   for (let i = 0; i < 20; i += 1) {
+    })
-  //     newData.push({
+  })
-  //       key: i.toString(),
+
-  //       name: i.toString(),
+  // https://github.com/ant-design/ant-design/issues/4779
-  //     })
+  it('should not switch pagination when select record', async () => {
-  //   }
+    const newData = []
-  //   const wrapper = mount(Table, getTableOptions({
+    for (let i = 0; i < 20; i += 1) {
-  //     rowSelection: {},
+      newData.push({
-  //     dataSource: newData,
+        key: i.toString(),
-  //   }))
+        name: i.toString(),
-  //   wrapper.find('Pager').last().trigger('click') // switch to second page
+      })
-  //   wrapper.find('input').first().trigger('change', { target: { checked: true }})
+    }
-  //   wrapper.update()
+    const wrapper = mount(Table, getTableOptions({
-  //   expect(renderedNames(wrapper)).toEqual(['10', '11', '12', '13', '14', '15', '16', '17', '18', '19'])
+      rowSelection: {},
-  // })
+      dataSource: newData,
-
+    }))
-  // it('highlight selected row', () => {
+    const pager = wrapper.findAll({ name: 'Pager' })
-  //   const wrapper = mount(Table, getTableOptions())
+    pager.at(pager.length - 1).trigger('click') // switch to second page
-  //   wrapper.find('input').at(1).trigger('change', { target: { checked: true }})
+    wrapper.findAll('input').at(0).element.checked = true
-  //   expect(wrapper.find('tbody tr').at(0).hasClass('ant-table-row-selected')).toBe(true)
+    wrapper.findAll('input').at(0).trigger('change')
-  // })
+    await asyncExpect(() => {
-
+      expect(renderedNames(wrapper)).toEqual(['10', '11', '12', '13', '14', '15', '16', '17', '18', '19'])
-  // it('fix selection column on the left', () => {
+    })
-  //   const wrapper = mount(Table, getTableOptions({
+  })
-  //     rowSelection: { fixed: true },
+
-  //   }))
+  it('highlight selected row', async () => {
-
+    const wrapper = mount(Table, getTableOptions())
-  //   expect(wrapper).toMatchSnapshot()
+    wrapper.findAll('input').at(1).element.checked = true
-  // })
+    wrapper.findAll('input').at(1).trigger('change')
+    await asyncExpect(() => {
+      expect(wrapper.findAll('tbody tr').at(0).classes()).toContain('ant-table-row-selected')
+    })
+  })
+
+  it('fix selection column on the left', async () => {
+    const wrapper = mount(Table, getTableOptions({
+      rowSelection: { fixed: true },
+    }))
+    await asyncExpect(() => {
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+  })
 })

components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap

@@ -1,5 +1,117 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Table.rowSelection fix selection column on the left 1`] = `
+<div class="ant-table-wrapper"><span tag="div" class="ant-spin-nested-loading"><div class="ant-spin-container"><div class="ant-table ant-table-large ant-table-scroll-position-left ant-table-scroll-position-right"><div class="ant-table-content"><div class="ant-table-scroll"><!----><div class="ant-table-body"><table class=""><colgroup><col><col></colgroup><thead class="ant-table-thead"><tr><th key="selection-column" class="ant-table-selection-column"><span><div class="ant-table-selection"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+  </label>
+</div>
+</span>
+</th>
+<th key="name" class=""><span>Name</span></th>
+</tr>
+</thead>
+<tbody class="ant-table-tbody">
+  <tr class="ant-table-row  ant-table-row-level-0">
+    <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+      </label>
+      </span>
+    </td>
+    <td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
+      <!---->Jack</td>
+  </tr>
+  <tr class="ant-table-row  ant-table-row-level-0">
+    <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+      </label>
+      </span>
+    </td>
+    <td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
+      <!---->Lucy</td>
+  </tr>
+  <tr class="ant-table-row  ant-table-row-level-0">
+    <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+      </label>
+      </span>
+    </td>
+    <td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
+      <!---->Tom</td>
+  </tr>
+  <tr class="ant-table-row  ant-table-row-level-0">
+    <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+      </label>
+      </span>
+    </td>
+    <td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
+      <!---->Jerry</td>
+  </tr>
+</tbody>
+</table>
+</div>
+</div>
+<div class="ant-table-fixed-left">
+  <!---->
+  <div class="ant-table-body-outer">
+    <div class="ant-table-body-inner">
+      <table class="ant-table-fixed">
+        <colgroup>
+          <col>
+        </colgroup>
+        <thead class="ant-table-thead">
+          <tr>
+            <th key="selection-column" class="ant-table-selection-column"><span><div class="ant-table-selection"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+              </label>
+    </div>
+    </span>
+    </th>
+    </tr>
+    </thead>
+    <tbody class="ant-table-tbody">
+      <tr class="ant-table-row  ant-table-row-level-0">
+        <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+          </label>
+          </span>
+        </td>
+      </tr>
+      <tr class="ant-table-row  ant-table-row-level-0">
+        <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+          </label>
+          </span>
+        </td>
+      </tr>
+      <tr class="ant-table-row  ant-table-row-level-0">
+        <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+          </label>
+          </span>
+        </td>
+      </tr>
+      <tr class="ant-table-row  ant-table-row-level-0">
+        <td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span>
+          </label>
+          </span>
+        </td>
+      </tr>
+    </tbody>
+    </table>
+  </div>
+</div>
+</div>
+</div>
+</div>
+<ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
+  <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev">
+    <a class="ant-pagination-item-link"></a>
+  </li>
+  <li title="1" tabindex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active">
+    <a>1</a>
+  </li>
+  <li title="Next Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-next">
+    <a class="ant-pagination-item-link"></a>
+  </li>
+  <!---->
+</ul>
+</div>
+</span>
+</div>
+`;
+
 exports[`Table.rowSelection render with default selection correctly 1`] = `
 <div>
   <div class="ant-dropdown  ant-dropdown-placement-bottomLeft" style="display: none; left: -999px; top: -995px;">