There are a number of features that need to be tested. They follow.
- Make sure the headers are rendered for each column
- Column visibility. By default, columns have
defaultVisible: true. We need to test explicitly they are rendered or not in all cases: * defaultVisible: true * defaultVisible: false * visible: true * visible: false
Then we need to make sure that when a column is hidden/shown from the column menu (by user interaction), it also gets hidden/displayed in the DOM. (both controlled and uncontrolled behavior).
For controlled behavior, we have to make sure `onColumnVisibilityChange` is called.
- Make sure
withColumnMenuis working correctly and column menu is accessible or not depending on this flag. - Column sizes - we need to make sure width and flex props work properly. Check both column header and cells have the specified width
- Check custom column rendering function
- Check
loadingcontrolled prop works as expected. - Check
emptyTextworks - Check all
dataSourcesupported formats are handled correctly (array,string/function/promise) a. array b. string b. function b. promise - Check pagination works and pagination toolbar is visible when dataSource is remote. Check pagination toolbar not present when
pagination: false - Check
pageSize,defaultPageSize,onPageSizeChange - Check
page,defaultPage,onPageChangework as expected. Check controlled page works (integrate datagrid into another cmp, and have thepageincremented when button is clicked. Specify thedataSourceas a function, and see that is it passed the correct page - theskipquery param) - Check
paginationToolbarPropsworks as expected
- Check sort indicator is there, for a given
sortInfoobject - Check
onSortChangeis called properly, with a correctsortInfoargument - Check single/multiple column sorting results in a correct
sortInfoarg whenonSortChangeis called - Check sort indicator is present in column header on both single&multiple sorting
- The first thing we should check, since we are doing virtual rendering, is that both the first and the end rows in the grid are rendered when they are in view. This means when scrollTop is 0 on the vertical scrollbar, the first record is in the DOM, and when scrollTop is maximum, the last record is in the DOM.
PLEASE do not work on this yet, since we're currently working on pagination, and change the scrolling elements.
- Make sure
rowStyle(both object & function returning an object - see http://zippyui.github.io/react-datagrid/#/examples/custom-row-styling) work as expected - Check
column.styleis applied and checkcolumn.textAlign('left','right','center') works as expected - Check
showCellBordersprop works
- Check single selection works
- Check multiple selection works
- Check grouping works (
groupByprop)
- Check filtering works