diff --git a/frontend/packages/shared/src/hooks/useConfirmationDialogOnPageLeave.test.tsx b/frontend/packages/shared/src/hooks/useConfirmationDialogOnPageLeave.test.tsx deleted file mode 100644 index cd92fdbe68e..00000000000 --- a/frontend/packages/shared/src/hooks/useConfirmationDialogOnPageLeave.test.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import React from 'react'; -import { render as rtlRender, waitFor } from '@testing-library/react'; -import { useConfirmationDialogOnPageLeave } from './useConfirmationDialogOnPageLeave'; -import { RouterProvider, createMemoryRouter, useBeforeUnload } from 'react-router-dom'; - -jest.mock('react-router-dom', () => ({ - ...jest.requireActual('react-router-dom'), - useBeforeUnload: jest.fn(), -})); - -const confirmationMessage = 'test'; - -const Component = ({ showConfirmationDialog }: { showConfirmationDialog: boolean }) => { - useConfirmationDialogOnPageLeave(showConfirmationDialog, confirmationMessage); - return null; -}; - -const render = (showConfirmationDialog: boolean) => { - const router = createMemoryRouter([ - { - path: '/', - element: , - }, - { - path: '/test', - element: null, - }, - ]); - - const { rerender } = rtlRender(); - return { - rerender, - router, - }; -}; - -describe('useConfirmationDialogOnPageLeave', () => { - beforeEach(() => { - jest.clearAllMocks(); - }); - - it('should call useBeforeUnload with the expected arguments', () => { - const showConfirmationDialog = true; - render(showConfirmationDialog); - - expect(useBeforeUnload).toHaveBeenCalledWith(expect.any(Function), { - capture: true, - }); - }); - - it('should prevent navigation if showConfirmationDialog is true', () => { - const event = { - type: 'beforeunload', - returnValue: confirmationMessage, - } as BeforeUnloadEvent; - event.preventDefault = jest.fn(); - - const showConfirmationDialog = true; - render(showConfirmationDialog); - - const callbackFn = (useBeforeUnload as jest.MockedFunction).mock - .calls[0][0]; - callbackFn(event); - - expect(event.preventDefault).toHaveBeenCalled(); - expect(event.returnValue).toBe(confirmationMessage); - }); - - it('should not prevent navigation if showConfirmationDialog is false', () => { - const event = { - type: 'beforeunload', - returnValue: '', - } as BeforeUnloadEvent; - event.preventDefault = jest.fn(); - - const showConfirmationDialog = false; - render(showConfirmationDialog); - - const callbackFn = (useBeforeUnload as jest.MockedFunction).mock - .calls[0][0]; - callbackFn(event); - - expect(event.preventDefault).not.toHaveBeenCalled(); - expect(event.returnValue).toBe(''); - }); - - it('doesnt show confirmation dialog when there are no unsaved changes', async () => { - window.confirm = jest.fn(); - - const showConfirmationDialog = false; - const { router } = render(showConfirmationDialog); - - await waitFor(() => router.navigate('/test')); - - expect(window.confirm).toHaveBeenCalledTimes(0); - expect(router.state.location.pathname).toBe('/test'); - }); - - it('show confirmation dialog when there are unsaved changes', async () => { - window.confirm = jest.fn(); - - const showConfirmationDialog = true; - const { router } = render(showConfirmationDialog); - - await waitFor(() => router.navigate('/test')); - - expect(window.confirm).toHaveBeenCalledTimes(1); - expect(router.state.location.pathname).toBe('/'); - }); - - it('cancel redirection when clicking cancel', async () => { - window.confirm = jest.fn(() => false); - - const showConfirmationDialog = true; - const { router } = render(showConfirmationDialog); - - await waitFor(() => router.navigate('/test')); - - expect(window.confirm).toHaveBeenCalledTimes(1); - expect(router.state.location.pathname).toBe('/'); - }); - - it('redirect when clicking OK', async () => { - window.confirm = jest.fn(() => true); - - const showConfirmationDialog = true; - const { router } = render(showConfirmationDialog); - - await waitFor(() => router.navigate('/test')); - - expect(window.confirm).toHaveBeenCalledTimes(1); - expect(router.state.location.pathname).toBe('/test'); - }); -}); diff --git a/frontend/packages/shared/src/hooks/useConfirmationDialogOnPageLeave.ts b/frontend/packages/shared/src/hooks/useConfirmationDialogOnPageLeave.ts deleted file mode 100644 index 24b7a993d0c..00000000000 --- a/frontend/packages/shared/src/hooks/useConfirmationDialogOnPageLeave.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { useCallback, useEffect } from 'react'; -import { useBeforeUnload, useBlocker } from 'react-router-dom'; - -export const useConfirmationDialogOnPageLeave = ( - showConfirmationDialog: boolean, - confirmationMessage: string, -) => { - useBeforeUnload( - useCallback( - (event: BeforeUnloadEvent) => { - if (showConfirmationDialog) { - event.preventDefault(); - event.returnValue = confirmationMessage; - } - }, - [showConfirmationDialog, confirmationMessage], - ), - { capture: true }, - ); - - const blocker = useBlocker(({ currentLocation, nextLocation }) => { - return showConfirmationDialog && currentLocation.pathname !== nextLocation.pathname; - }); - - useEffect(() => { - if (blocker.state === 'blocked') { - if (window.confirm(confirmationMessage)) { - blocker.proceed(); - } else { - blocker.reset(); - } - } - }, [blocker, confirmationMessage]); -};