From c4758430c5dde49c3040b1e742e56c34b78a91b4 Mon Sep 17 00:00:00 2001 From: Leodegario Pasakdal Date: Wed, 14 Sep 2022 22:05:04 +0200 Subject: [PATCH 1/2] render SaveDashboardErrorProxy only when error is not yet handled --- .../SaveDashboardDrawer.test.tsx | 95 +++++++++++++++++++ .../SaveDashboard/SaveDashboardDrawer.tsx | 2 +- .../SaveDashboard/useDashboardSave.tsx | 2 +- 3 files changed, 97 insertions(+), 2 deletions(-) create mode 100644 public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.test.tsx diff --git a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.test.tsx b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.test.tsx new file mode 100644 index 000000000000..aa976928e43d --- /dev/null +++ b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.test.tsx @@ -0,0 +1,95 @@ +import { render, waitFor, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import React from 'react'; +import { Provider } from 'react-redux'; + +import { configureStore } from 'app/store/configureStore'; + +import { DashboardModel } from '../../state'; + +import { SaveDashboardDrawer } from './SaveDashboardDrawer'; + +jest.mock('app/core/core', () => ({ + ...jest.requireActual('app/core/core'), + contextSrv: {}, +})); + +jest.mock('@grafana/runtime', () => ({ + ...jest.requireActual('@grafana/runtime'), + getBackendSrv: () => ({ + post: mockPost, + }), +})); + +jest.mock('app/core/services/backend_srv', () => ({ + backendSrv: { + getDashboardByUid: jest.fn().mockResolvedValue({ dashboard: {} }), + }, +})); +const mockOnDismiss = jest.fn(); +const mockPost = jest.fn(); + +const setup = async () => { + const mockDashboard = new DashboardModel({ + uid: 'mockDashboardUid', + version: 1, + }); + const store = configureStore(); + + const { rerender } = await waitFor(() => + render( + + {' '} + + ) + ); + + return { rerender, mockDashboard, store }; +}; + +describe('SaveDashboardDrawer', () => { + beforeEach(() => { + mockPost.mockClear(); + }); + + it("renders SaveDashboardErrorProxy if there's an error and it not yet handled", async () => { + jest.spyOn(console, 'error').mockImplementation(); + mockPost.mockRejectedValueOnce({ + status: 412, + data: { + status: 'plugin-dashboard', + }, + config: {}, + }); + + const { rerender, store, mockDashboard } = await setup(); + + await userEvent.click(screen.getByRole('button', { name: /save/i })); + + expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: /save as/i })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: /overwrite/i })).toBeInTheDocument(); + + rerender( + + {' '} + + ); + + mockPost.mockClear(); + mockPost.mockRejectedValueOnce({ + status: 412, + data: { + status: 'plugin-dashboard', + }, + isHandled: true, + config: {}, + }); + + await userEvent.click(screen.getByRole('button', { name: /save/i })); + + expect(screen.getByText(/save dashboard/i)).toBeInTheDocument(); + expect(screen.queryByRole('button', { name: /save as/i })).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: /overwrite/i })).not.toBeInTheDocument(); + }); +}); diff --git a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.tsx b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.tsx index 6addf5d65a80..1d5adc2269e1 100644 --- a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.tsx +++ b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.tsx @@ -126,7 +126,7 @@ export const SaveDashboardDrawer = ({ dashboard, onDismiss, onSaveSuccess, isCop ); }; - if (state.error && isFetchError(state.error)) { + if (state.error && isFetchError(state.error) && !state.error.isHandled) { return ( { const notifyApp = useAppNotification(); useEffect(() => { - if (state.error) { + if (state.error && !state.loading) { notifyApp.error(state.error.message ?? 'Error saving dashboard'); } if (state.value) { From 50f365f90f98e1f7367e598c9c88d9c11fb551b4 Mon Sep 17 00:00:00 2001 From: Leodegario Pasakdal Date: Wed, 21 Sep 2022 17:58:22 +0200 Subject: [PATCH 2/2] improve dashbaoard drawer test --- .../SaveDashboardDrawer.test.tsx | 77 ++++++++++--------- 1 file changed, 39 insertions(+), 38 deletions(-) diff --git a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.test.tsx b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.test.tsx index aa976928e43d..38406ee22d5e 100644 --- a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.test.tsx +++ b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardDrawer.test.tsx @@ -26,65 +26,66 @@ jest.mock('app/core/services/backend_srv', () => ({ getDashboardByUid: jest.fn().mockResolvedValue({ dashboard: {} }), }, })); -const mockOnDismiss = jest.fn(); -const mockPost = jest.fn(); -const setup = async () => { - const mockDashboard = new DashboardModel({ +const store = configureStore(); +const mockPost = jest.fn(); +const buildMocks = () => ({ + dashboard: new DashboardModel({ uid: 'mockDashboardUid', version: 1, - }); - const store = configureStore(); + }), + error: { + status: 412, + data: { + status: 'plugin-dashboard', + }, + config: {}, + }, + onDismiss: jest.fn(), +}); - const { rerender } = await waitFor(() => - render( - - {' '} - - ) - ); +interface CompProps { + dashboard: DashboardModel; + onDismiss: () => void; +} +const CompWithProvider = (props: CompProps) => ( + + + +); - return { rerender, mockDashboard, store }; -}; +const setup = (options: CompProps) => waitFor(() => render()); describe('SaveDashboardDrawer', () => { beforeEach(() => { mockPost.mockClear(); + jest.spyOn(console, 'error').mockImplementation(); }); - it("renders SaveDashboardErrorProxy if there's an error and it not yet handled", async () => { - jest.spyOn(console, 'error').mockImplementation(); - mockPost.mockRejectedValueOnce({ - status: 412, - data: { - status: 'plugin-dashboard', - }, - config: {}, - }); + it("renders a modal if there's an unhandled error", async () => { + const { onDismiss, dashboard, error } = buildMocks(); + mockPost.mockRejectedValueOnce(error); - const { rerender, store, mockDashboard } = await setup(); + await setup({ dashboard, onDismiss }); await userEvent.click(screen.getByRole('button', { name: /save/i })); expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument(); expect(screen.getByRole('button', { name: /save as/i })).toBeInTheDocument(); expect(screen.getByRole('button', { name: /overwrite/i })).toBeInTheDocument(); + }); - rerender( - - {' '} - - ); + it('should render corresponding save modal once the errror is handled', async () => { + const { onDismiss, dashboard, error } = buildMocks(); + mockPost.mockRejectedValueOnce(error); + + const { rerender } = await setup({ dashboard, onDismiss }); + + await userEvent.click(screen.getByRole('button', { name: /save/i })); + rerender(); mockPost.mockClear(); - mockPost.mockRejectedValueOnce({ - status: 412, - data: { - status: 'plugin-dashboard', - }, - isHandled: true, - config: {}, - }); + mockPost.mockRejectedValueOnce({ ...error, isHandled: true }); await userEvent.click(screen.getByRole('button', { name: /save/i }));