whetstone / redux-devtools-diff-monitor

https://www.npmjs.com/redux-devtools-diff-monitor
176 stars 14 forks source link

Ensure works with modifying, deleting and changing items in arrays #18

Closed theSmaw closed 9 years ago

theSmaw commented 9 years ago

Fixes https://github.com/whetstone/redux-devtools-diff-monitor/issues/16.

The issue wasn't actually Immutable related and occurred with plain JavaScript objects as well. Rather it was to do with the data coming back from deep-diff.

deep-diff returns an array for each change between two pieces of data. For all data types, and for items that change value in an array, each item in the diff array has 'path', 'lhs', and 'rhs' properties.

However, when items are removed or deleted from arrays, items in the diff array for these changes have 'index' and 'item' properties, with 'lhs' and 'rhs' inside the 'item'. They do not necessarily have 'path' properties;

e.g https://github.com/theSmaw/redux-devtools-diff-monitor/blob/2b2ffadb421abf6904c41fc80b7aaba8374b4c7c/test/utils/diff-state.spec.js#L397-L406

I have had to tweak the creation of newState, oldState and path to handle these different data structures:

https://github.com/theSmaw/redux-devtools-diff-monitor/blob/2b2ffadb421abf6904c41fc80b7aaba8374b4c7c/src/action/index.js#L29-L55

I have extracted diffState from ManifestComponent to make the diffing more easily testable. I have then covered ManfiestActionComponent with tests to ensure that the results of the diff are correctly built up for output to the screen. There is now good coverage for various data changes for both plain JavaScript and Immutable data.

The results of this PR seem to work well now with @ingro's use case, and still work well with the Todo example, and within my own project.

screen shot on 2015-09-30 at 13-10-23

screen shot on 2015-09-30 at 13-12-39

iktl commented 9 years ago

Thanks @theSmaw!