Addon-actions: display enumerable properties from prototype chain

addons/actions/src/util.js

@@ -70,9 +70,12 @@ export function decycle(object, depth = 15) {
       } else {
         obj = { [CLASS_NAME_KEY]: value.constructor ? value.constructor.name : 'Object' };
 
-        Object.keys(value).forEach(name => {
+        // We want to iterate over all the enumerable properties, including the ones in prototype chain
+        // eslint-disable-next-line no-restricted-syntax, guard-for-in
+        for (const name in value) {
+          // noinspection JSUnfilteredForInLoop
           obj[name] = derez(value[name], `${path}[${JSON.stringify(name)}]`, _depth + 1);
-        });
+        }
       }
 
       if (_depth === 0 && isObject(value) && isCyclic) {

examples/cra-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot

@@ -18,6 +18,15 @@ exports[`Storyshots Addon Actions Decorated Action 1`] = `
 </button>
 `;
 
+exports[`Storyshots Addon Actions File object as payload 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  File
+</button>
+`;
+
 exports[`Storyshots Addon Actions Function Name 1`] = `
 <button
   className="css-1yjiefr"

examples/cra-kitchen-sink/src/stories/addon-actions.stories.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action, decorateAction } from '@storybook/addon-actions';
 import { Button } from '@storybook/react/demo';
+import { File } from 'global';
 
 const pickFirst = decorateAction([args => args.slice(0, 1)]);
 
@@ -17,4 +18,8 @@ storiesOf('Addon Actions', module)
     const fn = action('fnName');
     return <Button onClick={fn}>Action.name: {fn.name}</Button>;
   })
-  .add('Reserved keyword as name', () => <Button onClick={action('delete')}>Delete</Button>);
+  .add('Reserved keyword as name', () => <Button onClick={action('delete')}>Delete</Button>)
+  .add('File object as payload', () => {
+    const file = new File([''], 'filename.txt', { type: 'text/plain', lastModified: new Date() });
+    return <Button onClick={() => action('file')(file)}>File</Button>;
+  });