Chore: convert DashboardsTable test to RTL (#50252)

* convert DashboardsTable test to RTL

* ensure render does not throw

.betterer.results

@@ -128,9 +128,6 @@ exports[`no enzyme tests`] = {
     "public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.test.tsx:2851646279": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/features/datasources/DashboardsTable.test.tsx:1950355032": [
-      [0, 19, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/features/datasources/DataSourceDashboards.test.tsx:1369048021": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],

public/app/features/datasources/DashboardsTable.test.tsx

@@ -1,33 +1,28 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import { PluginDashboard } from '../../types';
 
 import DashboardsTable, { Props } from './DashboardsTable';
 
-const setup = (propOverrides?: object) => {
 const props: Props = {
-    dashboards: [] as PluginDashboard[],
+  dashboards: [],
   onImport: jest.fn(),
   onRemove: jest.fn(),
 };
 
+const setup = (propOverrides?: object) => {
   Object.assign(props, propOverrides);
 
-  return shallow(<DashboardsTable {...props} />);
+  render(<DashboardsTable {...props} />);
 };
 
-describe('Render', () => {
-  it('should render component', () => {
-    const wrapper = setup();
+describe('DashboardsTable', () => {
+  let mockDashboard: PluginDashboard;
 
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('should render table', () => {
-    const wrapper = setup({
-      dashboards: [
-        {
+  beforeEach(() => {
+    mockDashboard = {
       dashboardId: 0,
       description: '',
       folderId: 0,
@@ -38,28 +33,75 @@ describe('Render', () => {
       path: 'dashboards/carbon_metrics.json',
       pluginId: 'graphite',
       removed: false,
-          revision: 1,
+      revision: 0,
       slug: '',
       title: 'Graphite Carbon Metrics',
-        },
-        {
-          dashboardId: 0,
-          description: '',
-          folderId: 0,
-          imported: true,
-          importedRevision: 0,
-          importedUri: '',
-          importedUrl: '',
-          path: 'dashboards/carbon_metrics.json',
-          pluginId: 'graphite',
-          removed: false,
-          revision: 1,
-          slug: '',
-          title: 'Graphite Carbon Metrics',
-        },
-      ],
+      uid: '',
+    };
+  });
+
+  it('should render with no dashboards provided', () => {
+    expect(() => setup()).not.toThrow();
+    expect(screen.queryAllByRole('row').length).toEqual(0);
+  });
+
+  it('should render a row for each dashboard provided', () => {
+    const mockDashboards = [mockDashboard, { ...mockDashboard, title: 'Graphite Carbon Metrics 2' }];
+    setup({
+      dashboards: mockDashboards,
+    });
+
+    expect(screen.getAllByRole('row').length).toEqual(2);
+    mockDashboards.forEach((dashboard) => {
+      expect(screen.getByRole('cell', { name: dashboard.title })).toBeInTheDocument();
+    });
+  });
+
+  it('shows an import button if the dashboard has not been imported yet', async () => {
+    const mockDashboards = [mockDashboard];
+    setup({
+      dashboards: mockDashboards,
+    });
+
+    const importButton = screen.getByRole('button', { name: 'Import' });
+    expect(importButton).toBeInTheDocument();
+    await userEvent.click(importButton);
+    expect(props.onImport).toHaveBeenCalledWith(mockDashboards[0], false);
+  });
+
+  it('shows a re-import button if the dashboard has been imported and the revision id has not changed', async () => {
+    const mockDashboards = [{ ...mockDashboard, imported: true }];
+    setup({
+      dashboards: mockDashboards,
+    });
+
+    const reimportButton = screen.getByRole('button', { name: 'Re-import' });
+    expect(reimportButton).toBeInTheDocument();
+    await userEvent.click(reimportButton);
+    expect(props.onImport).toHaveBeenCalledWith(mockDashboards[0], true);
+  });
+
+  it('shows an update button if the dashboard has been imported and the revision id has changed', async () => {
+    const mockDashboards = [{ ...mockDashboard, imported: true, revision: 1 }];
+    setup({
+      dashboards: mockDashboards,
+    });
+
+    const updateButton = screen.getByRole('button', { name: 'Update' });
+    expect(updateButton).toBeInTheDocument();
+    await userEvent.click(updateButton);
+    expect(props.onImport).toHaveBeenCalledWith(mockDashboards[0], true);
+  });
+
+  it('shows a delete button if the dashboard has been imported', async () => {
+    const mockDashboards = [{ ...mockDashboard, imported: true }];
+    setup({
+      dashboards: mockDashboards,
     });
 
-    expect(wrapper).toMatchSnapshot();
+    const deleteButton = screen.getByRole('button', { name: 'Delete dashboard' });
+    expect(deleteButton).toBeInTheDocument();
+    await userEvent.click(deleteButton);
+    expect(props.onRemove).toHaveBeenCalledWith(mockDashboards[0]);
   });
 });

public/app/features/datasources/DashboardsTable.tsx

@@ -42,7 +42,13 @@ const DashboardsTable: FC<Props> = ({ dashboards, onImport, onRemove }) => {
                   </Button>
                 )}
                 {dashboard.imported && (
-                  <Button icon="trash-alt" variant="destructive" size="sm" onClick={() => onRemove(dashboard)} />
+                  <Button
+                    aria-label="Delete dashboard"
+                    icon="trash-alt"
+                    variant="destructive"
+                    size="sm"
+                    onClick={() => onRemove(dashboard)}
+                  />
                 )}
               </td>
             </tr>

public/app/features/datasources/__snapshots__/DashboardsTable.test.tsx.snap

@@ -1,88 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<table
-  className="filter-table"
->
-  <tbody />
-</table>
-`;
-
-exports[`Render should render table 1`] = `
-<table
-  className="filter-table"
->
-  <tbody>
-    <tr
-      key="0-0"
-    >
-      <td
-        className="width-1"
-      >
-        <Icon
-          name="apps"
-        />
-      </td>
-      <td>
-        <span>
-          Graphite Carbon Metrics
-        </span>
-      </td>
-      <td
-        style={
-          Object {
-            "textAlign": "right",
-          }
-        }
-      >
-        <Button
-          onClick={[Function]}
-          size="sm"
-          variant="secondary"
-        >
-          Import
-        </Button>
-      </td>
-    </tr>
-    <tr
-      key="0-1"
-    >
-      <td
-        className="width-1"
-      >
-        <Icon
-          name="apps"
-        />
-      </td>
-      <td>
-        <a
-          href=""
-        >
-          Graphite Carbon Metrics
-        </a>
-      </td>
-      <td
-        style={
-          Object {
-            "textAlign": "right",
-          }
-        }
-      >
-        <Button
-          onClick={[Function]}
-          size="sm"
-          variant="secondary"
-        >
-          Update
-        </Button>
-        <Button
-          icon="trash-alt"
-          onClick={[Function]}
-          size="sm"
-          variant="destructive"
-        />
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;