CreateTeam: Refactor test to RTL (#49306)

.betterer.results

@@ -197,9 +197,6 @@ exports[`no enzyme tests`] = {
     "public/app/features/org/OrgProfile.test.tsx:623809345": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/features/teams/CreateTeam.test.tsx:1750035593": [
-      [0, 19, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/features/teams/TeamGroupSync.test.tsx:2526985933": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],

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

@@ -1,15 +1,62 @@
-import { shallow } from 'enzyme';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 
+import { NavModel } from '@grafana/data';
+
 import { CreateTeam, Props } from './CreateTeam';
 
-describe('Render', () => {
+beforeEach(() => {
-  it('should render component', () => {
+  jest.clearAllMocks();
-    const props: Props = {
+});
-      navModel: {} as any,
-    };
-    const wrapper = shallow(<CreateTeam {...props} />);
 
-    expect(wrapper).toMatchSnapshot();
+const mockPost = jest.fn(() => {
+  return Promise.resolve({});
+});
+
+jest.mock('@grafana/runtime', () => ({
+  getBackendSrv: () => {
+    return {
+      post: mockPost,
+    };
+  },
+  config: {
+    buildInfo: {},
+    licenseInfo: {},
+  },
+}));
+
+const setup = () => {
+  const props: Props = {
+    navModel: { node: {}, main: {} } as NavModel,
+  };
+  return render(<CreateTeam {...props} />);
+};
+
+describe('Create team', () => {
+  it('should render component', () => {
+    setup();
+    expect(screen.getByText(/new team/i)).toBeInTheDocument();
+  });
+
+  it('should send correct data to the server', async () => {
+    setup();
+    await userEvent.type(screen.getByRole('textbox', { name: /name/i }), 'Test team');
+    await userEvent.type(screen.getByLabelText(/email/i), 'team@test.com');
+    await userEvent.click(screen.getByRole('button', { name: /create/i }));
+    await waitFor(() => {
+      expect(mockPost).toHaveBeenCalledWith(expect.anything(), { name: 'Test team', email: 'team@test.com' });
+    });
+  });
+
+  it('should validate required fields', async () => {
+    setup();
+    await userEvent.type(screen.getByLabelText(/email/i), 'team@test.com');
+    await userEvent.click(screen.getByRole('button', { name: /create/i }));
+    await waitFor(() => {
+      expect(mockPost).not.toBeCalled();
+    });
+    expect(screen.getAllByRole('alert')).toHaveLength(1);
+    expect(screen.getByText(/team name is required/i)).toBeInTheDocument();
   });
 });

public/app/features/teams/CreateTeam.tsx

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 
 import { NavModel } from '@grafana/data';
 import { getBackendSrv, locationService } from '@grafana/runtime';
-import { Button, Form, Field, Input, FieldSet, Label, Tooltip, Icon } from '@grafana/ui';
+import { Button, Form, Field, Input, FieldSet } from '@grafana/ui';
 import Page from 'app/core/components/Page/Page';
 import { contextSrv } from 'app/core/core';
 import { getNavModel } from 'app/core/selectors/navModel';
@@ -33,22 +33,16 @@ export class CreateTeam extends PureComponent<Props> {
       <Page navModel={navModel}>
         <Page.Contents>
           <Form onSubmit={this.create}>
-            {({ register }) => (
+            {({ register, errors }) => (
               <FieldSet label="New Team">
-                <Field label="Name">
+                <Field label="Name" required invalid={!!errors.name} error="Team name is required">
                   <Input {...register('name', { required: true })} id="team-name" width={60} />
                 </Field>
                 <Field
-                  label={
+                  label={'Email'}
-                    <Label>
+                  description={'This is optional and is primarily used for allowing custom team avatars.'}
-                      <span>Email</span>
-                      <Tooltip content="This is optional and is primarily used for allowing custom team avatars.">
-                        <Icon name="info-circle" style={{ marginLeft: 6 }} />
-                      </Tooltip>
-                    </Label>
-                  }
                 >
-                  <Input {...register('email')} type="email" placeholder="email@test.com" width={60} />
+                  <Input {...register('email')} type="email" id="team-email" placeholder="email@test.com" width={60} />
                 </Field>
                 <div className="gf-form-button-row">
                   <Button type="submit" variant="primary">

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

@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<Page
-  navModel={Object {}}
->
-  <PageContents>
-    <Form
-      onSubmit={[Function]}
-    >
-      <Component />
-    </Form>
-  </PageContents>
-</Page>
-`;