From 34309282940ea1652646cdf6ca3759f8c7d00694 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 15 Jun 2022 09:54:26 +0100
Subject: [PATCH] Convert InviteesTable test to RTL (#50674)

---
 .betterer.results                             |   3 -
 public/app/features/invites/InviteeRow.tsx    |   8 +-
 .../features/invites/InviteesTable.test.tsx   |  70 +++++--
 public/app/features/invites/InviteesTable.tsx |   2 +-
 .../__snapshots__/InviteesTable.test.tsx.snap | 180 ------------------
 5 files changed, 57 insertions(+), 206 deletions(-)
 delete mode 100644 public/app/features/invites/__snapshots__/InviteesTable.test.tsx.snap

diff --git a/.betterer.results b/.betterer.results
index b0446b22725..e8f68744fd2 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -137,9 +137,6 @@ exports[`no enzyme tests`] = {
     "public/app/features/folders/FolderSettingsPage.test.tsx:1109052730": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/features/invites/InviteesTable.test.tsx:3612992381": [
-      [0, 19, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/features/org/OrgDetailsPage.test.tsx:3835042085": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
diff --git a/public/app/features/invites/InviteeRow.tsx b/public/app/features/invites/InviteeRow.tsx
index 51425cee932..2b8193f1d17 100644
--- a/public/app/features/invites/InviteeRow.tsx
+++ b/public/app/features/invites/InviteeRow.tsx
@@ -32,7 +32,13 @@ class InviteeRow extends PureComponent<Props> {
           &nbsp;
         </td>
         <td>
-          <Button variant="destructive" size="sm" icon="times" onClick={() => revokeInvite(invitee.code)} />
+          <Button
+            variant="destructive"
+            size="sm"
+            icon="times"
+            onClick={() => revokeInvite(invitee.code)}
+            aria-label="Revoke Invite"
+          />
         </td>
       </tr>
     );
diff --git a/public/app/features/invites/InviteesTable.test.tsx b/public/app/features/invites/InviteesTable.test.tsx
index 3cdc53b069b..cfc96246fc2 100644
--- a/public/app/features/invites/InviteesTable.test.tsx
+++ b/public/app/features/invites/InviteesTable.test.tsx
@@ -1,34 +1,62 @@
-import { shallow } from 'enzyme';
+import { render, screen, within } from '@testing-library/react';
 import React from 'react';
+import { Provider } from 'react-redux';
 
-import { Invitee } from 'app/types';
+import { configureStore } from 'app/store/configureStore';
 
 import { getMockInvitees } from '../users/__mocks__/userMocks';
 
-import InviteesTable, { Props } from './InviteesTable';
+import InviteesTable from './InviteesTable';
 
-const setup = (propOverrides?: object) => {
-  const props: Props = {
-    invitees: [] as Invitee[],
+describe('InviteesTable', () => {
+  const mockInvitees = getMockInvitees(5);
+  const setup = () => {
+    const store = configureStore();
+
+    render(
+      <Provider store={store}>
+        <InviteesTable invitees={mockInvitees} />
+      </Provider>
+    );
   };
 
-  Object.assign(props, propOverrides);
-
-  return shallow(<InviteesTable {...props} />);
-};
-
-describe('Render', () => {
-  it('should render component', () => {
-    const wrapper = setup();
-
-    expect(wrapper).toMatchSnapshot();
+  it('should render without throwing', () => {
+    expect(() => setup()).not.toThrow();
   });
 
-  it('should render invitees', () => {
-    const wrapper = setup({
-      invitees: getMockInvitees(5),
-    });
+  it('should render invitees username and email', () => {
+    setup();
 
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByRole('columnheader', { name: 'Email' })).toBeInTheDocument();
+    expect(screen.getByRole('columnheader', { name: 'Name' })).toBeInTheDocument();
+
+    mockInvitees.forEach((mockInvitee) => {
+      expect(screen.getByRole('cell', { name: mockInvitee.name })).toBeInTheDocument();
+      expect(screen.getByRole('cell', { name: mockInvitee.email })).toBeInTheDocument();
+    });
+  });
+
+  it('should render a `Copy invite` button for each row', () => {
+    setup();
+
+    const tableBody = screen.getByTestId('InviteesTable-body');
+    const rows = within(tableBody).getAllByRole('row');
+    expect(rows.length).toEqual(6);
+
+    rows.forEach((row) => {
+      expect(within(row).getByRole('button', { name: 'Copy Invite' })).toBeInTheDocument();
+    });
+  });
+
+  it('should render a `Revoke invite` button for each row', () => {
+    setup();
+
+    const tableBody = screen.getByTestId('InviteesTable-body');
+    const rows = within(tableBody).getAllByRole('row');
+    expect(rows.length).toEqual(6);
+
+    rows.forEach((row) => {
+      expect(within(row).getByRole('button', { name: 'Revoke Invite' })).toBeInTheDocument();
+    });
   });
 });
diff --git a/public/app/features/invites/InviteesTable.tsx b/public/app/features/invites/InviteesTable.tsx
index 3720c239fac..8b8cb727d69 100644
--- a/public/app/features/invites/InviteesTable.tsx
+++ b/public/app/features/invites/InviteesTable.tsx
@@ -22,7 +22,7 @@ export default class InviteesTable extends PureComponent<Props> {
             <th style={{ width: '34px' }} />
           </tr>
         </thead>
-        <tbody>
+        <tbody data-testid="InviteesTable-body">
           {invitees.map((invitee, index) => {
             return <InviteeRow key={`${invitee.id}-${index}`} invitee={invitee} />;
           })}
diff --git a/public/app/features/invites/__snapshots__/InviteesTable.test.tsx.snap b/public/app/features/invites/__snapshots__/InviteesTable.test.tsx.snap
deleted file mode 100644
index a32dbdf371d..00000000000
--- a/public/app/features/invites/__snapshots__/InviteesTable.test.tsx.snap
+++ /dev/null
@@ -1,180 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<table
-  className="filter-table form-inline"
->
-  <thead>
-    <tr>
-      <th>
-        Email
-      </th>
-      <th>
-        Name
-      </th>
-      <th />
-      <th
-        style={
-          Object {
-            "width": "34px",
-          }
-        }
-      />
-    </tr>
-  </thead>
-  <tbody />
-</table>
-`;
-
-exports[`Render should render invitees 1`] = `
-<table
-  className="filter-table form-inline"
->
-  <thead>
-    <tr>
-      <th>
-        Email
-      </th>
-      <th>
-        Name
-      </th>
-      <th />
-      <th
-        style={
-          Object {
-            "width": "34px",
-          }
-        }
-      />
-    </tr>
-  </thead>
-  <tbody>
-    <Connect(InviteeRow)
-      invitee={
-        Object {
-          "code": "asdfasdfsadf-0",
-          "createdOn": "2018-10-02",
-          "email": "invitee-0@test.com",
-          "emailSent": true,
-          "emailSentOn": "2018-10-02",
-          "id": 0,
-          "invitedByEmail": "admin@grafana.com",
-          "invitedByLogin": "admin",
-          "invitedByName": "admin",
-          "name": "invitee-0",
-          "orgId": 1,
-          "role": "viewer",
-          "status": "not accepted",
-          "url": "localhost/invite/0",
-        }
-      }
-      key="0-0"
-    />
-    <Connect(InviteeRow)
-      invitee={
-        Object {
-          "code": "asdfasdfsadf-1",
-          "createdOn": "2018-10-02",
-          "email": "invitee-1@test.com",
-          "emailSent": true,
-          "emailSentOn": "2018-10-02",
-          "id": 1,
-          "invitedByEmail": "admin@grafana.com",
-          "invitedByLogin": "admin",
-          "invitedByName": "admin",
-          "name": "invitee-1",
-          "orgId": 1,
-          "role": "viewer",
-          "status": "not accepted",
-          "url": "localhost/invite/1",
-        }
-      }
-      key="1-1"
-    />
-    <Connect(InviteeRow)
-      invitee={
-        Object {
-          "code": "asdfasdfsadf-2",
-          "createdOn": "2018-10-02",
-          "email": "invitee-2@test.com",
-          "emailSent": true,
-          "emailSentOn": "2018-10-02",
-          "id": 2,
-          "invitedByEmail": "admin@grafana.com",
-          "invitedByLogin": "admin",
-          "invitedByName": "admin",
-          "name": "invitee-2",
-          "orgId": 1,
-          "role": "viewer",
-          "status": "not accepted",
-          "url": "localhost/invite/2",
-        }
-      }
-      key="2-2"
-    />
-    <Connect(InviteeRow)
-      invitee={
-        Object {
-          "code": "asdfasdfsadf-3",
-          "createdOn": "2018-10-02",
-          "email": "invitee-3@test.com",
-          "emailSent": true,
-          "emailSentOn": "2018-10-02",
-          "id": 3,
-          "invitedByEmail": "admin@grafana.com",
-          "invitedByLogin": "admin",
-          "invitedByName": "admin",
-          "name": "invitee-3",
-          "orgId": 1,
-          "role": "viewer",
-          "status": "not accepted",
-          "url": "localhost/invite/3",
-        }
-      }
-      key="3-3"
-    />
-    <Connect(InviteeRow)
-      invitee={
-        Object {
-          "code": "asdfasdfsadf-4",
-          "createdOn": "2018-10-02",
-          "email": "invitee-4@test.com",
-          "emailSent": true,
-          "emailSentOn": "2018-10-02",
-          "id": 4,
-          "invitedByEmail": "admin@grafana.com",
-          "invitedByLogin": "admin",
-          "invitedByName": "admin",
-          "name": "invitee-4",
-          "orgId": 1,
-          "role": "viewer",
-          "status": "not accepted",
-          "url": "localhost/invite/4",
-        }
-      }
-      key="4-4"
-    />
-    <Connect(InviteeRow)
-      invitee={
-        Object {
-          "code": "asdfasdfsadf-5",
-          "createdOn": "2018-10-02",
-          "email": "invitee-5@test.com",
-          "emailSent": true,
-          "emailSentOn": "2018-10-02",
-          "id": 5,
-          "invitedByEmail": "admin@grafana.com",
-          "invitedByLogin": "admin",
-          "invitedByName": "admin",
-          "name": "invitee-5",
-          "orgId": 1,
-          "role": "viewer",
-          "status": "not accepted",
-          "url": "localhost/invite/5",
-        }
-      }
-      key="5-5"
-    />
-  </tbody>
-</table>
-`;