mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2025-10-16 11:55:39 +00:00
patch tests for refactoring row component with selection
This commit is contained in:
AllenFang
parent
c1de135fc2
commit
6bf869c8a9
@ -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(
|
||||
<Body
|
||||
{ ...mockBodyResolvedProps }
|
||||
keyField="id"
|
||||
columns={ columns }
|
||||
data={ data }
|
||||
rowStyle={ rowStyle }
|
||||
selectRow={ selectRow }
|
||||
selectedRowKeys={ selectedRowKeys }
|
||||
/>);
|
||||
});
|
||||
|
||||
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(
|
||||
<Body
|
||||
{ ...mockBodyResolvedProps }
|
||||
keyField="id"
|
||||
columns={ columns }
|
||||
data={ data }
|
||||
rowStyle={ rowStyle }
|
||||
selectRow={ selectRow }
|
||||
selectedRowKeys={ selectedRowKeys }
|
||||
/>);
|
||||
});
|
||||
|
||||
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(
|
||||
<Body
|
||||
{ ...mockBodyResolvedProps }
|
||||
keyField="id"
|
||||
columns={ columns }
|
||||
data={ data }
|
||||
rowStyle={ rowStyle }
|
||||
selectRow={ selectRow }
|
||||
selectedRowKeys={ selectedRowKeys }
|
||||
/>);
|
||||
});
|
||||
|
||||
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(
|
||||
<Body
|
||||
{ ...mockBodyResolvedProps }
|
||||
keyField="id"
|
||||
columns={ columns }
|
||||
data={ data }
|
||||
rowClasses={ rowClasses }
|
||||
selectRow={ selectRow }
|
||||
selectedRowKeys={ selectedRowKeys }
|
||||
/>);
|
||||
});
|
||||
|
||||
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(
|
||||
<Body
|
||||
{ ...mockBodyResolvedProps }
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
keyField={ keyField }
|
||||
selectedRowKeys={ selectedRowKeys }
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<Body
|
||||
{ ...mockBodyResolvedProps }
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
keyField={ keyField }
|
||||
selectedRowKeys={ selectedRowKeys }
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<Body
|
||||
{ ...mockBodyResolvedProps }
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
keyField={ keyField }
|
||||
selectedRowKeys={ selectedRowKeys }
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<Body
|
||||
{ ...mockBodyResolvedProps }
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
keyField={ keyField }
|
||||
selectedRowKeys={ selectedRowKeys }
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<Body
|
||||
{ ...mockBodyResolvedProps }
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
keyField={ keyField }
|
||||
selectedRowKeys={ selectedRowKeys }
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<Body
|
||||
{ ...mockBodyResolvedProps }
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
keyField={ keyField }
|
||||
selectedRowKeys={ selectedRowKeys }
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<Body
|
||||
{ ...mockBodyResolvedProps }
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
keyField={ keyField }
|
||||
selectedRowKeys={ selectedRowKeys }
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<Body
|
||||
{ ...mockBodyResolvedProps }
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
keyField={ keyField }
|
||||
selectedRowKeys={ selectedRowKeys }
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<Body
|
||||
{ ...mockBodyResolvedProps }
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
keyField={ keyField }
|
||||
selectedRowKeys={ selectedRowKeys }
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<Body
|
||||
{ ...mockBodyResolvedProps }
|
||||
data={ data }
|
||||
columns={ columns }
|
||||
keyField={ keyField }
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
it('prop selectRowEnabled on RowAggregator Component should be defined', () => {
|
||||
expect(wrapper.find(RowAggregator).get(0).props.selectRowEnabled).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -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'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -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(<Header { ...mockHeaderResolvedProps } columns={ columns } />);
|
||||
@ -89,12 +101,18 @@ describe('Header', () => {
|
||||
describe('when selectRow.mode is radio (single selection)', () => {
|
||||
beforeEach(() => {
|
||||
const selectRow = { mode: 'radio' };
|
||||
wrapper = shallow(
|
||||
<Header
|
||||
{ ...mockHeaderResolvedProps }
|
||||
columns={ columns }
|
||||
wrapper = mount(
|
||||
<SelectionContext.Provider
|
||||
data={ data }
|
||||
keyField={ keyField }
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
>
|
||||
<Header
|
||||
{ ...mockHeaderResolvedProps }
|
||||
columns={ columns }
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
@ -105,12 +123,18 @@ describe('Header', () => {
|
||||
describe('when selectRow.hideSelectColumn is true', () => {
|
||||
beforeEach(() => {
|
||||
const selectRow = { mode: 'radio', hideSelectColumn: true };
|
||||
wrapper = shallow(
|
||||
<Header
|
||||
{ ...mockHeaderResolvedProps }
|
||||
columns={ columns }
|
||||
wrapper = mount(
|
||||
<SelectionContext.Provider
|
||||
data={ data }
|
||||
keyField={ keyField }
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
>
|
||||
<Header
|
||||
{ ...mockHeaderResolvedProps }
|
||||
columns={ columns }
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
@ -146,12 +170,17 @@ describe('Header', () => {
|
||||
describe('when selectRow.mode is checkbox (multiple selection)', () => {
|
||||
beforeEach(() => {
|
||||
const selectRow = { mode: 'checkbox' };
|
||||
wrapper = shallow(
|
||||
<Header
|
||||
{ ...mockHeaderResolvedProps }
|
||||
columns={ columns }
|
||||
wrapper = mount(
|
||||
<SelectionContext.Provider
|
||||
data={ data }
|
||||
keyField={ keyField }
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
>
|
||||
<Header
|
||||
columns={ columns }
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
@ -162,12 +191,17 @@ describe('Header', () => {
|
||||
describe('when selectRow.hideSelectColumn is true', () => {
|
||||
beforeEach(() => {
|
||||
const selectRow = { mode: 'checkbox', hideSelectColumn: true };
|
||||
wrapper = shallow(
|
||||
<Header
|
||||
{ ...mockHeaderResolvedProps }
|
||||
columns={ columns }
|
||||
wrapper = mount(
|
||||
<SelectionContext.Provider
|
||||
data={ data }
|
||||
keyField={ keyField }
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
>
|
||||
<Header
|
||||
columns={ columns }
|
||||
selectRow={ selectRow }
|
||||
/>
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@ -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
|
||||
}));
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
167
packages/react-bootstrap-table2/test/row-aggregator.test.js
Normal file
167
packages/react-bootstrap-table2/test/row-aggregator.test.js
Normal file
@ -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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<RowAggregatorWithSelection { ...getBaseProps() } cellEdit={ {} } />
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<RowAggregatorWithSelection { ...getBaseProps() } cellEdit={ {} } />
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<RowAggregatorWithSelection { ...getBaseProps() } cellEdit={ {} } />
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<RowAggregatorWithSelection { ...getBaseProps() } cellEdit={ {} } attrs={ attrs } />
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<RowAggregatorWithSelection { ...getBaseProps() } cellEdit={ {} } />
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<RowAggregatorWithSelection { ...getBaseProps() } cellEdit={ {} } attrs={ attrs } />
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
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);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -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 => <BaseComponent { ...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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<WithSelectionComponent
|
||||
row={ row }
|
||||
keyField={ keyField }
|
||||
rowIndex={ rowIndex }
|
||||
style={ componentStype }
|
||||
/>
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<WithSelectionComponent
|
||||
row={ row }
|
||||
keyField={ keyField }
|
||||
rowIndex={ rowIndex }
|
||||
style={ componentStype }
|
||||
/>
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<WithSelectionComponent
|
||||
row={ row }
|
||||
keyField={ keyField }
|
||||
rowIndex={ rowIndex }
|
||||
className={ componentClassName }
|
||||
/>
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
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(
|
||||
<SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
|
||||
<WithSelectionComponent
|
||||
row={ row }
|
||||
keyField={ keyField }
|
||||
rowIndex={ rowIndex }
|
||||
className={ componentClassName }
|
||||
/>
|
||||
</SelectionContext.Provider>
|
||||
);
|
||||
});
|
||||
|
||||
it('should inject style prop correctly', () => {
|
||||
expect(wrapper.find(BaseComponent)).toHaveLength(1);
|
||||
expect(wrapper.find(BaseComponent).prop('className')).toEqual(`${componentClassName} ${selectedClassName}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -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(
|
||||
<Row
|
||||
{ ...mockBodyResolvedProps }
|
||||
rowIndex={ rowIndex }
|
||||
columns={ defaultColumns }
|
||||
row={ row }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
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', () => {
|
||||
let selectRow;
|
||||
let onRowSelectCallBack;
|
||||
|
||||
describe('selectable prop is false', () => {
|
||||
beforeEach(() => {
|
||||
onRowSelectCallBack = sinon.stub();
|
||||
selectRow = {
|
||||
mode: 'checkbox',
|
||||
clickToSelect: true,
|
||||
onRowSelect: onRowSelectCallBack
|
||||
};
|
||||
wrapper = shallow(
|
||||
<Row
|
||||
{ ...mockBodyResolvedProps }
|
||||
rowIndex={ rowIndex }
|
||||
columns={ defaultColumns }
|
||||
row={ row }
|
||||
selectRow={ selectRow }
|
||||
selected
|
||||
selectable={ false }
|
||||
/>);
|
||||
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(
|
||||
<Row
|
||||
{ ...mockBodyResolvedProps }
|
||||
keyField={ keyField }
|
||||
rowIndex={ rowIndex }
|
||||
columns={ defaultColumns }
|
||||
row={ row }
|
||||
selectRow={ selectRow }
|
||||
selected
|
||||
selectable
|
||||
/>);
|
||||
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(
|
||||
<Row
|
||||
{ ...mockBodyResolvedProps }
|
||||
keyField={ keyField }
|
||||
rowIndex={ rowIndex }
|
||||
columns={ defaultColumns }
|
||||
row={ row }
|
||||
selectRow={ selectRow }
|
||||
selected={ false }
|
||||
selectable
|
||||
/>);
|
||||
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(
|
||||
<Row
|
||||
{ ...mockBodyResolvedProps }
|
||||
keyField={ keyField }
|
||||
rowIndex={ rowIndex }
|
||||
columns={ defaultColumns }
|
||||
row={ row }
|
||||
selectRow={ selectRow }
|
||||
cellEdit={ cellEdit }
|
||||
selected
|
||||
selectable
|
||||
/>);
|
||||
// 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(
|
||||
<Row
|
||||
{ ...mockBodyResolvedProps }
|
||||
rowIndex={ rowIndex }
|
||||
columns={ defaultColumns }
|
||||
row={ row }
|
||||
selectRow={ selectRow }
|
||||
attrs={ attrs }
|
||||
selected
|
||||
selectable
|
||||
/>);
|
||||
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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user