Render columns dynamically on wide tables (#7693)

* Use grid for wide tables

* WIP

* Fix CSS issues

* Add unit test

* Add constant

* Improve ref

* Remove wrong refs; no longer need extra height

* Revert number of columns
This commit is contained in:
Beto Dealmeida
2019-06-12 10:09:04 -07:00
committed by GitHub
parent f3181ca6dc
commit 5cf06331fe
3 changed files with 133 additions and 10 deletions

View File

@@ -18,7 +18,7 @@
*/
import React from 'react';
import { mount } from 'enzyme';
import FilterableTable from '../../../../src/components/FilterableTable/FilterableTable';
import FilterableTable, { MAX_COLUMNS_FOR_TABLE } from '../../../../src/components/FilterableTable/FilterableTable';
describe('FilterableTable', () => {
const mockedProps = {
@@ -36,10 +36,22 @@ describe('FilterableTable', () => {
it('is valid element', () => {
expect(React.isValidElement(<FilterableTable {...mockedProps} />)).toBe(true);
});
it('renders a grid with 2 rows', () => {
it('renders a grid with 2 Table rows', () => {
expect(wrapper.find('.ReactVirtualized__Grid')).toHaveLength(1);
expect(wrapper.find('.ReactVirtualized__Table__row')).toHaveLength(2);
});
it('renders a grid with 2 Grid rows for wide tables', () => {
const wideTableColumns = MAX_COLUMNS_FOR_TABLE + 1;
const wideTableMockedProps = {
orderedColumnKeys: Array.from(Array(wideTableColumns), (_, x) => `col_${x}`),
data: [
Object.assign(...Array.from(Array(wideTableColumns)).map((val, x) => ({ [`col_${x}`]: x }))),
],
height: 500,
};
const wideTableWrapper = mount(<FilterableTable {...wideTableMockedProps} />);
expect(wideTableWrapper.find('.ReactVirtualized__Grid')).toHaveLength(2);
});
it('filters on a string', () => {
const props = {
...mockedProps,