Fix task and shift self-assignment features

frontend/src/components/__tests__/shift-card.test.tsx

@@ -1,8 +1,23 @@
-import { describe, it, expect } from 'vitest';
+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
@@ -13,6 +28,7 @@ describe('ShiftCard', () => {
           endTime: new Date(Date.now() + 200000).toISOString(),
           capacity: 3,
           currentSignups: 2,
+          isSignedUp: false,
         }}
       />
     );
@@ -29,6 +45,7 @@ describe('ShiftCard', () => {
           endTime: new Date(Date.now() + 200000).toISOString(),
           capacity: 3,
           currentSignups: 3,
+          isSignedUp: false,
         }}
       />
     );
@@ -46,10 +63,28 @@ describe('ShiftCard', () => {
           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();
+  });
 });