Vitruv-UI-Methodologist/src/__tests__/components/auth/SignUp.test.tsx at 16b6e863cf1081b5e62535307c69ce61427d9edf · vitruv-tools/Vitruv-UI-Methodologist · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import React from 'react';
import { render, screen, waitFor, act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { SignUp } from '../../../components/auth/SignUp';

const mockSignUp = jest.fn();

jest.mock('../../../contexts/AuthContext', () => ({
  useAuth: () => ({
    signUp: mockSignUp,
  }),
}));

describe('SignUp component', () => {
  beforeEach(() => {
    jest.clearAllMocks();
    jest.useRealTimers();
  });

  it('renders all required fields and submit button', () => {
    render(
      <SignUp
        onSignUpSuccess={jest.fn()}
        onSwitchToSignIn={jest.fn()}
      />,
    );

    expect(screen.getByLabelText(/First Name \*/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/Last Name \*/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/Username \*/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/Email \*/i)).toBeInTheDocument();
    expect(
      screen.getByPlaceholderText(/Create a strong password/i),
    ).toBeInTheDocument();
    expect(
      screen.getByPlaceholderText(/Confirm your password/i),
    ).toBeInTheDocument();
    expect(
      screen.getByRole('button', { name: /Create Account/i }),
    ).toBeInTheDocument();
  });

  it('shows validation error for too short first name', async () => {
    render(
      <SignUp
        onSignUpSuccess={jest.fn()}
        onSwitchToSignIn={jest.fn()}
      />,
    );

    await userEvent.type(screen.getByLabelText(/First Name \*/i), 'A');
    await userEvent.type(screen.getByLabelText(/Last Name \*/i), 'Doe');
    await userEvent.type(screen.getByLabelText(/Username \*/i), 'john');
    await userEvent.type(screen.getByLabelText(/Email \*/i), 'john@example.com');
    await userEvent.type(
      screen.getByPlaceholderText(/Create a strong password/i),
      'Password1!',
    );
    await userEvent.type(
      screen.getByPlaceholderText(/Confirm your password/i),
      'Password1!',
    );

    await userEvent.click(
      screen.getByRole('button', { name: /Create Account/i }),
    );

    expect(
      await screen.findByText(/First name is required \(at least 2 characters\)/i),
    ).toBeInTheDocument();
    expect(mockSignUp).not.toHaveBeenCalled();
  });

  it('calls signUp and onSignUpSuccess on valid submit', async () => {
    jest.useFakeTimers();
    const onSignUpSuccess = jest.fn();
    mockSignUp.mockResolvedValueOnce(undefined);

    render(
      <SignUp
        onSignUpSuccess={onSignUpSuccess}
        onSwitchToSignIn={jest.fn()}
      />,
    );

    await userEvent.type(screen.getByLabelText(/First Name \*/i), 'John');
    await userEvent.type(screen.getByLabelText(/Last Name \*/i), 'Doe');
    await userEvent.type(screen.getByLabelText(/Username \*/i), 'johndoe');
    await userEvent.type(screen.getByLabelText(/Email \*/i), 'john@example.com');
    await userEvent.type(
      screen.getByPlaceholderText(/Create a strong password/i),
      'Password1!',
    );
    await userEvent.type(
      screen.getByPlaceholderText(/Confirm your password/i),
      'Password1!',
    );

    await userEvent.click(
      screen.getByRole('button', { name: /Create Account/i }),
    );

    await waitFor(() => {
      expect(mockSignUp).toHaveBeenCalled();
    });

    expect(
      await screen.findByText(/Account Created Successfully!/i),
    ).toBeInTheDocument();

    await act(async () => {
      jest.advanceTimersByTime(2000);
    });

    expect(onSignUpSuccess).toHaveBeenCalled();
  });
});