TeamPages: Convert tests to RTL (#50429)

* TeamPages: Setup tests

* TeamPages: Finalise tests

* TeamPages: Add missing test

.betterer.results

@@ -149,9 +149,6 @@ exports[`no enzyme tests`] = {
     "public/app/features/org/OrgProfile.test.tsx:623809345": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/features/teams/TeamPages.test.tsx:3990420214": [
-      [0, 19, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/features/teams/TeamSettings.test.tsx:2043271249": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],

public/app/features/teams/TeamPages.test.tsx

@@ -1,26 +1,64 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
+import { Provider } from 'react-redux';
 
 import { NavModel, createTheme } from '@grafana/data';
 import { getRouteComponentProps } from 'app/core/navigation/__mocks__/routeProps';
 import { User } from 'app/core/services/context_srv';
+import { configureStore } from 'app/store/configureStore';
 
 import { OrgRole, Team, TeamMember } from '../../types';
 
 import { Props, TeamPages } from './TeamPages';
 import { getMockTeam } from './__mocks__/teamMocks';
 
-jest.mock('@grafana/runtime/src/config', () => ({
-  ...(jest.requireActual('@grafana/runtime/src/config') as unknown as object),
-  config: {
-    licenseInfo: {
-      enabledFeatures: { teamsync: true },
-    },
-    featureToggles: { accesscontrol: false },
+jest.mock('app/core/components/Select/UserPicker', () => {
+  return { UserPicker: () => null };
+});
+
+jest.mock('app/core/services/context_srv', () => ({
+  contextSrv: {
+    accessControlEnabled: () => false,
+    hasPermissionInMetadata: () => false,
+    hasAccessInMetadata: () => true,
+    user: {},
   },
 }));
 
+jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
+  getBackendSrv: () => ({
+    get: jest.fn().mockResolvedValue([{ userId: 1, login: 'Test' }]),
+  }),
+  config: {
+    licenseInfo: {
+      enabledFeatures: { teamsync: true },
+      stateInfo: '',
+      licenseUrl: '',
+    },
+    featureToggles: { accesscontrol: false },
+    bootData: { navTree: [], user: {} },
+    buildInfo: {
+      edition: 'Open Source',
+    },
+    appSubUrl: '',
+  },
+  featureEnabled: () => true,
+}));
+
+// Mock connected child components instead of rendering them
+jest.mock('./TeamSettings', () => {
+  //eslint-disable-next-line
+  return () => <div>Team settings</div>;
+});
+
+jest.mock('./TeamGroupSync', () => {
+  //eslint-disable-next-line
+  return () => <div>Team group sync</div>;
+});
+
 const setup = (propOverrides?: object) => {
+  const store = configureStore();
   const props: Props = {
     ...getRouteComponentProps({
       match: {
@@ -30,7 +68,7 @@ const setup = (propOverrides?: object) => {
         },
       } as any,
     }),
-    navModel: {} as NavModel,
+    navModel: { node: {}, main: {} } as NavModel,
     teamId: 1,
     loadTeam: jest.fn(),
     loadTeamMembers: jest.fn(),
@@ -48,32 +86,23 @@ const setup = (propOverrides?: object) => {
 
   Object.assign(props, propOverrides);
 
-  const wrapper = shallow(<TeamPages {...props} />);
-  const instance = wrapper.instance();
-
-  return {
-    wrapper,
-    instance,
-  };
+  render(
+    <Provider store={store}>
+      <TeamPages {...props} />
+    </Provider>
+  );
 };
 
 describe('Render', () => {
-  it('should render component', () => {
-    const { wrapper } = setup();
-
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('should render member page if team not empty', () => {
-    const { wrapper } = setup({
+  it('should render member page if team not empty', async () => {
+    setup({
       team: getMockTeam(),
     });
-
-    expect(wrapper).toMatchSnapshot();
+    expect(await screen.findByRole('button', { name: 'Add member' })).toBeInTheDocument();
   });
 
-  it('should render settings and preferences page', () => {
-    const { wrapper } = setup({
+  it('should render settings and preferences page', async () => {
+    setup({
       team: getMockTeam(),
       pageName: 'settings',
       preferences: {
@@ -83,57 +112,37 @@ describe('Render', () => {
       },
     });
 
-    expect(wrapper).toMatchSnapshot();
+    expect(await screen.findByText('Team settings')).toBeInTheDocument();
   });
 
-  it('should render group sync page', () => {
-    const { wrapper } = setup({
+  it('should render group sync page', async () => {
+    setup({
       team: getMockTeam(),
       pageName: 'groupsync',
     });
 
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  describe('when feature toggle editorsCanAdmin is turned on', () => {
-    it('should render settings page if user is team admin', () => {
-      const { wrapper } = setup({
-        team: getMockTeam(),
-        pageName: 'settings',
-        preferences: {
-          homeDashboardId: 1,
-          theme: 'Default',
-          timezone: 'Default',
-        },
-        editorsCanAdmin: true,
-        signedInUser: {
-          id: 1,
-          isGrafanaAdmin: false,
-          orgRole: OrgRole.Admin,
-        } as User,
-      });
-
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should not render settings page if user is team member', () => {
-      const { wrapper } = setup({
-        team: getMockTeam(),
-        pageName: 'settings',
-        preferences: {
-          homeDashboardId: 1,
-          theme: 'Default',
-          timezone: 'Default',
-        },
-        editorsCanAdmin: true,
-        signedInUser: {
-          id: 1,
-          isGrafanaAdmin: false,
-          orgRole: OrgRole.Viewer,
-        } as User,
-      });
-
-      expect(wrapper).toMatchSnapshot();
-    });
+    expect(await screen.findByText('Team group sync')).toBeInTheDocument();
+  });
+});
+
+describe('when feature toggle editorsCanAdmin is turned on', () => {
+  it('should render settings page if user is team admin', async () => {
+    setup({
+      team: getMockTeam(),
+      pageName: 'settings',
+      preferences: {
+        homeDashboardId: 1,
+        theme: 'Default',
+        timezone: 'Default',
+      },
+      editorsCanAdmin: true,
+      signedInUser: {
+        id: 1,
+        isGrafanaAdmin: false,
+        orgRole: OrgRole.Admin,
+      } as User,
+    });
+
+    expect(await screen.findByText('Team settings')).toBeInTheDocument();
   });
 });

public/app/features/teams/TeamSettings.tsx

@@ -3,7 +3,7 @@ import { connect, ConnectedProps } from 'react-redux';
 
 import { Input, Field, Form, Button, FieldSet, VerticalGroup } from '@grafana/ui';
 import { SharedPreferences } from 'app/core/components/SharedPreferences/SharedPreferences';
-import { contextSrv } from 'app/core/core';
+import { contextSrv } from 'app/core/services/context_srv';
 import { AccessControlAction, Team } from 'app/types';
 
 import { updateTeam } from './state/actions';

public/app/features/teams/__snapshots__/TeamPages.test.tsx.snap

@@ -1,96 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<Page
-  navModel={Object {}}
->
-  <PageContents
-    isLoading={true}
-  />
-</Page>
-`;
-
-exports[`Render should render group sync page 1`] = `
-<Page
-  navModel={Object {}}
->
-  <PageContents
-    isLoading={true}
-  >
-    <Connect(TeamGroupSync)
-      isReadOnly={false}
-    />
-  </PageContents>
-</Page>
-`;
-
-exports[`Render should render member page if team not empty 1`] = `
-<Page
-  navModel={Object {}}
->
-  <PageContents
-    isLoading={true}
-  >
-    <Connect(TeamMembers)
-      members={Array []}
-      syncEnabled={true}
-    />
-  </PageContents>
-</Page>
-`;
-
-exports[`Render should render settings and preferences page 1`] = `
-<Page
-  navModel={Object {}}
->
-  <PageContents
-    isLoading={true}
-  >
-    <Connect(TeamSettings)
-      team={
-        Object {
-          "avatarUrl": "some/url/",
-          "email": "test@test.com",
-          "id": 1,
-          "memberCount": 1,
-          "name": "test",
-          "permission": 0,
-        }
-      }
-    />
-  </PageContents>
-</Page>
-`;
-
-exports[`Render when feature toggle editorsCanAdmin is turned on should not render settings page if user is team member 1`] = `
-<Page
-  navModel={Object {}}
->
-  <PageContents
-    isLoading={true}
-  />
-</Page>
-`;
-
-exports[`Render when feature toggle editorsCanAdmin is turned on should render settings page if user is team admin 1`] = `
-<Page
-  navModel={Object {}}
->
-  <PageContents
-    isLoading={true}
-  >
-    <Connect(TeamSettings)
-      team={
-        Object {
-          "avatarUrl": "some/url/",
-          "email": "test@test.com",
-          "id": 1,
-          "memberCount": 1,
-          "name": "test",
-          "permission": 0,
-        }
-      }
-    />
-  </PageContents>
-</Page>
-`;

public/app/features/teams/__snapshots__/TeamSettings.test.tsx.snap

@@ -16,14 +16,14 @@ exports[`Render should render component 1`] = `
           "permission": 0,
         }
       }
-      disabled={false}
+      disabled={true}
       onSubmit={[Function]}
     >
       <Component />
     </Form>
   </FieldSet>
   <SharedPreferences
-    disabled={false}
+    disabled={true}
     resourceUri="teams/1"
   />
 </VerticalGroup>