diff --git a/README.md b/README.md index 64edc3a666..9feb074b49 100644 --- a/README.md +++ b/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 diff --git a/docs/proxy-test-boilerplate.md b/docs/proxy-test-boilerplate.md index 3c036f5c62..525403d52f 100644 --- a/docs/proxy-test-boilerplate.md +++ b/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(); }); diff --git a/packages/react-cosmos-loader/src/components/InitCallbackProxy/__tests__/index.js b/packages/react-cosmos-loader/src/components/RefCallbackProxy/__tests__/index.js similarity index 92% rename from packages/react-cosmos-loader/src/components/InitCallbackProxy/__tests__/index.js rename to packages/react-cosmos-loader/src/components/RefCallbackProxy/__tests__/index.js index 02a4ad4cd7..608444ad3f 100644 --- a/packages/react-cosmos-loader/src/components/InitCallbackProxy/__tests__/index.js +++ b/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,12 +42,12 @@ 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( - { // 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 }); }); diff --git a/packages/react-cosmos-loader/src/components/InitCallbackProxy/index.js b/packages/react-cosmos-loader/src/components/RefCallbackProxy/index.js similarity index 76% rename from packages/react-cosmos-loader/src/components/InitCallbackProxy/index.js rename to packages/react-cosmos-loader/src/components/RefCallbackProxy/index.js index 9f1e86c6f9..f36f99f165 100644 --- a/packages/react-cosmos-loader/src/components/InitCallbackProxy/index.js +++ b/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 { +export default function createRefCallbackProxy() { + class RefCallbackProxy extends Component { onComponentRef = async (compInstance: ?ElementRef) => { 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; } diff --git a/packages/react-cosmos-loader/src/mount.js b/packages/react-cosmos-loader/src/mount.js index f302e20cd4..23e036170e 100644 --- a/packages/react-cosmos-loader/src/mount.js +++ b/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 ]} diff --git a/packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/_shared.js b/packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/_shared.js index 8c734a3f47..b501826e00 100644 --- a/packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/_shared.js +++ b/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)); diff --git a/packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/ready.js b/packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/ready.js index d6fe8b4cb9..c7a42b307b 100644 --- a/packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/ready.js +++ b/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 }; diff --git a/packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/selected-editor.js b/packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/selected-editor.js index 3774e71d2a..3a22b430f0 100644 --- a/packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/selected-editor.js +++ b/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 }; diff --git a/packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/selected-fullscreen.js b/packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/selected-fullscreen.js index e533644418..b80e66ba71 100644 --- a/packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/selected-fullscreen.js +++ b/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 }; diff --git a/packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/selected-missing.js b/packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/selected-missing.js index 2c9d074554..fcfe5a41c3 100644 --- a/packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/selected-missing.js +++ b/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 }; diff --git a/packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/selected.js b/packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/selected.js index 3317bb1321..03c9b6a049 100644 --- a/packages/react-cosmos-playground/src/components/ComponentPlayground/__fixtures__/selected.js +++ b/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 }; diff --git a/packages/react-cosmos-playground/src/utils/enzyme.js b/packages/react-cosmos-playground/src/utils/enzyme.js index 06bba56c99..06f569e266 100644 --- a/packages/react-cosmos-playground/src/utils/enzyme.js +++ b/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( { + ref: async (...args) => { if (mockRefs) { await mockRefs(...args); } - if (fixture.init) { - await fixture.init(...args); + if (fixture.ref) { + await fixture.ref(...args); } } }}