vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2026-06-28 21:20:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bugfix/row selection (#131)

Browse Source 
* bugfix for missing radio button when single selection

* [test] correct and group the test for row selection

* re-order for better position
This commit is contained in:
chunming
2017-11-05 03:37:30 -06:00
committed by Allen
parent 316b4e5302
commit 79a81e87a5
4 changed files with 220 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/react-bootstrap-table2/src/header.js vendored
View File

@@ -7,7 +7,7 @@ import HeaderCell from './header-cell';
import SelectionHeaderCell from './row-selection/selection-header-cell';
const Header = (props) => {
const { ROW_SELECT_MULTIPLE } = Const;
const { ROW_SELECT_DISABLED } = Const;
const {
columns,
@@ -21,7 +21,7 @@ const Header = (props) => {
<thead>
<tr>
{
(selectRow.mode === ROW_SELECT_MULTIPLE && !selectRow.hideSelectColumn)
(selectRow.mode !== ROW_SELECT_DISABLED && !selectRow.hideSelectColumn)
? <SelectionHeaderCell { ...selectRow } /> : null
}
{

2
packages/react-bootstrap-table2/src/row.js vendored
View File

@@ -88,7 +88,7 @@ class Row extends Component {
return (
<tr style={ style } className={ className } { ...trAttrs }>
{
(selectRow.mode === Const.ROW_SELECT_MULTIPLE && !hideSelectColumn)
(selectRow.mode !== Const.ROW_SELECT_DISABLED && !hideSelectColumn)
? (
<SelectionCell
{ ...selectRow }

99
packages/react-bootstrap-table2/test/header.test.js
View File

@@ -51,25 +51,25 @@ describe('Header', () => {
});
});
describe('when the selectRow.mode is radio(single selection)', () => {
beforeEach(() => {
const selectRow = { mode: 'radio' };
wrapper = shallow(
<Header
{ ...mockHeaderResolvedProps }
columns={ columns }
selectRow={ selectRow }
/>
);
});
it('should not render <SelectionHeaderCell />', () => {
expect(wrapper.find(SelectionHeaderCell).length).toBe(0);
});
describe('when selectRow.hideSelectColumn is true', () => {
describe('selectRow', () => {
describe('when selectRow.mode is ROW_SELECT_DISABLED (row is not able to select)', () => {
beforeEach(() => {
const selectRow = { mode: 'radio', hideSelectColumn: true };
wrapper = shallow(
<Header
{ ...mockHeaderResolvedProps }
columns={ columns }
/>
);
});
it('should not render <SelectionHeaderCell />', () => {
expect(wrapper.find(SelectionHeaderCell).length).toBe(0);
});
});
describe('when selectRow.mode is radio (single selection)', () => {
beforeEach(() => {
const selectRow = { mode: 'radio' };
wrapper = shallow(
<Header
{ ...mockHeaderResolvedProps }
@@ -79,31 +79,31 @@ describe('Header', () => {
);
});
it('should rendering header with selection column', () => {
expect(wrapper.find(SelectionHeaderCell).length).toBe(0);
it('should render <SelectionHeaderCell />', () => {
expect(wrapper.find(SelectionHeaderCell).length).toBe(1);
});
describe('when selectRow.hideSelectColumn is true', () => {
beforeEach(() => {
const selectRow = { mode: 'radio', hideSelectColumn: true };
wrapper = shallow(
<Header
{ ...mockHeaderResolvedProps }
columns={ columns }
selectRow={ selectRow }
/>
);
});
it('should not render <SelectionHeaderCell />', () => {
expect(wrapper.find(SelectionHeaderCell).length).toBe(0);
});
});
});
});
describe('when the selectRow.mode is checkbox(multiple selection)', () => {
beforeEach(() => {
const selectRow = { mode: 'checkbox' };
wrapper = shallow(
<Header
{ ...mockHeaderResolvedProps }
columns={ columns }
selectRow={ selectRow }
/>
);
});
it('should render <SelectionHeaderCell />', () => {
expect(wrapper.find(SelectionHeaderCell).length).toBe(1);
});
describe('when selectRow.hideSelectColumn is true', () => {
describe('when selectRow.mode is checkbox (multiple selection)', () => {
beforeEach(() => {
const selectRow = { mode: 'checkbox', hideSelectColumn: true };
const selectRow = { mode: 'checkbox' };
wrapper = shallow(
<Header
{ ...mockHeaderResolvedProps }
@@ -113,8 +113,25 @@ describe('Header', () => {
);
});
it('should rendering header with selection column', () => {
expect(wrapper.find(SelectionHeaderCell).length).toBe(0);
it('should render <SelectionHeaderCell />', () => {
expect(wrapper.find(SelectionHeaderCell).length).toBe(1);
});
describe('when selectRow.hideSelectColumn is true', () => {
beforeEach(() => {
const selectRow = { mode: 'checkbox', hideSelectColumn: true };
wrapper = shallow(
<Header
{ ...mockHeaderResolvedProps }
columns={ columns }
selectRow={ selectRow }
/>
);
});
it('should not render <SelectionHeaderCell />', () => {
expect(wrapper.find(SelectionHeaderCell).length).toBe(0);
});
});
});
});

268
packages/react-bootstrap-table2/test/row.test.js
View File

@@ -463,50 +463,11 @@ describe('Row', () => {
});
});
describe('when selectRow.mode is ROW_SELECT_DISABLED (row was un-selectable)', () => {
beforeEach(() => {
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
rowIndex={ rowIndex }
columns={ defaultColumns }
row={ row }
/>
);
});
it('should not render SelectionCell component', () => {
expect(wrapper.find(SelectionCell).length).toBe(0);
});
});
describe('when selectRow.mode is checkbox or radio (row was selectable)', () => {
describe('selectRow', () => {
let selectRow;
beforeEach(() => {
selectRow = { mode: 'checkbox' };
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
rowIndex={ rowIndex }
columns={ defaultColumns }
row={ row }
selectRow={ selectRow }
selected
selectable
/>);
});
it('should rendering SelectionCell component correctly', () => {
expect(wrapper.find(SelectionCell).length).toBe(1);
});
it('should render SelectionCell component with correct props', () => {
expect(wrapper.find(SelectionCell).props().selected).toBeTruthy();
expect(wrapper.find(SelectionCell).props().disabled).toBeFalsy();
expect(wrapper.find(SelectionCell).props().mode).toEqual(selectRow.mode);
});
describe('if selectable prop is false', () => {
describe('when selectRow.mode is ROW_SELECT_DISABLED (row is not able to select)', () => {
beforeEach(() => {
wrapper = shallow(
<Row
@@ -514,79 +475,168 @@ describe('Row', () => {
rowIndex={ rowIndex }
columns={ defaultColumns }
row={ row }
keyField={ keyField }
selectRow={ selectRow }
selectable={ false }
/>);
/>
);
});
it('should render SelectionCell component with correct disable prop correctly', () => {
expect(wrapper.find(SelectionCell).length).toBe(1);
expect(wrapper.find(SelectionCell).prop('disabled')).toBeTruthy();
});
});
describe('if selectable prop is true', () => {
beforeEach(() => {
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
rowIndex={ rowIndex }
columns={ defaultColumns }
row={ row }
keyField={ keyField }
selectRow={ selectRow }
selectable
/>);
});
it('should render SelectionCell component with correct disable prop correctly', () => {
expect(wrapper.find(SelectionCell).length).toBe(1);
expect(wrapper.find(SelectionCell).prop('disabled')).toBeFalsy();
});
});
describe('if selectRow.clickToSelect is true', () => {
beforeEach(() => {
selectRow.clickToSelect = true;
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
rowIndex={ rowIndex }
columns={ defaultColumns }
row={ row }
selectRow={ selectRow }
selected
selectable
/>);
});
it('should render Row component successfully with onClick event', () => {
expect(wrapper.length).toBe(1);
expect(wrapper.find('tr').prop('onClick')).toBeDefined();
});
});
describe('if selectRow.hideSelectColumn is true', () => {
beforeEach(() => {
selectRow.hideSelectColumn = true;
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
rowIndex={ rowIndex }
columns={ defaultColumns }
row={ row }
selectRow={ selectRow }
selected
selectable
/>);
});
it('should render Row component without selection column', () => {
expect(wrapper.length).toBe(1);
it('should not render <SelectionCell />', () => {
expect(wrapper.find(SelectionCell).length).toBe(0);
});
});
describe('when selectRow.mode was defined (single or multiple selection)', () => {
describe('if selectRow.mode is radio (single selection)', () => {
beforeEach(() => {
selectRow = { mode: 'radio' };
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
rowIndex={ rowIndex }
columns={ defaultColumns }
row={ row }
selectRow={ selectRow }
selected
selectable
/>);
});
it('should render <SelectionCell />', () => {
expect(wrapper.find(SelectionCell).length).toBe(1);
});
it('should render <SelectionCell /> with correct props', () => {
expect(wrapper.find(SelectionCell).props().selected).toBeTruthy();
expect(wrapper.find(SelectionCell).props().disabled).toBeFalsy();
expect(wrapper.find(SelectionCell).props().mode).toEqual(selectRow.mode);
});
describe('when selectRow.hideSelectColumn is true', () => {
beforeEach(() => {
selectRow = { mode: 'radio', hideSelectColumn: true };
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
rowIndex={ rowIndex }
columns={ defaultColumns }
row={ row }
selectRow={ selectRow }
/>);
});
it('should not render <SelectionCell />', () => {
expect(wrapper.find(SelectionCell).length).toBe(0);
});
});
});
describe('if selectRow.mode is checkbox (multiple selection)', () => {
beforeEach(() => {
selectRow = { mode: 'checkbox' };
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
rowIndex={ rowIndex }
columns={ defaultColumns }
row={ row }
selectRow={ selectRow }
selected
selectable
/>);
});
it('should render <SelectionCell />', () => {
expect(wrapper.find(SelectionCell).length).toBe(1);
});
it('should render <SelectionCell /> with correct props', () => {
expect(wrapper.find(SelectionCell).props().selected).toBeTruthy();
expect(wrapper.find(SelectionCell).props().disabled).toBeFalsy();
expect(wrapper.find(SelectionCell).props().mode).toEqual(selectRow.mode);
});
describe('when selectRow.hideSelectColumn is true', () => {
beforeEach(() => {
selectRow = { mode: 'checkbox', hideSelectColumn: true };
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
rowIndex={ rowIndex }
columns={ defaultColumns }
row={ row }
selectRow={ selectRow }
/>);
});
it('should not render <SelectionCell />', () => {
expect(wrapper.find(SelectionCell).length).toBe(0);
});
});
});
describe('if selectable prop is false', () => {
beforeEach(() => {
selectRow = { mode: 'checkbox' };
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
rowIndex={ rowIndex }
columns={ defaultColumns }
row={ row }
keyField={ keyField }
selectRow={ selectRow }
selectable={ false }
/>);
});
it('should render SelectionCell component with correct disable prop correctly', () => {
expect(wrapper.find(SelectionCell).length).toBe(1);
expect(wrapper.find(SelectionCell).prop('disabled')).toBeTruthy();
});
});
describe('if selectable prop is true', () => {
beforeEach(() => {
selectRow = { mode: 'checkbox' };
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
rowIndex={ rowIndex }
columns={ defaultColumns }
row={ row }
keyField={ keyField }
selectRow={ selectRow }
selectable
/>);
});
it('should render SelectionCell component with correct disable prop correctly', () => {
expect(wrapper.find(SelectionCell).length).toBe(1);
expect(wrapper.find(SelectionCell).prop('disabled')).toBeFalsy();
});
});
describe('if selectRow.clickToSelect is true', () => {
beforeEach(() => {
selectRow = { mode: 'checkbox' };
selectRow.clickToSelect = true;
wrapper = shallow(
<Row
{ ...mockBodyResolvedProps }
rowIndex={ rowIndex }
columns={ defaultColumns }
row={ row }
selectRow={ selectRow }
selected
selectable
/>);
});
it('should render Row component successfully with onClick event', () => {
expect(wrapper.length).toBe(1);
expect(wrapper.find('tr').prop('onClick')).toBeDefined();
});
});
});
});
describe('handleRowClick', () => {