GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 16:01:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Cleanup and fix tests

Browse Source
This commit is contained in:
Gert Hengeveld 2021-09-10 11:12:54 +02:00
parent b56958f9f0
commit 1a68caed32
7 changed files with 66 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
addons/interactions/src/components/StatusIcon/StatusIcon.tsx
View File

@ -1,8 +1,9 @@
import React from 'react';
import { Icons, IconsProps } from '@storybook/components';
import { styled } from '@storybook/theming';
import { CallState, CallStates } from '../../types';
import { theme as localTheme } from '../../theme';
import localTheme from '../../theme';
export interface StatusIconProps extends IconsProps {
status: CallState;

1
addons/interactions/src/constants.ts
View File

@ -8,5 +8,4 @@ export const EVENTS = {
CALL: `${ADDON_ID}/call`,
NEXT: `${ADDON_ID}/next`,
RELOAD: `${ADDON_ID}/reload`,
SET_CURRENT_STORY: 'setCurrentStory', // Storybook's own event
};

6
addons/interactions/src/instrument.test.ts
View File

@ -1,7 +1,9 @@
/* eslint-disable no-underscore-dangle */
import { addons, mockChannel } from '@storybook/addons';
import { SET_CURRENT_STORY } from '@storybook/core-events';
import global from 'global';
import { EVENTS } from './constants';
import { instrument } from './instrument';
@ -22,7 +24,7 @@ global.window.__STORYBOOK_ADDON_TEST_PREVIEW__ = {};
global.window.parent.__STORYBOOK_ADDON_TEST_MANAGER__ = {};
beforeEach(() => {
addons.getChannel().emit(EVENTS.SET_CURRENT_STORY);
addons.getChannel().emit(SET_CURRENT_STORY);
callSpy.mockReset();
// Reset iframeState
@ -293,7 +295,7 @@ describe('instrument', () => {
global.window.__STORYBOOK_ADDON_TEST_PREVIEW__.callRefsByResult = new Map([[{}, 'ref']]);
global.window.__STORYBOOK_ADDON_TEST_PREVIEW__.parentCallId = '1-foo';
global.window.__STORYBOOK_ADDON_TEST_PREVIEW__.forwardedException = new Error('Oops');
addons.getChannel().emit(EVENTS.SET_CURRENT_STORY);
addons.getChannel().emit(SET_CURRENT_STORY);
expect(global.window.__STORYBOOK_ADDON_TEST_PREVIEW__).toStrictEqual({
n: 0,
next: {},

4
addons/interactions/src/instrument.ts
View File

@ -1,7 +1,7 @@
/* eslint-disable no-underscore-dangle */
import { addons, Channel } from '@storybook/addons';
import { logger } from '@storybook/client-logger';
import { IGNORED_EXCEPTION } from '@storybook/core-events';
import { IGNORED_EXCEPTION, SET_CURRENT_STORY } from '@storybook/core-events';
import global from 'global';
import { EVENTS } from './constants';
@ -180,7 +180,7 @@ function initialize() {
channel.on(EVENTS.NEXT, () => Object.values(iframeState.next).forEach((resolve) => resolve()));
channel.on(EVENTS.RELOAD, () => global.window.location.reload());
channel.on(EVENTS.SET_CURRENT_STORY, () => {
channel.on(SET_CURRENT_STORY, () => {
iframeState.callRefsByResult = new Map(
Array.from(iframeState.callRefsByResult.entries()).filter(([, val]) => val.retain)
);

4
addons/interactions/src/preset/argsEnhancers.ts
View File

@ -1,14 +1,14 @@
import { Args, addons } from '@storybook/addons';
import { SET_CURRENT_STORY } from '@storybook/core-events';
import { AnyFramework, ArgsEnhancer } from '@storybook/csf';
import { fn } from 'jest-mock';
import { EVENTS } from '../constants';
import { instrument } from '../instrument';
const { action } = instrument({ action: fn }, { retain: true });
const channel = addons.getChannel();
const spies: any[] = [];
channel.on(EVENTS.SET_CURRENT_STORY, () => spies.forEach((mock) => mock.mockReset()));
channel.on(SET_CURRENT_STORY, () => spies.forEach((mock) => mock.mockReset()));
const addActionsFromArgTypes: ArgsEnhancer<AnyFramework> = ({ initialArgs }) => {
return Object.entries(initialArgs).reduce((acc, [key, val]) => {

33
lib/preview-web/src/PreviewWeb.test.ts
View File

@ -1,5 +1,5 @@
import global from 'global';
import Events from '@storybook/core-events';
import Events, { IGNORED_EXCEPTION } from '@storybook/core-events';
import * as ReactDOM from 'react-dom';
import { logger } from '@storybook/client-logger';
import merge from 'lodash/merge';
@ -422,7 +422,7 @@ describe('PreviewWeb', () => {
expect(preview.view.showErrorDisplay).toHaveBeenCalledWith(error);
});
it('executes runPlayFunction', async () => {
it('executes playFunction', async () => {
document.location.search = '?id=component-one--a';
await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
@ -439,6 +439,23 @@ describe('PreviewWeb', () => {
expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--a');
});
it('does not show error display if the render function throws IGNORED_EXCEPTION', async () => {
document.location.search = '?id=component-one--a';
projectAnnotations.renderToDOM.mockImplementationOnce(() => {
throw IGNORED_EXCEPTION;
});
const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
await preview.initialize();
await waitForRender();
expect(mockChannel.emit).toHaveBeenCalledWith(
Events.STORY_THREW_EXCEPTION,
IGNORED_EXCEPTION
);
expect(preview.view.showErrorDisplay).not.toHaveBeenCalled();
});
});
describe('in docs viewMode', () => {
@ -768,7 +785,7 @@ describe('PreviewWeb', () => {
undefined // this is coming from view.prepareForStory, not super important
);
// Now let the runPlayFunction call resolve
// Now let the playFunction call resolve
openGate();
});
});
@ -1142,7 +1159,7 @@ describe('PreviewWeb', () => {
expect(preview.view.showErrorDisplay).toHaveBeenCalledWith(error);
});
it('executes runPlayFunction', async () => {
it('executes playFunction', async () => {
document.location.search = '?id=component-one--a';
await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
await waitForRender();
@ -1268,7 +1285,7 @@ describe('PreviewWeb', () => {
expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--b');
});
it('stops initial story after runPlayFunction if running', async () => {
it('stops initial story after playFunction if running', async () => {
const [gate, openGate] = createGate();
componentOneExports.a.play.mockImplementationOnce(async () => gate);
@ -1312,7 +1329,7 @@ describe('PreviewWeb', () => {
undefined // this is coming from view.prepareForStory, not super important
);
// Now let the runPlayFunction call resolve
// Now let the playFunction call resolve
openGate();
// Final story rendered is not emitted for the first story
@ -1627,7 +1644,7 @@ describe('PreviewWeb', () => {
expect(preview.view.showErrorDisplay).toHaveBeenCalledWith(error);
});
it('executes runPlayFunction', async () => {
it('executes playFunction', async () => {
document.location.search = '?id=component-one--a&viewMode=docs';
await new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex }).initialize();
await waitForRender();
@ -1857,7 +1874,7 @@ describe('PreviewWeb', () => {
expect(preview.view.showErrorDisplay).toHaveBeenCalledWith(error);
});
it('executes runPlayFunction', async () => {
it('executes playFunction', async () => {
document.location.search = '?id=component-one--a';
const preview = new PreviewWeb({ getProjectAnnotations, importFn, fetchStoryIndex });
await preview.initialize();

43
lib/store/src/prepareStory.test.ts
View File

@ -1,5 +1,11 @@
import addons, { HooksContext } from '@storybook/addons';
import { AnyFramework, ArgsEnhancer, SBObjectType, SBScalarType } from '@storybook/csf';
import {
AnyFramework,
ArgsEnhancer,
SBObjectType,
SBScalarType,
StoryContext,
} from '@storybook/csf';
import { prepareStory } from './prepareStory';
jest.mock('global', () => ({
@ -198,23 +204,36 @@ describe('prepareStory', () => {
expect(initialArgs).toEqual({ a: 'b', c: 'd' });
});
it('does not pass result of earlier enhancers into subsequent ones, but composes their output', () => {
const enhancerOne = jest.fn(() => ({ c: 'd' }));
const enhancerTwo = jest.fn(() => ({ e: 'f' }));
it('passes result of earlier enhancers into subsequent ones, and composes their output', () => {
const enhancerOne = jest.fn(() => ({ b: 'B' }));
const enhancerTwo = jest.fn(({ initialArgs }) =>
Object.entries(initialArgs).reduce(
(acc, [key, val]) => ({ ...acc, [key]: `enhanced ${val}` }),
{}
)
);
const enhancerThree = jest.fn(() => ({ c: 'C' }));
const { initialArgs } = prepareStory(
{ id, name, args: { a: 'b' } },
{ id, name, args: { a: 'A' } },
{ id, title },
{ render, argsEnhancers: [enhancerOne, enhancerTwo] }
{ render, argsEnhancers: [enhancerOne, enhancerTwo, enhancerThree] }
);
expect(enhancerOne).toHaveBeenCalledWith(
expect.objectContaining({ initialArgs: { a: 'b' } })
expect.objectContaining({ initialArgs: { a: 'A' } })
);
expect(enhancerTwo).toHaveBeenCalledWith(
expect.objectContaining({ initialArgs: { a: 'b' } })
expect.objectContaining({ initialArgs: { a: 'A', b: 'B' } })
);
expect(initialArgs).toEqual({ a: 'b', c: 'd', e: 'f' });
expect(enhancerThree).toHaveBeenCalledWith(
expect.objectContaining({ initialArgs: { a: 'enhanced A', b: 'enhanced B' } })
);
expect(initialArgs).toEqual({
a: 'enhanced A',
b: 'enhanced B',
c: 'C',
});
});
});
});
@ -442,16 +461,16 @@ describe('prepareStory', () => {
});
});
describe('runPlayFunction', () => {
describe('playFunction', () => {
it('awaits play if defined', async () => {
const inner = jest.fn();
const play = jest.fn(async () => {
await new Promise((r) => setTimeout(r, 0)); // Ensure this puts an async boundary in
inner();
});
const { runPlayFunction } = prepareStory({ id, name, play }, { id, title }, { render });
const { playFunction } = prepareStory({ id, name, play }, { id, title }, { render });
await runPlayFunction();
await playFunction({} as StoryContext<AnyFramework>);
expect(play).toHaveBeenCalled();
expect(inner).toHaveBeenCalled();
});