covering all javascript

src/.tern-port

@@ -1 +0,0 @@
-58305

src/__snapshots__/widget.test.js.snap

@@ -0,0 +1,175 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Widget /> open/close 1`] = `
+<Widget>
+  <div
+    className="docked-widget"
+  >
+    <Transition
+      appear={false}
+      enter={true}
+      exit={true}
+      in={false}
+      mountOnEnter={false}
+      onEnter={[Function]}
+      onEntered={[Function]}
+      onEntering={[Function]}
+      onExit={[Function]}
+      onExited={[Function]}
+      onExiting={[Function]}
+      timeout={250}
+      unmountOnExit={false}
+    >
+      <div
+        className="widget widget-exited"
+      >
+        <div
+          className="widget-header"
+        >
+          <div
+            className="widget-header-title"
+          >
+            Header
+          </div>
+          <a
+            className="widget-header-icon"
+            onClick={[Function]}
+          >
+            X
+          </a>
+        </div>
+        <div
+          className="widget-body"
+        >
+          Body
+        </div>
+        <div
+          className="widget-footer"
+        >
+          Footer
+        </div>
+      </div>
+    </Transition>
+    <a
+      className="dock"
+      onClick={[Function]}
+    >
+      ^ OPEN ^
+    </a>
+  </div>
+</Widget>
+`;
+
+exports[`<Widget /> open/close 2`] = `
+<Widget>
+  <div
+    className="docked-widget"
+  >
+    <Transition
+      appear={false}
+      enter={true}
+      exit={true}
+      in={true}
+      mountOnEnter={false}
+      onEnter={[Function]}
+      onEntered={[Function]}
+      onEntering={[Function]}
+      onExit={[Function]}
+      onExited={[Function]}
+      onExiting={[Function]}
+      timeout={250}
+      unmountOnExit={false}
+    >
+      <div
+        className="widget widget-entering"
+      >
+        <div
+          className="widget-header"
+        >
+          <div
+            className="widget-header-title"
+          >
+            Header
+          </div>
+          <a
+            className="widget-header-icon"
+            onClick={[Function]}
+          >
+            X
+          </a>
+        </div>
+        <div
+          className="widget-body"
+        >
+          Body
+        </div>
+        <div
+          className="widget-footer"
+        >
+          Footer
+        </div>
+      </div>
+    </Transition>
+  </div>
+</Widget>
+`;
+
+exports[`<Widget /> open/close 3`] = `
+<Widget>
+  <div
+    className="docked-widget"
+  >
+    <Transition
+      appear={false}
+      enter={true}
+      exit={true}
+      in={false}
+      mountOnEnter={false}
+      onEnter={[Function]}
+      onEntered={[Function]}
+      onEntering={[Function]}
+      onExit={[Function]}
+      onExited={[Function]}
+      onExiting={[Function]}
+      timeout={250}
+      unmountOnExit={false}
+    >
+      <div
+        className="widget widget-exited"
+      >
+        <div
+          className="widget-header"
+        >
+          <div
+            className="widget-header-title"
+          >
+            Header
+          </div>
+          <a
+            className="widget-header-icon"
+            onClick={[Function]}
+          >
+            X
+          </a>
+        </div>
+        <div
+          className="widget-body"
+        >
+          Body
+        </div>
+        <div
+          className="widget-footer"
+        >
+          Footer
+        </div>
+      </div>
+    </Transition>
+    <a
+      className="dock"
+      onClick={[Function]}
+    >
+      ^ OPEN ^
+    </a>
+  </div>
+</Widget>
+`;

src/index.js

@@ -3,16 +3,22 @@ import ReactDOM from 'react-dom';
 import Widget from './widget';
 
 export default class EmbeddableWidget {
-  static render() {
+  static el;
+
+  static mount() {
     const component = <Widget />;
 
     function doRender() {
-      const containerEl = document.createElement('div');
-      document.body.appendChild(containerEl);
+      if (EmbeddableWidget.el) {
+        throw new Error('EmbeddableWidget is already mounted, unmount first');
+      }
+      const el = document.createElement('div');
+      document.body.appendChild(el);
       ReactDOM.render(
         component,
-        containerEl,
+        el,
       );
+      EmbeddableWidget.el = el;
     }
     if (document.readyState === 'complete') {
       doRender();
@@ -22,4 +28,13 @@ export default class EmbeddableWidget {
       });
     }
   }
+
+  static unmount() {
+    if (!EmbeddableWidget.el) {
+      throw new Error('EmbeddableWidget is not mounted, mount first');
+    }
+    ReactDOM.unmountComponentAtNode(EmbeddableWidget.el);
+    EmbeddableWidget.el.parentNode.removeChild(EmbeddableWidget.el);
+    EmbeddableWidget.el = null;
+  }
 }

src/index.test.js

@@ -0,0 +1,44 @@
+import EmbeddableWidget from './index';
+import { waitForSelection } from './test-helpers';
+
+describe('EmbeddableWidget', () => {
+  afterEach(() => {
+    document.readyState = 'complete';
+    if (EmbeddableWidget.el) {
+      EmbeddableWidget.unmount();
+    }
+  });
+
+  test('#mount document becomes ready', async () => {
+    document.readyState = 'loading';
+    EmbeddableWidget.mount();
+    window.dispatchEvent(new Event('load', {}));
+    await waitForSelection(document, 'div');
+  });
+
+  test('#mount document complete', async () => {
+    EmbeddableWidget.mount();
+    await waitForSelection(document, 'div');
+  });
+
+
+  test('#mount twice', async () => {
+    EmbeddableWidget.mount();
+    expect(() => EmbeddableWidget.mount()).toThrow('already mounted');
+  });
+
+  test('#unmount', async () => {
+    const el = document.createElement('div');
+    document.body.appendChild(el);
+    expect(document.querySelectorAll('div')).toHaveLength(1);
+
+    EmbeddableWidget.el = el;
+    EmbeddableWidget.unmount();
+
+    expect(document.querySelectorAll('div')).toHaveLength(0);
+  });
+
+  test('#unmount without mounting', async () => {
+    expect(() => EmbeddableWidget.unmount()).toThrow('not mounted');
+  });
+});

src/test-helpers/index.js

@@ -0,0 +1,30 @@
+function checkFunc(dom, selector) {
+  if (typeof dom.update === 'function') {
+    const el = dom.update().find(selector);
+    if (el.exists()) {
+      return el;
+    }
+    return null;
+  }
+  const els = dom.querySelectorAll(selector);
+  if (els.length !== 0) {
+    return els;
+  }
+  return null;
+}
+
+
+export async function waitForSelection(dom, selector) {
+  let numSleep = 0;
+  for (;;) {
+    const el = checkFunc(dom, selector);
+    if (el) {
+      return el;
+    }
+    if (numSleep > 2) {
+      throw new Error(`could not find ${selector}`);
+    }
+    await new Promise(resolve => setTimeout(resolve, 250));
+    numSleep += 1;
+  }
+}

src/widget.test.js

@@ -1,9 +1,37 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import Widget from './widget';
+import { waitForSelection } from './test-helpers';
+
+describe('<Widget />', () => {
+  test('open/close', async () => {
+    const widgetDom = mount(<Widget />);
+    expect(widgetDom).toMatchSnapshot();
+
+    {
+      const dockAnchorEl = widgetDom.find('a.dock');
+      expect(dockAnchorEl).toHaveLength(1);
+      // open widget
+      dockAnchorEl.simulate('click');
+    }
+
+    expect(widgetDom).toMatchSnapshot();
+
+    // dock does not exist anymore
+    expect(widgetDom.find('a.dock')).toHaveLength(0);
+
+    const closeAnchorEl = await waitForSelection(widgetDom, 'a.widget-header-icon');
+
+    expect(closeAnchorEl).toHaveLength(1);
+    // close widget
+    closeAnchorEl.simulate('click');
+
+    {
+      const dockAnchorEl = await waitForSelection(widgetDom, 'a.dock');
+     expect(dockAnchorEl).toHaveLength(1);
+    }
+
+    expect(widgetDom).toMatchSnapshot();
+  });
 
-test('simple test', () => {
-  const widgetDom = shallow(<Widget />);
-  console.log(widgetDom.html());
-  expect(widgetDom.find('.docked-widget').exists()).toBe(true);
 });