work-club-manager/frontend/src/components/__tests__/shift-card.test.tsx

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import { ShiftCard } from '../shifts/shift-card';
import { useSignUpShift, useCancelSignUp } from '@/hooks/useShifts';

vi.mock('@/hooks/useShifts', () => ({
  useSignUpShift: vi.fn(),
  useCancelSignUp: vi.fn(),
}));

describe('ShiftCard', () => {
  const mockSignUp = vi.fn();
  const mockCancel = vi.fn();

  beforeEach(() => {
    vi.clearAllMocks();
    (useSignUpShift as ReturnType<typeof vi.fn>).mockReturnValue({ mutate: mockSignUp, isPending: false });
    (useCancelSignUp as ReturnType<typeof vi.fn>).mockReturnValue({ mutate: mockCancel, isPending: false });
  });

  it('shows capacity correctly (2/3 spots filled)', () => {
    render(
      <ShiftCard
        shift={{
          id: '1',
          title: 'Test Shift',
          startTime: new Date(Date.now() + 100000).toISOString(),
          endTime: new Date(Date.now() + 200000).toISOString(),
          capacity: 3,
          currentSignups: 2,
          isSignedUp: false,
        }}
      />
    );
    expect(screen.getByText('2/3 spots filled')).toBeInTheDocument();
  });

  it('disables sign-up button when full', () => {
    render(
      <ShiftCard
        shift={{
          id: '1',
          title: 'Full Shift',
          startTime: new Date(Date.now() + 100000).toISOString(),
          endTime: new Date(Date.now() + 200000).toISOString(),
          capacity: 3,
          currentSignups: 3,
          isSignedUp: false,
        }}
      />
    );
    expect(screen.getByText('3/3 spots filled')).toBeInTheDocument();
    expect(screen.queryByRole('button', { name: 'Sign Up' })).not.toBeInTheDocument();
  });

  it('shows "Past" badge and no sign-up button for past shifts', () => {
    render(
      <ShiftCard
        shift={{
          id: '1',
          title: 'Past Shift',
          startTime: new Date(Date.now() - 200000).toISOString(),
          endTime: new Date(Date.now() - 100000).toISOString(),
          capacity: 3,
          currentSignups: 1,
          isSignedUp: false,
        }}
      />
    );
    expect(screen.getByText('Past')).toBeInTheDocument();
    expect(screen.queryByRole('button', { name: 'Sign Up' })).not.toBeInTheDocument();
  });

  it('shows cancel sign-up button when signed up', () => {
    render(
      <ShiftCard
        shift={{
          id: '1',
          title: 'Signed Up Shift',
          startTime: new Date(Date.now() + 100000).toISOString(),
          endTime: new Date(Date.now() + 200000).toISOString(),
          capacity: 3,
          currentSignups: 1,
          isSignedUp: true,
        }}
      />
    );
    expect(screen.getByText('Cancel Sign-up')).toBeInTheDocument();
  });
});