From 5557d2e666345caf58e38fcaa5d11a3ef196961f Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Wed, 25 May 2022 13:01:40 +0300
Subject: [PATCH] TeamList: Convert test to RTL (#49567)

---
 .betterer.results                             |   3 -
 public/app/features/teams/TeamList.test.tsx   |  75 +-
 public/app/features/teams/TeamList.tsx        |   2 +-
 .../__snapshots__/TeamList.test.tsx.snap      | 666 ------------------
 4 files changed, 21 insertions(+), 725 deletions(-)
 delete mode 100644 public/app/features/teams/__snapshots__/TeamList.test.tsx.snap

diff --git a/.betterer.results b/.betterer.results
index 7c54b12b30d8..c31ceff38955 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -188,9 +188,6 @@ exports[`no enzyme tests`] = {
     "public/app/features/org/OrgProfile.test.tsx:623809345": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/features/teams/TeamList.test.tsx:854193970": [
-      [0, 19, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/features/teams/TeamMemberRow.test.tsx:1649328210": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
diff --git a/public/app/features/teams/TeamList.test.tsx b/public/app/features/teams/TeamList.test.tsx
index 598ecdd3a5c3..9575b0c1ed07 100644
--- a/public/app/features/teams/TeamList.test.tsx
+++ b/public/app/features/teams/TeamList.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 { mockToolkitActionCreator } from 'test/core/redux/mocks';
 
@@ -47,35 +48,19 @@ const setup = (propOverrides?: object) => {
 
   contextSrv.user = props.signedInUser;
 
-  const wrapper = shallow(<TeamList {...props} />);
-  const instance = wrapper.instance() as TeamList;
-
-  return {
-    wrapper,
-    instance,
-  };
+  render(<TeamList {...props} />);
 };
 
-describe('Render', () => {
-  it('should render component', () => {
-    const { wrapper } = setup();
-    expect(wrapper).toMatchSnapshot();
-  });
-
+describe('TeamList', () => {
   it('should render teams table', () => {
-    const { wrapper } = setup({
-      teams: getMultipleMockTeams(5),
-      teamsCount: 5,
-      hasFetched: true,
-    });
-
-    expect(wrapper).toMatchSnapshot();
+    setup({ teams: getMultipleMockTeams(5), teamsCount: 5, hasFetched: true });
+    expect(screen.getAllByRole('row')).toHaveLength(6); // 5 teams plus table header row
   });
 
   describe('when feature toggle editorsCanAdmin is turned on', () => {
-    describe('and signedin user is not viewer', () => {
+    describe('and signed in user is not viewer', () => {
       it('should enable the new team button', () => {
-        const { wrapper } = setup({
+        setup({
           teams: getMultipleMockTeams(1),
           teamsCount: 1,
           hasFetched: true,
@@ -86,13 +71,13 @@ describe('Render', () => {
           } as User,
         });
 
-        expect(wrapper).toMatchSnapshot();
+        expect(screen.getByRole('link', { name: /new team/i })).not.toHaveStyle('pointer-events: none');
       });
     });
 
-    describe('and signedin user is a viewer', () => {
+    describe('and signed in user is a viewer', () => {
       it('should disable the new team button', () => {
-        const { wrapper } = setup({
+        setup({
           teams: getMultipleMockTeams(1),
           teamsCount: 1,
           hasFetched: true,
@@ -103,39 +88,19 @@ describe('Render', () => {
           } as User,
         });
 
-        expect(wrapper).toMatchSnapshot();
+        expect(screen.getByRole('link', { name: /new team/i })).toHaveStyle('pointer-events: none');
       });
     });
   });
 });
 
-describe('Life cycle', () => {
-  it('should call loadTeams', () => {
-    const { instance } = setup();
-
-    instance.componentDidMount();
-
-    expect(instance.props.loadTeams).toHaveBeenCalled();
-  });
-});
-
-describe('Functions', () => {
-  describe('Delete team', () => {
-    it('should call delete team', () => {
-      const { instance } = setup();
-      instance.deleteTeam(getMockTeam());
-
-      expect(instance.props.deleteTeam).toHaveBeenCalledWith(1);
-    });
-  });
-
-  describe('on search query change', () => {
-    it('should call setSearchQuery', () => {
-      const { instance } = setup();
-
-      instance.onSearchQueryChange('test');
-
-      expect(instance.props.setSearchQuery).toHaveBeenCalledWith('test');
-    });
+it('should call delete team', async () => {
+  const mockDelete = jest.fn();
+  const mockTeam = getMockTeam();
+  setup({ deleteTeam: mockDelete, teams: [mockTeam], teamsCount: 1, hasFetched: true });
+  await userEvent.click(screen.getByRole('button', { name: `Delete team ${mockTeam.name}` }));
+  await userEvent.click(screen.getByRole('button', { name: 'Delete' }));
+  await waitFor(() => {
+    expect(mockDelete).toHaveBeenCalledWith(mockTeam.id);
   });
 });
diff --git a/public/app/features/teams/TeamList.tsx b/public/app/features/teams/TeamList.tsx
index 99913f21f523..7f2cda0992b0 100644
--- a/public/app/features/teams/TeamList.tsx
+++ b/public/app/features/teams/TeamList.tsx
@@ -125,7 +125,7 @@ export class TeamList extends PureComponent<Props, State> {
         )}
         <td className="text-right">
           <DeleteButton
-            aria-label="Delete team"
+            aria-label={`Delete team ${team.name}`}
             size="sm"
             disabled={!canDelete}
             onConfirm={() => this.deleteTeam(team)}
diff --git a/public/app/features/teams/__snapshots__/TeamList.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamList.test.tsx.snap
deleted file mode 100644
index 7e7b2c6d41f6..000000000000
--- a/public/app/features/teams/__snapshots__/TeamList.test.tsx.snap
+++ /dev/null
@@ -1,666 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<Page
-  navModel={
-    Object {
-      "main": Object {
-        "text": "Configuration",
-      },
-      "node": Object {
-        "text": "Team List",
-      },
-    }
-  }
->
-  <PageContents
-    isLoading={true}
-  />
-</Page>
-`;
-
-exports[`Render should render teams table 1`] = `
-<Page
-  navModel={
-    Object {
-      "main": Object {
-        "text": "Configuration",
-      },
-      "node": Object {
-        "text": "Team List",
-      },
-    }
-  }
->
-  <PageContents
-    isLoading={false}
-  >
-    <div
-      className="page-action-bar"
-    >
-      <div
-        className="gf-form gf-form--grow"
-      >
-        <FilterInput
-          onChange={[Function]}
-          placeholder="Search teams"
-          value=""
-        />
-      </div>
-      <LinkButton
-        disabled={true}
-        href="#"
-      >
-        New Team
-      </LinkButton>
-    </div>
-    <div
-      className="admin-list-table"
-    >
-      <VerticalGroup
-        spacing="md"
-      >
-        <table
-          className="filter-table filter-table--hover form-inline"
-        >
-          <thead>
-            <tr>
-              <th />
-              <th>
-                Name
-              </th>
-              <th>
-                Email
-              </th>
-              <th>
-                Members
-              </th>
-              <th
-                style={
-                  Object {
-                    "width": "1%",
-                  }
-                }
-              />
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              key="1"
-            >
-              <td
-                className="width-4 text-center link-td"
-              >
-                <a
-                  href="org/teams/edit/1"
-                >
-                  <img
-                    alt="Team avatar"
-                    className="filter-table__avatar"
-                    src="some/url/"
-                  />
-                </a>
-              </td>
-              <td
-                className="link-td"
-              >
-                <a
-                  href="org/teams/edit/1"
-                >
-                  test-1
-                </a>
-              </td>
-              <td
-                className="link-td"
-              >
-                <a
-                  href="org/teams/edit/1"
-                >
-                  test-1@test.com
-                </a>
-              </td>
-              <td
-                className="link-td"
-              >
-                <a
-                  href="org/teams/edit/1"
-                >
-                  1
-                </a>
-              </td>
-              <td
-                className="text-right"
-              >
-                <DeleteButton
-                  aria-label="Delete team"
-                  disabled={false}
-                  onConfirm={[Function]}
-                  size="sm"
-                />
-              </td>
-            </tr>
-            <tr
-              key="2"
-            >
-              <td
-                className="width-4 text-center link-td"
-              >
-                <a
-                  href="org/teams/edit/2"
-                >
-                  <img
-                    alt="Team avatar"
-                    className="filter-table__avatar"
-                    src="some/url/"
-                  />
-                </a>
-              </td>
-              <td
-                className="link-td"
-              >
-                <a
-                  href="org/teams/edit/2"
-                >
-                  test-2
-                </a>
-              </td>
-              <td
-                className="link-td"
-              >
-                <a
-                  href="org/teams/edit/2"
-                >
-                  test-2@test.com
-                </a>
-              </td>
-              <td
-                className="link-td"
-              >
-                <a
-                  href="org/teams/edit/2"
-                >
-                  2
-                </a>
-              </td>
-              <td
-                className="text-right"
-              >
-                <DeleteButton
-                  aria-label="Delete team"
-                  disabled={false}
-                  onConfirm={[Function]}
-                  size="sm"
-                />
-              </td>
-            </tr>
-            <tr
-              key="3"
-            >
-              <td
-                className="width-4 text-center link-td"
-              >
-                <a
-                  href="org/teams/edit/3"
-                >
-                  <img
-                    alt="Team avatar"
-                    className="filter-table__avatar"
-                    src="some/url/"
-                  />
-                </a>
-              </td>
-              <td
-                className="link-td"
-              >
-                <a
-                  href="org/teams/edit/3"
-                >
-                  test-3
-                </a>
-              </td>
-              <td
-                className="link-td"
-              >
-                <a
-                  href="org/teams/edit/3"
-                >
-                  test-3@test.com
-                </a>
-              </td>
-              <td
-                className="link-td"
-              >
-                <a
-                  href="org/teams/edit/3"
-                >
-                  3
-                </a>
-              </td>
-              <td
-                className="text-right"
-              >
-                <DeleteButton
-                  aria-label="Delete team"
-                  disabled={false}
-                  onConfirm={[Function]}
-                  size="sm"
-                />
-              </td>
-            </tr>
-            <tr
-              key="4"
-            >
-              <td
-                className="width-4 text-center link-td"
-              >
-                <a
-                  href="org/teams/edit/4"
-                >
-                  <img
-                    alt="Team avatar"
-                    className="filter-table__avatar"
-                    src="some/url/"
-                  />
-                </a>
-              </td>
-              <td
-                className="link-td"
-              >
-                <a
-                  href="org/teams/edit/4"
-                >
-                  test-4
-                </a>
-              </td>
-              <td
-                className="link-td"
-              >
-                <a
-                  href="org/teams/edit/4"
-                >
-                  test-4@test.com
-                </a>
-              </td>
-              <td
-                className="link-td"
-              >
-                <a
-                  href="org/teams/edit/4"
-                >
-                  4
-                </a>
-              </td>
-              <td
-                className="text-right"
-              >
-                <DeleteButton
-                  aria-label="Delete team"
-                  disabled={false}
-                  onConfirm={[Function]}
-                  size="sm"
-                />
-              </td>
-            </tr>
-            <tr
-              key="5"
-            >
-              <td
-                className="width-4 text-center link-td"
-              >
-                <a
-                  href="org/teams/edit/5"
-                >
-                  <img
-                    alt="Team avatar"
-                    className="filter-table__avatar"
-                    src="some/url/"
-                  />
-                </a>
-              </td>
-              <td
-                className="link-td"
-              >
-                <a
-                  href="org/teams/edit/5"
-                >
-                  test-5
-                </a>
-              </td>
-              <td
-                className="link-td"
-              >
-                <a
-                  href="org/teams/edit/5"
-                >
-                  test-5@test.com
-                </a>
-              </td>
-              <td
-                className="link-td"
-              >
-                <a
-                  href="org/teams/edit/5"
-                >
-                  5
-                </a>
-              </td>
-              <td
-                className="text-right"
-              >
-                <DeleteButton
-                  aria-label="Delete team"
-                  disabled={false}
-                  onConfirm={[Function]}
-                  size="sm"
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <HorizontalGroup
-          justify="flex-end"
-        >
-          <Pagination
-            currentPage={1}
-            hideWhenSinglePage={true}
-            numberOfPages={1}
-            onNavigate={[MockFunction]}
-          />
-        </HorizontalGroup>
-      </VerticalGroup>
-    </div>
-  </PageContents>
-</Page>
-`;
-
-exports[`Render when feature toggle editorsCanAdmin is turned on and signedin user is a viewer should disable the new team button 1`] = `
-<Page
-  navModel={
-    Object {
-      "main": Object {
-        "text": "Configuration",
-      },
-      "node": Object {
-        "text": "Team List",
-      },
-    }
-  }
->
-  <PageContents
-    isLoading={false}
-  >
-    <div
-      className="page-action-bar"
-    >
-      <div
-        className="gf-form gf-form--grow"
-      >
-        <FilterInput
-          onChange={[Function]}
-          placeholder="Search teams"
-          value=""
-        />
-      </div>
-      <LinkButton
-        disabled={true}
-        href="#"
-      >
-        New Team
-      </LinkButton>
-    </div>
-    <div
-      className="admin-list-table"
-    >
-      <VerticalGroup
-        spacing="md"
-      >
-        <table
-          className="filter-table filter-table--hover form-inline"
-        >
-          <thead>
-            <tr>
-              <th />
-              <th>
-                Name
-              </th>
-              <th>
-                Email
-              </th>
-              <th>
-                Members
-              </th>
-              <th
-                style={
-                  Object {
-                    "width": "1%",
-                  }
-                }
-              />
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              key="1"
-            >
-              <td
-                className="width-4 text-center link-td"
-              >
-                <img
-                  alt="Team avatar"
-                  className="filter-table__avatar"
-                  src="some/url/"
-                />
-              </td>
-              <td
-                className="link-td"
-              >
-                <div
-                  style={
-                    Object {
-                      "padding": "0px 8px",
-                    }
-                  }
-                >
-                  test-1
-                </div>
-              </td>
-              <td
-                className="link-td"
-              >
-                <div
-                  style={
-                    Object {
-                      "padding": "0px 8px",
-                    }
-                  }
-                >
-                  test-1@test.com
-                </div>
-              </td>
-              <td
-                className="link-td"
-              >
-                <div
-                  style={
-                    Object {
-                      "padding": "0px 8px",
-                    }
-                  }
-                >
-                  1
-                </div>
-              </td>
-              <td
-                className="text-right"
-              >
-                <DeleteButton
-                  aria-label="Delete team"
-                  disabled={true}
-                  onConfirm={[Function]}
-                  size="sm"
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <HorizontalGroup
-          justify="flex-end"
-        >
-          <Pagination
-            currentPage={1}
-            hideWhenSinglePage={true}
-            numberOfPages={1}
-            onNavigate={[MockFunction]}
-          />
-        </HorizontalGroup>
-      </VerticalGroup>
-    </div>
-  </PageContents>
-</Page>
-`;
-
-exports[`Render when feature toggle editorsCanAdmin is turned on and signedin user is not viewer should enable the new team button 1`] = `
-<Page
-  navModel={
-    Object {
-      "main": Object {
-        "text": "Configuration",
-      },
-      "node": Object {
-        "text": "Team List",
-      },
-    }
-  }
->
-  <PageContents
-    isLoading={false}
-  >
-    <div
-      className="page-action-bar"
-    >
-      <div
-        className="gf-form gf-form--grow"
-      >
-        <FilterInput
-          onChange={[Function]}
-          placeholder="Search teams"
-          value=""
-        />
-      </div>
-      <LinkButton
-        disabled={false}
-        href="org/teams/new"
-      >
-        New Team
-      </LinkButton>
-    </div>
-    <div
-      className="admin-list-table"
-    >
-      <VerticalGroup
-        spacing="md"
-      >
-        <table
-          className="filter-table filter-table--hover form-inline"
-        >
-          <thead>
-            <tr>
-              <th />
-              <th>
-                Name
-              </th>
-              <th>
-                Email
-              </th>
-              <th>
-                Members
-              </th>
-              <th
-                style={
-                  Object {
-                    "width": "1%",
-                  }
-                }
-              />
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              key="1"
-            >
-              <td
-                className="width-4 text-center link-td"
-              >
-                <img
-                  alt="Team avatar"
-                  className="filter-table__avatar"
-                  src="some/url/"
-                />
-              </td>
-              <td
-                className="link-td"
-              >
-                <div
-                  style={
-                    Object {
-                      "padding": "0px 8px",
-                    }
-                  }
-                >
-                  test-1
-                </div>
-              </td>
-              <td
-                className="link-td"
-              >
-                <div
-                  style={
-                    Object {
-                      "padding": "0px 8px",
-                    }
-                  }
-                >
-                  test-1@test.com
-                </div>
-              </td>
-              <td
-                className="link-td"
-              >
-                <div
-                  style={
-                    Object {
-                      "padding": "0px 8px",
-                    }
-                  }
-                >
-                  1
-                </div>
-              </td>
-              <td
-                className="text-right"
-              >
-                <DeleteButton
-                  aria-label="Delete team"
-                  disabled={true}
-                  onConfirm={[Function]}
-                  size="sm"
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <HorizontalGroup
-          justify="flex-end"
-        >
-          <Pagination
-            currentPage={1}
-            hideWhenSinglePage={true}
-            numberOfPages={1}
-            onNavigate={[MockFunction]}
-          />
-        </HorizontalGroup>
-      </VerticalGroup>
-    </div>
-  </PageContents>
-</Page>
-`;