@storybook/manager-api 7.0.19 → 7.0.21

package/src/tests/layout.test.js

@@ -0,0 +1,168 @@
+import { themes } from '@storybook/theming';
+import { init as initLayout } from '../modules/layout';
+
+let layoutApi;
+let store;
+let provider;
+let currentState;
+
+beforeEach(() => {
+  currentState = {
+    ui: {
+      enableShortcuts: true,
+    },
+    layout: {
+      showToolbar: true,
+      isFullscreen: false,
+      showPanel: true,
+      showNav: true,
+      panelPosition: 'bottom',
+    },
+    selectedPanel: 'storybook/actions/panel',
+    theme: themes.light,
+  };
+  store = {
+    getState: () => currentState,
+    setState: jest.fn((patch) => {
+      currentState = {
+        ...currentState,
+        ...(typeof patch === 'function' ? patch(currentState) : patch),
+      };
+    }),
+  };
+  provider = { getConfig: jest.fn(() => ({})) };
+  layoutApi = initLayout({ store, provider }).api;
+});
+
+describe('layout API', () => {
+  describe('toggleFullscreen', () => {
+    it('should toggle isFullscreen', () => {
+      currentState.layout.isFullscreen = false;
+      layoutApi.toggleFullscreen();
+      expect(currentState.layout.isFullscreen).toBe(true);
+      layoutApi.toggleFullscreen();
+      expect(currentState.layout.isFullscreen).toBe(false);
+      layoutApi.toggleFullscreen(false);
+      expect(currentState.layout.isFullscreen).toBe(false);
+      layoutApi.toggleFullscreen(true);
+      expect(currentState.layout.isFullscreen).toBe(true);
+    });
+
+    it('should not affect nav or panel state when enabling fullscreen', () => {
+      currentState.layout.isFullscreen = false;
+      layoutApi.toggleFullscreen();
+      expect(currentState.layout.showNav).toBe(true);
+      expect(currentState.layout.showNav).toBe(true);
+    });
+
+    it('should enable nav when exiting fullscreen', () => {
+      currentState.layout.isFullscreen = true;
+      currentState.layout.showNav = false;
+      layoutApi.toggleFullscreen();
+      expect(currentState.layout).toEqual(
+        expect.objectContaining({
+          isFullscreen: false,
+          showPanel: true,
+          showNav: true,
+        })
+      );
+    });
+
+    describe('singleStory=true', () => {
+      beforeEach(() => {
+        layoutApi = initLayout({ store, provider, singleStory: true }).api;
+      });
+
+      it('should NOT enable nav when exiting fullscreen', () => {
+        currentState.layout.showNav = false;
+        layoutApi.toggleFullscreen();
+        expect(currentState.layout).toEqual(
+          expect.objectContaining({
+            isFullscreen: true,
+            showPanel: true,
+            showNav: false,
+          })
+        );
+      });
+    });
+  });
+
+  describe('toggleNav', () => {
+    it('should toggle showNav', () => {
+      currentState.layout.showNav = true;
+      layoutApi.toggleNav();
+      expect(currentState.layout.showNav).toBe(false);
+      layoutApi.toggleNav();
+      expect(currentState.layout.showNav).toBe(true);
+      layoutApi.toggleNav(true);
+      expect(currentState.layout.showNav).toBe(true);
+      layoutApi.toggleNav(false);
+      expect(currentState.layout.showNav).toBe(false);
+    });
+
+    describe('singleStory=true', () => {
+      beforeEach(() => {
+        layoutApi = initLayout({ store, provider, singleStory: true }).api;
+      });
+
+      it('should NOT toggle showNav', () => {
+        currentState.layout.showNav = false;
+        layoutApi.toggleNav();
+        expect(currentState.layout.showNav).toBe(false);
+        layoutApi.toggleNav(true);
+        expect(currentState.layout.showNav).toBe(false);
+      });
+    });
+  });
+
+  describe('setOptions', () => {
+    const getLastSetStateArgs = () => {
+      const { calls } = store.setState.mock;
+      return calls[calls.length - 1];
+    };
+
+    it('should not change selectedPanel if it is undefined in the options', () => {
+      layoutApi.setOptions({});
+
+      expect(getLastSetStateArgs()).toBeUndefined();
+    });
+
+    it('should not change selectedPanel if it is undefined in the options, but something else has changed', () => {
+      layoutApi.setOptions({ panelPosition: 'right' });
+
+      expect(getLastSetStateArgs()[0].selectedPanel).toBeUndefined();
+    });
+
+    it('should not change selectedPanel if it is currently the same', () => {
+      const panelName = currentState.selectedPanel;
+      layoutApi.setOptions({});
+      // second call is needed to overwrite initial layout
+      layoutApi.setOptions({ selectedPanel: panelName });
+
+      expect(getLastSetStateArgs()).toBeUndefined();
+    });
+
+    it('should not change selectedPanel if it is currently the same, but something else has changed', () => {
+      layoutApi.setOptions({});
+      // second call is needed to overwrite initial layout
+      layoutApi.setOptions({ panelPosition: 'right', selectedPanel: currentState.selectedPanel });
+
+      expect(getLastSetStateArgs()[0].selectedPanel).toBeUndefined();
+    });
+
+    it('should set selectedPanel initially', () => {
+      const panelName = 'storybook/a11y/panel';
+      layoutApi.setOptions({ selectedPanel: panelName });
+
+      expect(getLastSetStateArgs()[0].selectedPanel).toEqual(panelName);
+    });
+
+    it('should change selectedPanel if it is defined in the options and is different', () => {
+      const panelName = 'storybook/a11y/panel';
+      layoutApi.setOptions({});
+      layoutApi.setOptions({ selectedPanel: panelName });
+
+      expect(getLastSetStateArgs()[0].selectedPanel).toEqual(panelName);
+    });
+  });
+});

package/src/tests/notifications.test.js

@@ -0,0 +1,35 @@
+import { init as initNotifications } from '../modules/notifications';
+
+describe('notifications API', () => {
+  it('allows adding notifications', () => {
+    const store = {
+      getState: () => ({
+        notifications: [],
+      }),
+      setState: jest.fn(),
+    };
+
+    const { api } = initNotifications({ store });
+
+    api.addNotification({ id: '1' });
+    expect(store.setState).toHaveBeenCalledWith({
+      notifications: [{ id: '1' }],
+    });
+  });
+
+  it('allows removing notifications', () => {
+    const store = {
+      getState: () => ({
+        notifications: [{ id: '1' }, { id: '2' }, { id: '3' }],
+      }),
+      setState: jest.fn(),
+    };
+
+    const { api } = initNotifications({ store });
+
+    api.clearNotification('2');
+    expect(store.setState).toHaveBeenCalledWith({
+      notifications: [{ id: '1' }, { id: '3' }],
+    });
+  });
+});

package/src/tests/shortcut.test.js

@@ -0,0 +1,111 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { global } from '@storybook/global';
+import { eventToShortcut, keyToSymbol } from '../lib/shortcut';
+
+const { KeyboardEvent } = global;
+const ev = (attr) => new KeyboardEvent('keydown', { ...attr });
+
+describe('eventToShortcut', () => {
+  test('it handles alt key inputs', () => {
+    const output = eventToShortcut(ev({ altKey: true, key: 'Alt' }));
+
+    expect(output).toEqual(null);
+  });
+  test('it handles ctrl key inputs', () => {
+    const output = eventToShortcut(ev({ ctrlKey: true, key: 'Control' }));
+    expect(output).toEqual(null);
+  });
+  test('it handles meta key inputs', () => {
+    const output = eventToShortcut(ev({ metaKey: true, key: 'Meta' }));
+    expect(output).toEqual(null);
+  });
+  test('it handles shift key inputs', () => {
+    const output = eventToShortcut(ev({ shiftKey: true, key: 'Shift' }));
+    expect(output).toEqual(null);
+  });
+  test('it handles enter key inputs', () => {
+    const output = eventToShortcut(ev({ key: 'Enter' }));
+    expect(output).toEqual(null);
+  });
+  test('it handles tab key inputs', () => {
+    const output = eventToShortcut(ev({ key: 'Tab' }));
+    expect(output).toEqual(null);
+  });
+  test('it handles space bar inputs', () => {
+    const output = eventToShortcut(ev({ key: ' ' }));
+    expect(output).toEqual(['space']);
+  });
+  test('it handles escape inputs', () => {
+    const output = eventToShortcut(ev({ key: 'Escape' }));
+    expect(output).toEqual(['escape']);
+  });
+  test('it capitalizes a letter key through', () => {
+    const output = eventToShortcut(ev({ key: 'a', code: 'KeyA' }));
+    expect(output).toEqual(['A']);
+  });
+  test('it passes regular key through', () => {
+    const output = eventToShortcut(ev({ key: '1', code: 'Digit1' }));
+    expect(output).toEqual(['1']);
+  });
+  test('it passes modified regular key through', () => {
+    const output = eventToShortcut(ev({ altKey: true, key: '1', code: 'Digit1' }));
+    expect(output).toEqual(['alt', '1']);
+    // on macos
+    const outputMacOs = eventToShortcut(ev({ altKey: true, key: '√', code: 'KeyV' }));
+    expect(outputMacOs).toEqual(['alt', ['√', 'V']]);
+  });
+});
+
+describe('keyToSymbol', () => {
+  test('control returns a caret', () => {
+    const result = keyToSymbol('control');
+    expect(result).toBe('⌃');
+  });
+
+  test('meta returns ⌘', () => {
+    const result = keyToSymbol('meta');
+    expect(result).toEqual('⌘');
+  });
+  test('shift returns ⇧', () => {
+    const result = keyToSymbol('shift');
+    expect(result).toBe('⇧​');
+  });
+  test('enter returns an empty string', () => {
+    const result = keyToSymbol('Enter');
+    expect(result).toBe('');
+  });
+
+  test("' ' returns SPACE", () => {
+    const result = keyToSymbol(' ');
+    expect(result).toEqual('SPACE');
+  });
+  test('escape returns esc', () => {
+    const result = keyToSymbol('escape');
+    expect(result).toEqual('');
+  });
+  test('ArrowUp returns ↑​​​', () => {
+    const result = keyToSymbol('ArrowUp');
+    expect(result).toBe('↑');
+  });
+  test('ArrowDown returns ↓​​​', () => {
+    const result = keyToSymbol('ArrowDown');
+    expect(result).toBe('↓');
+  });
+  test('ArrowLeft returns ←', () => {
+    const result = keyToSymbol('ArrowLeft');
+    expect(result).toBe('←');
+  });
+
+  test('ArrowRight returns →', () => {
+    const result = keyToSymbol('ArrowRight');
+    expect(result).toBe('→');
+  });
+
+  test('it capitalizes a lowercase key', () => {
+    const output = keyToSymbol('a');
+    expect(output).toBe('A');
+  });
+});

package/src/tests/shortcuts.test.js

@@ -0,0 +1,287 @@
+import { init as initShortcuts } from '../modules/shortcuts';
+
+function createMockStore() {
+  let state = {};
+  return {
+    getState: jest.fn().mockImplementation(() => state),
+    setState: jest.fn().mockImplementation((s) => {
+      state = { ...state, ...s };
+    }),
+  };
+}
+
+const mockAddonShortcut = {
+  addon: 'my-addon',
+  shortcut: {
+    label: 'Do something',
+    defaultShortcut: ['O'],
+    actionName: 'doSomething',
+    action: () => {
+      //
+    },
+  },
+};
+
+const mockAddonSecondShortcut = {
+  addon: 'my-addon',
+  shortcut: {
+    label: 'Do something else',
+    defaultShortcut: ['P'],
+    actionName: 'doSomethingElse',
+    action: () => {
+      //
+    },
+  },
+};
+
+const mockSecondAddonShortcut = {
+  addon: 'my-other-addon',
+  shortcut: {
+    label: 'Create issue',
+    defaultShortcut: ['N'],
+    actionName: 'createIssue',
+    action: () => {
+      //
+    },
+  },
+};
+
+describe('shortcuts api', () => {
+  it('gets defaults', () => {
+    const store = createMockStore();
+
+    const { api, state } = initShortcuts({ store });
+    store.setState(state);
+
+    expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['F']);
+  });
+
+  it('gets defaults including addon ones', async () => {
+    const store = createMockStore();
+
+    const { api, state } = initShortcuts({ store });
+    store.setState(state);
+
+    await api.setAddonShortcut(mockAddonShortcut.addon, mockAddonShortcut.shortcut);
+    await api.setAddonShortcut(mockAddonSecondShortcut.addon, mockAddonSecondShortcut.shortcut);
+    await api.setAddonShortcut(mockSecondAddonShortcut.addon, mockSecondAddonShortcut.shortcut);
+
+    expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['F']);
+    expect(api.getDefaultShortcuts()).toHaveProperty(
+      `${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}`,
+      mockAddonShortcut.shortcut.defaultShortcut
+    );
+    expect(api.getDefaultShortcuts()).toHaveProperty(
+      `${mockAddonSecondShortcut.addon}-${mockAddonSecondShortcut.shortcut.actionName}`,
+      mockAddonSecondShortcut.shortcut.defaultShortcut
+    );
+    expect(api.getDefaultShortcuts()).toHaveProperty(
+      `${mockSecondAddonShortcut.addon}-${mockSecondAddonShortcut.shortcut.actionName}`,
+      mockSecondAddonShortcut.shortcut.defaultShortcut
+    );
+  });
+
+  it('gets addons shortcuts', async () => {
+    const store = createMockStore();
+
+    const { api, state } = initShortcuts({ store });
+    store.setState(state);
+
+    await api.setAddonShortcut(mockAddonShortcut.addon, mockAddonShortcut.shortcut);
+    await api.setAddonShortcut(mockAddonSecondShortcut.addon, mockAddonSecondShortcut.shortcut);
+    await api.setAddonShortcut(mockSecondAddonShortcut.addon, mockSecondAddonShortcut.shortcut);
+
+    expect(api.getAddonsShortcuts()).toStrictEqual({
+      [`${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}`]:
+        mockAddonShortcut.shortcut,
+      [`${mockAddonSecondShortcut.addon}-${mockAddonSecondShortcut.shortcut.actionName}`]:
+        mockAddonSecondShortcut.shortcut,
+      [`${mockSecondAddonShortcut.addon}-${mockSecondAddonShortcut.shortcut.actionName}`]:
+        mockSecondAddonShortcut.shortcut,
+    });
+  });
+
+  it('gets addons shortcut labels', async () => {
+    const store = createMockStore();
+
+    const { api, state } = initShortcuts({ store });
+    store.setState(state);
+
+    await api.setAddonShortcut(mockAddonShortcut.addon, mockAddonShortcut.shortcut);
+    await api.setAddonShortcut(mockAddonSecondShortcut.addon, mockAddonSecondShortcut.shortcut);
+    await api.setAddonShortcut(mockSecondAddonShortcut.addon, mockSecondAddonShortcut.shortcut);
+
+    expect(api.getAddonsShortcutLabels()).toStrictEqual({
+      [`${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}`]:
+        mockAddonShortcut.shortcut.label,
+      [`${mockAddonSecondShortcut.addon}-${mockAddonSecondShortcut.shortcut.actionName}`]:
+        mockAddonSecondShortcut.shortcut.label,
+      [`${mockSecondAddonShortcut.addon}-${mockSecondAddonShortcut.shortcut.actionName}`]:
+        mockSecondAddonShortcut.shortcut.label,
+    });
+  });
+
+  it('gets addons shortcut defaults', async () => {
+    const store = createMockStore();
+
+    const { api, state } = initShortcuts({ store });
+    store.setState(state);
+
+    await api.setAddonShortcut(mockAddonShortcut.addon, mockAddonShortcut.shortcut);
+    await api.setAddonShortcut(mockAddonSecondShortcut.addon, mockAddonSecondShortcut.shortcut);
+    await api.setAddonShortcut(mockSecondAddonShortcut.addon, mockSecondAddonShortcut.shortcut);
+
+    expect(api.getAddonsShortcutDefaults()).toStrictEqual({
+      [`${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}`]:
+        mockAddonShortcut.shortcut.defaultShortcut,
+      [`${mockAddonSecondShortcut.addon}-${mockAddonSecondShortcut.shortcut.actionName}`]:
+        mockAddonSecondShortcut.shortcut.defaultShortcut,
+      [`${mockSecondAddonShortcut.addon}-${mockSecondAddonShortcut.shortcut.actionName}`]:
+        mockSecondAddonShortcut.shortcut.defaultShortcut,
+    });
+  });
+
+  it('sets defaults', () => {
+    const store = createMockStore();
+
+    const { api, state } = initShortcuts({ store });
+    store.setState(state);
+
+    expect(api.getShortcutKeys().fullScreen).toEqual(['F']);
+  });
+
+  it('sets addon shortcut with default value', async () => {
+    const store = createMockStore();
+
+    const { api, state } = initShortcuts({ store });
+    store.setState(state);
+
+    await api.setAddonShortcut(mockAddonShortcut.addon, mockAddonShortcut.shortcut);
+    await api.setAddonShortcut(mockAddonSecondShortcut.addon, mockAddonSecondShortcut.shortcut);
+    await api.setAddonShortcut(mockSecondAddonShortcut.addon, mockSecondAddonShortcut.shortcut);
+
+    expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['F']);
+    expect(api.getDefaultShortcuts()).toHaveProperty(
+      `${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}`,
+      mockAddonShortcut.shortcut.defaultShortcut
+    );
+    expect(api.getDefaultShortcuts()).toHaveProperty(
+      `${mockAddonSecondShortcut.addon}-${mockAddonSecondShortcut.shortcut.actionName}`,
+      mockAddonSecondShortcut.shortcut.defaultShortcut
+    );
+    expect(api.getDefaultShortcuts()).toHaveProperty(
+      `${mockSecondAddonShortcut.addon}-${mockSecondAddonShortcut.shortcut.actionName}`,
+      mockSecondAddonShortcut.shortcut.defaultShortcut
+    );
+  });
+
+  it('sets defaults, augmenting anything that was persisted', () => {
+    const store = createMockStore();
+    store.setState({ shortcuts: { fullScreen: ['Z'] } });
+
+    const { api, state } = initShortcuts({ store });
+    store.setState(state);
+
+    expect(api.getShortcutKeys().fullScreen).toEqual(['Z']);
+    expect(api.getShortcutKeys().togglePanel).toEqual(['A']);
+  });
+
+  it('sets defaults, ignoring anything persisted that is out of date', () => {
+    const store = createMockStore();
+    store.setState({ shortcuts: { randomKey: ['Z'] } });
+
+    const { api, state } = initShortcuts({ store });
+    store.setState(state);
+
+    expect(api.getShortcutKeys().randomKey).not.toBeDefined();
+  });
+
+  it('sets new values', async () => {
+    const store = createMockStore();
+
+    const { api, state } = initShortcuts({ store });
+    store.setState(state);
+
+    await api.setShortcut('fullScreen', ['X']);
+    expect(api.getShortcutKeys().fullScreen).toEqual(['X']);
+  });
+
+  it('sets new values for addon shortcuts', async () => {
+    const store = createMockStore();
+
+    const { api, state } = initShortcuts({ store });
+    store.setState(state);
+
+    const { addon, shortcut } = mockAddonShortcut;
+    await api.setAddonShortcut(addon, shortcut);
+
+    await api.setShortcut(`${addon}-${shortcut.actionName}`, ['I']);
+    expect(api.getShortcutKeys()[`${addon}-${shortcut.actionName}`]).toEqual(['I']);
+  });
+
+  it('restores all defaults', async () => {
+    const store = createMockStore();
+
+    const { api, state } = initShortcuts({ store });
+    store.setState(state);
+
+    const { addon, shortcut } = mockAddonShortcut;
+    await api.setAddonShortcut(addon, shortcut);
+
+    await api.setShortcut('fullScreen', ['X']);
+    await api.setShortcut('togglePanel', ['B']);
+    await api.setShortcut(`${addon}-${shortcut.actionName}`, ['I']);
+
+    await api.restoreAllDefaultShortcuts();
+    expect(api.getShortcutKeys().fullScreen).toEqual(['F']);
+    expect(api.getShortcutKeys().togglePanel).toEqual(['A']);
+    expect(api.getShortcutKeys()[`${addon}-${shortcut.actionName}`]).toEqual(
+      shortcut.defaultShortcut
+    );
+  });
+
+  it('restores single default', async () => {
+    const store = createMockStore();
+
+    const { api, state } = initShortcuts({ store });
+    store.setState(state);
+
+    await api.setAddonShortcut(mockAddonShortcut.addon, mockAddonShortcut.shortcut);
+    await api.setAddonShortcut(mockAddonSecondShortcut.addon, mockAddonSecondShortcut.shortcut);
+    await api.setAddonShortcut(mockSecondAddonShortcut.addon, mockSecondAddonShortcut.shortcut);
+
+    await api.setShortcut('fullScreen', ['X']);
+    await api.setShortcut('togglePanel', ['B']);
+    await api.setShortcut(`${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}`, [
+      'I',
+    ]);
+    await api.setShortcut(
+      `${mockAddonSecondShortcut.addon}-${mockAddonSecondShortcut.shortcut.actionName}`,
+      ['H']
+    );
+    await api.setShortcut(
+      `${mockSecondAddonShortcut.addon}-${mockSecondAddonShortcut.shortcut.actionName}`,
+      ['G']
+    );
+    await api.restoreDefaultShortcut('fullScreen');
+    await api.restoreDefaultShortcut(
+      `${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}`
+    );
+
+    expect(api.getShortcutKeys().fullScreen).toEqual(['F']);
+    expect(api.getShortcutKeys().togglePanel).toEqual(['B']);
+    expect(
+      api.getShortcutKeys()[`${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}`]
+    ).toEqual(mockAddonShortcut.shortcut.defaultShortcut);
+    expect(
+      api.getShortcutKeys()[
+        `${mockAddonSecondShortcut.addon}-${mockAddonSecondShortcut.shortcut.actionName}`
+      ]
+    ).toEqual(['H']);
+    expect(
+      api.getShortcutKeys()[
+        `${mockSecondAddonShortcut.addon}-${mockSecondAddonShortcut.shortcut.actionName}`
+      ]
+    ).toEqual(['G']);
+  });
+});