todo: switch to routable extension + add test

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/chilly-pans-jog.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-todo': minor
+---
+
+**BREAKING**: The `EntityTodoContent` is now a routable extension. This means it must be rendered within a route, but that's most likely already the case for most apps. The mount point `RouteRef` is available via `todoPlugin.routes.entityContent`.

plugins/todo/api-report.md

@@ -10,6 +10,7 @@ import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { DiscoveryApi } from '@backstage/core-plugin-api';
 import { Entity } from '@backstage/catalog-model';
 import { IdentityApi } from '@backstage/core-plugin-api';
+import { RouteRef } from '@backstage/core-plugin-api';
 
 // @public
 export const EntityTodoContent: () => JSX.Element;
@@ -79,5 +80,10 @@ export type TodoListResult = {
 };
 
 // @public
-export const todoPlugin: BackstagePlugin<{}, {}>;
+export const todoPlugin: BackstagePlugin<
+  {
+    entityContent: RouteRef<undefined>;
+  },
+  {}
+>;
 ```

plugins/todo/package.json

@@ -52,6 +52,7 @@
     "@types/jest": "^26.0.7",
     "@types/node": "^14.14.32",
     "cross-fetch": "^3.0.6",
+    "react-router": "6.0.0-beta.0",
     "msw": "^0.35.0"
   },
   "files": [

plugins/todo/src/plugin.test.ts

@@ -1,22 +0,0 @@
-/*
- * Copyright 2021 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { todoPlugin } from './plugin';
-
-describe('todo', () => {
-  it('should export plugin', () => {
-    expect(todoPlugin).toBeDefined();
-  });
-});

plugins/todo/src/plugin.test.tsx

@@ -0,0 +1,56 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Route } from 'react-router';
+import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
+import { todoPlugin, EntityTodoContent } from './plugin';
+import { todoApiRef } from './api';
+
+describe('todo', () => {
+  it('should export plugin', () => {
+    expect(todoPlugin).toBeDefined();
+  });
+
+  it('should render EntityTodoContent', async () => {
+    const rendered = await renderInTestApp(
+      <TestApiProvider
+        apis={[
+          [
+            todoApiRef,
+            {
+              listTodos: async () => ({
+                items: [
+                  {
+                    tag: 'FIXME',
+                    text: 'Make sure this test works',
+                  },
+                ],
+                limit: 10,
+                offset: 0,
+                totalCount: 1,
+              }),
+            },
+          ],
+        ]}
+      >
+        <Route path="/" element={<EntityTodoContent />} />
+      </TestApiProvider>,
+    );
+
+    await expect(rendered.findByText('FIXME')).resolves.toBeInTheDocument();
+  });
+});

plugins/todo/src/plugin.ts

@@ -17,10 +17,11 @@ import { todoApiRef, TodoClient } from './api';
 import {
   createApiFactory,
   createPlugin,
-  createComponentExtension,
+  createRoutableExtension,
   discoveryApiRef,
   identityApiRef,
 } from '@backstage/core-plugin-api';
+import { rootRouteRef } from './routes';
 
 /**
  * The Todo plugin instance.
@@ -42,7 +43,7 @@ export const todoPlugin = createPlugin({
     }),
   ],
   routes: {
-    // root: rootRouteRef,
+    entityContent: rootRouteRef,
   },
 });
 
@@ -52,12 +53,9 @@ export const todoPlugin = createPlugin({
  * @public
  */
 export const EntityTodoContent = todoPlugin.provide(
-  createComponentExtension({
+  createRoutableExtension({
     name: 'EntityTodoContent',
-    component: {
-      lazy: () => import('./components/TodoList').then(m => m.TodoList),
-    },
-    // TODO(Rugvip): Switch back to routable extension once apps are migrated
-    // mountPoint: rootRouteRef,
+    component: () => import('./components/TodoList').then(m => m.TodoList),
+    mountPoint: rootRouteRef,
   }),
 );