Linus Rath
af115e3245
- Show address books in sidebar organized by personal directories and shared accounts, replacing the flat shared accounts list - Make contact list items draggable with multi-select support using native HTML5 drag-and-drop (application/x-contact-ids MIME type) - Add drop targets on sidebar address book items with visual feedback - Add moveContactToAddressBook store method supporting same-account updates and cross-account create+delete moves - Add address book picker dropdown in contact create/edit form - Update ContactCategory type from sharedAccountId to addressBookId - Add address_books translations to all 8 locales - Fix contact-list-item tests for new selectedContactIds prop
86 lines
3.1 KiB
TypeScript
86 lines
3.1 KiB
TypeScript
import { render, screen, fireEvent } from '@testing-library/react';
|
|
import { describe, it, expect, vi } from 'vitest';
|
|
import { ContactListItem } from '../contact-list-item';
|
|
import type { ContactCard } from '@/lib/jmap/types';
|
|
|
|
const contact: ContactCard = {
|
|
id: '1',
|
|
addressBookIds: {},
|
|
name: { components: [{ kind: 'given', value: 'Alice' }, { kind: 'surname', value: 'Smith' }], isOrdered: true },
|
|
emails: { e0: { address: 'alice@example.com' } },
|
|
organizations: { o0: { name: 'Acme Corp' } },
|
|
};
|
|
|
|
const noNameContact: ContactCard = {
|
|
id: '2',
|
|
addressBookIds: {},
|
|
emails: { e0: { address: 'nobody@example.com' } },
|
|
};
|
|
|
|
const _emptyContact: ContactCard = {
|
|
id: '3',
|
|
addressBookIds: {},
|
|
};
|
|
|
|
describe('ContactListItem', () => {
|
|
const baseProps = {
|
|
isSelected: false,
|
|
isChecked: false,
|
|
hasSelection: false,
|
|
density: 'regular' as const,
|
|
onClick: vi.fn(),
|
|
onCheckboxClick: vi.fn(),
|
|
selectedContactIds: new Set<string>(),
|
|
};
|
|
|
|
it('renders contact name and email', () => {
|
|
render(<ContactListItem contact={contact} {...baseProps} />);
|
|
expect(screen.getByText('Alice Smith')).toBeInTheDocument();
|
|
expect(screen.getByText('alice@example.com')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders organization in comfortable density', () => {
|
|
render(<ContactListItem contact={contact} {...baseProps} density="comfortable" />);
|
|
expect(screen.getByText('Acme Corp')).toBeInTheDocument();
|
|
});
|
|
|
|
it('hides organization in regular density', () => {
|
|
render(<ContactListItem contact={contact} {...baseProps} density="regular" />);
|
|
expect(screen.queryByText('Acme Corp')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('applies selected styling', () => {
|
|
const { container } = render(<ContactListItem contact={contact} {...baseProps} isSelected={true} />);
|
|
const div = container.firstElementChild;
|
|
expect(div?.className).toContain('bg-blue-200');
|
|
});
|
|
|
|
it('shows email as display name when no name exists', () => {
|
|
render(<ContactListItem contact={noNameContact} {...baseProps} />);
|
|
const matches = screen.getAllByText('nobody@example.com');
|
|
expect(matches.length).toBeGreaterThanOrEqual(1);
|
|
});
|
|
|
|
it('calls onClick when clicked', () => {
|
|
const onClick = vi.fn();
|
|
render(<ContactListItem contact={contact} {...baseProps} onClick={onClick} />);
|
|
fireEvent.click(screen.getByText('Alice Smith'));
|
|
expect(onClick).toHaveBeenCalledOnce();
|
|
});
|
|
|
|
it('does not show checkbox when hasSelection is false', () => {
|
|
const { container } = render(<ContactListItem contact={contact} {...baseProps} hasSelection={false} />);
|
|
expect(container.querySelector('button')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('shows checkbox when hasSelection is true', () => {
|
|
const { container } = render(<ContactListItem contact={contact} {...baseProps} hasSelection={true} />);
|
|
expect(container.querySelector('button')).toBeInTheDocument();
|
|
});
|
|
|
|
it('hides avatar in extra-compact density', () => {
|
|
const { container } = render(<ContactListItem contact={contact} {...baseProps} density="extra-compact" />);
|
|
expect(container.querySelector('[data-testid="avatar"]') || container.querySelector('.rounded-full')).toBeNull();
|
|
});
|
|
});
|