From a19c3dae5a8ba27b9b52a5dd44d286e3dded9a8f Mon Sep 17 00:00:00 2001
From: polibb <13227501+polibb@users.noreply.github.com>
Date: Tue, 31 May 2022 18:58:59 +0300
Subject: [PATCH] Convert Enzyme UsersTable test to RTL (#49836)

* Convert Enzyme UsersTable test to RTL

* Fixes on UsersTable test; no additions

* remove snapshot of UsersTable test
---
 .betterer.results                             |   3 -
 public/app/features/users/UsersTable.test.tsx |  34 +-
 .../__snapshots__/UsersTable.test.tsx.snap    | 466 ------------------
 3 files changed, 18 insertions(+), 485 deletions(-)
 delete mode 100644 public/app/features/users/__snapshots__/UsersTable.test.tsx.snap

diff --git a/.betterer.results b/.betterer.results
index 205b4896bb3..95c4515507e 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -173,9 +173,6 @@ exports[`no enzyme tests`] = {
     "public/app/features/users/UsersListPage.test.tsx:2518052139": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/features/users/UsersTable.test.tsx:263958312": [
-      [0, 19, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/plugins/datasource/cloud-monitoring/components/Aggregation.test.tsx:3822406835": [
       [1, 19, 13, "RegExp match", "2409514259"]
     ],
diff --git a/public/app/features/users/UsersTable.test.tsx b/public/app/features/users/UsersTable.test.tsx
index 8782c0bdb64..c13461dbd6c 100644
--- a/public/app/features/users/UsersTable.test.tsx
+++ b/public/app/features/users/UsersTable.test.tsx
@@ -1,7 +1,7 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import { ConfirmModal } from '@grafana/ui';
 import { OrgUser } from 'app/types';
 
 import UsersTable, { Props } from './UsersTable';
@@ -24,30 +24,32 @@ const setup = (propOverrides?: object) => {
 
   Object.assign(props, propOverrides);
 
-  return shallow(<UsersTable {...props} />);
+  render(<UsersTable {...props} />);
 };
 
 describe('Render', () => {
   it('should render component', () => {
-    const wrapper = setup();
-
-    expect(wrapper).toMatchSnapshot();
+    expect(() => setup()).not.toThrow();
   });
 
-  it('should render users table', () => {
-    const wrapper = setup({
-      users: getMockUsers(5),
-    });
+  it('should render users in table', () => {
+    const usersData = getMockUsers(5);
+    setup({ users: usersData });
 
-    expect(wrapper).toMatchSnapshot();
+    usersData.forEach((user) => {
+      expect(screen.getByText(user.name)).toBeInTheDocument();
+    });
   });
 });
 
 describe('Remove modal', () => {
-  it('should render correct amount', () => {
-    const wrapper = setup({
-      users: getMockUsers(3),
-    });
-    expect(wrapper.find(ConfirmModal).length).toEqual(0);
+  it('should render confirm check on delete', async () => {
+    const usersData = getMockUsers(3);
+    setup({ users: usersData });
+    const user = userEvent.setup();
+
+    await user.click(screen.getAllByRole('button', { name: /delete/i })[0]);
+
+    expect(screen.getByText(/are you sure/i)).toBeInTheDocument();
   });
 });
diff --git a/public/app/features/users/__snapshots__/UsersTable.test.tsx.snap b/public/app/features/users/__snapshots__/UsersTable.test.tsx.snap
deleted file mode 100644
index d4555243994..00000000000
--- a/public/app/features/users/__snapshots__/UsersTable.test.tsx.snap
+++ /dev/null
@@ -1,466 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<Fragment>
-  <table
-    className="filter-table form-inline"
-  >
-    <thead>
-      <tr>
-        <th />
-        <th>
-          Login
-        </th>
-        <th>
-          Email
-        </th>
-        <th>
-          Name
-        </th>
-        <th>
-          Seen
-        </th>
-        <th>
-          Role
-        </th>
-        <th
-          style={
-            Object {
-              "width": "34px",
-            }
-          }
-        />
-      </tr>
-    </thead>
-    <tbody />
-  </table>
-</Fragment>
-`;
-
-exports[`Render should render users table 1`] = `
-<Fragment>
-  <table
-    className="filter-table form-inline"
-  >
-    <thead>
-      <tr>
-        <th />
-        <th>
-          Login
-        </th>
-        <th>
-          Email
-        </th>
-        <th>
-          Name
-        </th>
-        <th>
-          Seen
-        </th>
-        <th>
-          Role
-        </th>
-        <th
-          style={
-            Object {
-              "width": "34px",
-            }
-          }
-        />
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        key="0-0"
-      >
-        <td
-          className="width-2 text-center"
-        >
-          <img
-            alt="User avatar"
-            className="filter-table__avatar"
-            src="url/to/avatar"
-          />
-        </td>
-        <td
-          className="max-width-6"
-        >
-          <span
-            className="ellipsis"
-            title="user-0"
-          >
-            user-0
-          </span>
-        </td>
-        <td
-          className="max-width-5"
-        >
-          <span
-            className="ellipsis"
-            title="user-0@test.com"
-          >
-            user-0@test.com
-          </span>
-        </td>
-        <td
-          className="max-width-5"
-        >
-          <span
-            className="ellipsis"
-            title="user-0 test"
-          >
-            user-0 test
-          </span>
-        </td>
-        <td
-          className="width-1"
-        />
-        <td
-          className="width-8"
-        >
-          <OrgRolePicker
-            aria-label="Role"
-            disabled={false}
-            onChange={[Function]}
-            value="Admin"
-          />
-        </td>
-        <td>
-          <Button
-            aria-label="Delete user"
-            icon="times"
-            onClick={[Function]}
-            size="sm"
-            variant="destructive"
-          />
-        </td>
-      </tr>
-      <tr
-        key="1-1"
-      >
-        <td
-          className="width-2 text-center"
-        >
-          <img
-            alt="User avatar"
-            className="filter-table__avatar"
-            src="url/to/avatar"
-          />
-        </td>
-        <td
-          className="max-width-6"
-        >
-          <span
-            className="ellipsis"
-            title="user-1"
-          >
-            user-1
-          </span>
-        </td>
-        <td
-          className="max-width-5"
-        >
-          <span
-            className="ellipsis"
-            title="user-1@test.com"
-          >
-            user-1@test.com
-          </span>
-        </td>
-        <td
-          className="max-width-5"
-        >
-          <span
-            className="ellipsis"
-            title="user-1 test"
-          >
-            user-1 test
-          </span>
-        </td>
-        <td
-          className="width-1"
-        />
-        <td
-          className="width-8"
-        >
-          <OrgRolePicker
-            aria-label="Role"
-            disabled={false}
-            onChange={[Function]}
-            value="Admin"
-          />
-        </td>
-        <td>
-          <Button
-            aria-label="Delete user"
-            icon="times"
-            onClick={[Function]}
-            size="sm"
-            variant="destructive"
-          />
-        </td>
-      </tr>
-      <tr
-        key="2-2"
-      >
-        <td
-          className="width-2 text-center"
-        >
-          <img
-            alt="User avatar"
-            className="filter-table__avatar"
-            src="url/to/avatar"
-          />
-        </td>
-        <td
-          className="max-width-6"
-        >
-          <span
-            className="ellipsis"
-            title="user-2"
-          >
-            user-2
-          </span>
-        </td>
-        <td
-          className="max-width-5"
-        >
-          <span
-            className="ellipsis"
-            title="user-2@test.com"
-          >
-            user-2@test.com
-          </span>
-        </td>
-        <td
-          className="max-width-5"
-        >
-          <span
-            className="ellipsis"
-            title="user-2 test"
-          >
-            user-2 test
-          </span>
-        </td>
-        <td
-          className="width-1"
-        />
-        <td
-          className="width-8"
-        >
-          <OrgRolePicker
-            aria-label="Role"
-            disabled={false}
-            onChange={[Function]}
-            value="Admin"
-          />
-        </td>
-        <td>
-          <Button
-            aria-label="Delete user"
-            icon="times"
-            onClick={[Function]}
-            size="sm"
-            variant="destructive"
-          />
-        </td>
-      </tr>
-      <tr
-        key="3-3"
-      >
-        <td
-          className="width-2 text-center"
-        >
-          <img
-            alt="User avatar"
-            className="filter-table__avatar"
-            src="url/to/avatar"
-          />
-        </td>
-        <td
-          className="max-width-6"
-        >
-          <span
-            className="ellipsis"
-            title="user-3"
-          >
-            user-3
-          </span>
-        </td>
-        <td
-          className="max-width-5"
-        >
-          <span
-            className="ellipsis"
-            title="user-3@test.com"
-          >
-            user-3@test.com
-          </span>
-        </td>
-        <td
-          className="max-width-5"
-        >
-          <span
-            className="ellipsis"
-            title="user-3 test"
-          >
-            user-3 test
-          </span>
-        </td>
-        <td
-          className="width-1"
-        />
-        <td
-          className="width-8"
-        >
-          <OrgRolePicker
-            aria-label="Role"
-            disabled={false}
-            onChange={[Function]}
-            value="Admin"
-          />
-        </td>
-        <td>
-          <Button
-            aria-label="Delete user"
-            icon="times"
-            onClick={[Function]}
-            size="sm"
-            variant="destructive"
-          />
-        </td>
-      </tr>
-      <tr
-        key="4-4"
-      >
-        <td
-          className="width-2 text-center"
-        >
-          <img
-            alt="User avatar"
-            className="filter-table__avatar"
-            src="url/to/avatar"
-          />
-        </td>
-        <td
-          className="max-width-6"
-        >
-          <span
-            className="ellipsis"
-            title="user-4"
-          >
-            user-4
-          </span>
-        </td>
-        <td
-          className="max-width-5"
-        >
-          <span
-            className="ellipsis"
-            title="user-4@test.com"
-          >
-            user-4@test.com
-          </span>
-        </td>
-        <td
-          className="max-width-5"
-        >
-          <span
-            className="ellipsis"
-            title="user-4 test"
-          >
-            user-4 test
-          </span>
-        </td>
-        <td
-          className="width-1"
-        />
-        <td
-          className="width-8"
-        >
-          <OrgRolePicker
-            aria-label="Role"
-            disabled={false}
-            onChange={[Function]}
-            value="Admin"
-          />
-        </td>
-        <td>
-          <Button
-            aria-label="Delete user"
-            icon="times"
-            onClick={[Function]}
-            size="sm"
-            variant="destructive"
-          />
-        </td>
-      </tr>
-      <tr
-        key="5-5"
-      >
-        <td
-          className="width-2 text-center"
-        >
-          <img
-            alt="User avatar"
-            className="filter-table__avatar"
-            src="url/to/avatar"
-          />
-        </td>
-        <td
-          className="max-width-6"
-        >
-          <span
-            className="ellipsis"
-            title="user-5"
-          >
-            user-5
-          </span>
-        </td>
-        <td
-          className="max-width-5"
-        >
-          <span
-            className="ellipsis"
-            title="user-5@test.com"
-          >
-            user-5@test.com
-          </span>
-        </td>
-        <td
-          className="max-width-5"
-        >
-          <span
-            className="ellipsis"
-            title="user-5 test"
-          >
-            user-5 test
-          </span>
-        </td>
-        <td
-          className="width-1"
-        />
-        <td
-          className="width-8"
-        >
-          <OrgRolePicker
-            aria-label="Role"
-            disabled={false}
-            onChange={[Function]}
-            value="Admin"
-          />
-        </td>
-        <td>
-          <Button
-            aria-label="Delete user"
-            icon="times"
-            onClick={[Function]}
-            size="sm"
-            variant="destructive"
-          />
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</Fragment>
-`;