test: fix NebulaApp (#233)

qlik-oss · Dec 10, 2019 · 326465d · 326465d
1 parent 4a284ff
commit 326465d
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 127 deletions.
diff --git a/apis/nucleus/src/__tests__/nucleus.spec.js b/apis/nucleus/src/__tests__/nucleus.spec.js
@@ -13,7 +13,7 @@ describe('nucleus', () => {
       [
         ['**/locale/app-locale.js', () => () => ({ translator: () => ({ add: () => {} }) })],
         ['**/selections/index.js', () => ({ createAppSelectionAPI: () => ({}) })],
-        ['**/components/NebulaApp.jsx', () => () => ({})],
+        ['**/components/NebulaApp.jsx', () => () => [{}]],
         ['**/components/selections/AppSelections.jsx', () => () => ({})],
         ['**/object/create-object.js', () => createObject],
         ['**/object/get-object.js', () => getObject],

diff --git a/apis/nucleus/src/components/NebulaApp.jsx b/apis/nucleus/src/components/NebulaApp.jsx
@@ -77,30 +77,34 @@ export default function boot({ app, theme: themeName = 'light', translator, dire
     resolveRender
   );
 
-  return {
-    add(component) {
-      (async () => {
-        await rendered;
-        appRef.current.addComponent(component);
-      })();
+  return [
+    {
+      add(component) {
+        (async () => {
+          await rendered;
+          appRef.current.addComponent(component);
+        })();
+      },
+      remove(component) {
+        (async () => {
+          await rendered;
+          appRef.current.removeComponent(component);
+        })();
+      },
+      theme(name) {
+        (async () => {
+          await rendered;
+          appRef.current.setThemeName(name);
+        })();
+      },
+      direction(d) {
+        (async () => {
+          await rendered;
+          appRef.current.setDirection(d);
+        })();
+      },
     },
-    remove(component) {
-      (async () => {
-        await rendered;
-        appRef.current.removeComponent(component);
-      })();
-    },
-    theme(name) {
-      (async () => {
-        await rendered;
-        appRef.current.setThemeName(name);
-      })();
-    },
-    direction(d) {
-      (async () => {
-        await rendered;
-        appRef.current.setDirection(d);
-      })();
-    },
-  };
+    appRef,
+    rendered,
+  ];
 }
diff --git a/apis/nucleus/src/components/__tests__/nebulaapp.spec.jsx b/apis/nucleus/src/components/__tests__/nebulaapp.spec.jsx
@@ -1,11 +1,17 @@
-const mockedReactDOM = { render: sinon.stub() };
-const [{ default: boot }] = aw.mock([[require.resolve('react-dom'), () => mockedReactDOM]], ['../NebulaApp']);
+import React from 'react';
+import { create, act } from 'react-test-renderer';
 
-describe('<NebulaApp />', () => {
+const mockedReactDOM = { render: sinon.spy() };
+const [{ default: boot, NebulaApp }] = aw.mock(
+  [[require.resolve('react-dom'), () => mockedReactDOM]],
+  ['../NebulaApp']
+);
+
+describe('Boot NebulaApp', () => {
   let sandbox;
 
   beforeEach(() => {
-    mockedReactDOM.render.reset();
+    mockedReactDOM.render.resetHistory();
     sandbox = sinon.createSandbox();
     const mockedElement = {
       style: {},
@@ -22,121 +28,112 @@ describe('<NebulaApp />', () => {
     delete global.document;
   });
 
-  it('should render default', () => {
+  it('should call ReactDOM render', () => {
     boot({ app: { id: 'foo' } });
     expect(mockedReactDOM.render.callCount).to.equal(1);
   });
   it('should return api', () => {
-    const api = boot({ app: { id: 'foo' } });
+    const [api] = boot({ app: { id: 'foo' } });
     expect(api.add).to.be.a('function');
     expect(api.remove).to.be.a('function');
     expect(api.theme).to.be.a('function');
     expect(api.direction).to.be.a('function');
   });
-  it('should add', () => {
+  it('should add component', async () => {
     const app = { id: 'foo' };
     const translator = {};
-    const api = boot({ app, translator });
-    api.add('foo');
-    expect(mockedReactDOM.render).to.have.been.calledWith(
-      sinon.match({
-        props: {
-          app,
-          translator,
-          children: ['foo'],
-        },
-      })
-    );
+    const [api, appRef, rendered] = boot({ app, translator });
+    appRef.current = {
+      addComponent: sandbox.spy(),
+    };
+
+    await act(() => {
+      mockedReactDOM.render.callArg(2);
+      api.add('foo');
+      return rendered;
+    });
+    expect(appRef.current.addComponent.callCount).to.equal(1);
   });
-  it('should remove', () => {
+  it('should remove component', async () => {
     const app = { id: 'foo' };
     const translator = {};
-    const api = boot({ app, translator });
-    api.add('foo');
-    expect(mockedReactDOM.render).to.have.been.calledWith(
-      sinon.match({
-        props: {
-          app,
-          translator,
-          children: ['foo'],
-        },
-      })
-    );
-    api.remove('bar');
-    expect(mockedReactDOM.render).to.have.been.calledWith(
-      sinon.match({
-        props: {
-          app,
-          translator,
-          children: ['foo'],
-        },
-      })
-    );
-    api.remove('foo');
-    expect(mockedReactDOM.render).to.have.been.calledWith(
-      sinon.match({
-        props: {
-          app,
-          translator,
-          children: [],
-        },
-      })
-    );
+    const [api, appRef, rendered] = boot({ app, translator });
+    appRef.current = {
+      removeComponent: sandbox.spy(),
+    };
+
+    await act(() => {
+      mockedReactDOM.render.callArg(2);
+      api.remove('foo');
+      return rendered;
+    });
+    expect(appRef.current.removeComponent.callCount).to.equal(1);
   });
-  it('should theme', () => {
+  it('should set theme', async () => {
     const app = { id: 'foo' };
     const translator = {};
-    const api = boot({ app, translator });
-    api.add('foo');
-    expect(mockedReactDOM.render).to.have.been.calledWith(
-      sinon.match({
-        props: {
-          app,
-          translator,
-          children: ['foo'],
-          themeName: 'light',
-        },
-      })
-    );
-    mockedReactDOM.render.reset();
-    api.theme('baz');
-    expect(mockedReactDOM.render).to.have.been.calledWith(
-      sinon.match({
-        props: {
-          app,
-          translator,
-          children: ['foo'],
-          themeName: 'baz',
-        },
-      })
-    );
+    const [api, appRef, rendered] = boot({ app, translator });
+    appRef.current = {
+      setThemeName: sandbox.spy(),
+    };
+
+    await act(() => {
+      mockedReactDOM.render.callArg(2);
+      api.theme('wh0p');
+      return rendered;
+    });
+    expect(appRef.current.setThemeName.callCount).to.equal(1);
   });
-  it('should direction', () => {
+  it('should set direction', async () => {
     const app = { id: 'foo' };
     const translator = {};
-    const api = boot({ app, translator });
-    api.add('foo');
-    expect(mockedReactDOM.render).to.have.been.calledWith(
-      sinon.match({
-        props: {
-          app,
-          translator,
-          children: ['foo'],
-          direction: undefined,
-        },
-      })
-    );
-    mockedReactDOM.render.reset();
-    api.direction('rtl');
-    expect(mockedReactDOM.render).to.have.been.calledWith(
-      sinon.match({
-        props: {
-          app,
-          translator,
-          children: ['foo'],
-          direction: 'rtl',
+    const [api, appRef, rendered] = boot({ app, translator });
+    appRef.current = {
+      setDirection: sandbox.spy(),
+    };
+
+    await act(() => {
+      mockedReactDOM.render.callArg(2);
+      api.direction('wingding');
+      return rendered;
+    });
+    expect(appRef.current.setDirection.callCount).to.equal(1);
+  });
+});
+
+describe.skip('<NebulaApp />', () => {
+  let sandbox;
+  let renderer;
+  let render;
+  beforeEach(() => {
+    sandbox = sinon.createSandbox();
+    render = async ({ translator, initialComponents, rendererOptions } = {}) => {
+      await act(async () => {
+        renderer = create(
+          <NebulaApp translator={translator} initialComponents={initialComponents} />,
+          rendererOptions || null
+        );
+      });
+    };
+  });
+  afterEach(() => {
+    sandbox.restore();
+    renderer.unmount();
+  });
+  it('should render default', async () => {
+    const foo = () => 'foo';
+    const initialComponents = [foo];
+    await render({
+      initialComponents,
+      rendererOptions: {
+        createNodeMock: (/* e */) => {
+          return {};
         },
-      })
-    );
+      },
+    });
+    // console.log(renderer.props);
+    // const t = renderer.root.findAllByType(foo);
+    // console.log(t)
+    // console.log(renderer.root.props.children);
   });
 });
diff --git a/apis/nucleus/src/index.js b/apis/nucleus/src/index.js
@@ -6,7 +6,7 @@ import appThemeFn from './app-theme';
 
 import { createAppSelectionAPI } from './selections';
 
-import App from './components/NebulaApp';
+import bootNebulaApp from './components/NebulaApp';
 import AppSelectionsPortal from './components/selections/AppSelections';
 
 import create from './object/create-object';
@@ -123,7 +123,7 @@ function nuked(configuration = {}, prev = {}) {
 
     createAppSelectionAPI(app);
 
-    const root = App({
+    const [root] = bootNebulaApp({
       app,
       translator: locale.translator,
       direction: configuration.direction,