TeamGroupSync: Refactor tests to use RTL (#49417)

.betterer.results

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

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

@@ -1,4 +1,5 @@
-import { shallow } from 'enzyme';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import { TeamGroup } from '../../types';
@@ -17,50 +18,41 @@ const setup = (propOverrides?: object) => {
 
   Object.assign(props, propOverrides);
 
-  const wrapper = shallow(<TeamGroupSync {...props} />);
-  const instance = wrapper.instance() as TeamGroupSync;
-
-  return {
-    wrapper,
-    instance,
-  };
+  return render(<TeamGroupSync {...props} />);
 };
 
-describe('Render', () => {
+describe('TeamGroupSync', () => {
   it('should render component', () => {
-    const { wrapper } = setup();
-
-    expect(wrapper).toMatchSnapshot();
+    setup();
+    expect(screen.getByRole('heading', { name: /External group sync/i })).toBeInTheDocument();
   });
 
   it('should render groups table', () => {
-    const { wrapper } = setup({
-      groups: getMockTeamGroups(3),
+    setup({ groups: getMockTeamGroups(3) });
+    expect(screen.getAllByRole('row')).toHaveLength(4); // 3 items plus table header
+  });
+
+  it('should call add group', async () => {
+    const mockAddGroup = jest.fn();
+    setup({ addTeamGroup: mockAddGroup });
+    // Empty List CTA "Add group" button is second in the DOM order
+    await userEvent.click(screen.getAllByRole('button', { name: /add group/i })[1]);
+    expect(screen.getByRole('textbox', { name: /add external group/i })).toBeVisible();
+
+    await userEvent.type(screen.getByRole('textbox', { name: /add external group/i }), 'test/group');
+    await userEvent.click(screen.getAllByRole('button', { name: /add group/i })[0]);
+    await waitFor(() => {
+      expect(mockAddGroup).toHaveBeenCalledWith('test/group');
     });
-
-    expect(wrapper).toMatchSnapshot();
-  });
-});
-
-describe('Functions', () => {
-  it('should call add group', () => {
-    const { instance } = setup();
-
-    instance.setState({ newGroupId: 'some/group' });
-    const mockEvent = { preventDefault: jest.fn() };
-
-    instance.onAddGroup(mockEvent);
-
-    expect(instance.props.addTeamGroup).toHaveBeenCalledWith('some/group');
   });
 
-  it('should call remove group', () => {
-    const { instance } = setup();
-
+  it('should call remove group', async () => {
+    const mockRemoveGroup = jest.fn();
     const mockGroup: TeamGroup = { teamId: 1, groupId: 'some/group' };
-
-    instance.onRemoveGroup(mockGroup);
-
-    expect(instance.props.removeTeamGroup).toHaveBeenCalledWith('some/group');
+    setup({ removeTeamGroup: mockRemoveGroup, groups: [mockGroup] });
+    await userEvent.click(screen.getByRole('button', { name: 'Remove group some/group' }));
+    await waitFor(() => {
+      expect(mockRemoveGroup).toHaveBeenCalledWith('some/group');
+    });
   });
 });

public/app/features/teams/TeamGroupSync.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
-import { LegacyForms, Tooltip, Icon, Button, useTheme2 } from '@grafana/ui';
+import { Input, Tooltip, Icon, Button, useTheme2, InlineField, InlineFieldRow } from '@grafana/ui';
 import { SlideDown } from 'app/core/components/Animations/SlideDown';
 import { CloseButton } from 'app/core/components/CloseButton/CloseButton';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
@@ -13,8 +13,6 @@ import { StoreState, TeamGroup } from '../../types';
 import { addTeamGroup, loadTeamGroups, removeTeamGroup } from './state/actions';
 import { getTeamGroups } from './state/selectors';
 
-const { Input } = LegacyForms;
-
 function mapStateToProps(state: StoreState) {
   return {
     groups: getTeamGroups(state.team),
@@ -83,7 +81,13 @@ export class TeamGroupSync extends PureComponent<Props, State> {
       <tr key={group.groupId}>
         <td>{group.groupId}</td>
         <td style={{ width: '1%' }}>
-          <Button size="sm" variant="destructive" onClick={() => this.onRemoveGroup(group)} disabled={isReadOnly}>
+          <Button
+            size="sm"
+            variant="destructive"
+            onClick={() => this.onRemoveGroup(group)}
+            disabled={isReadOnly}
+            aria-label={`Remove group ${group.groupId}`}
+          >
             <Icon name="times" />
           </Button>
         </td>
@@ -124,24 +128,23 @@ export class TeamGroupSync extends PureComponent<Props, State> {
         <SlideDown in={isAdding}>
           <div className="cta-form">
             <CloseButton onClick={this.onToggleAdding} />
-            <h5>Add External Group</h5>
-            <form className="gf-form-inline" onSubmit={this.onAddGroup}>
-              <div className="gf-form">
-                <Input
-                  type="text"
-                  className="gf-form-input width-30"
-                  value={newGroupId}
-                  onChange={this.onNewGroupIdChanged}
-                  placeholder="cn=ops,ou=groups,dc=grafana,dc=org"
-                  disabled={isReadOnly}
-                />
-              </div>
+            <form onSubmit={this.onAddGroup}>
+              <InlineFieldRow>
+                <InlineField label={'Add External Group'}>
+                  <Input
+                    type="text"
+                    id={'add-external-group'}
+                    value={newGroupId}
+                    onChange={this.onNewGroupIdChanged}
+                    placeholder="cn=ops,ou=groups,dc=grafana,dc=org"
+                    disabled={isReadOnly}
+                  />
+                </InlineField>
 
-              <div className="gf-form">
-                <Button type="submit" disabled={isReadOnly || !this.isNewGroupValid()}>
+                <Button type="submit" disabled={isReadOnly || !this.isNewGroupValid()} style={{ marginLeft: 4 }}>
                   Add group
                 </Button>
-              </div>
+              </InlineFieldRow>
             </form>
           </div>
         </SlideDown>

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

@@ -1,255 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<div>
-  <div
-    className="page-action-bar"
-  >
-    <h3
-      className="page-sub-heading"
-    >
-      External group sync
-    </h3>
-    <Tooltip
-      content="Sync LDAP or OAuth groups with your Grafana teams."
-      placement="auto"
-    >
-      <Icon
-        className="icon--has-hover page-sub-heading-icon"
-        name="question-circle"
-      />
-    </Tooltip>
-    <div
-      className="page-action-bar__spacer"
-    />
-  </div>
-  <SlideDown
-    in={false}
-  >
-    <div
-      className="cta-form"
-    >
-      <CloseButton
-        onClick={[Function]}
-      />
-      <h5>
-        Add External Group
-      </h5>
-      <form
-        className="gf-form-inline"
-        onSubmit={[Function]}
-      >
-        <div
-          className="gf-form"
-        >
-          <Input
-            className="gf-form-input width-30"
-            disabled={false}
-            onChange={[Function]}
-            placeholder="cn=ops,ou=groups,dc=grafana,dc=org"
-            type="text"
-            value=""
-          />
-        </div>
-        <div
-          className="gf-form"
-        >
-          <Button
-            disabled={true}
-            type="submit"
-          >
-            Add group
-          </Button>
-        </div>
-      </form>
-    </div>
-  </SlideDown>
-  <EmptyListCTA
-    buttonDisabled={false}
-    buttonIcon="users-alt"
-    buttonTitle="Add group"
-    onClick={[Function]}
-    proTip="Sync LDAP or OAuth groups with your Grafana teams."
-    proTipLink="https://docs.grafana.org/auth/enhanced_ldap/"
-    proTipLinkTitle="Learn more"
-    proTipTarget="_blank"
-    title="There are no external groups to sync with"
-  />
-</div>
-`;
-
-exports[`Render should render groups table 1`] = `
-<div>
-  <div
-    className="page-action-bar"
-  >
-    <h3
-      className="page-sub-heading"
-    >
-      External group sync
-    </h3>
-    <Tooltip
-      content="Sync LDAP or OAuth groups with your Grafana teams."
-      placement="auto"
-    >
-      <Icon
-        className="icon--has-hover page-sub-heading-icon"
-        name="question-circle"
-      />
-    </Tooltip>
-    <div
-      className="page-action-bar__spacer"
-    />
-    <Button
-      className="pull-right"
-      disabled={false}
-      onClick={[Function]}
-    >
-      <Icon
-        name="plus"
-      />
-       Add group
-    </Button>
-  </div>
-  <SlideDown
-    in={false}
-  >
-    <div
-      className="cta-form"
-    >
-      <CloseButton
-        onClick={[Function]}
-      />
-      <h5>
-        Add External Group
-      </h5>
-      <form
-        className="gf-form-inline"
-        onSubmit={[Function]}
-      >
-        <div
-          className="gf-form"
-        >
-          <Input
-            className="gf-form-input width-30"
-            disabled={false}
-            onChange={[Function]}
-            placeholder="cn=ops,ou=groups,dc=grafana,dc=org"
-            type="text"
-            value=""
-          />
-        </div>
-        <div
-          className="gf-form"
-        >
-          <Button
-            disabled={true}
-            type="submit"
-          >
-            Add group
-          </Button>
-        </div>
-      </form>
-    </div>
-  </SlideDown>
-  <div
-    className="admin-list-table"
-  >
-    <table
-      className="filter-table filter-table--hover form-inline"
-    >
-      <thead>
-        <tr>
-          <th>
-            External Group ID
-          </th>
-          <th
-            style={
-              Object {
-                "width": "1%",
-              }
-            }
-          />
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          key="group-1"
-        >
-          <td>
-            group-1
-          </td>
-          <td
-            style={
-              Object {
-                "width": "1%",
-              }
-            }
-          >
-            <Button
-              disabled={false}
-              onClick={[Function]}
-              size="sm"
-              variant="destructive"
-            >
-              <Icon
-                name="times"
-              />
-            </Button>
-          </td>
-        </tr>
-        <tr
-          key="group-2"
-        >
-          <td>
-            group-2
-          </td>
-          <td
-            style={
-              Object {
-                "width": "1%",
-              }
-            }
-          >
-            <Button
-              disabled={false}
-              onClick={[Function]}
-              size="sm"
-              variant="destructive"
-            >
-              <Icon
-                name="times"
-              />
-            </Button>
-          </td>
-        </tr>
-        <tr
-          key="group-3"
-        >
-          <td>
-            group-3
-          </td>
-          <td
-            style={
-              Object {
-                "width": "1%",
-              }
-            }
-          >
-            <Button
-              disabled={false}
-              onClick={[Function]}
-              size="sm"
-              variant="destructive"
-            >
-              <Icon
-                name="times"
-              />
-            </Button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
-`;