feat(next): box user card on /machine

2026-07-13 10:11:11 -04:00
parent 134bab93a5
commit 028fbebcd6
3 changed files with 276 additions and 0 deletions
@@ -0,0 +1,86 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { BoxUserCard } from '../../src/components/machine/box-user-card';
+
+const { mockUseQuery, fetchSpy } = vi.hoisted(() => ({
+  mockUseQuery: vi.fn(),
+  fetchSpy: vi.fn(),
+}));
+
+vi.mock('convex/react', () => ({
+  useQuery: mockUseQuery,
+}));
+
+vi.mock('sonner', () => ({
+  toast: { error: vi.fn(), success: vi.fn() },
+}));
+
+describe('BoxUserCard', () => {
+  beforeEach(() => {
+    vi.stubGlobal('fetch', fetchSpy);
+    fetchSpy.mockResolvedValue(
+      new Response(JSON.stringify({ hasPassword: true, applied: true })),
+    );
+  });
+  afterEach(() => {
+    cleanup();
+    vi.unstubAllGlobals();
+    vi.clearAllMocks();
+  });
+
+  it('shows the identity line and not-set state', () => {
+    mockUseQuery.mockReturnValue({ hasPassword: false });
+    render(<BoxUserCard username='Gabriel' />);
+    expect(screen.getByText('gabriel@gabriel-box')).toBeInTheDocument();
+    expect(screen.getByText('Not set')).toBeInTheDocument();
+    expect(screen.getByText('Set password')).toBeInTheDocument();
+    expect(screen.queryByText('Remove password')).not.toBeInTheDocument();
+  });
+
+  it('offers change/remove when a password is set', () => {
+    mockUseQuery.mockReturnValue({ hasPassword: true });
+    render(<BoxUserCard username='gabriel' />);
+    expect(screen.getByText('Set')).toBeInTheDocument();
+    expect(screen.getByText('Change password')).toBeInTheDocument();
+    expect(screen.getByText('Remove password')).toBeInTheDocument();
+  });
+
+  it('blocks submit on mismatched confirmation', () => {
+    mockUseQuery.mockReturnValue({ hasPassword: false });
+    render(<BoxUserCard username='gabriel' />);
+    fireEvent.change(screen.getByLabelText('New password'), {
+      target: { value: 'longenough' },
+    });
+    fireEvent.change(screen.getByLabelText('Confirm'), {
+      target: { value: 'different1' },
+    });
+    expect(screen.getByText('Passwords do not match.')).toBeInTheDocument();
+    expect(screen.getByText('Set password').closest('button')!.disabled).toBe(
+      true,
+    );
+    expect(fetchSpy).not.toHaveBeenCalled();
+  });
+
+  it('posts the password and shows the restart note when not applied live', async () => {
+    mockUseQuery.mockReturnValue({ hasPassword: false });
+    fetchSpy.mockResolvedValue(
+      new Response(JSON.stringify({ hasPassword: true, applied: false })),
+    );
+    render(<BoxUserCard username='gabriel' />);
+    fireEvent.change(screen.getByLabelText('New password'), {
+      target: { value: 'longenough' },
+    });
+    fireEvent.change(screen.getByLabelText('Confirm'), {
+      target: { value: 'longenough' },
+    });
+    fireEvent.click(screen.getByText('Set password'));
+    expect(
+      await screen.findByText(/takes effect the next time it starts/),
+    ).toBeInTheDocument();
+    expect(fetchSpy).toHaveBeenCalledWith(
+      '/api/box/set-password',
+      expect.objectContaining({ method: 'POST' }),
+    );
+  });
+});