Mount ui/new_platform applications in same div structure as Core (#63930

)
elastic · May 10, 2020 · 1c554d9 · 1c554d9
1 parent ef1800b
commit 1c554d9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/src/legacy/ui/public/new_platform/new_platform.test.ts b/src/legacy/ui/public/new_platform/new_platform.test.ts
@@ -22,6 +22,7 @@ jest.mock('history');
 import { setRootControllerMock, historyMock } from './new_platform.test.mocks';
 import { legacyAppRegister, __reset__, __setup__, __start__ } from './new_platform';
 import { coreMock } from '../../../../core/public/mocks';
+import { AppMount } from '../../../../core/public';
 
 describe('ui/new_platform', () => {
   describe('legacyAppRegister', () => {
@@ -33,7 +34,7 @@ describe('ui/new_platform', () => {
 
     const registerApp = () => {
       const unmountMock = jest.fn();
-      const mountMock = jest.fn(() => unmountMock);
+      const mountMock = jest.fn<ReturnType<AppMount>, Parameters<AppMount>>(() => unmountMock);
       legacyAppRegister({
         id: 'test',
         title: 'Test',
@@ -62,13 +63,25 @@ describe('ui/new_platform', () => {
 
       controller(scopeMock, elementMock);
       expect(mountMock).toHaveBeenCalledWith({
-        element: elementMock[0],
+        element: expect.any(HTMLElement),
         appBasePath: '/test/base/path/app/test',
         onAppLeave: expect.any(Function),
         history: historyMock,
       });
     });
 
+    test('app is mounted in new div inside containing element', () => {
+      const { mountMock } = registerApp();
+      const controller = setRootControllerMock.mock.calls[0][1];
+      const scopeMock = { $on: jest.fn() };
+      const elementMock = [document.createElement('div')];
+
+      controller(scopeMock, elementMock);
+
+      const { element } = mountMock.mock.calls[0][0];
+      expect(element.parentElement).toEqual(elementMock[0]);
+    });
+
     test('controller calls deprecated context app.mount when invoked', () => {
       const unmountMock = jest.fn();
       // Two arguments changes how this is called.
@@ -84,7 +97,7 @@ describe('ui/new_platform', () => {
 
       controller(scopeMock, elementMock);
       expect(mountMock).toHaveBeenCalledWith(expect.any(Object), {
-        element: elementMock[0],
+        element: expect.any(HTMLElement),
         appBasePath: '/test/base/path/app/test',
         onAppLeave: expect.any(Function),
         history: historyMock,

diff --git a/src/legacy/ui/public/new_platform/new_platform.ts b/src/legacy/ui/public/new_platform/new_platform.ts
@@ -176,7 +176,8 @@ export const legacyAppRegister = (app: App<any>) => {
   legacyAppRegistered = true;
 
   require('ui/chrome').setRootController(app.id, ($scope: IScope, $element: JQLite) => {
-    const element = $element[0];
+    const element = document.createElement('div');
+    $element[0].appendChild(element);
 
     // Root controller cannot return a Promise so use an internal async function and call it immediately
     (async () => {