diff --git a/packages/react-bootstrap-table2/test/body.test.js b/packages/react-bootstrap-table2/test/body.test.js index ea624e5..2be26b1 100644 --- a/packages/react-bootstrap-table2/test/body.test.js +++ b/packages/react-bootstrap-table2/test/body.test.js @@ -1,11 +1,14 @@ +import 'jsdom-global/register'; import React from 'react'; import sinon from 'sinon'; -import { shallow } from 'enzyme'; +import { shallow, mount } from 'enzyme'; import Body from '../src/body'; import Row from '../src/row'; +import RowAggregator from '../src/row-aggregator'; import Const from '../src/const'; import RowSection from '../src/row-section'; +import SelectionContext from '../src/contexts/selection-context'; import mockBodyResolvedProps from './test-helpers/mock/body-resolved-props'; describe('Body', () => { @@ -169,92 +172,6 @@ describe('Body', () => { }); }); }); - - describe('when selectRow.style is defined', () => { - const selectedRowKey = data[0][keyField]; - const selectedRowKeys = [selectedRowKey]; - const selectedStyle = { backgroundColor: 'green', fontWeight: 'bold' }; - const selectRow = { mode: 'radio', style: selectedStyle }; - - beforeEach(() => { - wrapper = shallow( - ); - }); - - it('should rendering selected Row component with mixing selectRow.style correctly', () => { - const selectedRow = wrapper.find(Row).get(0); - expect(JSON.stringify(selectedRow.props.style)).toBe(JSON.stringify({ - ...rowStyle, - ...selectedStyle - })); - }); - - describe('and selectRow.bgColor is also defined', () => { - beforeEach(() => { - selectRow.bgColor = 'gray'; - wrapper = shallow( - ); - }); - - it('should rendering selected Row component with mixing selectRow.style correctly', () => { - const selectedRow = wrapper.find(Row).get(0); - expect(JSON.stringify(selectedRow.props.style)).toBe(JSON.stringify({ - ...rowStyle, - ...selectedStyle, - backgroundColor: selectRow.bgColor - })); - }); - - it('should render selected Row component with correct style.backgroundColor', () => { - const selectedRow = wrapper.find(Row).get(0); - expect(selectedRow.props.style.backgroundColor).toEqual(selectRow.bgColor); - }); - }); - }); - - describe('when selectRow.bgColor is defined', () => { - const selectedRowKey = data[0][keyField]; - const selectedRowKeys = [selectedRowKey]; - const selectRow = { mode: 'radio', bgColor: 'gray' }; - - beforeEach(() => { - selectRow.bgColor = 'gray'; - wrapper = shallow( - ); - }); - - it('should rendering selected Row component with correct style', () => { - const selectedRow = wrapper.find(Row).get(0); - expect(JSON.stringify(selectedRow.props.style)).toBe(JSON.stringify({ - ...rowStyle, - backgroundColor: selectRow.bgColor - })); - }); - }); }); describe('when rowClasses prop is defined', () => { @@ -310,31 +227,6 @@ describe('Body', () => { }); }); }); - - describe('when selectRow.classes is defined', () => { - const selectedRowKey = data[0][keyField]; - const selectedRowKeys = [selectedRowKey]; - const selectedClasses = 'selected-classes'; - const selectRow = { mode: 'radio', classes: selectedClasses }; - - beforeEach(() => { - wrapper = shallow( - ); - }); - - it('should rendering selected Row component with mixing selectRow.classes correctly', () => { - const selectedRow = wrapper.find(Row).get(0); - expect(selectedRow.props.className).toBe(`${rowClasses} ${selectedClasses}`); - }); - }); }); describe('when rowEvents prop is defined', () => { @@ -392,231 +284,6 @@ describe('Body', () => { }); }); - describe('when selectRow.mode is checkbox or radio (row was selectable)', () => { - const selectRow = { mode: 'checkbox' }; - const selectedRowKey = data[0][keyField]; - const selectedRowKeys = [selectedRowKey]; - - beforeEach(() => { - wrapper = shallow( - - ); - }); - - it('should render Row component with correct selected prop', () => { - const rows = wrapper.find(Row); - for (let i = 0; i < rows.length; i += 1) { - const row = rows.get(i); - expect(row.props.selected).toBe(selectedRowKeys.indexOf(row.props.row[keyField]) > -1); - } - }); - - describe('if selectRow.style is defined as an object', () => { - const style = { backgroundColor: 'red' }; - - beforeEach(() => { - selectRow.style = style; - wrapper = shallow( - - ); - }); - - it('should render Row component with correct style prop', () => { - expect(JSON.stringify(wrapper.find(Row).get(0).props.style)).toBe(JSON.stringify(style)); - }); - }); - - describe('if selectRow.style is defined as a function', () => { - const style = { backgroundColor: 'red' }; - const styleCallBack = sinon.stub().returns(style); - - beforeEach(() => { - selectRow.style = styleCallBack; - wrapper = shallow( - - ); - }); - - it('should calling style callback correctly', () => { - expect(styleCallBack.callCount).toBe(1); - expect(styleCallBack.calledWith(data[0]), 1); - }); - - it('should render Row component with correct style prop', () => { - expect(JSON.stringify(wrapper.find(Row).get(0).props.style)).toBe(JSON.stringify(style)); - }); - }); - - describe('if selectRow.classes is defined as a string', () => { - const className = 'custom-class'; - - beforeEach(() => { - selectRow.classes = className; - wrapper = shallow( - - ); - }); - - it('should render Row component with correct className prop', () => { - expect(wrapper.find(Row).get(0).props.className).toEqual(className); - }); - }); - - describe('if selectRow.classes is defined as a function', () => { - const className = 'custom-class'; - const classesCallBack = sinon.stub().returns(className); - - beforeEach(() => { - selectRow.classes = classesCallBack; - wrapper = shallow( - - ); - }); - - it('should calling style callback correctly', () => { - expect(classesCallBack.callCount).toBe(1); - expect(classesCallBack.calledWith(data[0]), 1); - }); - - it('should render Row component with correct style prop', () => { - expect(wrapper.find(Row).get(0).props.className).toEqual(className); - }); - }); - - describe('if selectRow.bgColor is defined as a string', () => { - const bgColor = 'red'; - - beforeEach(() => { - selectRow.bgColor = bgColor; - wrapper = shallow( - - ); - }); - - it('should render Row component with correct style.backgroundColor prop', () => { - expect(wrapper.find(Row).get(0).props.style).toEqual({ backgroundColor: bgColor }); - }); - }); - - describe('if selectRow.bgColor is defined as a string', () => { - const bgColor = 'red'; - const bgColorCallBack = sinon.stub().returns(bgColor); - - beforeEach(() => { - selectRow.bgColor = bgColorCallBack; - wrapper = shallow( - - ); - }); - - it('should calling selectRow.bgColor callback correctly', () => { - expect(bgColorCallBack.calledOnce).toBeTruthy(); - expect(bgColorCallBack.calledWith(data[0]), 1).toBeTruthy(); - }); - - it('should render Row component with correct style.backgroundColor prop', () => { - expect(wrapper.find(Row).get(0).props.style).toEqual({ backgroundColor: bgColor }); - }); - }); - - describe('if selectRow.bgColor defined and selectRow.style.backgroundColor defined', () => { - const bgColor = 'yellow'; - const style = { backgroundColor: 'red' }; - - beforeEach(() => { - selectRow.style = style; - selectRow.bgColor = bgColor; - wrapper = shallow( - - ); - }); - - it('should take selectRow.bgColor as higher priority', () => { - expect(wrapper.find(Row).get(0).props.style.backgroundColor).toBe(bgColor); - }); - }); - - describe('if selectRow.nonSelectable is defined', () => { - const nonSelectableRowIndex = 1; - const nonSelectable = [data[nonSelectableRowIndex][keyField]]; - - beforeEach(() => { - selectRow.nonSelectable = nonSelectable; - wrapper = shallow( - - ); - }); - - it('should render Row component with correct selectable prop', () => { - expect(wrapper.find(Row).get(0).props.selectable).toBeTruthy(); - expect(wrapper.find(Row).get(nonSelectableRowIndex).props.selectable).toBeFalsy(); - }); - }); - }); - describe('when selectRow.mode is ROW_SELECT_DISABLED (row was un-selectable)', () => { beforeEach(() => { wrapper = shallow( @@ -625,13 +292,34 @@ describe('Body', () => { data={ data } columns={ columns } keyField={ keyField } - selectedRowKeys={ [] } /> ); }); - it('prop selected should be null', () => { - expect(wrapper.find(Row).get(0).props.selected).toBeNull(); + it('prop selectRowEnabled on Row Component should be undefined', () => { + expect(wrapper.find(Row).get(0).props.selectRowEnabled).not.toBeDefined(); + }); + }); + + describe('when selectRow.mode is defined correctly', () => { + const selectRow = { mode: 'checkbox' }; + + beforeEach(() => { + wrapper = mount( + + + + ); + }); + + it('prop selectRowEnabled on RowAggregator Component should be defined', () => { + expect(wrapper.find(RowAggregator).get(0).props.selectRowEnabled).toBeTruthy(); }); }); }); diff --git a/packages/react-bootstrap-table2/test/contexts/selection-context.test.js b/packages/react-bootstrap-table2/test/contexts/selection-context.test.js index 819fada..49951dc 100644 --- a/packages/react-bootstrap-table2/test/contexts/selection-context.test.js +++ b/packages/react-bootstrap-table2/test/contexts/selection-context.test.js @@ -4,7 +4,7 @@ import { shallow } from 'enzyme'; import dataOperator from '../../src/store/operators'; import BootstrapTable from '../../src/bootstrap-table'; -import createSelectionContext from '../../src/contexts/selection-context'; +import SelectionContext from '../../src/contexts/selection-context'; describe('DataContext', () => { let wrapper; @@ -42,7 +42,6 @@ describe('DataContext', () => { const defaultSelectRow = { mode: 'checkbox' }; - const SelectionContext = createSelectionContext(dataOperator); function shallowContext(selectRow = defaultSelectRow) { return ( @@ -81,9 +80,13 @@ describe('DataContext', () => { it('should pass correct sort props to children element', () => { expect(wrapper.length).toBe(1); expect(mockBase).toHaveBeenCalledWith({ + ...defaultSelectRow, selected: wrapper.state().selected, onRowSelect: wrapper.instance().handleRowSelect, - onAllRowsSelect: wrapper.instance().handleAllRowsSelect + onAllRowsSelect: wrapper.instance().handleAllRowsSelect, + allRowsNotSelected: true, + allRowsSelected: false, + checkedStatus: 'unchecked' }); }); }); diff --git a/packages/react-bootstrap-table2/test/header.test.js b/packages/react-bootstrap-table2/test/header.test.js index d8db9cd..b278988 100644 --- a/packages/react-bootstrap-table2/test/header.test.js +++ b/packages/react-bootstrap-table2/test/header.test.js @@ -1,8 +1,10 @@ +import 'jsdom-global/register'; import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow, mount } from 'enzyme'; import HeaderCell from '../src/header-cell'; -import SelectionHeaderCell from '../src//row-selection/selection-header-cell'; +import SelectionHeaderCell from '../src/row-selection/selection-header-cell'; +import SelectionContext from '../src/contexts/selection-context'; import Header from '../src/header'; import Const from '../src/const'; import mockHeaderResolvedProps from './test-helpers/mock/header-resolved-props'; @@ -17,6 +19,16 @@ describe('Header', () => { text: 'Name' }]; + const data = [{ + id: 1, + name: 'A' + }, { + id: 2, + name: 'B' + }]; + + const keyField = 'id'; + describe('simplest header', () => { beforeEach(() => { wrapper = shallow(
); @@ -89,12 +101,18 @@ describe('Header', () => { describe('when selectRow.mode is radio (single selection)', () => { beforeEach(() => { const selectRow = { mode: 'radio' }; - wrapper = shallow( -
+ > +
+ ); }); @@ -105,12 +123,18 @@ describe('Header', () => { describe('when selectRow.hideSelectColumn is true', () => { beforeEach(() => { const selectRow = { mode: 'radio', hideSelectColumn: true }; - wrapper = shallow( -
+ > +
+ ); }); @@ -146,12 +170,17 @@ describe('Header', () => { describe('when selectRow.mode is checkbox (multiple selection)', () => { beforeEach(() => { const selectRow = { mode: 'checkbox' }; - wrapper = shallow( -
+ > +
+ ); }); @@ -162,12 +191,17 @@ describe('Header', () => { describe('when selectRow.hideSelectColumn is true', () => { beforeEach(() => { const selectRow = { mode: 'checkbox', hideSelectColumn: true }; - wrapper = shallow( -
+ > +
+ ); }); diff --git a/packages/react-bootstrap-table2/test/props-resolver/index.test.js b/packages/react-bootstrap-table2/test/props-resolver/index.test.js index d12ed1f..4543041 100644 --- a/packages/react-bootstrap-table2/test/props-resolver/index.test.js +++ b/packages/react-bootstrap-table2/test/props-resolver/index.test.js @@ -1,10 +1,8 @@ import React, { Component } from 'react'; -import sinon from 'sinon'; import { shallow } from 'enzyme'; import { extendTo } from '../test-helpers/mock-component'; import baseResolver from '../../src/props-resolver/index'; -import Const from '../../src/const'; describe('TableResolver', () => { const keyField = 'id'; @@ -71,231 +69,4 @@ describe('TableResolver', () => { }); }); }); - - describe('resolveSelectRowProps', () => { - let cellSelectionInfo; - let selectRow; - - describe('if selectRow was not defined', () => { - beforeEach(() => { - const mockElement = React.createElement(BootstrapTableMock, { - data, keyField, columns - }, null); - wrapper = shallow(mockElement); - cellSelectionInfo = wrapper.instance().resolveSelectRowProps(); - }); - - it('should return object', () => { - expect(cellSelectionInfo).toBeDefined(); - expect(cellSelectionInfo.constructor).toEqual(Object); - }); - - it('should contain mode in ROW_SELECT_DISABLED', () => { - expect(cellSelectionInfo.mode).toEqual(Const.ROW_SELECT_DISABLED); - }); - }); - - describe('if selectRow was defined', () => { - describe('when mode was defined', () => { - it('should return object which contains ROW_SELECT_SINGLE if mode is radio', () => { - selectRow = { mode: 'radio' }; - const mockElement = React.createElement(BootstrapTableMock, { - data, keyField, columns, selectRow - }, null); - wrapper = shallow(mockElement); - cellSelectionInfo = wrapper.instance().resolveSelectRowProps(); - - expect(cellSelectionInfo).toBeDefined(); - expect(cellSelectionInfo.constructor).toEqual(Object); - expect(cellSelectionInfo.mode).toEqual(Const.ROW_SELECT_SINGLE); - }); - - it('should return object which contains ROW_SELECT_MULTIPLE if mode is checkbox', () => { - selectRow = { mode: 'checkbox' }; - const mockElement = React.createElement(BootstrapTableMock, { - data, keyField, columns, selectRow - }, null); - wrapper = shallow(mockElement); - cellSelectionInfo = wrapper.instance().resolveSelectRowProps(); - - expect(cellSelectionInfo).toBeDefined(); - expect(cellSelectionInfo.constructor).toEqual(Object); - expect(cellSelectionInfo.mode).toEqual(Const.ROW_SELECT_MULTIPLE); - }); - }); - - describe('when options were given', () => { - beforeEach(() => { - selectRow = {}; - const mockOptions = { - foo: 'test', - bar: sinon.stub() - }; - const mockElement = React.createElement(BootstrapTableMock, { - data, keyField, columns, selectRow - }, null); - wrapper = shallow(mockElement); - cellSelectionInfo = wrapper.instance().resolveSelectRowProps(mockOptions); - }); - - it('should return object which contain options', () => { - expect(cellSelectionInfo).toEqual(expect.objectContaining({ - foo: 'test', - bar: expect.any(Function) - })); - }); - }); - }); - }); - - describe('resolveSelectRowPropsForHeader', () => { - let headerCellSelectionInfo; - let selectRow; - - beforeEach(() => { - const mockElement = React.createElement(BootstrapTableMock, { - data, keyField, columns - }, null); - wrapper = shallow(mockElement); - headerCellSelectionInfo = wrapper.instance().resolveSelectRowPropsForHeader(); - }); - - describe('if selectRow was not defined', () => { - it('should return object', () => { - expect(headerCellSelectionInfo).toBeDefined(); - expect(headerCellSelectionInfo.constructor).toEqual(Object); - }); - - it('should contain mode in ROW_SELECT_DISABLED', () => { - expect(headerCellSelectionInfo.mode).toEqual(Const.ROW_SELECT_DISABLED); - }); - }); - - describe('if selectRow was defined', () => { - describe('when mode was defined', () => { - it('should return object which contains ROW_SELECT_SINGLE if mode is radio', () => { - selectRow = { mode: 'radio' }; - const selectedRowKeys = []; - const mockElement = React.createElement(BootstrapTableMock, { - data, keyField, columns, selectedRowKeys, selectRow - }, null); - wrapper = shallow(mockElement); - headerCellSelectionInfo = wrapper.instance().resolveSelectRowPropsForHeader(); - - expect(headerCellSelectionInfo).toBeDefined(); - expect(headerCellSelectionInfo.constructor).toEqual(Object); - expect(headerCellSelectionInfo.mode).toEqual(Const.ROW_SELECT_SINGLE); - }); - - it('should return object which contains ROW_SELECT_MULTIPLE if mode is checkbox', () => { - selectRow = { mode: 'checkbox' }; - const selectedRowKeys = []; - const mockElement = React.createElement(BootstrapTableMock, { - data, keyField, columns, selectedRowKeys, selectRow - }, null); - wrapper = shallow(mockElement); - headerCellSelectionInfo = wrapper.instance().resolveSelectRowPropsForHeader(); - - expect(headerCellSelectionInfo).toBeDefined(); - expect(headerCellSelectionInfo.constructor).toEqual(Object); - expect(headerCellSelectionInfo.mode).toEqual(Const.ROW_SELECT_MULTIPLE); - }); - }); - - describe('when options were given', () => { - beforeEach(() => { - selectRow = {}; - const mockOptions = { - foo: 'test', - bar: sinon.stub(), - allRowsSelected: false, - selected: [] - }; - const selectedRowKeys = []; - const mockElement = React.createElement(BootstrapTableMock, { - data, keyField, columns, selectedRowKeys, selectRow - }, null); - wrapper = shallow(mockElement); - headerCellSelectionInfo = wrapper.instance().resolveSelectRowPropsForHeader(mockOptions); - }); - - it('should return object which contain specified options', () => { - expect(headerCellSelectionInfo).toEqual(expect.objectContaining({ - foo: 'test', - bar: expect.any(Function) - })); - }); - }); - - describe('if options.allRowsSelected is true', () => { - beforeEach(() => { - selectRow = {}; - const selectedRowKeys = [1, 2]; - const mockElement = React.createElement(BootstrapTableMock, { - data, keyField, columns, selectRow - }, null); - - wrapper = shallow(mockElement); - - headerCellSelectionInfo = wrapper.instance().resolveSelectRowPropsForHeader({ - allRowsSelected: true, - selected: selectedRowKeys - }); - }); - - it('should return checkedStatus which eqauls to checked', () => { - expect(headerCellSelectionInfo).toEqual(expect.objectContaining({ - checkedStatus: Const.CHECKBOX_STATUS_CHECKED - })); - }); - }); - - describe('if options.allRowsSelected and options.allRowsNotSelected both are false', () => { - beforeEach(() => { - selectRow = {}; - const selectedRowKeys = [1]; - const mockElement = React.createElement(BootstrapTableMock, { - data, keyField, columns, selectRow - }, null); - - wrapper = shallow(mockElement); - headerCellSelectionInfo = wrapper.instance().resolveSelectRowPropsForHeader({ - allRowsSelected: false, - allRowsNotSelected: false, - selected: selectedRowKeys - }); - }); - - it('should return checkedStatus which eqauls to indeterminate', () => { - expect(headerCellSelectionInfo).toEqual(expect.objectContaining({ - checkedStatus: Const.CHECKBOX_STATUS_INDETERMINATE - })); - }); - }); - - describe('if options.allRowsNotSelected is true', () => { - beforeEach(() => { - selectRow = {}; - const selectedRowKeys = []; - const mockElement = React.createElement(BootstrapTableMock, { - data, keyField, columns, selectRow - }, null); - - wrapper = shallow(mockElement); - - headerCellSelectionInfo = wrapper.instance().resolveSelectRowPropsForHeader({ - allRowsSelected: false, - allRowsNotSelected: true, - selected: selectedRowKeys - }); - }); - - it('should return checkedStatus which eqauls to unchecked', () => { - expect(headerCellSelectionInfo).toEqual(expect.objectContaining({ - checkedStatus: Const.CHECKBOX_STATUS_UNCHECKED - })); - }); - }); - }); - }); }); diff --git a/packages/react-bootstrap-table2/test/row-aggregator.test.js b/packages/react-bootstrap-table2/test/row-aggregator.test.js new file mode 100644 index 0000000..f46d084 --- /dev/null +++ b/packages/react-bootstrap-table2/test/row-aggregator.test.js @@ -0,0 +1,167 @@ +import 'jsdom-global/register'; +import React from 'react'; +import { mount } from 'enzyme'; +import SelectionContext from '../src/contexts/selection-context'; +import bindSelection from '../src/row-selection/row-binder'; +import SelectionCell from '../src/row-selection/selection-cell'; +import RowAggregator from '../src/row-aggregator'; +import Row from '../src/row'; + +describe('Row Aggregator', () => { + let wrapper; + let rowAggregator; + const RowAggregatorWithSelection = bindSelection(RowAggregator); + + const data = [{ + id: 1, + name: 'A' + }, { + id: 2, + name: 'B' + }, { + id: 3, + name: 'C' + }]; + const columns = [{ + dataField: 'id', + text: 'ID' + }, { + dataField: 'name', + text: 'Name' + }]; + const rowIndex = 1; + const row = data[rowIndex]; + const keyField = 'id'; + + const getBaseProps = () => ({ + row, + columns, + keyField, + rowIndex + }); + + describe('when props.selectRow is defeind', () => { + describe('if props.selectRow.hideSelectColumn is false', () => { + beforeEach(() => { + const selectRow = { mode: 'radio' }; + wrapper = mount( + + + + ); + }); + + it('should render RowAggregator correctly', () => { + rowAggregator = wrapper.find(RowAggregator); + expect(rowAggregator).toHaveLength(1); + }); + + it('should render selection column correctly', () => { + const selectionCell = wrapper.find(SelectionCell); + expect(selectionCell).toHaveLength(1); + expect(selectionCell.props().selected).toEqual(rowAggregator.props().selected); + expect(selectionCell.props().disabled).toEqual(!rowAggregator.props().selectable); + }); + }); + + describe('if props.selectRow.hideSelectColumn is true', () => { + beforeEach(() => { + const selectRow = { mode: 'radio', hideSelectColumn: true }; + wrapper = mount( + + + + ); + }); + + it('should render RowAggregator correctly', () => { + rowAggregator = wrapper.find(RowAggregator); + expect(rowAggregator).toHaveLength(1); + }); + + it('should not render selection column', () => { + const selectionCell = wrapper.find(SelectionCell); + expect(selectionCell).toHaveLength(0); + }); + }); + + describe('if props.selectRow.clickToSelect is defined', () => { + beforeEach(() => { + const selectRow = { mode: 'radio', clickToSelect: true }; + wrapper = mount( + + + + ); + }); + + it('should render RowAggregator correctly', () => { + rowAggregator = wrapper.find(RowAggregator); + expect(rowAggregator).toHaveLength(1); + }); + + it('should add onClick prop to Row Component', () => { + const rowComp = wrapper.find(Row); + expect(rowComp).toHaveLength(1); + expect(rowComp.props().attrs.onClick).toBeDefined(); + }); + }); + }); + + describe('createClickEventHandler', () => { + describe('if props.attrs.onClick is defined', () => { + const attrs = { onClick: jest.fn() }; + + beforeEach(() => { + const selectRow = { mode: 'radio' }; + wrapper = mount( + + + + ); + wrapper.find('tr').simulate('click'); + }); + + it('should add onClick prop to Row Component', () => { + expect(attrs.onClick).toHaveBeenCalledTimes(1); + }); + }); + + describe('if props.selectRow.clickToSelect is defined', () => { + const selectRow = { mode: 'radio', clickToSelect: true }; + beforeEach(() => { + wrapper = mount( + + + + ); + wrapper.find(RowAggregator).props().selectRow.onRowSelect = jest.fn(); + wrapper.find('tr').simulate('click'); + }); + + it('should add onClick prop to Row Component', () => { + expect(wrapper.find(RowAggregator).props().selectRow.onRowSelect).toHaveBeenCalledTimes(1); + }); + }); + + describe('if props.attrs.onClick and props.selectRow.clickToSelect both are defined', () => { + const attrs = { onClick: jest.fn() }; + const selectRow = { mode: 'radio', clickToSelect: true }; + + beforeEach(() => { + wrapper = mount( + + + + ); + wrapper.find(RowAggregator).props().selectRow.onRowSelect = jest.fn(); + wrapper.find('tr').simulate('click'); + }); + + it('should add onClick prop to Row Component', () => { + expect(attrs.onClick).toHaveBeenCalledTimes(1); + expect(wrapper.find(RowAggregator).props().selectRow.onRowSelect).toHaveBeenCalledTimes(1); + }); + }); + }); +}); diff --git a/packages/react-bootstrap-table2/test/row-selection/row-binder.test.js b/packages/react-bootstrap-table2/test/row-selection/row-binder.test.js new file mode 100644 index 0000000..7cc0a4c --- /dev/null +++ b/packages/react-bootstrap-table2/test/row-selection/row-binder.test.js @@ -0,0 +1,349 @@ +import 'jsdom-global/register'; +import React from 'react'; +import { mount } from 'enzyme'; + +import SelectionContext from '../../src/contexts/selection-context'; +import bindSelection from '../../src/row-selection/row-binder'; + +describe('Selection Row Binder', () => { + let wrapper; + let selectRow; + const BaseComponent = () => null; + const WithSelectionComponent = bindSelection(props => ); + + const data = [{ + id: 1, + name: 'A' + }, { + id: 2, + name: 'B' + }, { + id: 3, + name: 'C' + }]; + const rowIndex = 1; + const row = data[rowIndex]; + const keyField = 'id'; + + describe('if current row is selected', () => { + beforeEach(() => { + selectRow = { mode: 'checkbox', selected: [data[rowIndex][keyField]] }; + wrapper = mount( + + + + ); + }); + + it('should inject selected prop as true to target component', () => { + expect(wrapper.find(BaseComponent)).toHaveLength(1); + expect(wrapper.find(BaseComponent).prop('selected')).toBeTruthy(); + }); + }); + + describe('if current row is not selected', () => { + beforeEach(() => { + selectRow = { mode: 'checkbox', selected: [] }; + wrapper = mount( + + + + ); + }); + + it('should inject selected prop as false to target component', () => { + expect(wrapper.find(BaseComponent)).toHaveLength(1); + expect(wrapper.find(BaseComponent).prop('selected')).toBeFalsy(); + }); + }); + + describe('if current row is selectable', () => { + beforeEach(() => { + selectRow = { mode: 'checkbox', nonSelectable: [] }; + wrapper = mount( + + + + ); + }); + + it('should inject selectable prop as true to target component', () => { + expect(wrapper.find(BaseComponent)).toHaveLength(1); + expect(wrapper.find(BaseComponent).prop('selectable')).toBeTruthy(); + }); + }); + + describe('if current row is non selectable', () => { + beforeEach(() => { + selectRow = { mode: 'checkbox', nonSelectable: [data[rowIndex][keyField]] }; + wrapper = mount( + + + + ); + }); + + it('should inject selectable prop as false to target component', () => { + expect(wrapper.find(BaseComponent)).toHaveLength(1); + expect(wrapper.find(BaseComponent).prop('selectable')).toBeFalsy(); + }); + }); + + describe('if current row is selected', () => { + const selectedStyle = { backgroundColor: 'green', fontWeight: 'bold' }; + describe('when selectRow.style is defined as an object', () => { + beforeEach(() => { + selectRow = { mode: 'checkbox', selected: [data[rowIndex][keyField]], style: selectedStyle }; + wrapper = mount( + + + + ); + }); + + it('should inject style prop correctly', () => { + expect(wrapper.find(BaseComponent)).toHaveLength(1); + expect(wrapper.find(BaseComponent).prop('style')).toEqual(selectedStyle); + }); + + describe('and props.style is also defined', () => { + const componentStype = { fontSize: '16px' }; + beforeEach(() => { + wrapper = mount( + + + + ); + }); + + it('should inject style prop correctly', () => { + expect(wrapper.find(BaseComponent)).toHaveLength(1); + expect(wrapper.find(BaseComponent).prop('style')).toEqual({ + ...selectedStyle, + ...componentStype + }); + }); + }); + + describe('and selectRow.bgColor is also defined as an object', () => { + beforeEach(() => { + selectRow.bgColor = 'gray'; + wrapper = mount( + + + + ); + }); + + it('should inject style prop with correct backgroundColor', () => { + expect(wrapper.find(BaseComponent)).toHaveLength(1); + expect(wrapper.find(BaseComponent).prop('style')).toEqual({ + ...selectedStyle, + backgroundColor: selectRow.bgColor + }); + }); + }); + + describe('and selectRow.bgColor is also defined as a function', () => { + const color = 'gray'; + beforeEach(() => { + selectRow.bgColor = jest.fn().mockReturnValue(color); + wrapper = mount( + + + + ); + }); + + it('should inject style prop with correct backgroundColor', () => { + expect(wrapper.find(BaseComponent)).toHaveLength(1); + expect(wrapper.find(BaseComponent).prop('style')).toEqual({ + ...selectedStyle, + backgroundColor: color + }); + }); + + it('should call selectRow.bgColor function correctly', () => { + expect(selectRow.bgColor).toHaveBeenCalledTimes(1); + expect(selectRow.bgColor).toHaveBeenCalledWith(row, rowIndex); + }); + }); + }); + + describe('when selectRow.style is defined as a function', () => { + beforeEach(() => { + selectRow = { mode: 'checkbox', selected: [data[rowIndex][keyField]], style: jest.fn().mockReturnValue(selectedStyle) }; + wrapper = mount( + + + + ); + }); + + it('should inject style prop correctly', () => { + expect(wrapper.find(BaseComponent)).toHaveLength(1); + expect(wrapper.find(BaseComponent).prop('style')).toEqual(selectedStyle); + }); + + it('should call selectRow.style function correctly', () => { + expect(selectRow.style).toHaveBeenCalledTimes(1); + expect(selectRow.style).toHaveBeenCalledWith(row, rowIndex); + }); + + describe('and props.style is also defined', () => { + const componentStype = { fontSize: '16px' }; + beforeEach(() => { + wrapper = mount( + + + + ); + }); + + it('should inject style prop correctly', () => { + expect(wrapper.find(BaseComponent)).toHaveLength(1); + expect(wrapper.find(BaseComponent).prop('style')).toEqual({ + ...selectedStyle, + ...componentStype + }); + }); + }); + + describe('and selectRow.bgColor is also defined as an object', () => { + beforeEach(() => { + selectRow.bgColor = 'gray'; + wrapper = mount( + + + + ); + }); + + it('should inject style prop with correct backgroundColor', () => { + expect(wrapper.find(BaseComponent)).toHaveLength(1); + expect(wrapper.find(BaseComponent).prop('style')).toEqual({ + ...selectedStyle, + backgroundColor: selectRow.bgColor + }); + }); + }); + + describe('and selectRow.bgColor is also defined as a function', () => { + const color = 'gray'; + beforeEach(() => { + selectRow.bgColor = jest.fn().mockReturnValue(color); + wrapper = mount( + + + + ); + }); + + it('should inject style prop with correct backgroundColor', () => { + expect(wrapper.find(BaseComponent)).toHaveLength(1); + expect(wrapper.find(BaseComponent).prop('style')).toEqual({ + ...selectedStyle, + backgroundColor: color + }); + }); + + it('should call selectRow.bgColor function correctly', () => { + expect(selectRow.bgColor).toHaveBeenCalledTimes(1); + expect(selectRow.bgColor).toHaveBeenCalledWith(row, rowIndex); + }); + }); + }); + }); + + describe('if current row is selected', () => { + const selectedClassName = 'select-classname'; + describe('when selectRow.style is defined as an object', () => { + beforeEach(() => { + selectRow = { mode: 'checkbox', selected: [data[rowIndex][keyField]], classes: selectedClassName }; + wrapper = mount( + + + + ); + }); + + it('should inject className prop correctly', () => { + expect(wrapper.find(BaseComponent)).toHaveLength(1); + expect(wrapper.find(BaseComponent).prop('className')).toEqual(selectedClassName); + }); + + describe('and props.className is also defined', () => { + const componentClassName = 'component-classname'; + beforeEach(() => { + wrapper = mount( + + + + ); + }); + + it('should inject style prop correctly', () => { + expect(wrapper.find(BaseComponent)).toHaveLength(1); + expect(wrapper.find(BaseComponent).prop('className')).toEqual(`${componentClassName} ${selectedClassName}`); + }); + }); + }); + + describe('when selectRow.style is defined as a function', () => { + beforeEach(() => { + selectRow = { mode: 'checkbox', selected: [data[rowIndex][keyField]], classes: jest.fn().mockReturnValue(selectedClassName) }; + wrapper = mount( + + + + ); + }); + + it('should inject className prop correctly', () => { + expect(wrapper.find(BaseComponent)).toHaveLength(1); + expect(wrapper.find(BaseComponent).prop('className')).toEqual(selectedClassName); + }); + + it('should call selectRow.classes function correctly', () => { + expect(selectRow.classes).toHaveBeenCalledTimes(1); + expect(selectRow.classes).toHaveBeenCalledWith(row, rowIndex); + }); + + describe('and props.className is also defined', () => { + const componentClassName = 'component-classname'; + beforeEach(() => { + wrapper = mount( + + + + ); + }); + + it('should inject style prop correctly', () => { + expect(wrapper.find(BaseComponent)).toHaveLength(1); + expect(wrapper.find(BaseComponent).prop('className')).toEqual(`${componentClassName} ${selectedClassName}`); + }); + }); + }); + }); +}); diff --git a/packages/react-bootstrap-table2/test/row.test.js b/packages/react-bootstrap-table2/test/row.test.js index 621f140..43bd193 100644 --- a/packages/react-bootstrap-table2/test/row.test.js +++ b/packages/react-bootstrap-table2/test/row.test.js @@ -542,348 +542,6 @@ describe('Row', () => { }); }); - describe('selectRow', () => { - let selectRow; - - describe('when selectRow.mode is ROW_SELECT_DISABLED (row is not able to select)', () => { - beforeEach(() => { - wrapper = shallow( - - ); - }); - - it('should not render ', () => { - 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( - ); - }); - - it('should render ', () => { - expect(wrapper.find(SelectionCell).length).toBe(1); - }); - - it('should render 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( - ); - }); - - it('should not render ', () => { - expect(wrapper.find(SelectionCell).length).toBe(0); - }); - }); - }); - - describe('if selectRow.mode is checkbox (multiple selection)', () => { - beforeEach(() => { - selectRow = { mode: 'checkbox' }; - wrapper = shallow( - ); - }); - - it('should render ', () => { - expect(wrapper.find(SelectionCell).length).toBe(1); - }); - - it('should render 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( - ); - }); - - it('should not render ', () => { - expect(wrapper.find(SelectionCell).length).toBe(0); - }); - }); - }); - - describe('if selectable prop is false', () => { - beforeEach(() => { - selectRow = { mode: 'checkbox' }; - wrapper = shallow( - ); - }); - - 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( - ); - }); - - 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( - ); - }); - - it('should render Row component successfully with onClick event', () => { - expect(wrapper.length).toBe(1); - expect(wrapper.find('tr').prop('onClick')).toBeDefined(); - }); - }); - }); - }); - - describe('handleRowClick', () => { - let selectRow; - let onRowSelectCallBack; - - describe('selectable prop is false', () => { - beforeEach(() => { - onRowSelectCallBack = sinon.stub(); - selectRow = { - mode: 'checkbox', - clickToSelect: true, - onRowSelect: onRowSelectCallBack - }; - wrapper = shallow( - ); - wrapper.find('tr').simulate('click'); - }); - - it('should not calling selectRow.onRowSelect callback', () => { - expect(onRowSelectCallBack.callCount).toEqual(0); - }); - }); - - describe('selectable prop is true', () => { - describe('and selected prop is true', () => { - beforeEach(() => { - onRowSelectCallBack = sinon.stub(); - selectRow = { - mode: 'checkbox', - clickToSelect: true, - onRowSelect: onRowSelectCallBack - }; - wrapper = shallow( - ); - wrapper.find('tr').simulate('click'); - }); - - it('should calling selectRow.onRowSelect callback', () => { - expect(onRowSelectCallBack.callCount).toEqual(1); - }); - - it('should calling selectRow.onRowSelect with correct argument', () => { - expect(onRowSelectCallBack.calledWith(row[keyField], false, rowIndex)).toBeTruthy(); - }); - }); - - describe('and selected prop is false', () => { - beforeEach(() => { - onRowSelectCallBack = sinon.stub(); - selectRow = { - mode: 'checkbox', - clickToSelect: true, - onRowSelect: onRowSelectCallBack - }; - wrapper = shallow( - ); - wrapper.find('tr').simulate('click'); - }); - - it('should calling selectRow.onRowSelect callback', () => { - expect(onRowSelectCallBack.callCount).toEqual(1); - }); - - it('should calling selectRow.onRowSelect with correct argument', () => { - expect(onRowSelectCallBack.calledWith(row[keyField], true, rowIndex)).toBeTruthy(); - }); - }); - }); - - describe('if cellEdit.mode is dbclick and selectRow.clickToEdit is true', () => { - beforeEach(() => { - onRowSelectCallBack = sinon.stub(); - const cellEdit = { - mode: Const.DBCLICK_TO_CELL_EDIT, - ridx: undefined, - cidx: undefined, - onStart: sinon.stub() - }; - selectRow = { - mode: 'checkbox', - clickToSelect: true, - clickToEdit: true, - onRowSelect: onRowSelectCallBack - }; - wrapper = shallow( - ); - // console.log(wrapper.instance()); - const rowClick = wrapper.instance().createClickEventHandler(); - rowClick(); - rowClick(); - }); - - it('should increase clickNum as 2', () => { - expect(wrapper.instance().clickNum).toEqual(2); - }); - }); - - describe('when attrs.onClick prop is defined', () => { - const customClickCallBack = sinon.stub(); - const attrs = { onClick: customClickCallBack }; - - beforeEach(() => { - onRowSelectCallBack = sinon.stub(); - selectRow = { - mode: 'checkbox', - clickToSelect: true, - onRowSelect: onRowSelectCallBack - }; - wrapper = shallow( - ); - wrapper.find('tr').simulate('click'); - }); - - it('should calling attrs.onClick callback', () => { - expect(customClickCallBack.callCount).toEqual(1); - }); - - it('should calling selectRow.onRowSelect callback', () => { - expect(onRowSelectCallBack.callCount).toEqual(1); - }); - }); - }); - describe('when column.style prop is defined', () => { let columns; const columnIndex = 1;