diff --git a/src/components/__tests__/CreatorErrorBoundary.integration.test.tsx b/src/components/__tests__/CreatorErrorBoundary.integration.test.tsx new file mode 100644 index 0000000..df92c8d --- /dev/null +++ b/src/components/__tests__/CreatorErrorBoundary.integration.test.tsx @@ -0,0 +1,59 @@ +import { useState, type ReactElement } from 'react'; +import { afterEach, describe, expect, it, vi } from 'vitest'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { MemoryRouter } from 'react-router'; +import CreatorPageErrorBoundary from '@/components/common/CreatorPageErrorBoundary'; + +const BombComponent = () => { + throw new Error('Simulated component rendering crash'); +}; + +const HealthySibling = () => { + const [clicked, setClicked] = useState(false); + + return ( +
+ + {clicked ?

Sibling clicked

: null} +
+ ); +}; + +const renderWithRouter = (ui: ReactElement) => + render({ui}); + +describe('CreatorPageErrorBoundary integration', () => { + afterEach(() => { + vi.restoreAllMocks(); + }); + + it('catches render faults while keeping the rest of the app mounted', async () => { + const user = userEvent.setup(); + const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); + + renderWithRouter( +
+ + + + +
+ ); + + expect(screen.getByRole('alert')).toBeInTheDocument(); + expect(screen.getByText(/this creator page could not load/i)).toBeInTheDocument(); + expect(screen.getByRole('link', { name: /back to creators/i })).toHaveAttribute( + 'href', + '/creators' + ); + expect(screen.getByRole('button', { name: /healthy sibling/i })).toBeInTheDocument(); + + await user.click(screen.getByRole('button', { name: /healthy sibling/i })); + + expect(screen.getByText('Sibling clicked')).toBeInTheDocument(); + expect(consoleErrorSpy).toHaveBeenCalled(); + }); +});