Blueprint: Testing Blueprint table causes error or only 4 rows render

[joshcarvel]

Environment

• __Package version(s)__: "@blueprintjs/table": "3.7.1"
• __Browser and OS versions__: Ubuntu 16.04

If possible, link to a minimal repro (fork this code sandbox): https://codesandbox.io/s/blueprint-sandbox-3iqf6

Steps to reproduce

1. Create a simple Blueprint table with more than 4 rows
2. Run a test on it checking the number of rows with Enzyme or another testing library

Actual behavior

In the sandbox when the test runs you get the error "Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'."

When running the same example locally in a create-react-app the test runs but fails with "Expected length: 10 Received length: 4". If numRows is set to 4 or lower, the test passes when the correct number of rows are expected, but no more than 4 rows are ever rendered. I also found exactly the same thing for rendering Columns.

Expected behavior

The correct number of rows and columns should be rendered in the test environment.

Possible solution

Don't know - I have already tried a different testing library (react testing library), running the assertion in a callback from the onCompleteRender prop, using different variations of the renderMode prop and setting the row height to minimal size.

[olivergeorge]

I had this problem where the table was initially rendered with numRows=0. It's like some internal state got confused. My workaround is to set the key prop to numRows so that the internal state was cleared when the row count changed.

[bsherin]

Can you elaborate on this a little? Where did you set the key prob to zero? I've been having similar problems that i can't quite localize. They all seem to involve a number of rows equal to 4.

[olivergeorge]

I've deleted the code since but it boiled down to this. Changing the key is a way to ensure a stateful component resets its state.

import { Column, Table } from "@blueprintjs/table";

<Table numRows={numRows}  key={numRows}>
    <Column />
    <Column />
    <Column />
</Table>

[bsherin]

Thanks for this. I've had to use this tricky in all of my uses of the Table component. I haven't been able to boil it down to something simple that reproduces the issue. But some features are that: (1) The table only renders exactly 4 rows; (2) it happens after a change in the number of row, or the column width, or column ordering; (3) I believe the problem only started happening after I began using webpack to reduce the footprint of blueprintjs; (4) strategic use of the key deals with the problem. in some cases I'm feeding in a hash that incorporates more than just the number of rows.

[olivergeorge]

I was using web pack to bundle up libs too.

[mvshvets]

I've deleted the code since but it boiled down to this. Changing the key is a way to ensure a stateful component resets its state.

import { Column, Table } from "@blueprintjs/table";

<Table numRows={numRows}  key={numRows}>
    <Column />
    <Column />
    <Column />
</Table>

It helped me. A request was sent to the server to delete the value, after which a request was sent to the server to obtain a new list of values. After that, a new table error popped up a table error

[MonkeyAndres]

I solved that by forcing a scrollToRegion(lastColumnRegion) after onCompleteRender. Hope it helps. Let me know if you need more info.

const tableRef = useRef()

const onCompleteRender = useCallback(() => {
  const lastColumnRegion = Regions.column(10) // Your table last column
  tableRef.current.scrollToRegion(lastColumnRegion)
}, [])

<Table
  {...tableProps}
  ref={tableRef}
  onCompleteRender={onCompleteRender}
>
  {tableContent}
</Table

[bsherin]

I'll give it a shot, and report back. Thanks.