TeamSettings: Convert tests to RTL (#50513)

.betterer.results

@@ -146,9 +146,6 @@ exports[`no enzyme tests`] = {
     "public/app/features/org/OrgDetailsPage.test.tsx:3835042085": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/features/teams/TeamSettings.test.tsx:2043271249": [
-      [0, 19, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/features/users/UsersListPage.test.tsx:2518052139": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],

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

@@ -1,15 +1,20 @@
-import { shallow } from 'enzyme';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import { Props, TeamSettings } from './TeamSettings';
 import { getMockTeam } from './__mocks__/teamMocks';
 
-jest.mock('app/core/core', () => ({
+jest.mock('app/core/services/context_srv', () => ({
   contextSrv: {
     hasPermissionInMetadata: () => true,
   },
 }));
 
+jest.mock('app/core/components/SharedPreferences/SharedPreferences', () => {
+  return { SharedPreferences: () => <div /> };
+});
+
 const setup = (propOverrides?: object) => {
   const props: Props = {
     team: getMockTeam(),
@@ -18,19 +23,36 @@ const setup = (propOverrides?: object) => {
 
   Object.assign(props, propOverrides);
 
-  const wrapper = shallow(<TeamSettings {...props} />);
-  const instance = wrapper.instance() as any;
-
-  return {
-    wrapper,
-    instance,
-  };
+  render(<TeamSettings {...props} />);
 };
 
-describe('Render', () => {
+describe('Team settings', () => {
   it('should render component', () => {
-    const { wrapper } = setup();
+    setup();
+
+    expect(screen.getByText('Team settings')).toBeInTheDocument();
+  });
+
+  it('should validate required fields', async () => {
+    const mockUpdate = jest.fn();
+    setup({ updateTeam: mockUpdate });
+    await userEvent.clear(screen.getByRole('textbox', { name: /Name/ }));
+    await userEvent.type(screen.getByLabelText(/Email/i), 'team@test.com');
+    // Submitting with userEvent doesn't work here
+    fireEvent.submit(screen.getByRole('button', { name: 'Update' }));
+    expect(await screen.findByText('Name is required')).toBeInTheDocument();
+    await waitFor(() => expect(mockUpdate).not.toHaveBeenCalled());
+  });
 
-    expect(wrapper).toMatchSnapshot();
+  it('should submit form with correct values', async () => {
+    const mockUpdate = jest.fn();
+    setup({ updateTeam: mockUpdate });
+    await userEvent.clear(screen.getByRole('textbox', { name: /Name/ }));
+    await userEvent.clear(screen.getByLabelText(/Email/i));
+    await userEvent.type(screen.getByRole('textbox', { name: /Name/ }), 'New team');
+    await userEvent.type(screen.getByLabelText(/Email/i), 'team@test.com');
+    // Submitting with userEvent doesn't work here
+    fireEvent.submit(screen.getByRole('button', { name: 'Update' }));
+    await waitFor(() => expect(mockUpdate).toHaveBeenCalledWith('New team', 'team@test.com'));
   });
 });

public/app/features/teams/TeamSettings.tsx

@@ -32,9 +32,15 @@ export const TeamSettings: FC<Props> = ({ team, updateTeam }) => {
           }}
           disabled={!canWriteTeamSettings}
         >
-          {({ register }) => (
+          {({ register, errors }) => (
             <>
-              <Field label="Name" disabled={!canWriteTeamSettings}>
+              <Field
+                label="Name"
+                disabled={!canWriteTeamSettings}
+                required
+                invalid={!!errors.name}
+                error="Name is required"
+              >
                 <Input {...register('name', { required: true })} id="name-input" />
               </Field>
 

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

@@ -1,30 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<VerticalGroup>
-  <FieldSet
-    label="Team settings"
-  >
-    <Form
-      defaultValues={
-        Object {
-          "avatarUrl": "some/url/",
-          "email": "test@test.com",
-          "id": 1,
-          "memberCount": 1,
-          "name": "test",
-          "permission": 0,
-        }
-      }
-      disabled={true}
-      onSubmit={[Function]}
-    >
-      <Component />
-    </Form>
-  </FieldSet>
-  <SharedPreferences
-    disabled={true}
-    resourceUri="teams/1"
-  />
-</VerticalGroup>
-`;