Support routes of type SubRouteRef in mountedRoutes parameter of renderInTestApp

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>

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();
   });
 });

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,');