Merge pull request #18369 from storybookjs/refactor-preview-web-tests

Fix lint warnings in `PreviewWeb` tests
storybookjs · May 31, 2022 · cb5b600 · cb5b600
2 parents 1dedebb + fae35d3
commit cb5b600
Show file tree

Hide file tree

Showing 5 changed files with 294 additions and 259 deletions.
diff --git a/lib/preview-web/src/Preview.tsx b/lib/preview-web/src/Preview.tsx
@@ -1,7 +1,18 @@
 import dedent from 'ts-dedent';
 import global from 'global';
 import { SynchronousPromise } from 'synchronous-promise';
-import Events from '@storybook/core-events';
+import {
+  CONFIG_ERROR,
+  FORCE_REMOUNT,
+  FORCE_RE_RENDER,
+  GLOBALS_UPDATED,
+  RESET_STORY_ARGS,
+  SET_GLOBALS,
+  STORY_ARGS_UPDATED,
+  STORY_INDEX_INVALIDATED,
+  UPDATE_GLOBALS,
+  UPDATE_STORY_ARGS,
+} from '@storybook/core-events';
 import { logger } from '@storybook/client-logger';
 import { addons, Channel } from '@storybook/addons';
 import { AnyFramework, StoryId, ProjectAnnotations, Args, Globals } from '@storybook/csf';
@@ -80,13 +91,13 @@ export class Preview<TFramework extends AnyFramework> {
   }
 
   setupListeners() {
-    this.serverChannel?.on(Events.STORY_INDEX_INVALIDATED, this.onStoryIndexChanged.bind(this));
+    this.serverChannel?.on(STORY_INDEX_INVALIDATED, this.onStoryIndexChanged.bind(this));
 
-    this.channel.on(Events.UPDATE_GLOBALS, this.onUpdateGlobals.bind(this));
-    this.channel.on(Events.UPDATE_STORY_ARGS, this.onUpdateArgs.bind(this));
-    this.channel.on(Events.RESET_STORY_ARGS, this.onResetArgs.bind(this));
-    this.channel.on(Events.FORCE_RE_RENDER, this.onForceReRender.bind(this));
-    this.channel.on(Events.FORCE_REMOUNT, this.onForceRemount.bind(this));
+    this.channel.on(UPDATE_GLOBALS, this.onUpdateGlobals.bind(this));
+    this.channel.on(UPDATE_STORY_ARGS, this.onUpdateArgs.bind(this));
+    this.channel.on(RESET_STORY_ARGS, this.onResetArgs.bind(this));
+    this.channel.on(FORCE_RE_RENDER, this.onForceReRender.bind(this));
+    this.channel.on(FORCE_REMOUNT, this.onForceRemount.bind(this));
   }
 
   getProjectAnnotationsOrRenderError(
@@ -144,7 +155,7 @@ export class Preview<TFramework extends AnyFramework> {
   }
 
   emitGlobals() {
-    this.channel.emit(Events.SET_GLOBALS, {
+    this.channel.emit(SET_GLOBALS, {
       globals: this.storyStore.globals.get() || {},
       globalTypes: this.storyStore.projectAnnotations.globalTypes || {},
     });
@@ -227,7 +238,7 @@ export class Preview<TFramework extends AnyFramework> {
 
     await Promise.all(this.storyRenders.map((r) => r.rerender()));
 
-    this.channel.emit(Events.GLOBALS_UPDATED, {
+    this.channel.emit(GLOBALS_UPDATED, {
       globals: this.storyStore.globals.get(),
       initialGlobals: this.storyStore.globals.initialGlobals,
     });
@@ -238,7 +249,7 @@ export class Preview<TFramework extends AnyFramework> {
 
     await Promise.all(this.storyRenders.filter((r) => r.id === storyId).map((r) => r.rerender()));
 
-    this.channel.emit(Events.STORY_ARGS_UPDATED, {
+    this.channel.emit(STORY_ARGS_UPDATED, {
       storyId,
       args: this.storyStore.args.get(storyId),
     });
@@ -344,6 +355,6 @@ export class Preview<TFramework extends AnyFramework> {
     this.previewEntryError = err;
     logger.error(reason);
     logger.error(err);
-    this.channel.emit(Events.CONFIG_ERROR, err);
+    this.channel.emit(CONFIG_ERROR, err);
   }
 }
diff --git a/lib/preview-web/src/PreviewWeb.integration.test.ts b/lib/preview-web/src/PreviewWeb.integration.test.ts
@@ -76,8 +76,9 @@ describe('PreviewWeb', () => {
       const preview = new PreviewWeb();
 
       const docsRoot = window.document.createElement('div');
-      // @ts-ignore
-      preview.view.prepareForDocs.mockReturnValue(docsRoot);
+      (
+        preview.view.prepareForDocs as any as jest.Mock<typeof preview.view.prepareForDocs>
+      ).mockReturnValue(docsRoot);
       componentOneExports.default.parameters.docs.container.mockImplementationOnce(() =>
         React.createElement('div', {}, 'INSIDE')
       );

diff --git a/lib/preview-web/src/PreviewWeb.mockdata.ts b/lib/preview-web/src/PreviewWeb.mockdata.ts
@@ -1,5 +1,12 @@
 import { EventEmitter } from 'events';
-import Events from '@storybook/core-events';
+import {
+  DOCS_RENDERED,
+  STORY_ERRORED,
+  STORY_MISSING,
+  STORY_RENDERED,
+  STORY_RENDER_PHASE_CHANGED,
+  STORY_THREW_EXCEPTION,
+} from '@storybook/core-events';
 import { StoryIndex } from '@storybook/store';
 import { RenderPhase } from './PreviewWeb';
 
@@ -99,15 +106,15 @@ export const waitForEvents = (
 // the async parts, so we need to listen for the "done" events
 export const waitForRender = () =>
   waitForEvents([
-    Events.STORY_RENDERED,
-    Events.DOCS_RENDERED,
-    Events.STORY_THREW_EXCEPTION,
-    Events.STORY_ERRORED,
-    Events.STORY_MISSING,
+    STORY_RENDERED,
+    DOCS_RENDERED,
+    STORY_THREW_EXCEPTION,
+    STORY_ERRORED,
+    STORY_MISSING,
   ]);
 
 export const waitForRenderPhase = (phase: RenderPhase) =>
-  waitForEvents([Events.STORY_RENDER_PHASE_CHANGED], ({ newPhase }) => newPhase === phase);
+  waitForEvents([STORY_RENDER_PHASE_CHANGED], ({ newPhase }) => newPhase === phase);
 
 // A little trick to ensure that we always call the real `setTimeout` even when timers are mocked
 const realSetTimeout = setTimeout;