Pr/resize test update

[thomasgwatson]

PR to sort out #13

I tried messing about with trying to test prop updates via TestUtils but didn't have any joy. Let me know if you have a strategy for doing that sort of testing.

[galkinrost]

I think it's a bit non-obvious behaviour, when we explicitly declare a parent's size to trigger resize handler and get the same values from bounding rect. I think in this case a parent component should also handle window resize event by itself and then pass new size to grid. So I see the such steps to implement this logic:

1. get display's width and height from the props if they're declared
2. don't add resize listener if height and width come through the props
3. recalculate grid (in the same way as in window resize listener) when props change in componentWillReceiveProps
4. set display's width and height to absolute values in styles

Agree with me?

[galkinrost]

What about tests there is a simple trick how to test changes of properties via TestUtils only, you can see it here https://github.com/babotech/react-ingrid/blob/master/test/Display.spec.js#L421

[thomasgwatson]

What do you think about trying to integrate the resize-observer-polyfill on the Display component? That would do away with the need for the window resize listener and abstract resize stuff away from users.

https://github.com/que-etc/resize-observer-polyfill

An example of how it has been used in a React component: https://github.com/souporserious/react-measure/blob/master/src/Measure.jsx

Otherwise, your suggestions make sense and I'm happy to hammer away at them over the next few days when I have a chance.

[galkinrost]

How can I see resize-observer-polyfill triggers listeners on every update of a document's tree https://github.com/que-etc/resize-observer-polyfill/blob/master/src/ResizeObserverController.js#L188. So it may cause a performance issue. I think it's better to control resize events on the parent component and then scale grid how it's required for your domain

[thomasgwatson]

Hmmm. Passing the parentWidth and parentHeight to the display (via displayStyle) generates a weird width-stretching of the parent div. The width-stretching happens iteratively (animates over 2 seconds) and stops. I thought it might be something to do with a padding/margins but only ancestor component with something like that is a great-grand parent component. Seems like some sort of a race condition but I'm not sure how it is happening.

Example with the width-stretching

For comparison to what is was rendering as previously.

Also, in trying to write a test based off https://github.com/babotech/react-ingrid/blob/master/test/Display.spec.js#L421

Even when I was passing the parentHeight/parentWidth down to the GridCalculator as the displayWidth/displayHeight, calling setDisplayClientBoundingRect was overwriting the displayWidth/displayHeight in the calculator anyway. So it feels like the test is pretty gutless :(

I'll push again but I don't think these changes offer an improvement as they stand :S

[galkinrost]

What about strange "width" bug, could you please create example in the example directory?