veza/apps/web/src/features/auth/__tests__/auth.integration.test.tsx

import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { render, screen, waitFor } from '@testing-library/react';
import { MemoryRouter, Routes, Route } from 'react-router-dom';
import { LoginPage } from '../pages/LoginPage';
import { RegisterPage } from '../pages/RegisterPage';
import { ForgotPasswordPage } from '../pages/ForgotPasswordPage';
import { ResetPasswordPage } from '../pages/ResetPasswordPage';
import { VerifyEmailPage } from '../pages/VerifyEmailPage';

// Mock dependencies
vi.mock('../services/authService', () => ({
  login: vi.fn(),
  register: vi.fn(),
  requestPasswordReset: vi.fn(),
  resetPassword: vi.fn(),
  verifyEmail: vi.fn(),
  resendVerificationEmail: vi.fn(),
  checkUsernameAvailability: vi.fn().mockResolvedValue(true),
}));

vi.mock('../hooks/useAuth', () => ({
  useAuthStore: vi.fn(() => ({
    isAuthenticated: false,
    user: null,
    accessToken: null,
    refreshToken: null,
    setAuth: vi.fn(),
    clearAuth: vi.fn(),
    updateTokens: vi.fn(),
  })),
}));

vi.mock('@/stores/auth', () => ({
  useAuthStore: vi.fn(() => ({
    isAuthenticated: false,
    user: null,
    accessToken: null,
    refreshToken: null,
    setAuth: vi.fn(),
    clearAuth: vi.fn(),
    updateTokens: vi.fn(),
  })),
}));

vi.mock('../hooks/useUsernameAvailability', () => ({
  useUsernameAvailability: () => ({ available: true, checking: false }),
}));

vi.mock('../hooks/useLogin', () => ({
  useLogin: () => ({
    handleLogin: vi.fn(),
    loading: false,
    error: null,
  }),
}));

vi.mock('../hooks/useRegister', () => ({
  useRegister: () => ({
    handleRegister: vi.fn(),
    loading: false,
    error: null,
    success: false,
  }),
}));

vi.mock('../hooks/usePasswordReset', () => ({
  usePasswordReset: () => ({
    handleRequestReset: vi.fn(),
    handleReset: vi.fn(),
    loading: false,
    error: null,
    success: false,
  }),
}));

const mockNavigate = vi.fn();
vi.mock('react-router-dom', async () => {
  const actual = await vi.importActual('react-router-dom');
  return {
    ...actual,
    useNavigate: () => mockNavigate,
  };
});

// Helper function to render with router
const renderWithRouter = (
  initialEntries: string[],
  path: string,
  component: React.ReactElement,
) => {
  return render(
    <MemoryRouter initialEntries={initialEntries}>
      <Routes>
        <Route path={path} element={component} />
      </Routes>
    </MemoryRouter>,
  );
};

describe('Auth Pages Integration Tests', () => {
  beforeEach(() => {
    vi.clearAllMocks();
    mockNavigate.mockClear();
    localStorage.clear();
  });

  afterEach(() => {
    localStorage.clear();
  });

  describe('Navigation between pages', () => {
    it('should navigate from login to register page', () => {
      renderWithRouter(['/login'], '/login', <LoginPage />);

      const registerLink = screen.getByText("S'inscrire");
      expect(registerLink).toBeInTheDocument();
      expect(registerLink.closest('a')).toHaveAttribute('href', '/register');
    });

    it('should navigate from login to forgot password page', () => {
      renderWithRouter(['/login'], '/login', <LoginPage />);

      const forgotPasswordLink = screen.getByText('Mot de passe oublié ?');
      expect(forgotPasswordLink).toBeInTheDocument();
      expect(forgotPasswordLink.closest('a')).toHaveAttribute(
        'href',
        '/forgot-password',
      );
    });

    it('should navigate from register to login page', () => {
      renderWithRouter(['/register'], '/register', <RegisterPage />);

      const loginLink = screen.getByText('Se connecter');
      expect(loginLink).toBeInTheDocument();
      expect(loginLink.closest('a')).toHaveAttribute('href', '/login');
    });

    it('should navigate from forgot password to login page', () => {
      renderWithRouter(
        ['/forgot-password'],
        '/forgot-password',
        <ForgotPasswordPage />,
      );

      const loginLink = screen.getByText('Retour à la connexion');
      expect(loginLink).toBeInTheDocument();
      expect(loginLink.closest('a')).toHaveAttribute('href', '/login');
    });
  });

  describe('Page rendering', () => {
    it('should render login page correctly', () => {
      renderWithRouter(['/login'], '/login', <LoginPage />);

      expect(screen.getByText('Se connecter')).toBeInTheDocument();
      expect(screen.getByLabelText('Email')).toBeInTheDocument();
      expect(screen.getByLabelText('Mot de passe')).toBeInTheDocument();
      expect(
        screen.getByRole('button', { name: 'Se connecter' }),
      ).toBeInTheDocument();
    });

    it('should render register page correctly', () => {
      renderWithRouter(['/register'], '/register', <RegisterPage />);

      expect(screen.getByText("S'inscrire")).toBeInTheDocument();
      expect(screen.getByLabelText('Email')).toBeInTheDocument();
      expect(screen.getByLabelText("Nom d'utilisateur")).toBeInTheDocument();
      expect(screen.getByLabelText('Mot de passe')).toBeInTheDocument();
      expect(
        screen.getByLabelText('Confirmer le mot de passe'),
      ).toBeInTheDocument();
    });

    it('should render forgot password page correctly', () => {
      renderWithRouter(
        ['/forgot-password'],
        '/forgot-password',
        <ForgotPasswordPage />,
      );

      expect(screen.getByText('Mot de passe oublié')).toBeInTheDocument();
      expect(screen.getByLabelText('Email')).toBeInTheDocument();
      expect(
        screen.getByRole('button', {
          name: 'Envoyer le lien de réinitialisation',
        }),
      ).toBeInTheDocument();
    });

    it('should render reset password page correctly when token is present', async () => {
      renderWithRouter(
        ['/reset-password?token=test-token'],
        '/reset-password',
        <ResetPasswordPage />,
      );

      await waitFor(
        () => {
          expect(
            screen.getByLabelText('Nouveau mot de passe'),
          ).toBeInTheDocument();
        },
        { timeout: 3000 },
      );

      expect(
        screen.getByLabelText('Confirmer le mot de passe'),
      ).toBeInTheDocument();
    });

    it('should render reset password page error when token is missing', () => {
      renderWithRouter(
        ['/reset-password'],
        '/reset-password',
        <ResetPasswordPage />,
      );

      expect(
        screen.getByText('Lien de réinitialisation invalide'),
      ).toBeInTheDocument();
    });

    it('should render verify email page correctly when token is present', async () => {
      renderWithRouter(
        ['/verify-email?token=test-token'],
        '/verify-email',
        <VerifyEmailPage />,
      );

      await waitFor(
        () => {
          expect(
            screen.getByText("Vérification de l'email"),
          ).toBeInTheDocument();
        },
        { timeout: 2000 },
      );
    });

    it('should render verify email page error when token is missing', () => {
      renderWithRouter(['/verify-email'], '/verify-email', <VerifyEmailPage />);

      expect(screen.getByText("Vérification de l'email")).toBeInTheDocument();
      expect(
        screen.getByText('Lien de vérification invalide ou manquant'),
      ).toBeInTheDocument();
    });
  });

  describe('Form validation integration', () => {
    it('should show validation errors on login form submission', async () => {
      const { user } = await import('@testing-library/user-event');
      const userEvent = user.setup();

      renderWithRouter(['/login'], '/login', <LoginPage />);

      const submitButton = screen.getByRole('button', { name: 'Se connecter' });
      await userEvent.click(submitButton);

      await waitFor(() => {
        expect(screen.getByText('Email requis')).toBeInTheDocument();
      });
    });

    it('should show validation errors on register form submission', async () => {
      const { user } = await import('@testing-library/user-event');
      const userEvent = user.setup();

      renderWithRouter(['/register'], '/register', <RegisterPage />);

      const submitButton = screen.getByRole('button', { name: "S'inscrire" });
      await userEvent.click(submitButton);

      await waitFor(() => {
        expect(screen.getByText('Email requis')).toBeInTheDocument();
      });
    });
  });

  describe('Redirections', () => {
    it('should show login page for unauthenticated users', () => {
      renderWithRouter(['/login'], '/login', <LoginPage />);

      // Login form should be visible for unauthenticated users
      expect(screen.getByLabelText('Email')).toBeInTheDocument();
    });

    it('should show register page for unauthenticated users', () => {
      renderWithRouter(['/register'], '/register', <RegisterPage />);

      // Register form should be visible for unauthenticated users
      expect(screen.getByLabelText('Email')).toBeInTheDocument();
    });
  });

  describe('Password reset flow integration', () => {
    it('should render forgot password form and allow navigation', () => {
      renderWithRouter(
        ['/forgot-password'],
        '/forgot-password',
        <ForgotPasswordPage />,
      );

      expect(screen.getByText('Mot de passe oublié')).toBeInTheDocument();
      expect(screen.getByLabelText('Email')).toBeInTheDocument();

      // Check navigation link
      const loginLink = screen.getByText('Retour à la connexion');
      expect(loginLink).toBeInTheDocument();
      expect(loginLink.closest('a')).toHaveAttribute('href', '/login');
    });

    it('should render reset password form when token is provided', async () => {
      renderWithRouter(
        ['/reset-password?token=valid-token'],
        '/reset-password',
        <ResetPasswordPage />,
      );

      await waitFor(
        () => {
          expect(
            screen.getByLabelText('Nouveau mot de passe'),
          ).toBeInTheDocument();
        },
        { timeout: 3000 },
      );

      expect(
        screen.getByLabelText('Confirmer le mot de passe'),
      ).toBeInTheDocument();
    });
  });

  describe('Email verification flow integration', () => {
    it('should render verify email page with token', async () => {
      renderWithRouter(
        ['/verify-email?token=valid-token'],
        '/verify-email',
        <VerifyEmailPage />,
      );

      await waitFor(
        () => {
          expect(
            screen.getByText("Vérification de l'email"),
          ).toBeInTheDocument();
        },
        { timeout: 2000 },
      );
    });

    it('should show error when token is missing', () => {
      renderWithRouter(['/verify-email'], '/verify-email', <VerifyEmailPage />);

      expect(
        screen.getByText('Lien de vérification invalide ou manquant'),
      ).toBeInTheDocument();
    });
  });
});