diff --git a/addons/actions/src/models/ActionOptions.ts b/addons/actions/src/models/ActionOptions.ts index 548c9c5075bb..c4a838b17c25 100644 --- a/addons/actions/src/models/ActionOptions.ts +++ b/addons/actions/src/models/ActionOptions.ts @@ -2,4 +2,5 @@ export interface ActionOptions { depth?: number; clearOnStoryChange?: boolean; limit?: number; + allowFunction?: boolean; } diff --git a/addons/actions/src/preview/__tests__/action.test.js b/addons/actions/src/preview/__tests__/action.test.js index 75128b8b5c25..36a954efdb58 100644 --- a/addons/actions/src/preview/__tests__/action.test.js +++ b/addons/actions/src/preview/__tests__/action.test.js @@ -91,3 +91,62 @@ describe('Depth config', () => { }); }); }); + +describe('allowFunction config', () => { + it('with global allowFunction false', () => { + const channel = createChannel(); + + const allowFunction = false; + + configureActions({ + allowFunction, + }); + + action('test-action')({ + root: { + one: { + a: 1, + b: () => 'foo', + }, + }, + }); + + expect(getChannelData(channel)[0]).toEqual({ + root: { + one: { + a: 1, + b: expect.any(Function), + }, + }, + }); + }); + + // TODO: this test is pretty pointless, as the real channel isn't used, nothing is changed + it('with global allowFunction true', () => { + const channel = createChannel(); + + const allowFunction = true; + + configureActions({ + allowFunction, + }); + + action('test-action')({ + root: { + one: { + a: 1, + b: () => 'foo', + }, + }, + }); + + expect(getChannelData(channel)[0]).toEqual({ + root: { + one: { + a: 1, + b: expect.any(Function), + }, + }, + }); + }); +}); diff --git a/addons/actions/src/preview/action.ts b/addons/actions/src/preview/action.ts index f24843595593..1a3642325579 100644 --- a/addons/actions/src/preview/action.ts +++ b/addons/actions/src/preview/action.ts @@ -22,6 +22,7 @@ export function action(name: string, options: ActionOptions = {}): HandlerFuncti options: { ...actionOptions, depth: minDepth + (actionOptions.depth || 3), + allowFunction: actionOptions.allowFunction || false, }, }; channel.emit(EVENT_ID, actionDisplayToEmit); diff --git a/examples/official-storybook/stories/addon-actions.stories.js b/examples/official-storybook/stories/addon-actions.stories.js index 88d87745f9c0..8e3afb2858fb 100644 --- a/examples/official-storybook/stories/addon-actions.stories.js +++ b/examples/official-storybook/stories/addon-actions.stories.js @@ -139,8 +139,10 @@ export const allTypes = () => { - - + + diff --git a/lib/channel-postmessage/src/index.ts b/lib/channel-postmessage/src/index.ts index 8b8cd2faee6e..a2a01a4ea836 100644 --- a/lib/channel-postmessage/src/index.ts +++ b/lib/channel-postmessage/src/index.ts @@ -67,12 +67,18 @@ export class PostmsgTransport { }); } let depth = 15; + let allowFunction = true; + + if (options && typeof options.allowFunction === 'boolean') { + // eslint-disable-next-line prefer-destructuring + allowFunction = options.allowFunction; + } if (options && Number.isInteger(options.depth)) { // eslint-disable-next-line prefer-destructuring depth = options.depth; } - const data = stringify({ key: KEY, event }, { maxDepth: depth }); + const data = stringify({ key: KEY, event }, { maxDepth: depth, allowFunction }); // TODO: investigate http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage // might replace '*' with document.location ?