TeamMembers: Refactor test to RTL (#49922)

.betterer.results

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

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

@@ -1,18 +1,33 @@
-import { shallow } from 'enzyme';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { Provider } from 'react-redux';
 import { mockToolkitActionCreator } from 'test/core/redux/mocks';
 
 import { User } from 'app/core/services/context_srv';
+import { configureStore } from 'app/store/configureStore';
 
 import { OrgRole, TeamMember } from '../../types';
 
-import { Props, State, TeamMembers } from './TeamMembers';
+import { Props, TeamMembers } from './TeamMembers';
 import { getMockTeamMembers } from './__mocks__/teamMocks';
 import { setSearchMemberQuery } from './state/reducers';
 
 const signedInUserId = 1;
 
+jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
+  getBackendSrv: () => ({
+    get: jest.fn().mockResolvedValue([{ userId: 1, login: 'Test' }]),
+  }),
+  config: {
+    bootData: { navTree: [], user: {} },
+  },
+}));
+
 const setup = (propOverrides?: object) => {
+  const store = configureStore();
+
   const props: Props = {
     members: [] as TeamMember[],
     searchMemberQuery: '',
@@ -29,55 +44,24 @@ const setup = (propOverrides?: object) => {
 
   Object.assign(props, propOverrides);
 
-  const wrapper = shallow(<TeamMembers {...props} />);
-  const instance = wrapper.instance() as TeamMembers;
-
-  return {
-    wrapper,
-    instance,
-  };
+  render(
+    <Provider store={store}>
+      <TeamMembers {...props} />
+    </Provider>
+  );
 };
 
-describe('Render', () => {
-  it('should render component', () => {
-    const { wrapper } = setup({});
-
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('should render team members', () => {
-    const { wrapper } = setup({ members: getMockTeamMembers(5, 5) });
-
-    expect(wrapper).toMatchSnapshot();
+describe('TeamMembers', () => {
+  it('should render team members', async () => {
+    setup({ members: getMockTeamMembers(1, 1) });
+    expect(await screen.findAllByRole('row')).toHaveLength(2);
   });
-});
-
-describe('Functions', () => {
-  describe('on search member query change', () => {
-    it('it should call setSearchMemberQuery', () => {
-      const { instance } = setup({});
-
-      instance.onSearchQueryChange('member');
-
-      expect(instance.props.setSearchMemberQuery).toHaveBeenCalledWith('member');
-    });
-  });
-
-  describe('on add user to team', () => {
-    const { wrapper, instance } = setup({});
-    const state = wrapper.state() as State;
-
-    state.newTeamMember = {
-      id: 1,
-      label: '',
-      avatarUrl: '',
-      login: '',
-      name: '',
-      email: '',
-    };
-
-    instance.onAddUserToTeam();
 
-    expect(instance.props.addTeamMember).toHaveBeenCalledWith(1);
+  it('should add user to a team', async () => {
+    const mockAdd = jest.fn();
+    setup({ addTeamMember: mockAdd });
+    await userEvent.type(screen.getByLabelText('User picker'), 'Test{enter}');
+    await userEvent.click(screen.getByRole('button', { name: 'Add to team' }));
+    await waitFor(() => expect(mockAdd).toHaveBeenCalledWith(1));
   });
 });

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

@@ -1,283 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<div>
-  <div
-    className="page-action-bar"
-  >
-    <div
-      className="gf-form gf-form--grow"
-    >
-      <FilterInput
-        onChange={[Function]}
-        placeholder="Search members"
-        value=""
-      />
-    </div>
-    <Button
-      className="pull-right"
-      disabled={false}
-      onClick={[Function]}
-    >
-      Add member
-    </Button>
-  </div>
-  <SlideDown
-    in={false}
-  >
-    <div
-      className="cta-form"
-    >
-      <CloseButton
-        aria-label="Close 'Add team member' dialogue"
-        onClick={[Function]}
-      />
-      <Label
-        htmlFor="user-picker"
-      >
-        Add team member
-      </Label>
-      <div
-        className="gf-form-inline"
-      >
-        <UserPicker
-          className="min-width-30"
-          inputId="user-picker"
-          onSelected={[Function]}
-        />
-      </div>
-    </div>
-  </SlideDown>
-  <div
-    className="admin-list-table"
-  >
-    <table
-      className="filter-table filter-table--hover form-inline"
-    >
-      <thead>
-        <tr>
-          <th />
-          <th>
-            Login
-          </th>
-          <th>
-            Email
-          </th>
-          <th>
-            Name
-          </th>
-          <WithFeatureToggle
-            featureToggle={false}
-          >
-            <th>
-              Permission
-            </th>
-          </WithFeatureToggle>
-          <th
-            style={
-              Object {
-                "width": "1%",
-              }
-            }
-          />
-        </tr>
-      </thead>
-      <tbody />
-    </table>
-  </div>
-</div>
-`;
-
-exports[`Render should render team members 1`] = `
-<div>
-  <div
-    className="page-action-bar"
-  >
-    <div
-      className="gf-form gf-form--grow"
-    >
-      <FilterInput
-        onChange={[Function]}
-        placeholder="Search members"
-        value=""
-      />
-    </div>
-    <Button
-      className="pull-right"
-      disabled={false}
-      onClick={[Function]}
-    >
-      Add member
-    </Button>
-  </div>
-  <SlideDown
-    in={false}
-  >
-    <div
-      className="cta-form"
-    >
-      <CloseButton
-        aria-label="Close 'Add team member' dialogue"
-        onClick={[Function]}
-      />
-      <Label
-        htmlFor="user-picker"
-      >
-        Add team member
-      </Label>
-      <div
-        className="gf-form-inline"
-      >
-        <UserPicker
-          className="min-width-30"
-          inputId="user-picker"
-          onSelected={[Function]}
-        />
-      </div>
-    </div>
-  </SlideDown>
-  <div
-    className="admin-list-table"
-  >
-    <table
-      className="filter-table filter-table--hover form-inline"
-    >
-      <thead>
-        <tr>
-          <th />
-          <th>
-            Login
-          </th>
-          <th>
-            Email
-          </th>
-          <th>
-            Name
-          </th>
-          <WithFeatureToggle
-            featureToggle={false}
-          >
-            <th>
-              Permission
-            </th>
-          </WithFeatureToggle>
-          <th
-            style={
-              Object {
-                "width": "1%",
-              }
-            }
-          />
-        </tr>
-      </thead>
-      <tbody>
-        <Connect(TeamMemberRow)
-          editorsCanAdmin={false}
-          key="1"
-          member={
-            Object {
-              "avatarUrl": "some/url/",
-              "email": "test@test.com",
-              "labels": Array [
-                "label 1",
-                "label 2",
-              ],
-              "login": "testUser-1",
-              "name": "testName",
-              "permission": 0,
-              "teamId": 1,
-              "userId": 1,
-            }
-          }
-          signedInUserIsTeamAdmin={true}
-          syncEnabled={false}
-        />
-        <Connect(TeamMemberRow)
-          editorsCanAdmin={false}
-          key="2"
-          member={
-            Object {
-              "avatarUrl": "some/url/",
-              "email": "test@test.com",
-              "labels": Array [
-                "label 1",
-                "label 2",
-              ],
-              "login": "testUser-2",
-              "name": "testName",
-              "permission": 0,
-              "teamId": 1,
-              "userId": 2,
-            }
-          }
-          signedInUserIsTeamAdmin={true}
-          syncEnabled={false}
-        />
-        <Connect(TeamMemberRow)
-          editorsCanAdmin={false}
-          key="3"
-          member={
-            Object {
-              "avatarUrl": "some/url/",
-              "email": "test@test.com",
-              "labels": Array [
-                "label 1",
-                "label 2",
-              ],
-              "login": "testUser-3",
-              "name": "testName",
-              "permission": 0,
-              "teamId": 1,
-              "userId": 3,
-            }
-          }
-          signedInUserIsTeamAdmin={true}
-          syncEnabled={false}
-        />
-        <Connect(TeamMemberRow)
-          editorsCanAdmin={false}
-          key="4"
-          member={
-            Object {
-              "avatarUrl": "some/url/",
-              "email": "test@test.com",
-              "labels": Array [
-                "label 1",
-                "label 2",
-              ],
-              "login": "testUser-4",
-              "name": "testName",
-              "permission": 0,
-              "teamId": 1,
-              "userId": 4,
-            }
-          }
-          signedInUserIsTeamAdmin={true}
-          syncEnabled={false}
-        />
-        <Connect(TeamMemberRow)
-          editorsCanAdmin={false}
-          key="5"
-          member={
-            Object {
-              "avatarUrl": "some/url/",
-              "email": "test@test.com",
-              "labels": Array [
-                "label 1",
-                "label 2",
-              ],
-              "login": "testUser-5",
-              "name": "testName",
-              "permission": 4,
-              "teamId": 1,
-              "userId": 5,
-            }
-          }
-          signedInUserIsTeamAdmin={true}
-          syncEnabled={false}
-        />
-      </tbody>
-    </table>
-  </div>
-</div>
-`;