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 { useSpaceStore } from '../../stores/spaceStore';
// Mock the stores by spying on their getState
beforeEach(() => {
// Reset stores to default state
useUIStore.setState({
activeModal: null,
modalData: {},
});
useSpaceStore.setState({
currentSpaceId: null,
spaces: [],
});
});
describe('InviteModal', () => {
it('does not render when activeModal is not "invite"', () => {
useUIStore.setState({ activeModal: null });
render();
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' });
useSpaceStore.setState({
currentSpaceId: 'server-123',
generateInvite: mockGenerateInvite,
});
render();
// 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' });
useSpaceStore.setState({
currentSpaceId: 'server-123',
generateInvite: mockGenerateInvite,
});
render();
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' });
useSpaceStore.setState({
currentSpaceId: 'server-123',
generateInvite: mockGenerateInvite,
});
render();
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' });
useSpaceStore.setState({
currentSpaceId: 'server-123',
generateInvite: mockGenerateInvite,
});
render();
// 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();
});
});