Refactor tests to use mock api

Signed-off-by: Joon Park <joonp@spotify.com>

packages/app/package.json

@@ -69,7 +69,7 @@
     "zen-observable": "^0.8.15"
   },
   "devDependencies": {
-    "@backstage/plugin-permission-react": "^0.2.2",
+    "@backstage/plugin-permission-react": "^0.3.0-next.0",
     "@backstage/test-utils": "^0.2.3-next.0",
     "@rjsf/core": "^3.2.1",
     "@testing-library/cypress": "^8.0.2",

packages/test-utils/package.json

@@ -32,8 +32,8 @@
     "@backstage/config": "^0.1.13-next.0",
     "@backstage/core-app-api": "^0.5.0-next.0",
     "@backstage/core-plugin-api": "^0.6.0-next.0",
-    "@backstage/plugin-permission-common": "^0.3.1",
-    "@backstage/plugin-permission-react": "^0.2.2",
+    "@backstage/plugin-permission-common": "^0.4.0-next.0",
+    "@backstage/plugin-permission-react": "^0.3.0-next.0",
     "@backstage/theme": "^0.2.14",
     "@backstage/types": "^0.1.1",
     "@material-ui/core": "^4.12.2",

plugins/catalog-react/package.json

@@ -35,8 +35,8 @@
     "@backstage/core-plugin-api": "^0.6.0-next.0",
     "@backstage/errors": "^0.2.0",
     "@backstage/integration": "^0.7.2-next.0",
-    "@backstage/plugin-permission-common": "^0.3.1",
-    "@backstage/plugin-permission-react": "^0.2.2",
+    "@backstage/plugin-permission-common": "^0.4.0-next.0",
+    "@backstage/plugin-permission-react": "^0.3.0-next.0",
     "@backstage/types": "^0.1.1",
     "@backstage/version-bridge": "^0.1.1",
     "@material-ui/core": "^4.12.2",
@@ -56,7 +56,7 @@
   "devDependencies": {
     "@backstage/cli": "^0.12.0-next.0",
     "@backstage/core-app-api": "^0.5.0-next.0",
-    "@backstage/plugin-catalog-common": "^0.1.0",
+    "@backstage/plugin-catalog-common": "^0.1.1-next.0",
     "@backstage/test-utils": "^0.2.3-next.0",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^11.2.5",

plugins/catalog/package.json

@@ -37,7 +37,7 @@
     "@backstage/core-plugin-api": "^0.6.0-next.0",
     "@backstage/errors": "^0.2.0",
     "@backstage/integration-react": "^0.1.19-next.0",
-    "@backstage/plugin-catalog-common": "^0.1.0",
+    "@backstage/plugin-catalog-common": "^0.1.1-next.0",
     "@backstage/plugin-catalog-react": "^0.6.12-next.0",
     "@backstage/theme": "^0.2.14",
     "@material-ui/core": "^4.12.2",
@@ -57,6 +57,7 @@
     "@backstage/cli": "^0.12.0-next.0",
     "@backstage/core-app-api": "^0.5.0-next.0",
     "@backstage/dev-utils": "^0.2.18-next.0",
+    "@backstage/plugin-permission-react": "^0.3.0-next.0",
     "@backstage/test-utils": "^0.2.3-next.0",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^11.2.5",

plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.test.tsx

@@ -14,24 +14,36 @@
  * limitations under the License.
  */
 
-import { renderInTestApp } from '@backstage/test-utils';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
+import { permissionApiRef } from '@backstage/plugin-permission-react';
+import {
+  MockPermissionApi,
+  renderInTestApp,
+  TestApiProvider,
+} from '@backstage/test-utils';
 import SearchIcon from '@material-ui/icons/Search';
 import { fireEvent, screen } from '@testing-library/react';
 import * as React from 'react';
 import { EntityContextMenu } from './EntityContextMenu';
 
-jest.mock('@backstage/plugin-catalog-react', () => ({
-  ...jest.requireActual('@backstage/plugin-catalog-react'),
-  useEntityPermission: () => ({ isAllowed: true }),
-}));
+const mockPermissionApi = new MockPermissionApi();
+
+function render(children: React.ReactNode) {
+  return renderInTestApp(
+    <TestApiProvider apis={[[permissionApiRef, mockPermissionApi]]}>
+      <EntityProvider
+        entity={{ apiVersion: 'a', kind: 'b', metadata: { name: 'c' } }}
+        children={children}
+      />
+    </TestApiProvider>,
+  );
+}
 
 describe('ComponentContextMenu', () => {
   it('should call onUnregisterEntity on button click', async () => {
     const mockCallback = jest.fn();
 
-    await renderInTestApp(
-      <EntityContextMenu onUnregisterEntity={mockCallback} />,
-    );
+    await render(<EntityContextMenu onUnregisterEntity={mockCallback} />);
 
     const button = await screen.findByTestId('menu-button');
     expect(button).toBeInTheDocument();
@@ -51,7 +63,7 @@ describe('ComponentContextMenu', () => {
       onClick: jest.fn(),
     };
 
-    await renderInTestApp(
+    await render(
       <EntityContextMenu
         onUnregisterEntity={jest.fn()}
         UNSTABLE_extraContextMenuItems={[extra]}

plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx

@@ -26,7 +26,9 @@ import {
   entityRouteRef,
   starredEntitiesApiRef,
 } from '@backstage/plugin-catalog-react';
+import { permissionApiRef } from '@backstage/plugin-permission-react';
 import {
+  MockPermissionApi,
   MockStorageApi,
   renderInTestApp,
   TestApiRegistry,
@@ -36,11 +38,6 @@ import React from 'react';
 import { Route, Routes } from 'react-router';
 import { EntityLayout } from './EntityLayout';
 
-jest.mock('@backstage/plugin-catalog-react', () => ({
-  ...jest.requireActual('@backstage/plugin-catalog-react'),
-  useEntityPermission: () => ({ isAllowed: true }),
-}));
-
 const mockEntity = {
   kind: 'MyKind',
   metadata: {
@@ -55,6 +52,7 @@ const mockApis = TestApiRegistry.from(
     starredEntitiesApiRef,
     new DefaultStarredEntitiesApi({ storageApi: MockStorageApi.create() }),
   ],
+  [permissionApiRef, new MockPermissionApi()],
 );
 
 describe('EntityLayout', () => {