From 22fbcebabf554093701a72338b2ef1282b2e4b3d Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Mon, 6 Jun 2022 15:27:40 +0100 Subject: [PATCH] Chore: convert DashboardsTable test to RTL (#50252) * convert DashboardsTable test to RTL * ensure render does not throw --- .betterer.results | 3 - .../datasources/DashboardsTable.test.tsx | 142 ++++++++++++------ .../features/datasources/DashboardsTable.tsx | 8 +- .../DashboardsTable.test.tsx.snap | 88 ----------- 4 files changed, 99 insertions(+), 142 deletions(-) delete mode 100644 public/app/features/datasources/__snapshots__/DashboardsTable.test.tsx.snap diff --git a/.betterer.results b/.betterer.results index 320c761b160..97b205e4c05 100644 --- a/.betterer.results +++ b/.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"] ], diff --git a/public/app/features/datasources/DashboardsTable.test.tsx b/public/app/features/datasources/DashboardsTable.test.tsx index 4e6fafe722f..63ff4bdce52 100644 --- a/public/app/features/datasources/DashboardsTable.test.tsx +++ b/public/app/features/datasources/DashboardsTable.test.tsx @@ -1,65 +1,107 @@ -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[], - onImport: jest.fn(), - onRemove: jest.fn(), - }; - - Object.assign(props, propOverrides); - - return shallow(); +const props: Props = { + dashboards: [], + onImport: jest.fn(), + onRemove: jest.fn(), }; -describe('Render', () => { - it('should render component', () => { - const wrapper = setup(); +const setup = (propOverrides?: object) => { + Object.assign(props, propOverrides); - expect(wrapper).toMatchSnapshot(); + render(); +}; + +describe('DashboardsTable', () => { + let mockDashboard: PluginDashboard; + + beforeEach(() => { + mockDashboard = { + dashboardId: 0, + description: '', + folderId: 0, + imported: false, + importedRevision: 0, + importedUri: '', + importedUrl: '', + path: 'dashboards/carbon_metrics.json', + pluginId: 'graphite', + removed: false, + revision: 0, + slug: '', + title: 'Graphite Carbon Metrics', + uid: '', + }; }); - it('should render table', () => { - const wrapper = setup({ - dashboards: [ - { - dashboardId: 0, - description: '', - folderId: 0, - imported: false, - importedRevision: 0, - importedUri: '', - importedUrl: '', - path: 'dashboards/carbon_metrics.json', - pluginId: 'graphite', - removed: false, - revision: 1, - 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', - }, - ], + 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(wrapper).toMatchSnapshot(); + 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, + }); + + const deleteButton = screen.getByRole('button', { name: 'Delete dashboard' }); + expect(deleteButton).toBeInTheDocument(); + await userEvent.click(deleteButton); + expect(props.onRemove).toHaveBeenCalledWith(mockDashboards[0]); }); }); diff --git a/public/app/features/datasources/DashboardsTable.tsx b/public/app/features/datasources/DashboardsTable.tsx index 3e45624871c..fb9f010a87c 100644 --- a/public/app/features/datasources/DashboardsTable.tsx +++ b/public/app/features/datasources/DashboardsTable.tsx @@ -42,7 +42,13 @@ const DashboardsTable: FC = ({ dashboards, onImport, onRemove }) => { )} {dashboard.imported && ( -