Edit fixture button (#942)

Author: ovidiuch

packages/react-cosmos-playground2/src/global/registerPlugins.ts

@@ -18,6 +18,7 @@ require('../plugins/Nav').register();
 require('../plugins/ContentOverlay').register();
 require('../plugins/ControlPanel').register();
 require('../plugins/ResponsivePreview').register();
+require('../plugins/EditFixtureButton').register();
 
 // TODO: Read list of disabled plugins from user config
 enablePlugin('controlPanel', false);

packages/react-cosmos-playground2/src/plugins/EditFixtureButton/EditFixtureButton.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { FixtureId } from 'react-cosmos-shared2/renderer';
+import { Button } from '../../shared/components';
+import { EditIcon } from '../../shared/icons';
+
+export type EditFixtureButtonProps = {
+  devServerOn: boolean;
+  selectedFixtureId: FixtureId | null;
+};
+
+export function EditFixtureButton({
+  devServerOn,
+  selectedFixtureId
+}: EditFixtureButtonProps) {
+  if (!devServerOn || !selectedFixtureId) {
+    return null;
+  }
+
+  return (
+    <Button
+      icon={<EditIcon />}
+      label="edit"
+      onClick={() => openFile(selectedFixtureId.path)}
+    />
+  );
+}
+
+function openFile(filePath: string) {
+  fetch(`/_open?filePath=${filePath}`, { credentials: 'same-origin' });
+}

packages/react-cosmos-playground2/src/plugins/EditFixtureButton/index.test.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { loadPlugins, Slot } from 'react-plugin';
+import {
+  render,
+  waitForElement,
+  fireEvent,
+  RenderResult
+} from 'react-testing-library';
+import { register } from '.';
+import { createArrayPlug } from '../../shared/slot';
+import { cleanup, mockPlug } from '../../testHelpers/plugin';
+import { mockCore, mockRouter } from '../../testHelpers/pluginMocks';
+import { mockFetch } from './testHelpers';
+
+afterEach(cleanup);
+
+function mockSelectedFixtureId() {
+  mockRouter({
+    getSelectedFixtureId: () => ({ path: 'foo.js', name: null })
+  });
+}
+
+function mockFixtureAction() {
+  mockPlug({
+    slotName: 'fixtureActions',
+    render: createArrayPlug('fixtureActions', () => <>fooAction</>)
+  });
+}
+
+function waitForMockFixtureAction({ getByText }: RenderResult) {
+  return waitForElement(() => getByText('fooAction'));
+}
+
+async function loadTestPlugins() {
+  mockSelectedFixtureId();
+  mockFixtureAction();
+  register();
+  loadPlugins();
+  const renderer = render(<Slot name="fixtureActions" />);
+  await waitForMockFixtureAction(renderer);
+  return renderer;
+}
+
+it(`doesn't render button when dev server is off`, async () => {
+  mockCore({
+    isDevServerOn: () => false
+  });
+  const { queryByText } = await loadTestPlugins();
+  expect(queryByText(/edit/i)).toBeNull();
+});
+
+it('renders button', async () => {
+  mockCore({
+    isDevServerOn: () => true
+  });
+  const { getByText } = await loadTestPlugins();
+  await waitForElement(() => getByText(/edit/i));
+});
+
+it('calls server endpoint on button click', async () => {
+  await mockFetch(async fetchMock => {
+    mockCore({
+      isDevServerOn: () => true
+    });
+    const { getByText } = await loadTestPlugins();
+
+    const editBtn = await waitForElement(() => getByText(/edit/i));
+    fireEvent.click(editBtn);
+
+    const openFileUrl = '/_open?filePath=foo.js';
+    expect(fetchMock).toBeCalledWith(openFileUrl, expect.any(Object));
+  });
+});

packages/react-cosmos-playground2/src/plugins/EditFixtureButton/index.ts

@@ -0,0 +1,29 @@
+import { createPlugin } from 'react-plugin';
+import { createArrayPlug } from '../../shared/slot';
+import { getMethodsOf } from '../../testHelpers/plugin';
+import { CoreSpec } from './../Core/public';
+import { RouterSpec } from './../Router/public';
+import { EditFixtureButton, EditFixtureButtonProps } from './EditFixtureButton';
+import { EditFixtureButtonSpec } from './public';
+
+const { plug, register } = createPlugin<EditFixtureButtonSpec>({
+  name: 'editFixtureButton'
+});
+
+plug({
+  slotName: 'fixtureActions',
+  render: createArrayPlug<EditFixtureButtonProps>(
+    'fixtureActions',
+    EditFixtureButton
+  ),
+  getProps: () => {
+    const core = getMethodsOf<CoreSpec>('core');
+    const router = getMethodsOf<RouterSpec>('router');
+    return {
+      devServerOn: core.isDevServerOn(),
+      selectedFixtureId: router.getSelectedFixtureId()
+    };
+  }
+});
+
+export { register };

packages/react-cosmos-playground2/src/plugins/EditFixtureButton/public.ts

@@ -0,0 +1,3 @@
+export type EditFixtureButtonSpec = {
+  name: 'editFixtureButton';
+};

packages/react-cosmos-playground2/src/plugins/EditFixtureButton/testHelpers/index.tsx

@@ -0,0 +1,9 @@
+export async function mockFetch(
+  cb: (fetchMock: jest.Mock) => Promise<unknown>
+) {
+  const w = window as any;
+  const origFetch = window.fetch;
+  w.fetch = jest.fn();
+  await cb(w.fetch);
+  w.fetch = origFetch;
+}

packages/react-cosmos-playground2/src/plugins/Nav/index.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import delay from 'delay';
+import retry from '@skidding/async-retry';
 import { render, waitForElement, fireEvent } from 'react-testing-library';
 import { Slot, loadPlugins, MethodHandlers } from 'react-plugin';
 import { cleanup, mockMethodsOf } from '../../testHelpers/plugin';
@@ -36,10 +36,11 @@ function mockRouter(methods: Partial<MethodHandlers<RouterSpec>> = {}) {
   mockMethodsOf<RouterSpec>('router', methods);
 }
 
-function loadTestPlugins() {
+async function loadTestPlugins() {
   loadPlugins();
-
-  return render(<Slot name="left" />);
+  const renderer = render(<Slot name="left">replace me</Slot>);
+  await retry(() => expect(renderer.queryByText('replace me')).toBeNull());
+  return renderer;
 }
 
 it('renders fixture list from renderer state', async () => {
@@ -48,8 +49,7 @@ it('renders fixture list from renderer state', async () => {
     getSelectedFixtureId: () => null,
     isFullScreen: () => false
   });
-  const { getByText } = loadTestPlugins();
-
+  const { getByText } = await loadTestPlugins();
   await waitForElement(() => getByText(/ein/i));
   await waitForElement(() => getByText(/zwei/i));
   await waitForElement(() => getByText(/drei/i));
@@ -65,7 +65,7 @@ it('sends fixtureId to router on fixture click', async () => {
     selectFixture
   });
 
-  const { getByText } = loadTestPlugins();
+  const { getByText } = await loadTestPlugins();
   fireEvent.click(getByText(/zwei/i));
 
   expect(selectFixture).toBeCalledWith(
@@ -83,8 +83,7 @@ it('renders nav element', async () => {
     getSelectedFixtureId: () => null,
     isFullScreen: () => false
   });
-  const { getByTestId } = loadTestPlugins();
-
+  const { getByTestId } = await loadTestPlugins();
   await waitForElement(() => getByTestId('nav'));
 });
 
@@ -94,10 +93,6 @@ it('does not render nav element in full screen mode', async () => {
     getSelectedFixtureId: () => ({ path: 'zwei.js', name: null }),
     isFullScreen: () => true
   });
-  const { queryByTestId } = loadTestPlugins();
-
-  // Make sure the nav element doesn't appear async in the next event loops
-  await delay(100);
-
+  const { queryByTestId } = await loadTestPlugins();
   expect(queryByTestId('nav')).toBeNull();
 });

packages/react-cosmos-playground2/src/plugins/RendererHeader/RendererHeader.tsx

@@ -19,7 +19,7 @@ type Props = {
   unselectFixture: () => void;
 };
 
-// TODO: Improve UX of refresh button, which seems like it's not doing anything
+// TODO: Improve UX of refresh button, which can seem like it's not doing anything
 export function RendererHeader({
   selectedFixtureId,
   fullScreen,
@@ -49,7 +49,7 @@ export function RendererHeader({
           <Message>No fixture selected</Message>
         </Left>
         <Right>
-          <Slot name="fixtureActions" />
+          <Slot name="rendererActions" />
           <Button disabled icon={<MaximizeIcon />} label="fullscreen" />
         </Right>
       </Container>
@@ -68,7 +68,7 @@ export function RendererHeader({
           />
         </Left>
         <Right>
-          <Slot name="fixtureActions" />
+          <Slot name="rendererActions" />
           <Button disabled icon={<MaximizeIcon />} label="fullscreen" />
         </Right>
       </Container>
@@ -88,9 +88,10 @@ export function RendererHeader({
           label="refresh"
           onClick={() => selectFixture(selectedFixtureId, false)}
         />
+        <Slot name="fixtureActions" />
       </Left>
       <Right>
-        <Slot name="fixtureActions" />
+        <Slot name="rendererActions" />
         <Button
           icon={<MaximizeIcon />}
           label="fullscreen"

packages/react-cosmos-playground2/src/plugins/RendererHeader/__tests__/fullscreen.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import delay from 'delay';
 import { render } from 'react-testing-library';
+import retry from '@skidding/async-retry';
 import { Slot, loadPlugins } from 'react-plugin';
 import { cleanup, mockMethodsOf, mockPlug } from '../../../testHelpers/plugin';
 import { RouterSpec } from '../../Router/public';
@@ -21,28 +21,39 @@ function registerTestPlugins() {
   });
 }
 
-function loadTestPlugins() {
+async function loadTestPlugins() {
   loadPlugins();
+  const renderer = render(<Slot name="rendererHeader">replace me</Slot>);
+  await retry(() => expect(renderer.queryByText('replace me')).toBeNull());
+  return renderer;
+}
+
+const RENDERER_ACTION = 'foo action';
+function mockRendererAction() {
+  mockPlug({ slotName: 'rendererActions', render: RENDERER_ACTION });
+}
 
-  return render(<Slot name="rendererHeader" />);
+const FIXTURE_ACTION = 'bar action';
+function mockFixtureAction() {
+  mockPlug({ slotName: 'fixtureActions', render: FIXTURE_ACTION });
 }
 
 it('does not render close button', async () => {
   registerTestPlugins();
-  mockPlug({ slotName: 'fixtureActions', render: 'pluggable actions' });
-  const { queryByText } = loadTestPlugins();
-
-  // Make sure the element doesn't appear async in the next event loops
-  await delay(100);
+  const { queryByText } = await loadTestPlugins();
   expect(queryByText(/close/i)).toBeNull();
 });
 
-it('does not render "fixtureActions" slot', async () => {
+it('does not render renderer actions', async () => {
   registerTestPlugins();
-  mockPlug({ slotName: 'fixtureActions', render: 'pluggable actions' });
-  const { queryByText } = loadTestPlugins();
+  mockRendererAction();
+  const { queryByText } = await loadTestPlugins();
+  expect(queryByText(RENDERER_ACTION)).toBeNull();
+});
 
-  // Make sure the element doesn't appear async in the next event loops
-  await delay(100);
-  expect(queryByText(/pluggable actions/i)).toBeNull();
+it('does not render fixture actions', async () => {
+  registerTestPlugins();
+  mockFixtureAction();
+  const { queryByText } = await loadTestPlugins();
+  expect(queryByText(FIXTURE_ACTION)).toBeNull();
 });

packages/react-cosmos-playground2/src/plugins/RendererHeader/__tests__/missingFixture.tsx

@@ -23,14 +23,12 @@ function registerTestPlugins(unselectFixture = () => {}) {
 
 function loadTestPlugins() {
   loadPlugins();
-
   return render(<Slot name="rendererHeader" />);
 }
 
 it('renders missing state message', async () => {
   registerTestPlugins();
   const { getByText } = loadTestPlugins();
-
   await waitForElement(() => getByText(/fixture not found/i));
 });
 
@@ -47,6 +45,5 @@ it('renders home button', async () => {
 it('renders disabled fullscreen button', async () => {
   registerTestPlugins();
   const { getByText } = loadTestPlugins();
-
   expect(getByText(/fullscreen/i)).toHaveAttribute('disabled');
 });