diff --git a/client/src/client-only-routes/show-user.test.tsx b/client/src/client-only-routes/show-user.test.tsx new file mode 100644 index 00000000000..17705c4b3c7 --- /dev/null +++ b/client/src/client-only-routes/show-user.test.tsx @@ -0,0 +1,58 @@ +/* eslint-disable */ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { describe, it, expect, vi } from 'vitest'; +import { Provider } from 'react-redux'; +import type * as I18next from 'i18next'; + +import { createStore } from '../redux/create-store'; +import { ShowUser } from './show-user'; + +const store = createStore(); + +vi.mock('../utils/get-words'); + +describe('', () => { + it('renders login button when user is signed out', () => { + render( + + + + ); + expect(screen.getByText('report.sign-in')).toBeInTheDocument(); + }); + + it('renders report form when user is signed in', () => { + render( + + + + ); + expect(screen.getByText('report.submit')).toBeInTheDocument(); + }); +}); + +// Mock props for different states +const mockT = vi.fn(key => key) as unknown as I18next.TFunction; + +const baseProps = { + reportUser: vi.fn(), + t: mockT, + username: 'testuser', + userFetchState: { + pending: false, + complete: true, + errored: false, + error: null + } +}; + +const loggedInProps = { + ...baseProps, + user: { email: 'test@example.com' } +}; + +const loggedOutProps = { + ...baseProps, + user: null +}; diff --git a/client/src/client-only-routes/show-user.tsx b/client/src/client-only-routes/show-user.tsx index 7e0b04be0f4..0ff966aef76 100644 --- a/client/src/client-only-routes/show-user.tsx +++ b/client/src/client-only-routes/show-user.tsx @@ -18,16 +18,13 @@ import { import Login from '../components/Header/components/login'; import { Loader, FullWidthRow } from '../components/helpers'; import { reportUser } from '../redux/actions'; -import { - userFetchStateSelector, - isSignedInSelector, - userSelector -} from '../redux/selectors'; +import { userFetchStateSelector, userSelector } from '../redux/selectors'; import { UserFetchState } from '../redux/prop-types'; +type User = { email: string } | null; + interface ShowUserProps { - email: string; - isSignedIn: boolean; + user: User; reportUser: (payload: { username: string; reportDescription: string; @@ -38,17 +35,11 @@ interface ShowUserProps { } const mapStateToProps = createSelector( - isSignedInSelector, userFetchStateSelector, userSelector, - ( - isSignedIn, - userFetchState: UserFetchState, - { email }: { email: string } - ) => ({ - isSignedIn, + (userFetchState: UserFetchState, user: User) => ({ userFetchState, - email + user }) ); @@ -56,9 +47,8 @@ const mapDispatchToProps = { reportUser }; -function ShowUser({ - email, - isSignedIn, +export function ShowUser({ + user, reportUser, t, userFetchState, @@ -80,7 +70,7 @@ function ShowUser({ return ; } - if ((complete || errored) && !isSignedIn) { + if (errored || !user) { return ( @@ -117,7 +107,7 @@ function ShowUser({ - {{ email }} + {{ email: user.email }} {t('report.notify-2')}
- {{ email }} + {{ email: user.email }}
{t('report.notify-2')}