forked from storybookjs/storybook
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
24 changed files
with
569 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import { SET_GLOBALS } from '@storybook/core-events'; | ||
| import { ModuleFn } from '../index'; | ||
| import { SetGlobalsPayload } from './globals'; | ||
|
|
||
| export type Scope = { | ||
| value: string; | ||
| title: string; | ||
| }; | ||
|
|
||
| export interface ScopeState { | ||
| list: Scope[]; | ||
| active?: Scope['value']; | ||
| } | ||
|
|
||
| export type SubState = ScopeState; | ||
|
|
||
| export interface SubAPI { | ||
| getActiveScope(): Scope['value']; | ||
| setActiveScope(scope: Scope['value']): Promise<Scope['value']>; | ||
| getScopes(): Scope[]; | ||
| setScopes(scopes: Scope[]): Promise<Scope[]>; | ||
| setScopeGlobal(scope: Scope['value']): Promise<void>; | ||
| } | ||
|
|
||
| export const init: ModuleFn = ({ store, fullAPI }) => { | ||
| const api: SubAPI = { | ||
| getActiveScope(): Scope['value'] { | ||
| return store.getState().scope.active; | ||
| }, | ||
| async setActiveScope(activeScope: Scope['value']) { | ||
| const { scope } = store.getState(); | ||
| const updatedScope = { ...scope, active: activeScope }; | ||
| await store.setState({ scope: updatedScope }); | ||
| return activeScope; | ||
| }, | ||
| getScopes(): Scope[] { | ||
| return store.getState().scope?.list ?? []; | ||
| }, | ||
| async setScopes(scopes: Scope[]) { | ||
| const { scope } = store.getState(); | ||
| const updatedScope = { ...scope, list: scopes }; | ||
| await store.setState({ scope: updatedScope }); | ||
| return scopes; | ||
| }, | ||
| async setScopeGlobal(scope: Scope['value']) { | ||
| this.setActiveScope(scope); | ||
| const globals = fullAPI.getGlobals(); | ||
| fullAPI.updateGlobals({ | ||
| ...globals, | ||
| scope, | ||
| }); | ||
| }, | ||
| }; | ||
|
|
||
| const state: SubState = { | ||
| list: [], | ||
| active: undefined, | ||
| }; | ||
|
|
||
| const initModule = async () => { | ||
| fullAPI.on( | ||
| SET_GLOBALS, | ||
| async function handleGlobalsReady({ globals, globalTypes }: SetGlobalsPayload) { | ||
| await api.setScopes(globalTypes.scope?.list ?? []); | ||
| await api.setActiveScope(globals?.scope ?? globalTypes.scope?.defaultValue); | ||
| } | ||
| ); | ||
|
|
||
| await store.setState({ | ||
| scope: { | ||
| list: [], | ||
| active: undefined, | ||
| }, | ||
| }); | ||
| }; | ||
|
|
||
| return { api, state, init: initModule }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| import { SET_GLOBALS } from '@storybook/core-events'; | ||
|
|
||
| import { init as initScopes } from '../modules/scopes'; | ||
|
|
||
| let scopesApi; | ||
| let scopesInit; | ||
| let store; | ||
| let provider; | ||
| let currentState; | ||
|
|
||
| const fullAPI = { | ||
| callbacks: {}, | ||
| on(event, fn) { | ||
| this.callbacks[event] = this.callbacks[event] || []; | ||
| this.callbacks[event].push(fn); | ||
| }, | ||
| async emit(event, ...args) { | ||
| const callbacks = []; | ||
| this.callbacks[event]?.forEach((cb) => { | ||
| callbacks.push(cb(...args)); | ||
| }); | ||
| await Promise.all(callbacks); | ||
| }, | ||
| getGlobals: jest.fn(), | ||
| updateGlobals: jest.fn(), | ||
| }; | ||
|
|
||
| beforeEach(async () => { | ||
| currentState = { | ||
| scope: { | ||
| list: [ | ||
| { title: 'Scope A', value: 'scope-a' }, | ||
| { title: 'Scope B', value: 'scope-b' }, | ||
| ], | ||
| }, | ||
| }; | ||
| store = { | ||
| getState: () => currentState, | ||
| setState: jest.fn((patch) => { | ||
| currentState = { | ||
| ...currentState, | ||
| ...(typeof patch === 'function' ? patch(currentState) : patch), | ||
| }; | ||
| }), | ||
| }; | ||
| provider = { getConfig: jest.fn(() => ({})) }; | ||
| const { api, init } = initScopes({ store, provider, fullAPI }); | ||
| scopesApi = api; | ||
| scopesInit = init; | ||
| }); | ||
|
|
||
| describe('scope API', () => { | ||
| describe('getActiveScope', () => { | ||
| it('should return active scope', () => { | ||
| const activeScope = 'scope-a'; | ||
| currentState.scope.active = activeScope; | ||
| expect(scopesApi.getActiveScope()).toStrictEqual(activeScope); | ||
| }); | ||
| }); | ||
|
|
||
| describe('setActiveScope', () => { | ||
| it('should set active scope', async () => { | ||
| const newScope = 'scope-b'; | ||
| currentState.scope.active = 'scope-a'; | ||
| await scopesApi.setActiveScope(newScope); | ||
| expect(currentState.scope.active).toStrictEqual(newScope); | ||
| await scopesApi.setActiveScope(undefined); | ||
| expect(currentState.scope.active).toStrictEqual(undefined); | ||
| }); | ||
| }); | ||
|
|
||
| describe('getScopes', () => { | ||
| it('should return scope list', () => { | ||
| expect(scopesApi.getScopes()).toStrictEqual(currentState.scope.list); | ||
| }); | ||
| }); | ||
|
|
||
| describe('setScopes', () => { | ||
| it('should set scope list', async () => { | ||
| const newScopes = [ | ||
| { title: 'Scope C', value: 'scope-c' }, | ||
| { title: 'Scope D', value: 'scope-d' }, | ||
| ]; | ||
| await scopesApi.setScopes(newScopes); | ||
| expect(currentState.scope.list).toStrictEqual(newScopes); | ||
| }); | ||
| }); | ||
|
|
||
| describe('setScopeGlobal', () => { | ||
| it('should update globals and scope state', async () => { | ||
| const newScope = 'scope-b'; | ||
| await scopesApi.setScopeGlobal(newScope); | ||
| expect(fullAPI.updateGlobals).toHaveBeenCalledWith( | ||
| expect.objectContaining({ | ||
| scope: newScope, | ||
| }) | ||
| ); | ||
| expect(currentState.scope.active).toStrictEqual(newScope); | ||
| }); | ||
| }); | ||
|
|
||
| describe('initModule', () => { | ||
| it('starts by setting default scope state', async () => { | ||
| await scopesInit(); | ||
| expect(currentState.scope.list).toStrictEqual([]); | ||
| expect(currentState.scope.active).toStrictEqual(undefined); | ||
| }); | ||
|
|
||
| it('adds scopes and sets defaults active scope', async () => { | ||
| const newScopes = [ | ||
| { title: 'Scope C', value: 'scope-c' }, | ||
| { title: 'Scope D', value: 'scope-d' }, | ||
| ]; | ||
| await scopesInit(); | ||
| await fullAPI.emit(SET_GLOBALS, { | ||
| globalTypes: { | ||
| scope: { | ||
| list: newScopes, | ||
| defaultValue: newScopes[0].value, | ||
| }, | ||
| }, | ||
| }); | ||
| expect(currentState.scope.list).toStrictEqual(newScopes); | ||
| expect(currentState.scope.active).toStrictEqual(newScopes[0].value); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.