Fix TestRender's history instance due to use of Hash Router

elastic · Nov 24, 2020 · b29029a · b29029a
1 parent d013587
commit b29029a
Show file tree

Hide file tree

Showing 3 changed files with 339 additions and 39 deletions.
diff --git a/x-pack/plugins/fleet/public/applications/fleet/app.tsx b/x-pack/plugins/fleet/public/applications/fleet/app.tsx
@@ -7,7 +7,8 @@
 import React, { memo, useEffect, useState } from 'react';
 import { AppMountParameters } from 'kibana/public';
 import { EuiCode, EuiEmptyPrompt, EuiErrorBoundary, EuiPanel } from '@elastic/eui';
-import { HashRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
+import { createHashHistory, History } from 'history';
+import { Router, Redirect, Route, Switch } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
@@ -182,35 +183,47 @@ export const FleetAppContext: React.FC<{
   history: AppMountParameters['history'];
   kibanaVersion: string;
   extensions: UIExtensionsStorage;
-}> = memo(({ children, startServices, config, history, kibanaVersion, extensions }) => {
-  const isDarkMode = useObservable<boolean>(startServices.uiSettings.get$('theme:darkMode'));
+  /** For testing purposes only */
+  routerHistory?: History<any>;
+}> = memo(
+  ({
+    children,
+    startServices,
+    config,
+    history,
+    kibanaVersion,
+    extensions,
+    routerHistory = createHashHistory(),
+  }) => {
+    const isDarkMode = useObservable<boolean>(startServices.uiSettings.get$('theme:darkMode'));
 
-  return (
-    <startServices.i18n.Context>
-      <KibanaContextProvider services={{ ...startServices }}>
-        <EuiErrorBoundary>
-          <ConfigContext.Provider value={config}>
-            <KibanaVersionContext.Provider value={kibanaVersion}>
-              <EuiThemeProvider darkMode={isDarkMode}>
-                <UIExtensionsContext.Provider value={extensions}>
-                  <FleetStatusProvider>
-                    <IntraAppStateProvider kibanaScopedHistory={history}>
-                      <Router>
-                        <PackageInstallProvider notifications={startServices.notifications}>
-                          {children}
-                        </PackageInstallProvider>
-                      </Router>
-                    </IntraAppStateProvider>
-                  </FleetStatusProvider>
-                </UIExtensionsContext.Provider>
-              </EuiThemeProvider>
-            </KibanaVersionContext.Provider>
-          </ConfigContext.Provider>
-        </EuiErrorBoundary>
-      </KibanaContextProvider>
-    </startServices.i18n.Context>
-  );
-});
+    return (
+      <startServices.i18n.Context>
+        <KibanaContextProvider services={{ ...startServices }}>
+          <EuiErrorBoundary>
+            <ConfigContext.Provider value={config}>
+              <KibanaVersionContext.Provider value={kibanaVersion}>
+                <EuiThemeProvider darkMode={isDarkMode}>
+                  <UIExtensionsContext.Provider value={extensions}>
+                    <FleetStatusProvider>
+                      <IntraAppStateProvider kibanaScopedHistory={history}>
+                        <Router history={routerHistory}>
+                          <PackageInstallProvider notifications={startServices.notifications}>
+                            {children}
+                          </PackageInstallProvider>
+                        </Router>
+                      </IntraAppStateProvider>
+                    </FleetStatusProvider>
+                  </UIExtensionsContext.Provider>
+                </EuiThemeProvider>
+              </KibanaVersionContext.Provider>
+            </ConfigContext.Provider>
+          </EuiErrorBoundary>
+        </KibanaContextProvider>
+      </startServices.i18n.Context>
+    );
+  }
+);
 
 export const AppRoutes = memo(() => {
   const { agents } = useConfig();

diff --git a/x-pack/plugins/fleet/public/applications/fleet/mock/create_test_renderer.tsx b/x-pack/plugins/fleet/public/applications/fleet/mock/create_test_renderer.tsx
@@ -4,22 +4,31 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { createMemoryHistory } from 'history';
+import { createMemoryHistory, History, createHashHistory } from 'history';
 import React, { memo } from 'react';
 import { render as reactRender, RenderOptions, RenderResult, act } from '@testing-library/react';
 import { ScopedHistory } from '../../../../../../../src/core/public';
 import { FleetAppContext } from '../app';
-import { FleetConfigType, FleetStart, FleetStartServices } from '../../../plugin';
+import { FleetConfigType, FleetStart } from '../../../plugin';
 import { createConfigurationMock } from './plugin_configuration';
 import { UIExtensionsStorage } from '../types';
 import { createStartMock } from './plugin_interfaces';
 import { createStartServices } from './fleet_start_services';
+import { MockedFleetStartServices } from './types';
 
 type UiRender = (ui: React.ReactElement, options?: RenderOptions) => RenderResult;
 
+/**
+ * Test Renderer that includes mocked services and interfaces used during Fleet applicaiton rendering.
+ * Any of the properties in this interface can be manipulated prior to `render()` if wanting to customize
+ * the rendering context.
+ */
 export interface TestRenderer {
-  history: ScopedHistory;
-  startServices: FleetStartServices;
+  /** History instance currently used by the Fleet UI Hash Router */
+  history: History<any>;
+  /** history instance provided to the Fleet plugin during application `mount()` */
+  mountHistory: ScopedHistory;
+  startServices: MockedFleetStartServices;
   config: FleetConfigType;
   /** The Interface returned by the Fleet plugin `start()` phase */
   startInterface: FleetStart;
@@ -33,7 +42,8 @@ export const createTestRendererMock = (): TestRenderer => {
   const extensions: UIExtensionsStorage = {};
   const startServices = createStartServices(basePath);
   const testRendererMocks: TestRenderer = {
-    history: new ScopedHistory(createMemoryHistory({ initialEntries: [basePath] }), basePath),
+    history: createHashHistory(),
+    mountHistory: new ScopedHistory(createMemoryHistory({ initialEntries: [basePath] }), basePath),
     startServices,
     config: createConfigurationMock(),
     startInterface: createStartMock(extensions),
@@ -44,9 +54,10 @@ export const createTestRendererMock = (): TestRenderer => {
           basepath={basePath}
           startServices={testRendererMocks.startServices}
           config={testRendererMocks.config}
-          history={testRendererMocks.history}
+          history={testRendererMocks.mountHistory}
           kibanaVersion={testRendererMocks.kibanaVersion}
           extensions={extensions}
+          routerHistory={testRendererMocks.history}
         >
           {children}
         </FleetAppContext>