veza/apps/web/src/features/auth/components/AuthLayout.test.tsx

import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import { AuthLayout } from './AuthLayout';

const wrapper = ({ children }: { children: React.ReactNode }) => (
  <MemoryRouter>{children}</MemoryRouter>
);

describe('AuthLayout', () => {
  it('should render title and children', () => {
    render(
      <AuthLayout title="Login">
        <div>Form content</div>
      </AuthLayout>,
      { wrapper },
    );

    expect(screen.getByText('Login')).toBeInTheDocument();
    expect(screen.getByText('Form content')).toBeInTheDocument();
  });

  it('should render subtitle when provided', () => {
    render(
      <AuthLayout title="Login" subtitle="Welcome back">
        <div>Form content</div>
      </AuthLayout>,
      { wrapper },
    );

    expect(screen.getByText('Welcome back')).toBeInTheDocument();
  });

  it('should not render subtitle when not provided', () => {
    render(
      <AuthLayout title="Login">
        <div>Form content</div>
      </AuthLayout>,
      { wrapper },
    );

    expect(screen.queryByText('Welcome back')).not.toBeInTheDocument();
  });

  it('should render footer links when provided', () => {
    const footerLinks = [
      { label: 'Forgot password?', to: '/forgot-password' },
      { label: 'Sign up', to: '/register' },
    ];

    render(
      <AuthLayout title="Login" footerLinks={footerLinks}>
        <div>Form content</div>
      </AuthLayout>,
      { wrapper },
    );

    expect(screen.getByText('Forgot password?')).toBeInTheDocument();
    expect(screen.getByText('Sign up')).toBeInTheDocument();

    const forgotLink = screen.getByText('Forgot password?').closest('a');
    expect(forgotLink).toHaveAttribute('href', '/forgot-password');

    const signUpLink = screen.getByText('Sign up').closest('a');
    expect(signUpLink).toHaveAttribute('href', '/register');
  });

  it('should not render footer when footerLinks is empty', () => {
    render(
      <AuthLayout title="Login" footerLinks={[]}>
        <div>Form content</div>
      </AuthLayout>,
      { wrapper },
    );

    // Footer should not be rendered when empty array
    expect(screen.queryByRole('link')).not.toBeInTheDocument();
  });

  it('should not render footer when footerLinks is not provided', () => {
    render(
      <AuthLayout title="Login">
        <div>Form content</div>
      </AuthLayout>,
      { wrapper },
    );

    // Footer should not be rendered when not provided
    expect(screen.queryByRole('link')).not.toBeInTheDocument();
  });

  it('should render logo', () => {
    render(
      <AuthLayout title="Login">
        <div>Form content</div>
      </AuthLayout>,
      { wrapper },
    );

    // Check for logo "V" badge
    const logoBadge = screen.getByText('V');
    expect(logoBadge).toBeInTheDocument();

    // Check for "Veza" text
    expect(screen.getByText('Veza')).toBeInTheDocument();
  });

  it('should apply custom className', () => {
    const { container } = render(
      <AuthLayout title="Login" className="custom-class">
        <div>Form content</div>
      </AuthLayout>,
      { wrapper },
    );

    const mainDiv = container.firstChild as HTMLElement;
    expect(mainDiv.className).toContain('custom-class');
  });

  it('should have responsive classes', () => {
    const { container } = render(
      <AuthLayout title="Login">
        <div>Form content</div>
      </AuthLayout>,
      { wrapper },
    );

    const mainDiv = container.firstChild as HTMLElement;
    expect(mainDiv.className).toContain('px-4');
    expect(mainDiv.className).toContain('sm:px-6');
    expect(mainDiv.className).toContain('lg:px-8');
  });

  it('should support background styling', () => {
    const { container } = render(
      <AuthLayout title="Login">
        <div>Form content</div>
      </AuthLayout>,
      { wrapper },
    );

    const mainDiv = container.firstChild as HTMLElement;
    expect(mainDiv.className).toContain('bg-background');
  });

  it('should render multiple footer links correctly', () => {
    const footerLinks = [
      { label: 'Link 1', to: '/link1' },
      { label: 'Link 2', to: '/link2' },
      { label: 'Link 3', to: '/link3' },
    ];

    render(
      <AuthLayout title="Login" footerLinks={footerLinks}>
        <div>Form content</div>
      </AuthLayout>,
      { wrapper },
    );

    expect(screen.getByText('Link 1')).toBeInTheDocument();
    expect(screen.getByText('Link 2')).toBeInTheDocument();
    expect(screen.getByText('Link 3')).toBeInTheDocument();

    const links = screen.getAllByRole('link');
    expect(links).toHaveLength(3);
  });
});