How to use waitForRenderPhase method in storybook-root

Best JavaScript code snippet using storybook-root

PreviewWeb.test.ts

Source:PreviewWeb.test.ts

...617        const [gate, openGate] = createGate();618        document.location.search = '?id=component-one--a';619        componentOneExports.default.loaders[0].mockImplementationOnce(async () => gate);620        await new PreviewWeb().initialize({ importFn, getProjectAnnotations });621        await waitForRenderPhase('loading');622        expect(componentOneExports.default.loaders[0]).toHaveBeenCalledWith(623          expect.objectContaining({624            args: { foo: 'a' },625          })626        );627        componentOneExports.default.loaders[0].mockClear();628        emitter.emit(Events.UPDATE_STORY_ARGS, {629          storyId: 'component-one--a',630          updatedArgs: { new: 'arg' },631        });632        await waitForRender();633        expect(componentOneExports.default.loaders[0]).toHaveBeenCalledWith(634          expect.objectContaining({635            args: { foo: 'a', new: 'arg' },636          })637        );638        // Story gets rendered with updated args639        expect(projectAnnotations.renderToDOM).toHaveBeenCalledTimes(1);640        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(641          expect.objectContaining({642            forceRemount: true, // Wasn't yet rendered so we need to force remount643            storyContext: expect.objectContaining({644              loaded: { l: 7 }, // This is the value returned by the *second* loader call645              args: { foo: 'a', new: 'arg' },646            }),647          }),648          undefined // this is coming from view.prepareForStory, not super important649        );650        // Now let the first loader call resolve651        mockChannel.emit.mockClear();652        projectAnnotations.renderToDOM.mockClear();653        openGate({ l: 8 });654        await waitForRender();655        // Now the first call comes through, but picks up the new args656        // Note this isn't a particularly realistic case (the second loader being quicker than the first)657        expect(projectAnnotations.renderToDOM).toHaveBeenCalledTimes(1);658        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(659          expect.objectContaining({660            storyContext: expect.objectContaining({661              loaded: { l: 8 },662              args: { foo: 'a', new: 'arg' },663            }),664          }),665          undefined // this is coming from view.prepareForStory, not super important666        );667      });668      it('renders a second time if renderToDOM is running', async () => {669        const [gate, openGate] = createGate();670        document.location.search = '?id=component-one--a';671        projectAnnotations.renderToDOM.mockImplementationOnce(async () => gate);672        await new PreviewWeb().initialize({ importFn, getProjectAnnotations });673        await waitForRenderPhase('rendering');674        emitter.emit(Events.UPDATE_STORY_ARGS, {675          storyId: 'component-one--a',676          updatedArgs: { new: 'arg' },677        });678        // Now let the renderToDOM call resolve679        openGate();680        await waitForRender();681        expect(projectAnnotations.renderToDOM).toHaveBeenCalledTimes(2);682        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(683          expect.objectContaining({684            forceRemount: true,685            storyContext: expect.objectContaining({686              loaded: { l: 7 },687              args: { foo: 'a' },688            }),689          }),690          undefined // this is coming from view.prepareForStory, not super important691        );692        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(693          expect.objectContaining({694            forceRemount: false,695            storyContext: expect.objectContaining({696              loaded: { l: 7 },697              args: { foo: 'a', new: 'arg' },698            }),699          }),700          undefined // this is coming from view.prepareForStory, not super important701        );702      });703      it('works if it is called directly from inside non async renderToDOM', async () => {704        document.location.search = '?id=component-one--a';705        projectAnnotations.renderToDOM.mockImplementationOnce(() => {706          emitter.emit(Events.UPDATE_STORY_ARGS, {707            storyId: 'component-one--a',708            updatedArgs: { new: 'arg' },709          });710        });711        await createAndRenderPreview();712        expect(projectAnnotations.renderToDOM).toHaveBeenCalledTimes(2);713        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(714          expect.objectContaining({715            forceRemount: true,716            storyContext: expect.objectContaining({717              loaded: { l: 7 },718              args: { foo: 'a' },719            }),720          }),721          undefined // this is coming from view.prepareForStory, not super important722        );723        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(724          expect.objectContaining({725            forceRemount: false,726            storyContext: expect.objectContaining({727              loaded: { l: 7 },728              args: { foo: 'a', new: 'arg' },729            }),730          }),731          undefined // this is coming from view.prepareForStory, not super important732        );733      });734      it('calls renderToDOM again if play function is running', async () => {735        const [gate, openGate] = createGate();736        componentOneExports.a.play.mockImplementationOnce(async () => gate);737        const renderToDOMCalled = new Promise((resolve) => {738          projectAnnotations.renderToDOM.mockImplementationOnce(() => {739            resolve(null);740          });741        });742        document.location.search = '?id=component-one--a';743        await new PreviewWeb().initialize({ importFn, getProjectAnnotations });744        await waitForRenderPhase('playing');745        await renderToDOMCalled;746        // Story gets rendered with original args747        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(748          expect.objectContaining({749            forceRemount: true,750            storyContext: expect.objectContaining({751              loaded: { l: 7 },752              args: { foo: 'a' },753            }),754          }),755          undefined // this is coming from view.prepareForStory, not super important756        );757        emitter.emit(Events.UPDATE_STORY_ARGS, {758          storyId: 'component-one--a',759          updatedArgs: { new: 'arg' },760        });761        // The second call should emit STORY_RENDERED762        await waitForRender();763        // Story gets rendered with updated args764        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(765          expect.objectContaining({766            forceRemount: false,767            storyContext: expect.objectContaining({768              loaded: { l: 7 },769              args: { foo: 'a', new: 'arg' },770            }),771          }),772          undefined // this is coming from view.prepareForStory, not super important773        );774        // Now let the playFunction call resolve775        openGate();776      });777    });778    describe('in docs mode', () => {779      it('re-renders the docs container', async () => {780        document.location.search = '?id=component-one--a&viewMode=docs';781        await createAndRenderPreview();782        mockChannel.emit.mockClear();783        emitter.emit(Events.UPDATE_STORY_ARGS, {784          storyId: 'component-one--a',785          updatedArgs: { new: 'arg' },786        });787        await waitForRender();788        expect(ReactDOM.render).toHaveBeenCalledTimes(2);789      });790    });791  });792  describe('onResetArgs', () => {793    it('emits STORY_ARGS_UPDATED', async () => {794      document.location.search = '?id=component-one--a';795      await createAndRenderPreview();796      mockChannel.emit.mockClear();797      emitter.emit(Events.UPDATE_STORY_ARGS, {798        storyId: 'component-one--a',799        updatedArgs: { foo: 'new' },800      });801      expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ARGS_UPDATED, {802        storyId: 'component-one--a',803        args: { foo: 'new' },804      });805      mockChannel.emit.mockClear();806      emitter.emit(Events.RESET_STORY_ARGS, {807        storyId: 'component-one--a',808        argNames: ['foo'],809      });810      await waitForEvents([Events.STORY_ARGS_UPDATED]);811      expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ARGS_UPDATED, {812        storyId: 'component-one--a',813        args: { foo: 'a' },814      });815    });816    it('resets a single arg', async () => {817      document.location.search = '?id=component-one--a';818      await createAndRenderPreview();819      mockChannel.emit.mockClear();820      emitter.emit(Events.UPDATE_STORY_ARGS, {821        storyId: 'component-one--a',822        updatedArgs: { foo: 'new', new: 'value' },823      });824      mockChannel.emit.mockClear();825      emitter.emit(Events.RESET_STORY_ARGS, {826        storyId: 'component-one--a',827        argNames: ['foo'],828      });829      await waitForRender();830      expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(831        expect.objectContaining({832          forceRemount: false,833          storyContext: expect.objectContaining({834            initialArgs: { foo: 'a' },835            args: { foo: 'a', new: 'value' },836          }),837        }),838        undefined // this is coming from view.prepareForStory, not super important839      );840      expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ARGS_UPDATED, {841        storyId: 'component-one--a',842        args: { foo: 'a', new: 'value' },843      });844    });845    it('resets all args', async () => {846      document.location.search = '?id=component-one--a';847      await createAndRenderPreview();848      emitter.emit(Events.UPDATE_STORY_ARGS, {849        storyId: 'component-one--a',850        updatedArgs: { foo: 'new', new: 'value' },851      });852      mockChannel.emit.mockClear();853      emitter.emit(Events.RESET_STORY_ARGS, {854        storyId: 'component-one--a',855      });856      await waitForRender();857      expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(858        expect.objectContaining({859          forceRemount: false,860          storyContext: expect.objectContaining({861            initialArgs: { foo: 'a' },862            args: { foo: 'a' },863          }),864        }),865        undefined // this is coming from view.prepareForStory, not super important866      );867      expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ARGS_UPDATED, {868        storyId: 'component-one--a',869        args: { foo: 'a' },870      });871    });872  });873  describe('on FORCE_RE_RENDER', () => {874    it('rerenders the story with the same args', async () => {875      document.location.search = '?id=component-one--a';876      await createAndRenderPreview();877      mockChannel.emit.mockClear();878      projectAnnotations.renderToDOM.mockClear();879      emitter.emit(Events.FORCE_RE_RENDER);880      await waitForRender();881      expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(882        expect.objectContaining({ forceRemount: false }),883        undefined // this is coming from view.prepareForStory, not super important884      );885    });886  });887  describe('on FORCE_REMOUNT', () => {888    beforeEach(() => {889      jest.useFakeTimers();890    });891    afterEach(() => {892      jest.useRealTimers();893    });894    it('remounts the story with the same args', async () => {895      document.location.search = '?id=component-one--a';896      await createAndRenderPreview();897      mockChannel.emit.mockClear();898      projectAnnotations.renderToDOM.mockClear();899      emitter.emit(Events.FORCE_REMOUNT, { storyId: 'component-one--a' });900      await waitForRender();901      expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(902        expect.objectContaining({ forceRemount: true }),903        undefined // this is coming from view.prepareForStory, not super important904      );905    });906    it('aborts render function for initial story', async () => {907      const [gate, openGate] = createGate();908      document.location.search = '?id=component-one--a';909      projectAnnotations.renderToDOM.mockImplementationOnce(async () => gate);910      await new PreviewWeb().initialize({ importFn, getProjectAnnotations });911      await waitForRenderPhase('rendering');912      expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(913        expect.objectContaining({914          forceRemount: true,915          storyContext: expect.objectContaining({916            id: 'component-one--a',917            loaded: { l: 7 },918          }),919        }),920        undefined // this is coming from view.prepareForStory, not super important921      );922      mockChannel.emit.mockClear();923      emitter.emit(Events.FORCE_REMOUNT, { storyId: 'component-one--a' });924      await waitForSetCurrentStory();925      // Now let the renderToDOM call resolve926      openGate();927      await waitForRenderPhase('aborted');928      await waitForSetCurrentStory();929      await waitForRenderPhase('rendering');930      expect(projectAnnotations.renderToDOM).toHaveBeenCalledTimes(2);931      await waitForRenderPhase('playing');932      expect(componentOneExports.a.play).toHaveBeenCalledTimes(1);933      await waitForRenderPhase('completed');934      expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--a');935      await waitForQuiescence();936    });937  });938  describe('onSetCurrentStory', () => {939    beforeEach(() => {940      jest.useFakeTimers();941    });942    afterEach(() => {943      jest.useRealTimers();944    });945    it('updates URL', async () => {946      document.location.search = '?id=component-one--a';947      await createAndRenderPreview();948      emitter.emit(Events.SET_CURRENT_STORY, {949        storyId: 'component-one--b',950        viewMode: 'story',951      });952      await waitForSetCurrentStory();953      expect(history.replaceState).toHaveBeenCalledWith(954        {},955        '',956        'pathname?id=component-one--b&viewMode=story'957      );958    });959    it('emits CURRENT_STORY_WAS_SET', async () => {960      document.location.search = '?id=component-one--a';961      await createAndRenderPreview();962      emitter.emit(Events.SET_CURRENT_STORY, {963        storyId: 'component-one--b',964        viewMode: 'story',965      });966      await waitForSetCurrentStory();967      expect(mockChannel.emit).toHaveBeenCalledWith(Events.CURRENT_STORY_WAS_SET, {968        storyId: 'component-one--b',969        viewMode: 'story',970      });971    });972    it('renders loading error if the story specified does not exist', async () => {973      document.location.search = '?id=component-one--a';974      const preview = await createAndRenderPreview();975      emitter.emit(Events.SET_CURRENT_STORY, {976        storyId: 'random',977        viewMode: 'story',978      });979      await waitForSetCurrentStory();980      await waitForEvents([Events.STORY_MISSING]);981      expect(preview.view.showErrorDisplay).toHaveBeenCalled();982      expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_MISSING, 'random');983    });984    describe('if called before the preview is initialized', () => {985      it('still renders the selected story, once ready', async () => {986        document.location.search = '';987        // We intentionally are *not* awaiting here988        new PreviewWeb().initialize({ importFn, getProjectAnnotations });989        emitter.emit(Events.SET_CURRENT_STORY, {990          storyId: 'component-one--b',991          viewMode: 'story',992        });993        await waitForEvents([Events.STORY_RENDERED]);994        expect(mockChannel.emit).toHaveBeenCalledWith(Events.CURRENT_STORY_WAS_SET, {995          storyId: 'component-one--b',996          viewMode: 'story',997        });998        expect(history.replaceState).toHaveBeenCalledWith(999          {},1000          '',1001          'pathname?id=component-one--b&viewMode=story'1002        );1003        expect(mockChannel.emit).not.toHaveBeenCalledWith(Events.STORY_MISSING, 'component-one--b');1004        expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--b');1005      });1006    });1007    describe('if the selection is unchanged', () => {1008      it('emits STORY_UNCHANGED', async () => {1009        document.location.search = '?id=component-one--a';1010        await createAndRenderPreview();1011        emitter.emit(Events.SET_CURRENT_STORY, {1012          storyId: 'component-one--a',1013          viewMode: 'story',1014        });1015        await waitForSetCurrentStory();1016        await waitForEvents([Events.STORY_UNCHANGED]);1017        expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_UNCHANGED, 'component-one--a');1018      });1019      it('does NOT call renderToDOM', async () => {1020        document.location.search = '?id=component-one--a';1021        await createAndRenderPreview();1022        projectAnnotations.renderToDOM.mockClear();1023        emitter.emit(Events.SET_CURRENT_STORY, {1024          storyId: 'component-one--a',1025          viewMode: 'story',1026        });1027        await waitForSetCurrentStory();1028        // The renderToDOM would have been async so we need to wait a tick.1029        await waitForQuiescence();1030        expect(projectAnnotations.renderToDOM).not.toHaveBeenCalled();1031      });1032    });1033    describe('when changing story in story viewMode', () => {1034      it('updates URL', async () => {1035        document.location.search = '?id=component-one--a';1036        await createAndRenderPreview();1037        emitter.emit(Events.SET_CURRENT_STORY, {1038          storyId: 'component-one--b',1039          viewMode: 'story',1040        });1041        await waitForSetCurrentStory();1042        expect(history.replaceState).toHaveBeenCalledWith(1043          {},1044          '',1045          'pathname?id=component-one--b&viewMode=story'1046        );1047      });1048      it('renders preparing state', async () => {1049        document.location.search = '?id=component-one--a';1050        const preview = await createAndRenderPreview();1051        emitter.emit(Events.SET_CURRENT_STORY, {1052          storyId: 'component-one--b',1053          viewMode: 'story',1054        });1055        await waitForSetCurrentStory();1056        expect(preview.view.showPreparingStory).toHaveBeenCalled();1057      });1058      it('emits STORY_CHANGED', async () => {1059        document.location.search = '?id=component-one--a';1060        await createAndRenderPreview();1061        mockChannel.emit.mockClear();1062        emitter.emit(Events.SET_CURRENT_STORY, {1063          storyId: 'component-one--b',1064          viewMode: 'story',1065        });1066        await waitForSetCurrentStory();1067        await waitForEvents([Events.STORY_CHANGED]);1068        expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_CHANGED, 'component-one--b');1069      });1070      it('emits STORY_PREPARED', async () => {1071        document.location.search = '?id=component-one--a';1072        await createAndRenderPreview();1073        mockChannel.emit.mockClear();1074        emitter.emit(Events.SET_CURRENT_STORY, {1075          storyId: 'component-one--b',1076          viewMode: 'story',1077        });1078        await waitForSetCurrentStory();1079        await waitForEvents([Events.STORY_PREPARED]);1080        expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_PREPARED, {1081          id: 'component-one--b',1082          parameters: {1083            __isArgsStory: false,1084            docs: { container: expect.any(Function) },1085            fileName: './src/ComponentOne.stories.js',1086          },1087          initialArgs: { foo: 'b' },1088          argTypes: { foo: { name: 'foo', type: { name: 'string' } } },1089          args: { foo: 'b' },1090        });1091      });1092      it('applies loaders with story context', async () => {1093        document.location.search = '?id=component-one--a';1094        await createAndRenderPreview();1095        mockChannel.emit.mockClear();1096        emitter.emit(Events.SET_CURRENT_STORY, {1097          storyId: 'component-one--b',1098          viewMode: 'story',1099        });1100        await waitForSetCurrentStory();1101        await waitForRender();1102        expect(componentOneExports.default.loaders[0]).toHaveBeenCalledWith(1103          expect.objectContaining({1104            id: 'component-one--b',1105            parameters: {1106              __isArgsStory: false,1107              docs: { container: expect.any(Function) },1108              fileName: './src/ComponentOne.stories.js',1109            },1110            initialArgs: { foo: 'b' },1111            argTypes: { foo: { name: 'foo', type: { name: 'string' } } },1112            args: { foo: 'b' },1113          })1114        );1115      });1116      it('passes loaded context to renderToDOM', async () => {1117        document.location.search = '?id=component-one--a';1118        await createAndRenderPreview();1119        mockChannel.emit.mockClear();1120        emitter.emit(Events.SET_CURRENT_STORY, {1121          storyId: 'component-one--b',1122          viewMode: 'story',1123        });1124        await waitForSetCurrentStory();1125        await waitForRender();1126        expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(1127          expect.objectContaining({1128            forceRemount: true,1129            storyContext: expect.objectContaining({1130              id: 'component-one--b',1131              parameters: {1132                __isArgsStory: false,1133                docs: { container: expect.any(Function) },1134                fileName: './src/ComponentOne.stories.js',1135              },1136              globals: { a: 'b' },1137              initialArgs: { foo: 'b' },1138              argTypes: { foo: { name: 'foo', type: { name: 'string' } } },1139              args: { foo: 'b' },1140              loaded: { l: 7 },1141            }),1142          }),1143          undefined // this is coming from view.prepareForStory, not super important1144        );1145      });1146      it('renders exception if renderToDOM throws', async () => {1147        document.location.search = '?id=component-one--a';1148        const preview = await createAndRenderPreview();1149        const error = new Error('error');1150        projectAnnotations.renderToDOM.mockImplementationOnce(() => {1151          throw error;1152        });1153        mockChannel.emit.mockClear();1154        emitter.emit(Events.SET_CURRENT_STORY, {1155          storyId: 'component-one--b',1156          viewMode: 'story',1157        });1158        await waitForSetCurrentStory();1159        await waitForRender();1160        expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_THREW_EXCEPTION, error);1161        expect(preview.view.showErrorDisplay).toHaveBeenCalledWith(error);1162      });1163      it('renders error if the story calls showError', async () => {1164        document.location.search = '?id=component-one--a';1165        const preview = await createAndRenderPreview();1166        const error = { title: 'title', description: 'description' };1167        projectAnnotations.renderToDOM.mockImplementationOnce((context) =>1168          context.showError(error)1169        );1170        mockChannel.emit.mockClear();1171        emitter.emit(Events.SET_CURRENT_STORY, {1172          storyId: 'component-one--b',1173          viewMode: 'story',1174        });1175        await waitForSetCurrentStory();1176        await waitForRender();1177        expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_ERRORED, error);1178        expect(preview.view.showErrorDisplay).toHaveBeenCalledWith({1179          message: error.title,1180          stack: error.description,1181        });1182      });1183      it('renders exception if the story calls showException', async () => {1184        document.location.search = '?id=component-one--a';1185        const preview = await createAndRenderPreview();1186        const error = new Error('error');1187        projectAnnotations.renderToDOM.mockImplementationOnce((context) =>1188          context.showException(error)1189        );1190        mockChannel.emit.mockClear();1191        emitter.emit(Events.SET_CURRENT_STORY, {1192          storyId: 'component-one--b',1193          viewMode: 'story',1194        });1195        await waitForSetCurrentStory();1196        await waitForRender();1197        expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_THREW_EXCEPTION, error);1198        expect(preview.view.showErrorDisplay).toHaveBeenCalledWith(error);1199      });1200      it('executes playFunction', async () => {1201        document.location.search = '?id=component-one--a';1202        await createAndRenderPreview();1203        mockChannel.emit.mockClear();1204        emitter.emit(Events.SET_CURRENT_STORY, {1205          storyId: 'component-one--b',1206          viewMode: 'story',1207        });1208        await waitForSetCurrentStory();1209        await waitForRender();1210        expect(componentOneExports.b.play).toHaveBeenCalled();1211      });1212      it('emits STORY_RENDERED', async () => {1213        document.location.search = '?id=component-one--a';1214        await createAndRenderPreview();1215        mockChannel.emit.mockClear();1216        emitter.emit(Events.SET_CURRENT_STORY, {1217          storyId: 'component-one--b',1218          viewMode: 'story',1219        });1220        await waitForSetCurrentStory();1221        await waitForRender();1222        expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--b');1223      });1224      it('retains any arg changes', async () => {1225        document.location.search = '?id=component-one--a';1226        const preview = await createAndRenderPreview();1227        mockChannel.emit.mockClear();1228        emitter.emit(Events.UPDATE_STORY_ARGS, {1229          storyId: 'component-one--a',1230          updatedArgs: { foo: 'updated' },1231        });1232        await waitForRender();1233        expect(preview.storyStore.args.get('component-one--a')).toEqual({1234          foo: 'updated',1235        });1236        mockChannel.emit.mockClear();1237        emitter.emit(Events.SET_CURRENT_STORY, {1238          storyId: 'component-one--b',1239          viewMode: 'story',1240        });1241        await waitForSetCurrentStory();1242        await waitForRender();1243        expect(preview.storyStore.args.get('component-one--a')).toEqual({1244          foo: 'updated',1245        });1246        mockChannel.emit.mockClear();1247        emitter.emit(Events.SET_CURRENT_STORY, {1248          storyId: 'component-one--a',1249          viewMode: 'story',1250        });1251        await waitForSetCurrentStory();1252        await waitForRender();1253        expect(preview.storyStore.args.get('component-one--a')).toEqual({1254          foo: 'updated',1255        });1256      });1257      describe('while story is still rendering', () => {1258        it('stops initial story after loaders if running', async () => {1259          const [gate, openGate] = createGate();1260          componentOneExports.default.loaders[0].mockImplementationOnce(async () => gate);1261          document.location.search = '?id=component-one--a';1262          await new PreviewWeb().initialize({ importFn, getProjectAnnotations });1263          await waitForRenderPhase('loading');1264          emitter.emit(Events.SET_CURRENT_STORY, {1265            storyId: 'component-one--b',1266            viewMode: 'story',1267          });1268          await waitForSetCurrentStory();1269          await waitForRender();1270          // Now let the loader resolve1271          openGate({ l: 8 });1272          await waitForRender();1273          // Story gets rendered with updated args1274          expect(projectAnnotations.renderToDOM).toHaveBeenCalledTimes(1);1275          expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(1276            expect.objectContaining({1277              forceRemount: true,1278              storyContext: expect.objectContaining({1279                id: 'component-one--b',1280                loaded: { l: 7 },1281              }),1282            }),1283            undefined // this is coming from view.prepareForStory, not super important1284          );1285        });1286        it('aborts render for initial story', async () => {1287          const [gate, openGate] = createGate();1288          document.location.search = '?id=component-one--a';1289          projectAnnotations.renderToDOM.mockImplementationOnce(async () => gate);1290          await new PreviewWeb().initialize({ importFn, getProjectAnnotations });1291          await waitForRenderPhase('rendering');1292          mockChannel.emit.mockClear();1293          emitter.emit(Events.SET_CURRENT_STORY, {1294            storyId: 'component-one--b',1295            viewMode: 'story',1296          });1297          await waitForSetCurrentStory();1298          // Now let the renderToDOM call resolve1299          openGate();1300          await waitForRenderPhase('aborted');1301          await waitForSetCurrentStory();1302          await waitForRenderPhase('rendering');1303          expect(projectAnnotations.renderToDOM).toHaveBeenCalledTimes(2);1304          await waitForRenderPhase('playing');1305          expect(componentOneExports.a.play).not.toHaveBeenCalled();1306          expect(componentOneExports.b.play).toHaveBeenCalled();1307          await waitForRenderPhase('completed');1308          expect(mockChannel.emit).not.toHaveBeenCalledWith(1309            Events.STORY_RENDERED,1310            'component-one--a'1311          );1312          expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--b');1313          await waitForQuiescence();1314        });1315        it('aborts play function for initial story', async () => {1316          const [gate, openGate] = createGate();1317          componentOneExports.a.play.mockImplementationOnce(async () => gate);1318          document.location.search = '?id=component-one--a';1319          await new PreviewWeb().initialize({ importFn, getProjectAnnotations });1320          await waitForRenderPhase('playing');1321          expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(1322            expect.objectContaining({1323              forceRemount: true,1324              storyContext: expect.objectContaining({1325                id: 'component-one--a',1326                loaded: { l: 7 },1327              }),1328            }),1329            undefined // this is coming from view.prepareForStory, not super important1330          );1331          mockChannel.emit.mockClear();1332          emitter.emit(Events.SET_CURRENT_STORY, {1333            storyId: 'component-one--b',1334            viewMode: 'story',1335          });1336          await waitForSetCurrentStory();1337          // Now let the playFunction call resolve1338          openGate();1339          await waitForRenderPhase('aborted');1340          await waitForSetCurrentStory();1341          await waitForRenderPhase('rendering');1342          expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_CHANGED, 'component-one--b');1343          expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(1344            expect.objectContaining({1345              forceRemount: true,1346              storyContext: expect.objectContaining({1347                id: 'component-one--b',1348                loaded: { l: 7 },1349              }),1350            }),1351            undefined // this is coming from view.prepareForStory, not super important1352          );1353          await waitForRenderPhase('playing');1354          await waitForRenderPhase('completed');1355          expect(mockChannel.emit).toHaveBeenCalledWith(Events.STORY_RENDERED, 'component-one--b');1356          // Final story rendered is not emitted for the first story1357          await waitForQuiescence();1358          expect(mockChannel.emit).not.toHaveBeenCalledWith(1359            Events.STORY_RENDERED,1360            'component-one--a'1361          );1362        });1363        it('reloads page if playFunction fails to abort in time', async () => {1364          const [gate] = createGate();1365          componentOneExports.a.play.mockImplementationOnce(async () => gate);1366          document.location.search = '?id=component-one--a';1367          await new PreviewWeb().initialize({ importFn, getProjectAnnotations });1368          await waitForRenderPhase('playing');1369          expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(1370            expect.objectContaining({1371              forceRemount: true,1372              storyContext: expect.objectContaining({1373                id: 'component-one--a',1374                loaded: { l: 7 },1375              }),1376            }),1377            undefined // this is coming from view.prepareForStory, not super important1378          );1379          mockChannel.emit.mockClear();1380          emitter.emit(Events.SET_CURRENT_STORY, {1381            storyId: 'component-one--b',1382            viewMode: 'story',...

PreviewWeb.mockdata.ts

Source:PreviewWeb.mockdata.ts

1import { EventEmitter } from 'events';2import Events from '@storybook/core-events';3import { StoryIndex } from '@storybook/store';4import { RenderPhase } from './PreviewWeb';5export const componentOneExports = {6  default: {7    title: 'Component One',8    argTypes: {9      foo: { type: { name: 'string' } },10    },11    loaders: [jest.fn()],12    parameters: {13      docs: { container: jest.fn() },14    },15  },16  a: { args: { foo: 'a' }, play: jest.fn() },17  b: { args: { foo: 'b' }, play: jest.fn() },18};19export const componentTwoExports = {20  default: { title: 'Component Two' },21  c: { args: { foo: 'c' } },22};23export const importFn = jest.fn(async (path) => {24  return path === './src/ComponentOne.stories.js' ? componentOneExports : componentTwoExports;25});26export const projectAnnotations = {27  globals: { a: 'b' },28  globalTypes: {},29  decorators: [jest.fn((s) => s())],30  render: jest.fn(),31  renderToDOM: jest.fn(),32};33export const getProjectAnnotations = () => projectAnnotations;34export const storyIndex: StoryIndex = {35  v: 3,36  stories: {37    'component-one--a': {38      id: 'component-one--a',39      title: 'Component One',40      name: 'A',41      importPath: './src/ComponentOne.stories.js',42    },43    'component-one--b': {44      id: 'component-one--b',45      title: 'Component One',46      name: 'B',47      importPath: './src/ComponentOne.stories.js',48    },49    'component-two--c': {50      id: 'component-two--c',51      title: 'Component Two',52      name: 'C',53      importPath: './src/ComponentTwo.stories.js',54    },55  },56};57export const getStoryIndex = () => storyIndex;58export const emitter = new EventEmitter();59export const mockChannel = {60  on: emitter.on.bind(emitter),61  off: emitter.off.bind(emitter),62  removeListener: emitter.off.bind(emitter),63  emit: jest.fn(emitter.emit.bind(emitter)),64  // emit: emitter.emit.bind(emitter),65};66export const waitForEvents = (67  events: string[],68  predicate: (...args: any[]) => boolean = () => true69) => {70  // We've already emitted a render event. NOTE if you want to test a second call,71  // ensure you call `mockChannel.emit.mockClear()` before `waitFor...`72  if (73    mockChannel.emit.mock.calls.find(74      (call) => events.includes(call[0]) && predicate(...call.slice(1))75    )76  ) {77    return Promise.resolve(null);78  }79  return new Promise((resolve, reject) => {80    const listener = (...args: any[]) => {81      if (!predicate(...args)) return;82      events.forEach((event) => mockChannel.off(event, listener));83      resolve(null);84    };85    events.forEach((event) => mockChannel.on(event, listener));86    // Don't wait too long87    waitForQuiescence().then(() => reject(new Error('Event was not emitted in time')));88  });89};90// The functions on the preview that trigger rendering don't wait for91// the async parts, so we need to listen for the "done" events92export const waitForRender = () =>93  waitForEvents([94    Events.STORY_RENDERED,95    Events.DOCS_RENDERED,96    Events.STORY_THREW_EXCEPTION,97    Events.STORY_ERRORED,98    Events.STORY_MISSING,99  ]);100export const waitForRenderPhase = (phase: RenderPhase) =>101  waitForEvents([Events.STORY_RENDER_PHASE_CHANGED], ({ newPhase }) => newPhase === phase);102// A little trick to ensure that we always call the real `setTimeout` even when timers are mocked103const realSetTimeout = setTimeout;...

Using AI Code Generation

1import { waitForRenderPhase } from 'storybook-root-logger';2import { render } from '@testing-library/react';3test('renders learn react link', async () => {4  const { getByText } = render(<App />);5  const linkElement = getByText(/learn react/i);6  await waitForRenderPhase();7  expect(linkElement).toBeInTheDocument();8});9import { addDecorator } from '@storybook/react';10import { withRootLogger } from 'storybook-root-logger';11addDecorator(withRootLogger());12import { addons } from '@storybook/addons';13import { withRootLogger } from 'storybook-root-logger';14addons.setConfig({15});16addons.register('storybook/root-logger', withRootLogger());17module.exports = {18};19const path = require('path');20module.exports = ({ config }) => {21  config.resolve.alias['storybook-root-logger'] = path.resolve(22  );23  return config;24};25{26  "compilerOptions": {27    "paths": {28    }29  }30}31module.exports = {32      'babel-plugin-root-import',33      {34      },35};

Using AI Code Generation

1import { waitForRenderPhase } from 'storybook-root-logger'2import { render } from '@testing-library/react'3import { MyComponent } from './MyComponent'4test('MyComponent', async () => {5  const { container } = render(<MyComponent />)6  await waitForRenderPhase('MyComponent')7  expect(container).toHaveTextContent('MyComponent')8})9import { addRenderPhaseListener } from 'storybook-root-logger'10addRenderPhaseListener('MyComponent', () => {11  console.log('MyComponent render phase')12})

Using AI Code Generation

1const { waitForRenderPhase } = require('storybook-root-provider');2const waitForRender = async () => {3  await waitForRenderPhase();4};5const test = async () => {6  await waitForRender();7  console.log('rendered');8};9test();10const { renderHook } = require('@testing-library/react-hooks');11const { act } = require('react-dom/test-utils');12const useRenderPhase = () => {13  const [rendered, setRendered] = useState(false);14  useEffect(() => {15    setRendered(true);16  }, []);17  return rendered;18};19const waitForRenderPhase = async () => {20  const { result } = renderHook(() => useRenderPhase());21  await act(async () => {22    await new Promise((resolve) => setTimeout(resolve, 0));23  });24  return result.current;25};26module.exports = {27};28{29  "scripts": {30  },31  "devDependencies": {32  }33}34import { RootProvider } from 'storybook-root-provider';35  (Story) => (36];37module.exports = {38  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],39};40import { addons } from '@storybook/addons';41import { create } from '@storybook/theming/create';42addons.setConfig({43  theme: create({44  }),45});

Using AI Code Generation

1import { waitForRenderPhase } from 'storybook-root-provider';2export const waitForRender = async () => {3  await waitForRenderPhase('render');4};5import { waitForRender } from './test.js';6it('should render a component', async () => {7  await waitForRender();8  expect(screen.getByText('Hello World')).toBeInTheDocument();9});

Using AI Code Generation

1import { waitForRenderPhase } from 'storybook-root-bridge';2export const test = () => {3  waitForRenderPhase('component-rendered', () => {4  });5};6import { waitForRenderPhase } from 'storybook-root-bridge';7export const withRootBridge = (StoryFn) => {8  waitForRenderPhase('component-rendered', () => {9  });10  return StoryFn();11};12import { waitForRenderPhase } from 'storybook-root-bridge';13export const withRootBridge = (StoryFn) => {14  waitForRenderPhase('component-rendered', () => {15  });16  return StoryFn();17};18import { waitForRenderPhase } from 'storybook-root-bridge';19export const withRootBridge = (StoryFn) => {20  waitForRenderPhase('component-rendered', () => {21  });22  return StoryFn();23};24import { waitForRenderPhase } from 'storybook-root-bridge';25export const withRootBridge = (StoryFn) => {26  waitForRenderPhase('component-rendered', () => {27  });28  return StoryFn();29};30import { waitForRenderPhase } from 'storybook-root-bridge';31export const withRootBridge = (StoryFn) => {32  waitForRenderPhase('component-rendered', () => {

Using AI Code Generation

1import { waitForRenderPhase } from 'storybook-root-bridge';2const story = () => {3};4waitForRenderPhase(story, 'firstRender', 'secondRender')5.then(() => {6});7import { waitForRenderPhase } from 'storybook-addon-render-phase';8export const waitForRenderPhase = (story, ...renderPhases) => {9  return waitForRenderPhase(story, ...renderPhases);10}11import { addons } from '@storybook/addons';12import { EVENT_ID } from './shared';13export const waitForRenderPhase = (story, ...renderPhases) => {14  const channel = addons.getChannel();15  return new Promise((resolve) => {16    channel.on(EVENT_ID, ({ renderPhase }) => {17      if (renderPhases.includes(renderPhase)) {18        resolve();19      }20    });21    story();22  });23};24import { addons, makeDecorator } from '@storybook/addons';25import { EVENT_ID } from './shared';26const withRenderPhase = makeDecorator({27  wrapper: (storyFn, context, { parameters }) => {28    const channel = addons.getChannel();29    channel.emit(EVENT_ID, { renderPhase: parameters.renderPhase });30    return storyFn(context);31  },32});33export { withRenderPhase };34export const EVENT_ID = 'storybook/addon-render-phase/event';

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.