diff --git a/app/react/src/client/preview/client_api.js b/app/react/src/client/preview/client_api.js index 0e166971d34b..8370cd487669 100644 --- a/app/react/src/client/preview/client_api.js +++ b/app/react/src/client/preview/client_api.js @@ -8,6 +8,7 @@ export default class ClientApi { this._storyStore = storyStore; this._addons = {}; this._globalDecorators = []; + this._storiesAdded = false; } setAddon(addon) { @@ -18,6 +19,9 @@ export default class ClientApi { } addDecorator(decorator) { + if (this._storiesAdded) { + throw new Error('Global decorators added after loading stories will not be applied'); + } this._globalDecorators.push(decorator); } @@ -51,6 +55,8 @@ export default class ClientApi { }); api.add = (storyName, getStory) => { + this._storiesAdded = true; + if (typeof storyName !== 'string') { throw new Error(`Invalid or missing storyName provided for a "${kind}" story.`); } diff --git a/app/react/src/client/preview/client_api.test.js b/app/react/src/client/preview/client_api.test.js index acb45b425c1f..da6a6bb1abb1 100644 --- a/app/react/src/client/preview/client_api.test.js +++ b/app/react/src/client/preview/client_api.test.js @@ -150,6 +150,16 @@ describe('preview.client_api', () => { expect(storyStore.stories[0].fn()).toBe('bb-Hello'); }); + it('should throw on adding global decorators after stories', () => { + const storyStore = new StoryStore(); + const api = new ClientAPI({ storyStore }); + const localApi = api.storiesOf('none'); + localApi.add('storyName', () => 'Hello'); + expect(() => { + api.addDecorator(fn => `bb-${fn()}`); + }).toThrow('Global decorators added after loading stories will not be applied'); + }); + it('should utilize both decorators at once', () => { const storyStore = new StoryStore(); const api = new ClientAPI({ storyStore });