Select initial fixture from remote renderers

packages/react-cosmos-playground2/src/plugins/RendererCore/receiveResponse/__tests__/rendererReadyInitialFixture.ts

@@ -0,0 +1,38 @@
+import { waitFor } from '@testing-library/dom';
+import { FixtureList } from 'react-cosmos-shared2/renderer';
+import { loadPlugins, resetPlugins } from 'react-plugin';
+import {
+  mockNotifications,
+  mockRouter,
+} from '../../../../testHelpers/pluginMocks';
+import { mockRendererReady } from '../../testHelpers';
+
+beforeEach(() => jest.isolateModules(() => require('../..')));
+
+afterEach(resetPlugins);
+
+const fixtureId = { path: 'ein.js' };
+const fixtures: FixtureList = { [fixtureId.path]: { type: 'single' } };
+
+function registerTestPlugins() {
+  const { selectFixture } = mockRouter({
+    getSelectedFixtureId: () => null,
+  });
+  mockNotifications();
+  return { selectFixture };
+}
+
+function loadTestPlugins() {
+  loadPlugins();
+}
+
+it('selects initial fixture', async () => {
+  const { selectFixture } = registerTestPlugins();
+
+  loadTestPlugins();
+  mockRendererReady('mockRendererId', fixtures, { path: 'ein.js' });
+
+  await waitFor(() =>
+    expect(selectFixture).toBeCalledWith(expect.any(Object), { path: 'ein.js' })
+  );
+});

packages/react-cosmos-playground2/src/plugins/RendererCore/receiveResponse/rendererReady.ts

@@ -1,17 +1,19 @@
 import {
+  FixtureId,
   RendererId,
   RendererReadyResponse,
 } from 'react-cosmos-shared2/renderer';
 import { NotificationsSpec } from '../../Notifications/public';
 import { postSelectFixtureRequest } from '../shared/postRequest';
 import { getSelectedFixtureId } from '../shared/router';
 import { RendererCoreContext, State } from '../shared';
+import { RouterSpec } from '../../Router/public';
 
 export function receiveRendererReadyResponse(
   context: RendererCoreContext,
   { payload }: RendererReadyResponse
 ) {
-  const { rendererId, fixtures } = payload;
+  const { rendererId, fixtures, initialFixtureId } = payload;
   context.setState(stateUpdater, afterStateChanged);
 
   function stateUpdater(prevState: State) {
@@ -30,11 +32,20 @@ export function receiveRendererReadyResponse(
   }
 
   function afterStateChanged() {
-    selectFixtureFromUrlParams(context, rendererId);
+    if (initialFixtureId) selectInitialFixture(context, initialFixtureId);
+    else selectFixtureFromUrlParams(context, rendererId);
     notifyRendererConnection(context, rendererId);
   }
 }
 
+function selectInitialFixture(
+  { getMethodsOf }: RendererCoreContext,
+  fixtureId: FixtureId
+) {
+  const router = getMethodsOf<RouterSpec>('router');
+  router.selectFixture(fixtureId);
+}
+
 function selectFixtureFromUrlParams(
   context: RendererCoreContext,
   rendererId: RendererId

packages/react-cosmos-playground2/src/plugins/RendererCore/testHelpers/index.ts

@@ -11,13 +11,15 @@ import { getRendererCoreMethods } from '../../../testHelpers/pluginMocks';
 
 export function createRendererReadyResponse(
   rendererId: RendererId,
-  fixtures: FixtureList
+  fixtures: FixtureList,
+  initialFixtureId?: FixtureId
 ): RendererReadyResponse {
   return {
     type: 'rendererReady',
     payload: {
       rendererId,
       fixtures,
+      initialFixtureId,
     },
   };
 }
@@ -52,10 +54,11 @@ export function createFixtureStateChangeResponse(
 
 export function mockRendererReady(
   rendererId: RendererId,
-  fixtures: FixtureList
+  fixtures: FixtureList,
+  initialFixtureId?: FixtureId
 ) {
   return getRendererCoreMethods().receiveResponse(
-    createRendererReadyResponse(rendererId, fixtures)
+    createRendererReadyResponse(rendererId, fixtures, initialFixtureId)
   );
 }
 

packages/react-cosmos-playground2/src/plugins/RendererPreview/__tests__/iframe.tsx

@@ -7,7 +7,6 @@ import {
   mockCore,
   mockNotifications,
   mockRendererCore,
-  mockRouter,
 } from '../../../testHelpers/pluginMocks';
 import { fakeFetchResponseStatus } from '../testHelpers/fetch';
 import { getIframe } from '../testHelpers/iframe';
@@ -22,7 +21,6 @@ function registerTestPlugins() {
     getWebRendererUrl: () => 'http://localhost:5000/_renderer.html',
   });
   mockRendererCore();
-  mockRouter();
 }
 
 function loadTestPlugins() {

packages/react-cosmos-playground2/src/plugins/RendererPreview/__tests__/messages.tsx

@@ -6,7 +6,6 @@ import {
   getRendererCoreContext,
   mockCore,
   mockRendererCore,
-  mockRouter,
 } from '../../../testHelpers/pluginMocks';
 import { fakeFetchResponseStatus } from '../testHelpers/fetch';
 import { getIframe, mockIframeMessage } from '../testHelpers/iframe';
@@ -46,7 +45,6 @@ it('posts renderer request message to iframe', async () => {
 
 it('sends renderer response message to renderer core', async () => {
   mockRendererUrl();
-  mockRouter();
   const { receiveResponse } = mockRendererCore();
 
   loadTestPlugins();
@@ -59,7 +57,6 @@ it('sends renderer response message to renderer core', async () => {
 
 it('makes connected renderer the primary renderer', async () => {
   mockRendererUrl();
-  mockRouter();
   const { selectPrimaryRenderer } = mockRendererCore();
 
   loadTestPlugins();

packages/react-cosmos-playground2/src/plugins/RendererPreview/__tests__/runtimeStatus.tsx

@@ -1,15 +1,14 @@
+import React from 'react';
 import { waitFor } from '@testing-library/dom';
 import { render } from '@testing-library/react';
-import React from 'react';
-import { loadPlugins, resetPlugins, Slot } from 'react-plugin';
+import { loadPlugins, Slot, resetPlugins } from 'react-plugin';
 import {
-  getRendererPreviewMethods,
   mockCore,
   mockRendererCore,
-  mockRouter,
+  getRendererPreviewMethods,
 } from '../../../testHelpers/pluginMocks';
 import { fakeFetchResponseStatus } from '../testHelpers/fetch';
-import { rendererErrorMsg, rendererReadyMsg } from '../testHelpers/messages';
+import { rendererReadyMsg, rendererErrorMsg } from '../testHelpers/messages';
 
 beforeEach(() => jest.isolateModules(() => require('..')));
 
@@ -20,7 +19,6 @@ function registerTestPlugins() {
     getWebRendererUrl: () => 'mockRendererUrl',
   });
   mockRendererCore();
-  mockRouter();
 }
 
 function loadTestPlugins() {

packages/react-cosmos-playground2/src/plugins/RendererPreview/__tests__/urlStatus.tsx

@@ -5,7 +5,6 @@ import { loadPlugins, resetPlugins, Slot } from 'react-plugin';
 import {
   getRendererPreviewMethods,
   mockCore,
-  mockRouter,
 } from '../../../testHelpers/pluginMocks';
 import { fakeFetchResponseStatus } from '../testHelpers/fetch';
 
@@ -17,7 +16,6 @@ function registerTestPlugins() {
   mockCore({
     getWebRendererUrl: () => 'mockRendererUrl',
   });
-  mockRouter();
 }
 
 function loadTestPlugins(status: number) {

packages/react-cosmos-playground2/src/plugins/RendererPreview/handleWindowMessages.ts

@@ -1,6 +1,5 @@
 import { RendererResponse } from 'react-cosmos-shared2/renderer';
 import { RendererCoreSpec } from '../RendererCore/public';
-import { RouterSpec } from '../Router/public';
 import { RendererPreviewContext } from './shared';
 
 type WindowMsg = { data: { [key: string]: unknown } };
@@ -20,19 +19,14 @@ function createMessageHandler(context: RendererPreviewContext) {
       return;
     }
 
-    const router = context.getMethodsOf<RouterSpec>('router');
     const rendererCore = context.getMethodsOf<RendererCoreSpec>('rendererCore');
     const response = msg.data as RendererResponse;
     rendererCore.receiveResponse(response);
 
     updateRuntimeStatus(context, response);
 
     if (response.type === 'rendererReady') {
-      const { rendererId, initialFixtureId } = response.payload;
-      rendererCore.selectPrimaryRenderer(rendererId);
-      if (initialFixtureId) {
-        router.selectFixture(initialFixtureId);
-      }
+      rendererCore.selectPrimaryRenderer(response.payload.rendererId);
     }
   };
 }