diff --git a/web/app/components/__tests__/splash.spec.tsx b/web/app/components/__tests__/splash.spec.tsx new file mode 100644 index 0000000000..296ef48cdb --- /dev/null +++ b/web/app/components/__tests__/splash.spec.tsx @@ -0,0 +1,59 @@ +import type { MockedFunction } from 'vitest' +import { render, screen } from '@testing-library/react' +import { useUserProfile } from '@/service/use-common' +import Splash from '../splash' + +vi.mock('@/service/use-common', () => ({ + useUserProfile: vi.fn(), +})) + +const mockUseUserProfile = useUserProfile as MockedFunction + +describe('Splash', () => { + beforeEach(() => { + vi.clearAllMocks() + }) + + it('should render the loading indicator while the profile query is pending', () => { + mockUseUserProfile.mockReturnValue({ + isPending: true, + isError: false, + data: undefined, + } as ReturnType) + + render() + + expect(screen.getByRole('status')).toBeInTheDocument() + }) + + it('should not render the loading indicator when the profile query succeeds', () => { + mockUseUserProfile.mockReturnValue({ + isPending: false, + isError: false, + data: { + profile: { id: 'user-1' }, + meta: { + currentVersion: '1.13.3', + currentEnv: 'DEVELOPMENT', + }, + }, + } as ReturnType) + + render() + + expect(screen.queryByRole('status')).not.toBeInTheDocument() + }) + + it('should stop rendering the loading indicator when the profile query errors', () => { + mockUseUserProfile.mockReturnValue({ + isPending: false, + isError: true, + data: undefined, + error: new Error('profile request failed'), + } as ReturnType) + + render() + + expect(screen.queryByRole('status')).not.toBeInTheDocument() + }) +}) diff --git a/web/app/components/splash.tsx b/web/app/components/splash.tsx index 3103f09ca3..2e46b95f76 100644 --- a/web/app/components/splash.tsx +++ b/web/app/components/splash.tsx @@ -5,15 +5,16 @@ import { useUserProfile } from '@/service/use-common' import Loading from './base/loading' const Splash: FC = () => { - const { isPending, data } = useUserProfile() + const { isPending } = useUserProfile() - if (isPending || !data?.profile) { + if (isPending) { return (
) } + return null } export default React.memo(Splash)