fix: repair invite links, social features, messaging + Discord UI overhaul

Phase 1 - Feature Repair: - Fix member kick/leave: add missing db.delete() call in servers.ts - Stabilize invite codes: return existing code instead of regenerating - Fix user search: use LIKE instead of exact match in social.ts - Wire DM button on FriendsPage to create/navigate to DM channels - Add cancel outgoing friend request (DELETE endpoint + frontend) - Add accept/decline friend request actions with WS real-time events - Fix replyToId persistence in message creation - Hydrate reactions and replyTo in message queries - Add joinByCode to API client and serverStore - Add friend_request_received/accepted WebSocket events Phase 2 - Discord UI Overhaul: - Remove stray borders between layout columns - Replace shadow-sm with shadow-header on content headers - Replace all bg-gray-*/text-gray-* with Discord color tokens - Ensure flat color contrast (#1E1F22, #2B2D31, #313338) Testing: - Set up vitest + @testing-library/react + jsdom - Add 17 tests across InviteModal, JoinServer, FriendsPage (all passing) - Fix vite resolve.extensions to prefer .tsx over stale .js files
2026-02-18 05:34:45 +01:00
parent 4fd17084a5
commit 5ef502f2e3
82 changed files with 4906 additions and 552 deletions
@@ -0,0 +1,115 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { InviteModal } from './InviteModal';
+import { useUIStore } from '../../stores/uiStore';
+import { useServerStore } from '../../stores/serverStore';
+
+// Mock the stores by spying on their getState
+beforeEach(() => {
+  // Reset stores to default state
+  useUIStore.setState({
+    activeModal: null,
+    modalData: {},
+  });
+  useServerStore.setState({
+    currentServerId: null,
+    servers: [],
+  });
+});
+
+describe('InviteModal', () => {
+  it('does not render when activeModal is not "invite"', () => {
+    useUIStore.setState({ activeModal: null });
+    render(<InviteModal />);
+    expect(screen.queryByText('Invite Friends')).not.toBeInTheDocument();
+  });
+
+  it('calls generateInvite and displays the invite URL when opened', async () => {
+    const mockGenerateInvite = vi.fn().mockResolvedValue('test-invite-code');
+    useUIStore.setState({ activeModal: 'invite' });
+    useServerStore.setState({
+      currentServerId: 'server-123',
+      generateInvite: mockGenerateInvite,
+    });
+
+    render(<InviteModal />);
+
+    // Modal title should be visible
+    expect(screen.getByText('Invite Friends')).toBeInTheDocument();
+
+    // Should show "Generating..." initially
+    expect(screen.getByDisplayValue('Generating...')).toBeInTheDocument();
+
+    // Wait for the invite code to load
+    await waitFor(() => {
+      const input = screen.getByDisplayValue(/\/join\/test-invite-code/);
+      expect(input).toBeInTheDocument();
+    });
+
+    // generateInvite should have been called with the server ID
+    expect(mockGenerateInvite).toHaveBeenCalledWith('server-123');
+  });
+
+  it('displays an error when generateInvite fails', async () => {
+    const mockGenerateInvite = vi.fn().mockRejectedValue(new Error('Not authorized'));
+    useUIStore.setState({ activeModal: 'invite' });
+    useServerStore.setState({
+      currentServerId: 'server-123',
+      generateInvite: mockGenerateInvite,
+    });
+
+    render(<InviteModal />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Not authorized')).toBeInTheDocument();
+    });
+  });
+
+  it('Copy button is disabled while loading', () => {
+    const mockGenerateInvite = vi.fn().mockReturnValue(new Promise(() => {})); // never resolves
+    useUIStore.setState({ activeModal: 'invite' });
+    useServerStore.setState({
+      currentServerId: 'server-123',
+      generateInvite: mockGenerateInvite,
+    });
+
+    render(<InviteModal />);
+
+    const copyButton = screen.getByText('Copy');
+    expect(copyButton).toBeDisabled();
+  });
+
+  it('Copy button calls clipboard.writeText with the invite URL', async () => {
+    const user = userEvent.setup();
+    const mockGenerateInvite = vi.fn().mockResolvedValue('abc123');
+    const mockClipboard = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', {
+      value: { writeText: mockClipboard },
+      writable: true,
+      configurable: true,
+    });
+
+    useUIStore.setState({ activeModal: 'invite' });
+    useServerStore.setState({
+      currentServerId: 'server-123',
+      generateInvite: mockGenerateInvite,
+    });
+
+    render(<InviteModal />);
+
+    // Wait for invite to load
+    await waitFor(() => {
+      expect(screen.getByDisplayValue(/\/join\/abc123/)).toBeInTheDocument();
+    });
+
+    // Click copy
+    const copyButton = screen.getByText('Copy');
+    await user.click(copyButton);
+
+    expect(mockClipboard).toHaveBeenCalledWith(expect.stringContaining('/join/abc123'));
+
+    // Button text should change to "Copied!"
+    expect(screen.getByText('Copied!')).toBeInTheDocument();
+  });
+});