From 06dd774eac75ef29c0dd8a7dc6254bff7d9b6abe Mon Sep 17 00:00:00 2001
From: Oliver Sand <oliver.sand@sda-se.com>
Date: Fri, 19 Mar 2021 10:34:21 +0100
Subject: [PATCH] Support routes of type `SubRouteRef` in `mountedRoutes`
 parameter of `renderInTestApp`

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>
---
 .changeset/three-houses-learn.md              |  5 +++
 .../src/testUtils/appWrappers.test.tsx        | 39 ++++++++++++++-----
 .../test-utils/src/testUtils/appWrappers.tsx  | 29 +++++++-------
 3 files changed, 49 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/three-houses-learn.md

diff --git a/.changeset/three-houses-learn.md b/.changeset/three-houses-learn.md
new file mode 100644
index 0000000000..65800eb1e8
--- /dev/null
+++ b/.changeset/three-houses-learn.md
@@ -0,0 +1,5 @@
+---
+'@backstage/test-utils': patch
+---
+
+Support routes of type `SubRouteRef` in `mountedRoutes` parameter of `renderInTestApp`.
diff --git a/packages/test-utils/src/testUtils/appWrappers.test.tsx b/packages/test-utils/src/testUtils/appWrappers.test.tsx
index 4899f07061..abdc4540bc 100644
--- a/packages/test-utils/src/testUtils/appWrappers.test.tsx
+++ b/packages/test-utils/src/testUtils/appWrappers.test.tsx
@@ -14,20 +14,22 @@
  * limitations under the License.
  */
 
-import React, { useEffect } from 'react';
-import { render } from '@testing-library/react';
-import { wrapInTestApp, renderInTestApp } from './appWrappers';
-import { Route, Routes } from 'react-router';
-import { withLogCollector } from '@backstage/test-utils-core';
 import {
-  useApi,
-  useRouteRef,
-  errorApiRef,
   ApiProvider,
   ApiRegistry,
+  createExternalRouteRef,
   createRouteRef,
+  createSubRouteRef,
+  errorApiRef,
+  useApi,
+  useRouteRef,
 } from '@backstage/core-api';
+import { withLogCollector } from '@backstage/test-utils-core';
+import { render } from '@testing-library/react';
+import React, { useEffect } from 'react';
+import { Route, Routes } from 'react-router';
 import { MockErrorApi } from './apis';
+import { renderInTestApp, wrapInTestApp } from './appWrappers';
 
 describe('wrapInTestApp', () => {
   it('should provide routing and warn about missing act()', async () => {
@@ -117,16 +119,29 @@ describe('wrapInTestApp', () => {
   });
 
   it('should allow route refs to be mounted on specific paths', async () => {
-    const aRouteRef = createRouteRef({ title: 'A' });
-    const bRouteRef = createRouteRef({ title: 'B', params: ['name'] });
+    const aRouteRef = createRouteRef({ id: 'A' });
+    const bRouteRef = createRouteRef({ id: 'B', params: ['name'] });
+    const subRouteRef = createSubRouteRef({
+      id: 'S',
+      parent: bRouteRef,
+      path: '/:page',
+    });
+    const externalRouteRef = createExternalRouteRef({
+      id: 'E',
+      params: ['name'],
+    });
 
     const MyComponent = () => {
       const a = useRouteRef(aRouteRef);
       const b = useRouteRef(bRouteRef);
+      const s = useRouteRef(subRouteRef);
+      const e = useRouteRef(externalRouteRef);
       return (
         <div>
           <div>Link A: {a()}</div>
           <div>Link B: {b({ name: 'x' })}</div>
+          <div>Link S: {s({ name: 'y', page: 'p' })}</div>
+          <div>Link E: {e({ name: 'z' })}</div>
         </div>
       );
     };
@@ -135,9 +150,13 @@ describe('wrapInTestApp', () => {
       mountedRoutes: {
         '/my-a-path': aRouteRef,
         '/my-b-path/:name': bRouteRef,
+        '/my-b-path/:name/:page': subRouteRef,
+        '/my-e-path/:name': externalRouteRef,
       },
     });
     expect(rendered.getByText('Link A: /my-a-path')).toBeInTheDocument();
     expect(rendered.getByText('Link B: /my-b-path/x')).toBeInTheDocument();
+    expect(rendered.getByText('Link S: /my-b-path/y/p')).toBeInTheDocument();
+    expect(rendered.getByText('Link E: /my-e-path/z')).toBeInTheDocument();
   });
 });
diff --git a/packages/test-utils/src/testUtils/appWrappers.tsx b/packages/test-utils/src/testUtils/appWrappers.tsx
index 301366cbbd..8f538dd3fb 100644
--- a/packages/test-utils/src/testUtils/appWrappers.tsx
+++ b/packages/test-utils/src/testUtils/appWrappers.tsx
@@ -14,20 +14,21 @@
  * limitations under the License.
  */
 
-import React, { ComponentType, ReactNode, ReactElement } from 'react';
+import privateExports, {
+  attachComponentData,
+  BootErrorPageProps,
+  createRouteRef,
+  defaultSystemIcons,
+  ExternalRouteRef,
+  RouteRef,
+  SubRouteRef,
+} from '@backstage/core-api';
+import { renderWithEffects } from '@backstage/test-utils-core';
+import { lightTheme } from '@backstage/theme';
+import { RenderResult } from '@testing-library/react';
+import React, { ComponentType, ReactElement, ReactNode } from 'react';
 import { MemoryRouter } from 'react-router';
 import { Route } from 'react-router-dom';
-import { lightTheme } from '@backstage/theme';
-import privateExports, {
-  defaultSystemIcons,
-  BootErrorPageProps,
-  RouteRef,
-  ExternalRouteRef,
-  attachComponentData,
-  createRouteRef,
-} from '@backstage/core-api';
-import { RenderResult } from '@testing-library/react';
-import { renderWithEffects } from '@backstage/test-utils-core';
 import { mockApis } from './mockApis';
 
 const { PrivateAppImpl } = privateExports;
@@ -63,11 +64,11 @@ type TestAppOptions = {
    * // ...
    * const link = useRouteRef(myRouteRef)
    */
-  mountedRoutes?: { [path: string]: RouteRef | ExternalRouteRef };
+  mountedRoutes?: { [path: string]: RouteRef | SubRouteRef | ExternalRouteRef };
 };
 
 function isExternalRouteRef(
-  routeRef: RouteRef | ExternalRouteRef,
+  routeRef: RouteRef | SubRouteRef | ExternalRouteRef,
 ): routeRef is ExternalRouteRef {
   // TODO(Rugvip): Least ugly workaround for now, but replace :D
   return String(routeRef).includes('{type=external,');