fix: avoid unmounting of elements in children render function when fe…

…ature app is loaded (#604)

packages/react/src/__tests__/feature-app-container.test.tsx

@@ -13,6 +13,7 @@ import {
   FeatureAppContainer,
   FeatureHubContextProvider
 } from '..';
+import {InternalFeatureAppContainer} from '../internal/internal-feature-app-container';
 import {logger} from './logger';
 import {TestErrorBoundary} from './test-error-boundary';
 
@@ -394,6 +395,19 @@ describe('FeatureAppContainer', () => {
           expect(testRenderer.toJSON()).toBe('Custom Error UI');
         });
 
+        it('renders what the children function returns if feature app definition is undefined', () => {
+          const testRenderer = renderWithFeatureHubContext(
+            <InternalFeatureAppContainer
+              featureAppId="testId"
+              children={() => 'loading UI'}
+              logger={logger}
+              featureAppManager={mockFeatureAppManager}
+            />
+          );
+
+          expect(testRenderer.toJSON()).toBe('loading UI');
+        });
+
         describe('when children throws an error', () => {
           let childrenMockError: Error;
 
@@ -708,6 +722,20 @@ describe('FeatureAppContainer', () => {
       });
 
       describe('when no children function is passed', () => {
+        describe('when no feature app definition is passed', () => {
+          it('renders null', () => {
+            const testRenderer = renderWithFeatureHubContext(
+              <InternalFeatureAppContainer
+                featureAppId="testId"
+                logger={logger}
+                featureAppManager={mockFeatureAppManager}
+              />
+            );
+
+            expect(testRenderer.getInstance()).toBeNull();
+          });
+        });
+
         describe('when the promise resolves', () => {
           it('renders the feature app', async () => {
             const testRenderer = renderWithFeatureHubContext(

packages/react/src/__tests__/feature-app-loader.test.tsx

@@ -8,21 +8,20 @@ import {
 } from '@feature-hub/core';
 import * as React from 'react';
 import TestRenderer from 'react-test-renderer';
-import {
-  CustomFeatureAppRenderingParams,
-  FeatureAppContainer,
-  FeatureAppLoader
-} from '..';
+import {CustomFeatureAppRenderingParams, FeatureAppLoader} from '..';
 import {FeatureHubContextProvider} from '../feature-hub-context';
+import {InternalFeatureAppContainer} from '../internal/internal-feature-app-container';
 import {logger} from './logger';
 import {TestErrorBoundary} from './test-error-boundary';
 
 interface MockAsyncSsrManager extends AsyncSsrManagerV1 {
   scheduleRerender: ((promise: Promise<unknown>) => void) & jest.Mock;
 }
 
-jest.mock('../feature-app-container', () => ({
-  FeatureAppContainer: jest.fn(() => 'mocked FeatureAppContainer')
+jest.mock('../internal/internal-feature-app-container', () => ({
+  InternalFeatureAppContainer: jest.fn(
+    () => 'mocked InternalFeatureAppContainer'
+  )
 }));
 
 describe('FeatureAppLoader', () => {
@@ -151,41 +150,6 @@ describe('FeatureAppLoader', () => {
         expect(testRenderer.toJSON()).toBeNull();
       });
     });
-
-    describe('when given a children function', () => {
-      it('calls children with only loading=true', () => {
-        const children = jest.fn().mockReturnValue(null);
-
-        renderWithFeatureHubContext(
-          <FeatureAppLoader
-            featureAppId="testId"
-            src="example.js"
-            children={children}
-          />
-        );
-
-        const expectedParameter: CustomFeatureAppRenderingParams = {
-          featureAppNode: undefined,
-          error: undefined,
-          loading: true
-        };
-
-        expect(children.mock.calls).toEqual([[expectedParameter]]);
-      });
-      it('renders what children function returns', () => {
-        const children = jest.fn(() => 'Custom Loading UI');
-
-        const testRenderer = renderWithFeatureHubContext(
-          <FeatureAppLoader
-            featureAppId="testId"
-            src="example.js"
-            children={children}
-          />
-        );
-
-        expect(testRenderer.toJSON()).toBe('Custom Loading UI');
-      });
-    });
   });
 
   describe('without a css prop', () => {
@@ -328,7 +292,7 @@ describe('FeatureAppLoader', () => {
       });
     });
 
-    it('renders a FeatureAppContainer', () => {
+    it('renders an InternalFeatureAppContainer', () => {
       const onError = jest.fn();
       const renderError = jest.fn();
       const beforeCreate = jest.fn();
@@ -349,7 +313,7 @@ describe('FeatureAppLoader', () => {
         />
       );
 
-      expect(testRenderer.toJSON()).toBe('mocked FeatureAppContainer');
+      expect(testRenderer.toJSON()).toBe('mocked InternalFeatureAppContainer');
 
       const expectedProps = {
         baseUrl: '/base',
@@ -360,10 +324,15 @@ describe('FeatureAppLoader', () => {
         featureAppId: 'testId',
         onError,
         renderError,
-        children
+        children,
+        featureAppManager: mockFeatureAppManager,
+        logger
       };
 
-      expect(FeatureAppContainer).toHaveBeenCalledWith(expectedProps, {});
+      expect(InternalFeatureAppContainer).toHaveBeenCalledWith(
+        expectedProps,
+        {}
+      );
     });
 
     it('does not schedule a rerender on the Async SSR Manager', () => {
@@ -814,7 +783,7 @@ describe('FeatureAppLoader', () => {
 
       await mockAsyncFeatureAppDefinition.promise;
 
-      expect(testRenderer.toJSON()).toBe('mocked FeatureAppContainer');
+      expect(testRenderer.toJSON()).toBe('mocked InternalFeatureAppContainer');
     });
 
     it('does not schedule a rerender on the Async SSR Manager', () => {