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

Add a bunch of edge case tests to PreviewWeb

Browse Source
This commit is contained in:
Tom Coleman 2021-09-29 21:41:59 +10:00
parent bb1b922fb2
commit ca716325c8
2 changed files with 84 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1917,6 +1917,63 @@ describe('PreviewWeb', () => {
});
});
describe('when the current story changes importPath', () => {
const newImportFn = jest.fn(async (path) => ({ ...componentOneExports }));
const newStoryIndex = {
v: 3,
stories: {
...storyIndex.stories,
'component-one--a': {
...storyIndex.stories['component-one--a'],
importPath: './src/ComponentOne-new.stories.js',
},
},
};
beforeEach(() => {
newImportFn.mockClear();
});
it('re-imports the component', async () => {
document.location.search = '?id=component-one--a';
const preview = new PreviewWeb();
await preview.initialize({ importFn, getProjectAnnotations });
await waitForRender();
mockChannel.emit.mockClear();
preview.onStoriesChanged({ importFn: newImportFn, storyIndex: newStoryIndex });
await waitForRender();
expect(newImportFn).toHaveBeenCalledWith('./src/ComponentOne-new.stories.js');
});
describe('if it was previously rendered', () => {
it('is reloaded when it is re-selected', async () => {
document.location.search = '?id=component-one--a';
const preview = new PreviewWeb();
await preview.initialize({ importFn, getProjectAnnotations });
await waitForRender();
mockChannel.emit.mockClear();
emitter.emit(Events.SET_CURRENT_STORY, {
storyId: 'component-one--b',
viewMode: 'story',
});
await waitForRender();
preview.onStoriesChanged({ importFn: newImportFn, storyIndex: newStoryIndex });
mockChannel.emit.mockClear();
emitter.emit(Events.SET_CURRENT_STORY, {
storyId: 'component-one--a',
viewMode: 'story',
});
await waitForRender();
expect(newImportFn).toHaveBeenCalledWith('./src/ComponentOne-new.stories.js');
});
});
});
describe('when the current story has not changed', () => {
const newComponentTwoExports = { ...componentTwoExports };
const newImportFn = jest.fn(async (path) => {
@ -1966,6 +2023,13 @@ describe('PreviewWeb', () => {
: componentTwoExports;
});
const newStoryIndex = {
v: 3,
stories: {
'component-one--b': storyIndex.stories['component-one--b'],
},
};
it('renders story missing', async () => {
document.location.search = '?id=component-one--a';
const preview = new PreviewWeb();
@ -1973,7 +2037,7 @@ describe('PreviewWeb', () => {
await waitForRender();
mockChannel.emit.mockClear();
preview.onStoriesChanged({ importFn: newImportFn });
preview.onStoriesChanged({ importFn: newImportFn, storyIndex: newStoryIndex });
await waitForEvents([Events.STORY_MISSING]);
expect(preview.view.showNoPreview).toHaveBeenCalled();
@ -1988,7 +2052,7 @@ describe('PreviewWeb', () => {
mockChannel.emit.mockClear();
projectAnnotations.renderToDOM.mockClear();
preview.onStoriesChanged({ importFn: newImportFn });
preview.onStoriesChanged({ importFn: newImportFn, storyIndex: newStoryIndex });
await waitForQuiescence();
expect(projectAnnotations.renderToDOM).not.toHaveBeenCalled();
@ -1997,6 +2061,22 @@ describe('PreviewWeb', () => {
'component-one--a'
);
});
it('re-renders the story if it is readded', async () => {
document.location.search = '?id=component-one--a';
const preview = new PreviewWeb();
await preview.initialize({ importFn, getProjectAnnotations });
await waitForRender();
mockChannel.emit.mockClear();
preview.onStoriesChanged({ importFn: newImportFn, storyIndex: newStoryIndex });
await waitForEvents([Events.STORY_MISSING]);
mockChannel.emit.mockClear();
preview.onStoriesChanged({ importFn, storyIndex });
await waitForRender();
expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--a');
});
});
});

3
lib/preview-web/src/PreviewWeb.tsx
View File

@ -300,6 +300,7 @@ export class PreviewWeb<TFramework extends AnyFramework> {
try {
story = await this.storyStore.loadStory({ storyId: selection.storyId });
} catch (err) {
this.previousStory = null;
logger.warn(err);
this.renderMissingStory(selection.storyId);
return;
@ -318,7 +319,7 @@ export class PreviewWeb<TFramework extends AnyFramework> {
}
// Don't re-render the story if nothing has changed to justify it
if (!storyChanged && !implementationChanged && !viewModeChanged) {
if (this.previousStory && !storyChanged && !implementationChanged && !viewModeChanged) {
this.channel.emit(Events.STORY_UNCHANGED, selection.storyId);
return;
}