Rename fixture.init to fixture.ref #519

README.md

@@ -62,7 +62,7 @@ Jump to:
   - [Props](#props)
   - [Children](#children)
   - [State](#state)
-  - [Init hook](#init-hook)
+  - [Ref callback](#ref-callback)
 - [Proxies](#proxies)
   - [What's a proxy?](#whats-a-proxy)
   - [Where to put proxies?](#where-to-put-proxies)
@@ -206,23 +206,20 @@ export default {
 }
 ```
 
-#### Init hook
+#### Ref callback
 
-Hook for custom component setup. This is an advanced feature and should only be used when a desired state can't be reproduced via [proxies](#proxies). Eg. Faking a `postMessage` event from an iframe after component mounted.
+**Exclusively for Class components.** This is an advanced feature and should only be used when a desired state can't be reproduced via [proxies](#proxies).
 
 ```js
 export default {
   component: Dashboard,
-  init(compInstance) {
-    window.postMessage({
-      type: 'loaderReady',
-      // ...
-    });
+  async ref(compInstance) {
+    // With great power comes great ref-sponsibility...
   }
 }
 ```
 
-> The `init` hook is useful when writing headless tests. Having a reference to the component instance we can mock *refs*. We can also stall test execution by making fixture.init *async* and *awaiting* until we're confident that our component is ready for assertions.
+> The `ref` callback is useful when writing headless tests. Having a reference to the component instance enables us to mock child *refs*. We can also stall test execution by making fixture.ref *async* and *awaiting* until we're confident that our component is ready for assertions.
 
 ### Proxies
 

docs/proxy-test-boilerplate.md

@@ -51,7 +51,7 @@ const getNextProxy = () => wrapper.find(NextProxy);
 const getNextProxyProps = () => wrapper.find(NextProxy).props();
 
 beforeEach(() => {
-  onFixtureUpdate.mockClear();
+  jest.clearAllMocks();
   mountProxy();
 });
 

packages/react-cosmos-loader/src/components/InitCallbackProxy/__tests__/index.js → packages/react-cosmos-loader/src/components/RefCallbackProxy/__tests__/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import afterOngoingPromises from 'after-ongoing-promises';
 import { createLinkedList } from 'react-cosmos-shared';
-import createInitCallbackProxy from '../';
+import createRefCallbackProxy from '../';
 
 jest.useFakeTimers();
 
@@ -33,7 +33,7 @@ const LastProxy = ({ onComponentRef, fixture }) => (
 const onFixtureUpdate = jest.fn();
 const onComponentRef = jest.fn();
 
-const init = jest.fn(async () => {
+const ref = jest.fn(async () => {
   await new Promise(resolve => setTimeout(resolve, 5000));
 });
 
@@ -42,20 +42,20 @@ let wrapper;
 
 const mountProxy = () => {
   // Create Proxy with default options
-  const InitCallbackProxy = createInitCallbackProxy();
+  const RefCallbackProxy = createRefCallbackProxy();
 
   // Mouting is more useful because it calls lifecycle methods and enables
   // DOM interaction
   wrapper = mount(
-    <InitCallbackProxy
+    <RefCallbackProxy
       // Ensure the chain of proxies is properly propagated
       nextProxy={createLinkedList([NextProxy, LastProxy])}
       fixture={{
         component: Component,
         // Except for some rare cases, the proxy needs to pass along the
         // fixture without changing it
         foo: 'bar',
-        init
+        ref
       }}
       onComponentRef={onComponentRef}
       onFixtureUpdate={onFixtureUpdate}
@@ -67,7 +67,7 @@ const getNextProxy = () => wrapper.find(NextProxy);
 const getNextProxyProps = () => wrapper.find(NextProxy).props();
 
 beforeEach(() => {
-  onFixtureUpdate.mockClear();
+  jest.clearAllMocks();
   mountProxy();
 });
 
@@ -79,7 +79,7 @@ it('sends fixture to next proxy', () => {
   expect(getNextProxyProps().fixture).toEqual({
     component: Component,
     foo: 'bar',
-    init
+    ref
   });
 });
 

packages/react-cosmos-loader/src/components/InitCallbackProxy/index.js → packages/react-cosmos-loader/src/components/RefCallbackProxy/index.js

@@ -7,13 +7,13 @@ import type { ProxyProps } from 'react-cosmos-shared/src/react/types';
 
 // Returning a class creator to be consistent with the other proxies and to be
 // able to add options in the future without breaking API
-export default function createInitCallbackProxy() {
-  class InitCallbackProxy extends Component<ProxyProps> {
+export default function createRefCallbackProxy() {
+  class RefCallbackProxy extends Component<ProxyProps> {
     onComponentRef = async (compInstance: ?ElementRef<typeof Component>) => {
       const { fixture, onComponentRef } = this.props;
 
-      if (compInstance && fixture.init) {
-        await fixture.init(compInstance);
+      if (compInstance && fixture.ref) {
+        await fixture.ref(compInstance);
       }
 
       onComponentRef(compInstance);
@@ -31,5 +31,5 @@ export default function createInitCallbackProxy() {
     }
   }
 
-  return InitCallbackProxy;
+  return RefCallbackProxy;
 }

packages/react-cosmos-loader/src/mount.js

@@ -3,11 +3,11 @@ import { render } from 'react-dom';
 import createStateProxy from 'react-cosmos-state-proxy';
 import RemoteLoader from './components/RemoteLoader';
 import createErrorCatchProxy from './components/ErrorCatchProxy';
-import createInitCallbackProxy from './components/InitCallbackProxy';
+import createRefCallbackProxy from './components/RefCallbackProxy';
 
 let StateProxy;
 let ErrorCatchProxy;
-let InitCallbackProxy;
+let RefCallbackProxy;
 
 const createDomContainer = () => {
   const existingNode = document.getElementById('root');
@@ -32,7 +32,7 @@ export function mount({ proxies, fixtures, containerQuerySelector }) {
   if (!StateProxy) {
     StateProxy = createStateProxy();
     ErrorCatchProxy = createErrorCatchProxy();
-    InitCallbackProxy = createInitCallbackProxy();
+    RefCallbackProxy = createRefCallbackProxy();
   }
 
   render(
@@ -41,7 +41,7 @@ export function mount({ proxies, fixtures, containerQuerySelector }) {
       proxies={[
         // Some proxies are loaded by default in all configs
         ErrorCatchProxy,
-        InitCallbackProxy,
+        RefCallbackProxy,
         ...proxies,
         StateProxy
       ]}

packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/_shared.js

@@ -17,7 +17,7 @@ export const readyMessage = {
   }
 };
 
-export async function init(compInstance) {
+export async function ref(compInstance) {
   // Wait until fetch mock has responded and component state is ready to receive
   // messages from inside the Loader frame
   await until(hasLoaderStatus(compInstance, OK));

packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/ready.js

@@ -1,5 +1,5 @@
 import ComponentPlayground from '../index';
-import { routerProps, init } from './_shared';
+import { routerProps, ref } from './_shared';
 
 export default {
   component: ComponentPlayground,
@@ -19,5 +19,5 @@ export default {
     }
   ],
 
-  init
+  ref
 };

packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/selected-editor.js

@@ -1,5 +1,5 @@
 import ComponentPlayground from '../index';
-import { routerProps, init } from './_shared';
+import { routerProps, ref } from './_shared';
 
 export default {
   component: ComponentPlayground,
@@ -22,5 +22,5 @@ export default {
     }
   ],
 
-  init
+  ref
 };

packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/selected-fullscreen.js

@@ -1,5 +1,5 @@
 import ComponentPlayground from '../index';
-import { routerProps, init } from './_shared';
+import { routerProps, ref } from './_shared';
 
 export default {
   component: ComponentPlayground,
@@ -22,5 +22,5 @@ export default {
     }
   ],
 
-  init
+  ref
 };

packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/selected-missing.js

@@ -1,5 +1,5 @@
 import ComponentPlayground from '../index';
-import { routerProps, init } from './_shared';
+import { routerProps, ref } from './_shared';
 
 export default {
   component: ComponentPlayground,
@@ -21,5 +21,5 @@ export default {
     }
   ],
 
-  init
+  ref
 };

packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/selected.js

@@ -1,5 +1,5 @@
 import ComponentPlayground from '../index';
-import { routerProps, init } from './_shared';
+import { routerProps, ref } from './_shared';
 
 export default {
   component: ComponentPlayground,
@@ -21,5 +21,5 @@ export default {
     }
   ],
 
-  init
+  ref
 };

packages/react-cosmos-playground/src/utils/enzyme.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { mount as mountEnzyme } from 'enzyme';
 import { Loader } from 'react-cosmos-loader';
-import createInitCallbackProxy from 'react-cosmos-loader/lib/components/InitCallbackProxy';
+import createRefCallbackProxy from 'react-cosmos-loader/lib/components/RefCallbackProxy';
 import createFetchProxy from 'react-cosmos-fetch-proxy';
 
 import type { ComponentType } from 'react';
@@ -17,7 +17,7 @@ type Args = {
 type Selector = string | ComponentType<*>;
 
 export function createContext({ fixture, mockRefs }: Args) {
-  const InitCallbackProxy = createInitCallbackProxy();
+  const RefCallbackProxy = createRefCallbackProxy();
   const FetchProxy = createFetchProxy();
 
   let wrapper;
@@ -28,15 +28,15 @@ export function createContext({ fixture, mockRefs }: Args) {
       // Mount component in order for ref and lifecycle methods to be called
       wrapper = mountEnzyme(
         <Loader
-          proxies={[InitCallbackProxy, FetchProxy]}
+          proxies={[RefCallbackProxy, FetchProxy]}
           fixture={{
             ...fixture,
-            init: async (...args) => {
+            ref: async (...args) => {
               if (mockRefs) {
                 await mockRefs(...args);
               }
-              if (fixture.init) {
-                await fixture.init(...args);
+              if (fixture.ref) {
+                await fixture.ref(...args);
               }
             }
           }}