mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2025-10-16 11:55:39 +00:00
implement shouldComponentUpdate on cell component
This commit is contained in:
AllenFang
parent
ffac3a42c5
commit
54b98f41f4
67
packages/react-bootstrap-table2/src/cell.js
vendored
67
packages/react-bootstrap-table2/src/cell.js
vendored
@ -10,6 +10,25 @@ class Cell extends Component {
|
||||
this.handleEditingCell = this.handleEditingCell.bind(this);
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps) {
|
||||
const shouldUpdate =
|
||||
_.get(this.props.row, this.props.column.dataField)
|
||||
!== _.get(nextProps.row, nextProps.column.dataField) ||
|
||||
this.props.column.hidden !== nextProps.column.hidden ||
|
||||
this.props.rowIndex !== nextProps.rowIndex ||
|
||||
this.props.columnIndex !== nextProps.columnIndex ||
|
||||
this.props.className !== nextProps.className ||
|
||||
this.props.title !== nextProps.title ||
|
||||
this.props.editable !== nextProps.editable ||
|
||||
this.props.clickToEdit !== nextProps.clickToEdit ||
|
||||
this.props.dbclickToEdit !== nextProps.dbclickToEdit ||
|
||||
!_.isEqual(this.props.style, nextProps.style) ||
|
||||
!_.isEqual(this.props.column.formatExtraData, nextProps.column.formatExtraData) ||
|
||||
!_.isEqual(this.props.column.events, nextProps.column.events) ||
|
||||
!_.isEqual(this.props.column.attrs, nextProps.column.attrs);
|
||||
return shouldUpdate;
|
||||
}
|
||||
|
||||
handleEditingCell(e) {
|
||||
const { column, onStart, rowIndex, columnIndex, clickToEdit, dbclickToEdit } = this.props;
|
||||
const { events } = column;
|
||||
@ -33,62 +52,32 @@ class Cell extends Component {
|
||||
rowIndex,
|
||||
column,
|
||||
columnIndex,
|
||||
onStart,
|
||||
editable,
|
||||
clickToEdit,
|
||||
dbclickToEdit
|
||||
dbclickToEdit,
|
||||
...rest
|
||||
} = this.props;
|
||||
const {
|
||||
dataField,
|
||||
formatter,
|
||||
formatExtraData,
|
||||
style,
|
||||
classes,
|
||||
title,
|
||||
events,
|
||||
align,
|
||||
attrs
|
||||
formatExtraData
|
||||
} = column;
|
||||
let cellTitle;
|
||||
let cellStyle = {};
|
||||
const attrs = { ...rest };
|
||||
let content = _.get(row, dataField);
|
||||
|
||||
const cellAttrs = {
|
||||
..._.isFunction(attrs) ? attrs(content, row, rowIndex, columnIndex) : attrs,
|
||||
...events
|
||||
};
|
||||
|
||||
const cellClasses = _.isFunction(classes)
|
||||
? classes(content, row, rowIndex, columnIndex)
|
||||
: classes;
|
||||
|
||||
if (style) {
|
||||
cellStyle = _.isFunction(style) ? style(content, row, rowIndex, columnIndex) : style;
|
||||
}
|
||||
|
||||
if (title) {
|
||||
cellTitle = _.isFunction(title) ? title(content, row, rowIndex, columnIndex) : content;
|
||||
cellAttrs.title = cellTitle;
|
||||
}
|
||||
|
||||
if (formatter) {
|
||||
content = column.formatter(content, row, rowIndex, formatExtraData);
|
||||
}
|
||||
|
||||
if (align) {
|
||||
cellStyle.textAlign =
|
||||
_.isFunction(align) ? align(content, row, rowIndex, columnIndex) : align;
|
||||
}
|
||||
|
||||
if (cellClasses) cellAttrs.className = cellClasses;
|
||||
|
||||
if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
|
||||
if (clickToEdit && editable) {
|
||||
cellAttrs.onClick = this.handleEditingCell;
|
||||
attrs.onClick = this.handleEditingCell;
|
||||
} else if (dbclickToEdit && editable) {
|
||||
cellAttrs.onDoubleClick = this.handleEditingCell;
|
||||
attrs.onDoubleClick = this.handleEditingCell;
|
||||
}
|
||||
|
||||
return (
|
||||
<td { ...cellAttrs }>
|
||||
<td { ...attrs }>
|
||||
{ typeof content === 'boolean' ? `${content}` : content }
|
||||
</td>
|
||||
);
|
||||
|
||||
40
packages/react-bootstrap-table2/src/row.js
vendored
40
packages/react-bootstrap-table2/src/row.js
vendored
@ -102,6 +102,45 @@ class Row extends eventDelegater(Component) {
|
||||
/>
|
||||
);
|
||||
}
|
||||
// render cell
|
||||
let cellTitle;
|
||||
let cellStyle = {};
|
||||
const cellAttrs = {
|
||||
..._.isFunction(column.attrs)
|
||||
? column.attrs(content, row, rowIndex, index)
|
||||
: column.attrs,
|
||||
...column.events
|
||||
};
|
||||
|
||||
const cellClasses = _.isFunction(column.classes)
|
||||
? column.classes(content, row, rowIndex, index)
|
||||
: column.classes;
|
||||
|
||||
if (column.style) {
|
||||
cellStyle = _.isFunction(column.style)
|
||||
? column.style(content, row, rowIndex, index)
|
||||
: column.style;
|
||||
cellStyle = cellStyle || {};
|
||||
}
|
||||
|
||||
|
||||
if (column.title) {
|
||||
cellTitle = _.isFunction(column.title)
|
||||
? column.title(content, row, rowIndex, index)
|
||||
: content;
|
||||
cellAttrs.title = cellTitle;
|
||||
}
|
||||
|
||||
if (column.align) {
|
||||
cellStyle.textAlign =
|
||||
_.isFunction(column.align)
|
||||
? column.align(content, row, rowIndex, index)
|
||||
: column.align;
|
||||
}
|
||||
|
||||
if (cellClasses) cellAttrs.className = cellClasses;
|
||||
if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
|
||||
|
||||
return (
|
||||
<Cell
|
||||
key={ `${content}-${index}` }
|
||||
@ -113,6 +152,7 @@ class Row extends eventDelegater(Component) {
|
||||
editable={ editable }
|
||||
clickToEdit={ mode === CLICK_TO_CELL_EDIT }
|
||||
dbclickToEdit={ mode === DBCLICK_TO_CELL_EDIT }
|
||||
{ ...cellAttrs }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -79,362 +79,6 @@ describe('Cell', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('when column.style prop is defined', () => {
|
||||
let column;
|
||||
const columnIndex = 1;
|
||||
const rowIndex = 1;
|
||||
|
||||
beforeEach(() => {
|
||||
column = {
|
||||
dataField: 'id',
|
||||
text: 'ID'
|
||||
};
|
||||
});
|
||||
|
||||
describe('when style is an object', () => {
|
||||
beforeEach(() => {
|
||||
column.style = { backgroundColor: 'red' };
|
||||
wrapper = shallow(
|
||||
<Cell row={ row } columnIndex={ columnIndex } rowIndex={ rowIndex } column={ column } />);
|
||||
});
|
||||
|
||||
it('should render successfully', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find('td').prop('style')).toEqual(column.style);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when style is a function', () => {
|
||||
const returnStyle = { backgroundColor: 'red' };
|
||||
let styleCallBack;
|
||||
|
||||
beforeEach(() => {
|
||||
styleCallBack = sinon.stub()
|
||||
.withArgs(row[column.dataField], row, rowIndex, columnIndex)
|
||||
.returns(returnStyle);
|
||||
column.style = styleCallBack;
|
||||
wrapper = shallow(
|
||||
<Cell row={ row } columnIndex={ columnIndex } rowIndex={ rowIndex } column={ column } />);
|
||||
});
|
||||
|
||||
afterEach(() => { styleCallBack.reset(); });
|
||||
|
||||
it('should render successfully', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find('td').prop('style')).toEqual(returnStyle);
|
||||
});
|
||||
|
||||
it('should call custom style function correctly', () => {
|
||||
expect(styleCallBack.callCount).toBe(1);
|
||||
expect(
|
||||
styleCallBack.calledWith(row[column.dataField], row, rowIndex, columnIndex)
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when column.classes prop is defined', () => {
|
||||
let column;
|
||||
const columnIndex = 1;
|
||||
const rowIndex = 1;
|
||||
|
||||
beforeEach(() => {
|
||||
column = {
|
||||
dataField: 'id',
|
||||
text: 'ID'
|
||||
};
|
||||
});
|
||||
|
||||
describe('when classes is an object', () => {
|
||||
beforeEach(() => {
|
||||
column.classes = 'td-test-class';
|
||||
wrapper = shallow(
|
||||
<Cell row={ row } columnIndex={ columnIndex } rowIndex={ rowIndex } column={ column } />);
|
||||
});
|
||||
|
||||
it('should render successfully', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.hasClass(column.classes)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when classes is a function', () => {
|
||||
const returnClasses = 'td-test-class';
|
||||
let classesCallBack;
|
||||
|
||||
beforeEach(() => {
|
||||
classesCallBack = sinon.stub()
|
||||
.withArgs(row[column.dataField], row, rowIndex, columnIndex)
|
||||
.returns(returnClasses);
|
||||
column.classes = classesCallBack;
|
||||
wrapper = shallow(
|
||||
<Cell row={ row } columnIndex={ columnIndex } rowIndex={ rowIndex } column={ column } />);
|
||||
});
|
||||
|
||||
afterEach(() => { classesCallBack.reset(); });
|
||||
|
||||
it('should render successfully', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.hasClass(returnClasses)).toBe(true);
|
||||
});
|
||||
|
||||
it('should call custom classes function correctly', () => {
|
||||
expect(classesCallBack.callCount).toBe(1);
|
||||
expect(
|
||||
classesCallBack.calledWith(row[column.dataField], row, rowIndex, columnIndex)
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when column.title prop is defined', () => {
|
||||
let column;
|
||||
const columnIndex = 1;
|
||||
const rowIndex = 1;
|
||||
|
||||
beforeEach(() => {
|
||||
column = {
|
||||
dataField: 'id',
|
||||
text: 'ID'
|
||||
};
|
||||
});
|
||||
|
||||
describe('when title is boolean', () => {
|
||||
beforeEach(() => {
|
||||
column.title = true;
|
||||
wrapper = shallow(
|
||||
<Cell row={ row } columnIndex={ columnIndex } rowIndex={ rowIndex } column={ column } />);
|
||||
});
|
||||
|
||||
it('should render title as cell value as default', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find('td').prop('title')).toEqual(row[column.dataField]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when title is custom function', () => {
|
||||
const customTitle = 'test_title';
|
||||
let titleCallBack;
|
||||
|
||||
beforeEach(() => {
|
||||
titleCallBack = sinon.stub()
|
||||
.withArgs(row[column.dataField], row, rowIndex, columnIndex)
|
||||
.returns(customTitle);
|
||||
column.title = titleCallBack;
|
||||
wrapper = shallow(
|
||||
<Cell row={ row } columnIndex={ columnIndex } rowIndex={ rowIndex } column={ column } />);
|
||||
});
|
||||
|
||||
it('should render title correctly by custom title function', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find('td').prop('title')).toBe(customTitle);
|
||||
});
|
||||
|
||||
it('should call custom title function correctly', () => {
|
||||
expect(titleCallBack.callCount).toBe(1);
|
||||
expect(
|
||||
titleCallBack.calledWith(row[column.dataField], row, rowIndex, columnIndex)
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when column.events prop is defined', () => {
|
||||
let column;
|
||||
const columnIndex = 1;
|
||||
const rowIndex = 1;
|
||||
|
||||
beforeEach(() => {
|
||||
column = {
|
||||
dataField: 'id',
|
||||
text: 'ID',
|
||||
events: {
|
||||
onClick: sinon.stub()
|
||||
}
|
||||
};
|
||||
|
||||
wrapper = shallow(
|
||||
<Cell row={ row } columnIndex={ columnIndex } rowIndex={ rowIndex } column={ column } />);
|
||||
});
|
||||
|
||||
it('should attachs DOM event successfully', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find('td').prop('onClick')).toBeDefined();
|
||||
});
|
||||
|
||||
it('event hook should be called when triggering', () => {
|
||||
wrapper.find('td').simulate('click');
|
||||
expect(column.events.onClick.callCount).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when column.align prop is defined', () => {
|
||||
let column;
|
||||
const columnIndex = 1;
|
||||
const rowIndex = 1;
|
||||
|
||||
beforeEach(() => {
|
||||
column = {
|
||||
dataField: 'id',
|
||||
text: 'ID'
|
||||
};
|
||||
});
|
||||
|
||||
describe('when align is string', () => {
|
||||
beforeEach(() => {
|
||||
column.align = 'center';
|
||||
wrapper = shallow(
|
||||
<Cell row={ row } columnIndex={ columnIndex } rowIndex={ rowIndex } column={ column } />);
|
||||
});
|
||||
|
||||
it('should render style.textAlign correctly', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find('td').prop('style').textAlign).toEqual(column.align);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when align is custom function', () => {
|
||||
const customAlign = 'center';
|
||||
let alignCallBack;
|
||||
|
||||
beforeEach(() => {
|
||||
alignCallBack = sinon.stub()
|
||||
.withArgs(row[column.dataField], row, rowIndex, columnIndex)
|
||||
.returns(customAlign);
|
||||
column.align = alignCallBack;
|
||||
wrapper = shallow(
|
||||
<Cell row={ row } columnIndex={ columnIndex } rowIndex={ rowIndex } column={ column } />);
|
||||
});
|
||||
|
||||
it('should render style.textAlign correctly', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find('td').prop('style').textAlign).toEqual(customAlign);
|
||||
});
|
||||
|
||||
it('should call custom headerAlign function correctly', () => {
|
||||
expect(alignCallBack.callCount).toBe(1);
|
||||
expect(
|
||||
alignCallBack.calledWith(row[column.dataField], row, rowIndex, columnIndex)
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when column.attrs prop is defined', () => {
|
||||
let column;
|
||||
const columnIndex = 1;
|
||||
const rowIndex = 1;
|
||||
|
||||
beforeEach(() => {
|
||||
column = {
|
||||
dataField: 'id',
|
||||
text: 'ID'
|
||||
};
|
||||
});
|
||||
|
||||
describe('when attrs is an object', () => {
|
||||
it('should render column.attrs correctly', () => {
|
||||
column.attrs = {
|
||||
'data-test': 'test',
|
||||
title: 'title',
|
||||
className: 'attrs-class',
|
||||
style: {
|
||||
backgroundColor: 'attrs-style-test',
|
||||
display: 'none',
|
||||
textAlign: 'right'
|
||||
}
|
||||
};
|
||||
wrapper = shallow(
|
||||
<Cell row={ row } columnIndex={ columnIndex } rowIndex={ 1 } column={ column } />);
|
||||
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find('td').prop('data-test')).toEqual(column.attrs['data-test']);
|
||||
expect(wrapper.find('td').prop('title')).toEqual(column.attrs.title);
|
||||
expect(wrapper.hasClass(column.attrs.className)).toBe(true);
|
||||
expect(wrapper.find('td').prop('style')).toEqual(column.attrs.style);
|
||||
expect(wrapper.find('td').prop('style').textAlign).toEqual(column.attrs.style.textAlign);
|
||||
});
|
||||
|
||||
describe('when column.title prop is defined', () => {
|
||||
it('attrs.title should be overwrited', () => {
|
||||
column.title = true;
|
||||
column.attrs = { title: 'title' };
|
||||
|
||||
wrapper = shallow(
|
||||
<Cell row={ row } columnIndex={ columnIndex } rowIndex={ 1 } column={ column } />);
|
||||
|
||||
expect(wrapper.find('td').prop('title')).toEqual(row[column.dataField]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when column.classes prop is defined', () => {
|
||||
it('attrs.class should be overwrited', () => {
|
||||
column.classes = 'td-test-class';
|
||||
column.attrs = { className: 'attrs-class' };
|
||||
|
||||
wrapper = shallow(
|
||||
<Cell row={ row } columnIndex={ columnIndex } rowIndex={ 1 } column={ column } />);
|
||||
|
||||
expect(wrapper.hasClass(column.classes)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when column.style prop is defined', () => {
|
||||
it('attrs.style should be overwrited', () => {
|
||||
column.style = { backgroundColor: 'red' };
|
||||
column.attrs = { style: { backgroundColor: 'attrs-style-test' } };
|
||||
|
||||
wrapper = shallow(
|
||||
<Cell row={ row } columnIndex={ columnIndex } rowIndex={ 1 } column={ column } />);
|
||||
|
||||
expect(wrapper.find('td').prop('style')).toEqual(column.style);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when column.align prop is defined', () => {
|
||||
it('attrs.style.textAlign should be overwrited', () => {
|
||||
column.align = 'center';
|
||||
column.attrs = { style: { textAlign: 'right' } };
|
||||
|
||||
wrapper = shallow(
|
||||
<Cell row={ row } columnIndex={ columnIndex } rowIndex={ 1 } column={ column } />);
|
||||
|
||||
expect(wrapper.find('td').prop('style').textAlign).toEqual(column.align);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when attrs is custom function', () => {
|
||||
let attrsCallBack;
|
||||
const customAttrs = {
|
||||
title: 'title',
|
||||
'data-test': 'test'
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
attrsCallBack = sinon.stub()
|
||||
.withArgs(row[column.dataField], row, rowIndex, columnIndex)
|
||||
.returns(customAttrs);
|
||||
column.attrs = attrsCallBack;
|
||||
wrapper = shallow(
|
||||
<Cell row={ row } columnIndex={ columnIndex } rowIndex={ rowIndex } column={ column } />);
|
||||
});
|
||||
|
||||
it('should render style.attrs correctly', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find('td').prop('data-test')).toEqual(customAttrs['data-test']);
|
||||
expect(wrapper.find('td').prop('title')).toEqual(customAttrs.title);
|
||||
});
|
||||
|
||||
it('should call custom attrs function correctly', () => {
|
||||
expect(attrsCallBack.callCount).toBe(1);
|
||||
expect(
|
||||
attrsCallBack.calledWith(row[column.dataField], row, rowIndex, columnIndex)
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when editable prop is true', () => {
|
||||
let onStartCallBack;
|
||||
const rowIndex = 1;
|
||||
@ -528,4 +172,259 @@ describe('Cell', () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('shouldComponentUpdate', () => {
|
||||
let props;
|
||||
let nextProps;
|
||||
|
||||
describe('when content is change', () => {
|
||||
const column = { dataField: 'name', text: 'Product Name' };
|
||||
beforeEach(() => {
|
||||
props = {
|
||||
row,
|
||||
columnIndex: 1,
|
||||
rowIndex: 1,
|
||||
column
|
||||
};
|
||||
wrapper = shallow(
|
||||
<Cell { ...props } />);
|
||||
});
|
||||
|
||||
it('should return true', () => {
|
||||
nextProps = { ...props, row: { id: 1, name: 'CDE' } };
|
||||
expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when column.hidden is change', () => {
|
||||
const column = { dataField: 'name', text: 'Product Name' };
|
||||
beforeEach(() => {
|
||||
props = {
|
||||
row,
|
||||
columnIndex: 1,
|
||||
rowIndex: 1,
|
||||
column
|
||||
};
|
||||
wrapper = shallow(
|
||||
<Cell { ...props } />);
|
||||
});
|
||||
|
||||
it('should return true', () => {
|
||||
nextProps = { ...props, column: { ...column, hidden: true } };
|
||||
expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when props.rowIndex is change', () => {
|
||||
const column = { dataField: 'name', text: 'Product Name' };
|
||||
beforeEach(() => {
|
||||
props = {
|
||||
row,
|
||||
columnIndex: 1,
|
||||
rowIndex: 1,
|
||||
column
|
||||
};
|
||||
wrapper = shallow(
|
||||
<Cell { ...props } />);
|
||||
});
|
||||
|
||||
it('should return true', () => {
|
||||
nextProps = { ...props, rowIndex: 2 };
|
||||
expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when props.columnIndex is change', () => {
|
||||
const column = { dataField: 'name', text: 'Product Name' };
|
||||
beforeEach(() => {
|
||||
props = {
|
||||
row,
|
||||
columnIndex: 1,
|
||||
rowIndex: 1,
|
||||
column
|
||||
};
|
||||
wrapper = shallow(
|
||||
<Cell { ...props } />);
|
||||
});
|
||||
|
||||
it('should return true', () => {
|
||||
nextProps = { ...props, columnIndex: 2 };
|
||||
expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when props.className is change', () => {
|
||||
const column = { dataField: 'name', text: 'Product Name' };
|
||||
beforeEach(() => {
|
||||
props = {
|
||||
row,
|
||||
columnIndex: 1,
|
||||
rowIndex: 1,
|
||||
column,
|
||||
className: 'test'
|
||||
};
|
||||
wrapper = shallow(
|
||||
<Cell { ...props } />);
|
||||
});
|
||||
|
||||
it('should return true', () => {
|
||||
nextProps = { ...props, className: null };
|
||||
expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when props.title is change', () => {
|
||||
const column = { dataField: 'name', text: 'Product Name' };
|
||||
beforeEach(() => {
|
||||
props = {
|
||||
row,
|
||||
columnIndex: 1,
|
||||
rowIndex: 1,
|
||||
column,
|
||||
title: 'test'
|
||||
};
|
||||
wrapper = shallow(
|
||||
<Cell { ...props } />);
|
||||
});
|
||||
|
||||
it('should return true', () => {
|
||||
nextProps = { ...props, title: '123' };
|
||||
expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when props.title is change', () => {
|
||||
const column = { dataField: 'name', text: 'Product Name' };
|
||||
beforeEach(() => {
|
||||
props = {
|
||||
row,
|
||||
columnIndex: 1,
|
||||
rowIndex: 1,
|
||||
column
|
||||
};
|
||||
wrapper = shallow(
|
||||
<Cell { ...props } />);
|
||||
});
|
||||
|
||||
it('should return true', () => {
|
||||
nextProps = { ...props, editable: true };
|
||||
expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when props.clickToEdit is change', () => {
|
||||
const column = { dataField: 'name', text: 'Product Name' };
|
||||
beforeEach(() => {
|
||||
props = {
|
||||
row,
|
||||
columnIndex: 1,
|
||||
rowIndex: 1,
|
||||
column
|
||||
};
|
||||
wrapper = shallow(
|
||||
<Cell { ...props } />);
|
||||
});
|
||||
|
||||
it('should return true', () => {
|
||||
nextProps = { ...props, clickToEdit: true };
|
||||
expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when props.dbclickToEdit is change', () => {
|
||||
const column = { dataField: 'name', text: 'Product Name' };
|
||||
beforeEach(() => {
|
||||
props = {
|
||||
row,
|
||||
columnIndex: 1,
|
||||
rowIndex: 1,
|
||||
column
|
||||
};
|
||||
wrapper = shallow(
|
||||
<Cell { ...props } />);
|
||||
});
|
||||
|
||||
it('should return true', () => {
|
||||
nextProps = { ...props, dbclickToEdit: true };
|
||||
expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when props.style is change', () => {
|
||||
const column = { dataField: 'name', text: 'Product Name' };
|
||||
beforeEach(() => {
|
||||
props = {
|
||||
row,
|
||||
columnIndex: 1,
|
||||
rowIndex: 1,
|
||||
column,
|
||||
style: {}
|
||||
};
|
||||
wrapper = shallow(
|
||||
<Cell { ...props } />);
|
||||
});
|
||||
|
||||
it('should return true', () => {
|
||||
nextProps = { ...props, style: { color: 'red' } };
|
||||
expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when column.formatExtraData is change', () => {
|
||||
const column = { dataField: 'name', text: 'Product Name', formatExtraData: { a: 1 } };
|
||||
beforeEach(() => {
|
||||
props = {
|
||||
row,
|
||||
columnIndex: 1,
|
||||
rowIndex: 1,
|
||||
column
|
||||
};
|
||||
wrapper = shallow(
|
||||
<Cell { ...props } />);
|
||||
});
|
||||
|
||||
it('should return true', () => {
|
||||
nextProps = { ...props, column: { ...column, formatExtraData: { b: 2 } } };
|
||||
expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when column.events is change', () => {
|
||||
const column = { dataField: 'name', text: 'Product Name', events: { a: jest.fn() } };
|
||||
beforeEach(() => {
|
||||
props = {
|
||||
row,
|
||||
columnIndex: 1,
|
||||
rowIndex: 1,
|
||||
column
|
||||
};
|
||||
wrapper = shallow(
|
||||
<Cell { ...props } />);
|
||||
});
|
||||
|
||||
it('should return true', () => {
|
||||
nextProps = { ...props, column: { ...column, events: { b: jest.fn() } } };
|
||||
expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when column.attrs is change', () => {
|
||||
const column = { dataField: 'name', text: 'Product Name', attrs: { 'data-att': 1 } };
|
||||
beforeEach(() => {
|
||||
props = {
|
||||
row,
|
||||
columnIndex: 1,
|
||||
rowIndex: 1,
|
||||
column
|
||||
};
|
||||
wrapper = shallow(
|
||||
<Cell { ...props } />);
|
||||
});
|
||||
|
||||
it('should return true', () => {
|
||||
nextProps = { ...props, column: { ...column, attrs: null } };
|
||||
expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -8,7 +8,7 @@ import Const from '../src/const';
|
||||
import SelectionCell from '../src//row-selection/selection-cell';
|
||||
import mockBodyResolvedProps from './test-helpers/mock/body-resolved-props';
|
||||
|
||||
const defaultColumns = [{
|
||||
let defaultColumns = [{
|
||||
dataField: 'id',
|
||||
text: 'ID'
|
||||
}, {
|
||||
@ -31,6 +31,19 @@ describe('Row', () => {
|
||||
price: 1000
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
defaultColumns = [{
|
||||
dataField: 'id',
|
||||
text: 'ID'
|
||||
}, {
|
||||
dataField: 'name',
|
||||
text: 'Name'
|
||||
}, {
|
||||
dataField: 'price',
|
||||
text: 'Price'
|
||||
}];
|
||||
});
|
||||
|
||||
describe('simplest row', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(
|
||||
@ -502,7 +515,7 @@ describe('Row', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('when cloumn.hidden is true', () => {
|
||||
describe('when column.hidden is true', () => {
|
||||
beforeEach(() => {
|
||||
const newColumns = [{
|
||||
dataField: 'id',
|
||||
@ -870,4 +883,445 @@ describe('Row', () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when column.style prop is defined', () => {
|
||||
let columns;
|
||||
const columnIndex = 1;
|
||||
|
||||
beforeEach(() => {
|
||||
columns = [...defaultColumns];
|
||||
});
|
||||
|
||||
describe('when style is an object', () => {
|
||||
beforeEach(() => {
|
||||
columns[columnIndex].style = { backgroundColor: 'red' };
|
||||
wrapper = shallow(
|
||||
<Row
|
||||
{ ...mockBodyResolvedProps }
|
||||
keyField={ keyField }
|
||||
rowIndex={ rowIndex }
|
||||
columns={ columns }
|
||||
row={ row }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
it('should render Cell correctly', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find(Cell).get(columnIndex).props.style).toEqual(columns[columnIndex].style);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when style is a function', () => {
|
||||
const returnStyle = { backgroundColor: 'red' };
|
||||
let styleCallBack;
|
||||
|
||||
beforeEach(() => {
|
||||
styleCallBack = sinon.stub().returns(returnStyle);
|
||||
columns[columnIndex].style = styleCallBack;
|
||||
wrapper = shallow(
|
||||
<Row
|
||||
{ ...mockBodyResolvedProps }
|
||||
keyField={ keyField }
|
||||
rowIndex={ rowIndex }
|
||||
columns={ columns }
|
||||
row={ row }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
afterEach(() => { styleCallBack.reset(); });
|
||||
|
||||
it('should render Cell correctly', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find(Cell).get(columnIndex).props.style).toEqual(returnStyle);
|
||||
});
|
||||
|
||||
it('should call custom style function correctly', () => {
|
||||
expect(styleCallBack.callCount).toBe(1);
|
||||
expect(
|
||||
styleCallBack.calledWith(row[columns[columnIndex].dataField], row, rowIndex, columnIndex)
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when column.classes prop is defined', () => {
|
||||
let columns;
|
||||
const columnIndex = 1;
|
||||
|
||||
beforeEach(() => {
|
||||
columns = [...defaultColumns];
|
||||
});
|
||||
|
||||
describe('when classes is an object', () => {
|
||||
beforeEach(() => {
|
||||
columns[columnIndex].classes = 'td-test-class';
|
||||
wrapper = shallow(
|
||||
<Row
|
||||
{ ...mockBodyResolvedProps }
|
||||
keyField={ keyField }
|
||||
rowIndex={ rowIndex }
|
||||
columns={ columns }
|
||||
row={ row }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
it('should render Cell correctly', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find(Cell).get(columnIndex).props.className)
|
||||
.toEqual(columns[columnIndex].classes);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when classes is a function', () => {
|
||||
const returnClasses = 'td-test-class';
|
||||
let classesCallBack;
|
||||
|
||||
beforeEach(() => {
|
||||
classesCallBack = sinon.stub().returns(returnClasses);
|
||||
columns[columnIndex].classes = classesCallBack;
|
||||
wrapper = shallow(
|
||||
<Row
|
||||
{ ...mockBodyResolvedProps }
|
||||
keyField={ keyField }
|
||||
rowIndex={ rowIndex }
|
||||
columns={ columns }
|
||||
row={ row }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
afterEach(() => { classesCallBack.reset(); });
|
||||
|
||||
it('should render Cell correctly', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find(Cell).get(columnIndex).props.className).toEqual(returnClasses);
|
||||
});
|
||||
|
||||
it('should call custom classes function correctly', () => {
|
||||
expect(classesCallBack.callCount).toBe(1);
|
||||
expect(
|
||||
classesCallBack.calledWith(
|
||||
row[columns[columnIndex].dataField], row, rowIndex, columnIndex)
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when column.title prop is defined', () => {
|
||||
let columns;
|
||||
const columnIndex = 1;
|
||||
|
||||
beforeEach(() => {
|
||||
columns = [...defaultColumns];
|
||||
});
|
||||
|
||||
describe('when title is an string', () => {
|
||||
beforeEach(() => {
|
||||
columns[columnIndex].title = true;
|
||||
wrapper = shallow(
|
||||
<Row
|
||||
{ ...mockBodyResolvedProps }
|
||||
keyField={ keyField }
|
||||
rowIndex={ rowIndex }
|
||||
columns={ columns }
|
||||
row={ row }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
it('should render Cell correctly', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find(Cell).get(columnIndex).props.title)
|
||||
.toEqual(row[columns[columnIndex].dataField]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when title is a function', () => {
|
||||
const returnTitle = 'test title';
|
||||
let titleCallBack;
|
||||
|
||||
beforeEach(() => {
|
||||
titleCallBack = sinon.stub().returns(returnTitle);
|
||||
columns[columnIndex].title = titleCallBack;
|
||||
wrapper = shallow(
|
||||
<Row
|
||||
{ ...mockBodyResolvedProps }
|
||||
keyField={ keyField }
|
||||
rowIndex={ rowIndex }
|
||||
columns={ columns }
|
||||
row={ row }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
afterEach(() => { titleCallBack.reset(); });
|
||||
|
||||
it('should render Cell correctly', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find(Cell).get(columnIndex).props.title).toEqual(returnTitle);
|
||||
});
|
||||
|
||||
it('should call custom title function correctly', () => {
|
||||
expect(titleCallBack.callCount).toBe(1);
|
||||
expect(
|
||||
titleCallBack.calledWith(
|
||||
row[columns[columnIndex].dataField], row, rowIndex, columnIndex)
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when column.events prop is defined', () => {
|
||||
let columns;
|
||||
const columnIndex = 1;
|
||||
|
||||
beforeEach(() => {
|
||||
columns = [...defaultColumns];
|
||||
columns[columnIndex].events = {
|
||||
onClick: sinon.stub()
|
||||
};
|
||||
|
||||
wrapper = shallow(
|
||||
<Row
|
||||
{ ...mockBodyResolvedProps }
|
||||
keyField={ keyField }
|
||||
rowIndex={ rowIndex }
|
||||
columns={ columns }
|
||||
row={ row }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
it('should attachs DOM event successfully', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find(Cell).get(columnIndex).props.onClick).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('when column.align prop is defined', () => {
|
||||
let columns;
|
||||
const columnIndex = 1;
|
||||
|
||||
beforeEach(() => {
|
||||
columns = [...defaultColumns];
|
||||
});
|
||||
|
||||
describe('when align is a string', () => {
|
||||
beforeEach(() => {
|
||||
columns[columnIndex].align = 'right';
|
||||
wrapper = shallow(
|
||||
<Row
|
||||
{ ...mockBodyResolvedProps }
|
||||
keyField={ keyField }
|
||||
rowIndex={ rowIndex }
|
||||
columns={ columns }
|
||||
row={ row }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
it('should render Cell correctly', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find(Cell).get(columnIndex).props.style.textAlign)
|
||||
.toEqual(columns[columnIndex].align);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when align is a function', () => {
|
||||
const returnAlign = 'right';
|
||||
let alignCallBack;
|
||||
|
||||
beforeEach(() => {
|
||||
alignCallBack = sinon.stub().returns(returnAlign);
|
||||
columns[columnIndex].align = alignCallBack;
|
||||
wrapper = shallow(
|
||||
<Row
|
||||
{ ...mockBodyResolvedProps }
|
||||
keyField={ keyField }
|
||||
rowIndex={ rowIndex }
|
||||
columns={ columns }
|
||||
row={ row }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
afterEach(() => { alignCallBack.reset(); });
|
||||
|
||||
it('should render Cell correctly', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find(Cell).get(columnIndex).props.style.textAlign).toEqual(returnAlign);
|
||||
});
|
||||
|
||||
it('should call custom align function correctly', () => {
|
||||
expect(alignCallBack.callCount).toBe(1);
|
||||
expect(
|
||||
alignCallBack.calledWith(row[columns[columnIndex].dataField], row, rowIndex, columnIndex)
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when column.attrs prop is defined', () => {
|
||||
let columns;
|
||||
const columnIndex = 1;
|
||||
|
||||
beforeEach(() => {
|
||||
columns = [...defaultColumns];
|
||||
});
|
||||
|
||||
describe('when attrs is an object', () => {
|
||||
it('should render Cell correctly', () => {
|
||||
columns[columnIndex].attrs = {
|
||||
'data-test': 'test',
|
||||
title: 'title',
|
||||
className: 'attrs-class',
|
||||
style: {
|
||||
backgroundColor: 'attrs-style-test',
|
||||
display: 'none',
|
||||
textAlign: 'right'
|
||||
}
|
||||
};
|
||||
|
||||
wrapper = shallow(
|
||||
<Row
|
||||
{ ...mockBodyResolvedProps }
|
||||
keyField={ keyField }
|
||||
rowIndex={ rowIndex }
|
||||
columns={ columns }
|
||||
row={ row }
|
||||
/>
|
||||
);
|
||||
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find(Cell).get(columnIndex).props['data-test'])
|
||||
.toEqual(columns[columnIndex].attrs['data-test']);
|
||||
expect(wrapper.find(Cell).get(columnIndex).props.title)
|
||||
.toEqual(columns[columnIndex].attrs.title);
|
||||
expect(wrapper.find(Cell).get(columnIndex).props.className)
|
||||
.toEqual(columns[columnIndex].attrs.className);
|
||||
expect(wrapper.find(Cell).get(columnIndex).props.style)
|
||||
.toEqual(columns[columnIndex].attrs.style);
|
||||
});
|
||||
|
||||
describe('when column.title prop is defined', () => {
|
||||
it('attrs.title should be overwrited', () => {
|
||||
columns[columnIndex].title = true;
|
||||
columns[columnIndex].attrs = { title: 'title' };
|
||||
|
||||
wrapper = shallow(
|
||||
<Row
|
||||
{ ...mockBodyResolvedProps }
|
||||
keyField={ keyField }
|
||||
rowIndex={ rowIndex }
|
||||
columns={ columns }
|
||||
row={ row }
|
||||
/>
|
||||
);
|
||||
|
||||
expect(wrapper.find(Cell).get(columnIndex).props.title)
|
||||
.toEqual(row[columns[columnIndex].dataField]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when column.classes prop is defined', () => {
|
||||
it('attrs.className should be overwrited', () => {
|
||||
columns[columnIndex].classes = 'td-test-class';
|
||||
columns[columnIndex].attrs = { className: 'attrs-class' };
|
||||
|
||||
wrapper = shallow(
|
||||
<Row
|
||||
{ ...mockBodyResolvedProps }
|
||||
keyField={ keyField }
|
||||
rowIndex={ rowIndex }
|
||||
columns={ columns }
|
||||
row={ row }
|
||||
/>
|
||||
);
|
||||
|
||||
expect(wrapper.find(Cell).get(columnIndex).props.className)
|
||||
.toEqual(columns[columnIndex].classes);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when column.style prop is defined', () => {
|
||||
it('attrs.style should be overwrited', () => {
|
||||
columns[columnIndex].style = { backgroundColor: 'red' };
|
||||
columns[columnIndex].attrs = { style: { backgroundColor: 'attrs-style-test' } };
|
||||
|
||||
wrapper = shallow(
|
||||
<Row
|
||||
{ ...mockBodyResolvedProps }
|
||||
keyField={ keyField }
|
||||
rowIndex={ rowIndex }
|
||||
columns={ columns }
|
||||
row={ row }
|
||||
/>
|
||||
);
|
||||
|
||||
expect(wrapper.find(Cell).get(columnIndex).props.style)
|
||||
.toEqual(columns[columnIndex].style);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when column.align prop is defined', () => {
|
||||
it('attrs.style.textAlign should be overwrited', () => {
|
||||
columns[columnIndex].align = 'center';
|
||||
columns[columnIndex].attrs = { style: { textAlign: 'right' } };
|
||||
|
||||
wrapper = shallow(
|
||||
<Row
|
||||
{ ...mockBodyResolvedProps }
|
||||
keyField={ keyField }
|
||||
rowIndex={ rowIndex }
|
||||
columns={ columns }
|
||||
row={ row }
|
||||
/>
|
||||
);
|
||||
|
||||
expect(wrapper.find(Cell).get(columnIndex).props.style.textAlign)
|
||||
.toEqual(columns[columnIndex].align);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when attrs is custom function', () => {
|
||||
let attrsCallBack;
|
||||
const customAttrs = {
|
||||
'data-test': 'test',
|
||||
title: 'title'
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
attrsCallBack = sinon.stub().returns(customAttrs);
|
||||
columns[columnIndex].attrs = attrsCallBack;
|
||||
wrapper = shallow(
|
||||
<Row
|
||||
{ ...mockBodyResolvedProps }
|
||||
keyField={ keyField }
|
||||
rowIndex={ rowIndex }
|
||||
columns={ columns }
|
||||
row={ row }
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
it('should render style.attrs correctly', () => {
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find(Cell).get(columnIndex).props['data-test'])
|
||||
.toEqual(customAttrs['data-test']);
|
||||
expect(wrapper.find(Cell).get(columnIndex).props.title)
|
||||
.toEqual(customAttrs.title);
|
||||
});
|
||||
|
||||
it('should call custom attrs function correctly', () => {
|
||||
expect(attrsCallBack.callCount).toBe(1);
|
||||
expect(
|
||||
attrsCallBack.calledWith(row[columns[columnIndex].dataField], row, rowIndex, columnIndex)
|
||||
).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user