From 323f48704d434fcc406754ed6e798d6f77776bf7 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Thu, 3 Feb 2022 18:09:30 +0100 Subject: [PATCH] todo: switch to routable extension + add test Signed-off-by: Patrik Oldsberg --- .changeset/chilly-pans-jog.md | 5 +++ plugins/todo/api-report.md | 8 ++++- plugins/todo/package.json | 1 + plugins/todo/src/plugin.test.ts | 22 ------------- plugins/todo/src/plugin.test.tsx | 56 ++++++++++++++++++++++++++++++++ plugins/todo/src/plugin.ts | 14 ++++---- 6 files changed, 75 insertions(+), 31 deletions(-) create mode 100644 .changeset/chilly-pans-jog.md delete mode 100644 plugins/todo/src/plugin.test.ts create mode 100644 plugins/todo/src/plugin.test.tsx diff --git a/.changeset/chilly-pans-jog.md b/.changeset/chilly-pans-jog.md new file mode 100644 index 0000000000..b63d5fde50 --- /dev/null +++ b/.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`. diff --git a/plugins/todo/api-report.md b/plugins/todo/api-report.md index 0784f5d56e..c1667f1111 100644 --- a/plugins/todo/api-report.md +++ b/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; + }, + {} +>; ``` diff --git a/plugins/todo/package.json b/plugins/todo/package.json index fc9893fcd9..fb433992a1 100644 --- a/plugins/todo/package.json +++ b/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": [ diff --git a/plugins/todo/src/plugin.test.ts b/plugins/todo/src/plugin.test.ts deleted file mode 100644 index a99373abc6..0000000000 --- a/plugins/todo/src/plugin.test.ts +++ /dev/null @@ -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(); - }); -}); diff --git a/plugins/todo/src/plugin.test.tsx b/plugins/todo/src/plugin.test.tsx new file mode 100644 index 0000000000..57b9be291d --- /dev/null +++ b/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( + ({ + items: [ + { + tag: 'FIXME', + text: 'Make sure this test works', + }, + ], + limit: 10, + offset: 0, + totalCount: 1, + }), + }, + ], + ]} + > + } /> + , + ); + + await expect(rendered.findByText('FIXME')).resolves.toBeInTheDocument(); + }); +}); diff --git a/plugins/todo/src/plugin.ts b/plugins/todo/src/plugin.ts index a7d3702f2c..d74acfb02c 100644 --- a/plugins/todo/src/plugin.ts +++ b/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, }), );