Frontend: unified 3-column contacts page (folder tree | list/table/cards | detail), all Rentman fields, ContactPerson CRUD, removed old Contact/Company pages
This commit is contained in:
Agent Zero
@@ -1,120 +0,0 @@
|
||||
import React from 'react';
|
||||
import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { CompaniesListPage } from '@/pages/CompaniesList';
|
||||
|
||||
const mockCompanies = [
|
||||
{ id: '1', name: 'TestCorp GmbH', email: 'info@test.de', phone: '+49 30 123', industry: 'IT', account_number: 'K-001', created_at: '2025-01-01T00:00:00Z', updated_at: '2025-01-01T00:00:00Z' },
|
||||
{ id: '2', name: 'Müller AG', email: 'kontakt@mueller.de', phone: '+49 89 987', industry: 'Logistik', account_number: 'K-002', created_at: '2025-01-02T00:00:00Z', updated_at: '2025-01-02T00:00:00Z' },
|
||||
];
|
||||
|
||||
let mockData: any = { items: mockCompanies, total: 2 };
|
||||
let mockIsLoading = false;
|
||||
|
||||
vi.mock('@/api/hooks', () => ({
|
||||
useCompanies: () => ({ data: mockData, isLoading: mockIsLoading }),
|
||||
useCompanyExport: () => ({ mutateAsync: vi.fn().mockResolvedValue(new Blob(['csv'], { type: 'text/csv' })), isPending: false }),
|
||||
useDeleteCompany: () => ({ mutateAsync: vi.fn(), isPending: false }),
|
||||
useCompanyImport: () => ({ mutateAsync: vi.fn(), isPending: false }),
|
||||
}));
|
||||
|
||||
vi.mock('@/components/ui/Toast', () => ({
|
||||
useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn() }),
|
||||
}));
|
||||
|
||||
vi.mock('@/components/shared/UnsavedChangesGuard', () => ({
|
||||
UnsavedChangesGuard: () => null,
|
||||
}));
|
||||
|
||||
function renderWithRouter() {
|
||||
return render(<MemoryRouter><CompaniesListPage /></MemoryRouter>);
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
mockData = { items: mockCompanies, total: 2 };
|
||||
mockIsLoading = false;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
mockData = { items: mockCompanies, total: 2 };
|
||||
mockIsLoading = false;
|
||||
});
|
||||
|
||||
describe('CompaniesListPage', () => {
|
||||
it('renders the page with title', () => {
|
||||
renderWithRouter();
|
||||
expect(screen.getByTestId('companies-list-page')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders DataGrid for company list (TanStack Table)', () => {
|
||||
renderWithRouter();
|
||||
expect(screen.getByTestId('companies-grid')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders company data in grid', () => {
|
||||
renderWithRouter();
|
||||
expect(screen.getByText('TestCorp GmbH')).toBeInTheDocument();
|
||||
expect(screen.getByText('Müller AG')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders search input', () => {
|
||||
renderWithRouter();
|
||||
expect(screen.getByLabelText(/Suchen/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders create button', () => {
|
||||
renderWithRouter();
|
||||
expect(screen.getByText('Firma erstellen')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders import button', () => {
|
||||
renderWithRouter();
|
||||
expect(screen.getByText('CSV importieren')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders export button', () => {
|
||||
renderWithRouter();
|
||||
expect(screen.getByText('CSV exportieren')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders table headers with sortable columns', () => {
|
||||
renderWithRouter();
|
||||
expect(screen.getByText('Firmenname')).toBeInTheDocument();
|
||||
expect(screen.getByText('Branche')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows empty state when no companies and no search', () => {
|
||||
mockData = { items: [], total: 0 };
|
||||
renderWithRouter();
|
||||
expect(screen.getByText('Keine Firmen vorhanden')).toBeInTheDocument();
|
||||
expect(screen.getByText('Firma erstellen')).toBeInTheDocument();
|
||||
mockData = { items: mockCompanies, total: 2 };
|
||||
});
|
||||
|
||||
it('shows no results message when search yields nothing', async () => {
|
||||
renderWithRouter();
|
||||
const searchInput = screen.getByLabelText(/Suchen/);
|
||||
fireEvent.change(searchInput, { target: { value: 'xyz' } });
|
||||
mockData = { items: [], total: 0 };
|
||||
// With search text but no results, grid should show no results message
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Keine Ergebnisse gefunden')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('clicking sort header toggles sort direction', () => {
|
||||
renderWithRouter();
|
||||
const nameHeader = screen.getByText('Firmenname');
|
||||
const th = nameHeader.closest('th');
|
||||
expect(th).toHaveAttribute('aria-sort', 'none');
|
||||
fireEvent.click(nameHeader);
|
||||
expect(th).toHaveAttribute('aria-sort', 'ascending');
|
||||
});
|
||||
|
||||
it('opens import dialog when import button clicked', () => {
|
||||
renderWithRouter();
|
||||
fireEvent.click(screen.getByText('CSV importieren'));
|
||||
expect(screen.getByTestId('csv-import-dialog')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -1,88 +0,0 @@
|
||||
import React from 'react';
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { CompanyDetailPage } from '@/pages/CompanyDetail';
|
||||
|
||||
const mockCompany = {
|
||||
id: '1',
|
||||
name: 'TestCorp GmbH',
|
||||
email: 'info@testcorp.de',
|
||||
phone: '+49 30 12345678',
|
||||
website: 'https://testcorp.de',
|
||||
industry: 'IT & Software',
|
||||
account_number: 'K-00123',
|
||||
description: 'Ein führendes IT-Unternehmen',
|
||||
created_at: '2025-01-01T00:00:00Z',
|
||||
updated_at: '2025-01-01T00:00:00Z',
|
||||
contacts: [
|
||||
{ id: 'c1', first_name: 'Max', last_name: 'Mustermann', email: 'max@testcorp.de', position: 'CEO' },
|
||||
{ id: 'c2', first_name: 'Anna', last_name: 'Schmidt', email: 'anna@testcorp.de', position: 'CTO' },
|
||||
],
|
||||
};
|
||||
|
||||
let mockReturnData: any = { data: mockCompany, isLoading: false, isError: false };
|
||||
|
||||
vi.mock('@/api/hooks', () => ({
|
||||
useCompany: () => mockReturnData,
|
||||
}));
|
||||
|
||||
describe('CompanyDetailPage', () => {
|
||||
it('renders the detail page', () => {
|
||||
render(<MemoryRouter initialEntries={['/companies/1']}><CompanyDetailPage /></MemoryRouter>);
|
||||
expect(screen.getByTestId('company-detail-page')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders company name as heading', () => {
|
||||
render(<MemoryRouter initialEntries={['/companies/1']}><CompanyDetailPage /></MemoryRouter>);
|
||||
expect(screen.getByRole('heading', { level: 1, name: 'TestCorp GmbH' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders tabs for detail sections', () => {
|
||||
render(<MemoryRouter initialEntries={['/companies/1']}><CompanyDetailPage /></MemoryRouter>);
|
||||
expect(screen.getByRole('tablist')).toBeInTheDocument();
|
||||
expect(screen.getByRole('tab', { name: /Übersicht/ })).toBeInTheDocument();
|
||||
expect(screen.getByRole('tab', { name: /Kontakte/ })).toBeInTheDocument();
|
||||
expect(screen.getByRole('tab', { name: /Dateien/ })).toBeInTheDocument();
|
||||
expect(screen.getByRole('tab', { name: /Aktivität/ })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders overview tab content by default', () => {
|
||||
render(<MemoryRouter initialEntries={['/companies/1']}><CompanyDetailPage /></MemoryRouter>);
|
||||
expect(screen.getByText('K-00123')).toBeInTheDocument();
|
||||
expect(screen.getByText('IT & Software')).toBeInTheDocument();
|
||||
expect(screen.getByText('+49 30 12345678')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders contacts tab with contact list and badge count', () => {
|
||||
render(<MemoryRouter initialEntries={['/companies/1']}><CompanyDetailPage /></MemoryRouter>);
|
||||
const contactsTab = screen.getByRole('tab', { name: /Kontakte/ });
|
||||
fireEvent.click(contactsTab);
|
||||
expect(screen.getByText('Max Mustermann')).toBeInTheDocument();
|
||||
expect(screen.getByText('Anna Schmidt')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders edit button', () => {
|
||||
render(<MemoryRouter initialEntries={['/companies/1']}><CompanyDetailPage /></MemoryRouter>);
|
||||
expect(screen.getByText('Bearbeiten')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders back button', () => {
|
||||
render(<MemoryRouter initialEntries={['/companies/1']}><CompanyDetailPage /></MemoryRouter>);
|
||||
expect(screen.getByText(/Zurück/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows error state when company not found', () => {
|
||||
mockReturnData = { data: undefined, isLoading: false, isError: true };
|
||||
render(<MemoryRouter initialEntries={['/companies/999']}><CompanyDetailPage /></MemoryRouter>);
|
||||
expect(screen.getByText('Firma nicht gefunden.')).toBeInTheDocument();
|
||||
mockReturnData = { data: mockCompany, isLoading: false, isError: false };
|
||||
});
|
||||
|
||||
it('shows skeleton loading state', () => {
|
||||
mockReturnData = { data: undefined, isLoading: true, isError: false };
|
||||
const { container } = render(<MemoryRouter initialEntries={['/companies/1']}><CompanyDetailPage /></MemoryRouter>);
|
||||
expect(screen.getByTestId('company-detail-page')).toBeInTheDocument();
|
||||
mockReturnData = { data: mockCompany, isLoading: false, isError: false };
|
||||
});
|
||||
});
|
||||
@@ -1,93 +0,0 @@
|
||||
import React from 'react';
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { CompanyFormPage } from '@/pages/CompanyForm';
|
||||
|
||||
const mockMutateAsync = vi.fn().mockResolvedValue({ id: 'new-1' });
|
||||
|
||||
vi.mock('@/api/hooks', () => ({
|
||||
useCompany: () => ({ data: undefined, isLoading: false }),
|
||||
useCreateCompany: () => ({
|
||||
mutateAsync: mockMutateAsync,
|
||||
isPending: false,
|
||||
}),
|
||||
useUpdateCompany: () => ({ mutateAsync: vi.fn(), isPending: false }),
|
||||
}));
|
||||
|
||||
vi.mock('@/components/ui/Toast', () => ({
|
||||
useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn() }),
|
||||
}));
|
||||
|
||||
vi.mock('@/components/shared/UnsavedChangesGuard', () => ({
|
||||
UnsavedChangesGuard: () => null,
|
||||
}));
|
||||
|
||||
describe('CompanyFormPage', () => {
|
||||
it('renders form with name field', () => {
|
||||
render(<MemoryRouter><CompanyFormPage /></MemoryRouter>);
|
||||
expect(screen.getByLabelText(/Firmenname/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders email and phone fields', () => {
|
||||
render(<MemoryRouter><CompanyFormPage /></MemoryRouter>);
|
||||
expect(screen.getByLabelText(/E-Mail/)).toBeInTheDocument();
|
||||
expect(screen.getByLabelText(/Telefon/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders website and description fields', () => {
|
||||
render(<MemoryRouter><CompanyFormPage /></MemoryRouter>);
|
||||
expect(screen.getByLabelText(/Website/)).toBeInTheDocument();
|
||||
expect(screen.getByLabelText(/Beschreibung/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders account number and industry fields', () => {
|
||||
render(<MemoryRouter><CompanyFormPage /></MemoryRouter>);
|
||||
expect(screen.getByLabelText(/Kontonummer/)).toBeInTheDocument();
|
||||
expect(screen.getByLabelText(/Branche/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('submit button is present', () => {
|
||||
render(<MemoryRouter><CompanyFormPage /></MemoryRouter>);
|
||||
expect(screen.getByTestId('company-submit-btn')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders cancel button', () => {
|
||||
render(<MemoryRouter><CompanyFormPage /></MemoryRouter>);
|
||||
expect(screen.getByText('Abbrechen')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders form page with correct test id', () => {
|
||||
render(<MemoryRouter><CompanyFormPage /></MemoryRouter>);
|
||||
expect(screen.getByTestId('company-form-page')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders create title for new company', () => {
|
||||
render(<MemoryRouter><CompanyFormPage /></MemoryRouter>);
|
||||
expect(screen.getByText('Firma erstellen')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('name field is marked as required', () => {
|
||||
render(<MemoryRouter><CompanyFormPage /></MemoryRouter>);
|
||||
const nameInput = screen.getByTestId('company-name-input');
|
||||
expect(nameInput).toHaveAttribute('required');
|
||||
});
|
||||
|
||||
it('shows inline validation error when submitting empty form', async () => {
|
||||
render(<MemoryRouter><CompanyFormPage /></MemoryRouter>);
|
||||
const submitBtn = screen.getByTestId('company-submit-btn');
|
||||
fireEvent.click(submitBtn);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/Name ist erforderlich/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('accepts valid form data and submits', async () => {
|
||||
render(<MemoryRouter><CompanyFormPage /></MemoryRouter>);
|
||||
fireEvent.change(screen.getByTestId('company-name-input'), { target: { value: 'Acme Corp' } });
|
||||
fireEvent.click(screen.getByTestId('company-submit-btn'));
|
||||
await waitFor(() => {
|
||||
expect(mockMutateAsync).toHaveBeenCalledWith(expect.objectContaining({ name: 'Acme Corp' }));
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,80 +0,0 @@
|
||||
import React from 'react';
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { ContactDetailPage } from '@/pages/ContactDetail';
|
||||
|
||||
const mockContact = {
|
||||
id: '1',
|
||||
first_name: 'Max',
|
||||
last_name: 'Mustermann',
|
||||
email: 'max@example.com',
|
||||
phone: '+49 30 12345678',
|
||||
position: 'CEO',
|
||||
company_ids: ['1', '2'],
|
||||
companies: [
|
||||
{ id: '1', name: 'TestCorp GmbH', industry: 'IT', email: 'info@testcorp.de' },
|
||||
{ id: '2', name: 'Müller AG', industry: 'Logistik', email: 'kontakt@mueller.de' },
|
||||
],
|
||||
created_at: '2025-01-01T00:00:00Z',
|
||||
updated_at: '2025-01-01T00:00:00Z',
|
||||
};
|
||||
|
||||
let mockReturnData: any = { data: mockContact, isLoading: false, isError: false };
|
||||
|
||||
vi.mock('@/api/hooks', () => ({
|
||||
useContact: () => mockReturnData,
|
||||
}));
|
||||
|
||||
describe('ContactDetailPage', () => {
|
||||
it('renders the detail page', () => {
|
||||
render(<MemoryRouter initialEntries={['/contacts/1']}><ContactDetailPage /></MemoryRouter>);
|
||||
expect(screen.getByTestId('contact-detail-page')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders contact name as heading', () => {
|
||||
render(<MemoryRouter initialEntries={['/contacts/1']}><ContactDetailPage /></MemoryRouter>);
|
||||
expect(screen.getByText('Max Mustermann')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders tabs for detail sections', () => {
|
||||
render(<MemoryRouter initialEntries={['/contacts/1']}><ContactDetailPage /></MemoryRouter>);
|
||||
expect(screen.getByRole('tablist')).toBeInTheDocument();
|
||||
expect(screen.getByRole('tab', { name: /Übersicht/ })).toBeInTheDocument();
|
||||
expect(screen.getByRole('tab', { name: /Firmen/ })).toBeInTheDocument();
|
||||
expect(screen.getByRole('tab', { name: /Dateien/ })).toBeInTheDocument();
|
||||
expect(screen.getByRole('tab', { name: /Aktivität/ })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders overview tab content by default', () => {
|
||||
render(<MemoryRouter initialEntries={['/contacts/1']}><ContactDetailPage /></MemoryRouter>);
|
||||
expect(screen.getByText('CEO')).toBeInTheDocument();
|
||||
expect(screen.getByText('max@example.com')).toBeInTheDocument();
|
||||
expect(screen.getByText('+49 30 12345678')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders companies tab with assigned companies', () => {
|
||||
render(<MemoryRouter initialEntries={['/contacts/1']}><ContactDetailPage /></MemoryRouter>);
|
||||
const companiesTab = screen.getByRole('tab', { name: /Firmen/ });
|
||||
fireEvent.click(companiesTab);
|
||||
expect(screen.getByText('TestCorp GmbH')).toBeInTheDocument();
|
||||
expect(screen.getByText('Müller AG')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders edit button', () => {
|
||||
render(<MemoryRouter initialEntries={['/contacts/1']}><ContactDetailPage /></MemoryRouter>);
|
||||
expect(screen.getByText('Bearbeiten')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders back button', () => {
|
||||
render(<MemoryRouter initialEntries={['/contacts/1']}><ContactDetailPage /></MemoryRouter>);
|
||||
expect(screen.getByText(/Zurück/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows error state when contact not found', () => {
|
||||
mockReturnData = { data: undefined, isLoading: false, isError: true };
|
||||
render(<MemoryRouter initialEntries={['/contacts/999']}><ContactDetailPage /></MemoryRouter>);
|
||||
expect(screen.getByText('Kontakt nicht gefunden.')).toBeInTheDocument();
|
||||
mockReturnData = { data: mockContact, isLoading: false, isError: false };
|
||||
});
|
||||
});
|
||||
@@ -1,116 +0,0 @@
|
||||
import React from 'react';
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { ContactFormPage } from '@/pages/ContactForm';
|
||||
|
||||
vi.mock('@/api/hooks', () => ({
|
||||
useContact: () => ({ data: undefined, isLoading: false }),
|
||||
useCreateContact: () => ({
|
||||
mutateAsync: vi.fn().mockResolvedValue({ id: 'new-1' }),
|
||||
isPending: false,
|
||||
}),
|
||||
useUpdateContact: () => ({ mutateAsync: vi.fn(), isPending: false }),
|
||||
useCompanies: () => ({
|
||||
data: {
|
||||
items: [
|
||||
{ id: '1', name: 'TestCorp GmbH', industry: 'IT' },
|
||||
{ id: '2', name: 'Müller AG', industry: 'Logistik' },
|
||||
{ id: '3', name: 'Schmidt GmbH', industry: 'Handel' },
|
||||
],
|
||||
total: 3,
|
||||
},
|
||||
isLoading: false,
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock('@/components/ui/Toast', () => ({
|
||||
useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn() }),
|
||||
}));
|
||||
|
||||
vi.mock('@/components/shared/UnsavedChangesGuard', () => ({
|
||||
UnsavedChangesGuard: () => null,
|
||||
}));
|
||||
|
||||
describe('ContactFormPage', () => {
|
||||
it('renders form with first name field', () => {
|
||||
render(<MemoryRouter><ContactFormPage /></MemoryRouter>);
|
||||
expect(screen.getByLabelText(/Vorname/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders form with last name field', () => {
|
||||
render(<MemoryRouter><ContactFormPage /></MemoryRouter>);
|
||||
expect(screen.getByLabelText(/Nachname/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders email field', () => {
|
||||
render(<MemoryRouter><ContactFormPage /></MemoryRouter>);
|
||||
expect(screen.getByLabelText(/E-Mail/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders phone and position fields', () => {
|
||||
render(<MemoryRouter><ContactFormPage /></MemoryRouter>);
|
||||
expect(screen.getByLabelText(/Telefon/)).toBeInTheDocument();
|
||||
expect(screen.getByLabelText(/Position/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders submit button', () => {
|
||||
render(<MemoryRouter><ContactFormPage /></MemoryRouter>);
|
||||
expect(screen.getByTestId('contact-submit-btn')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders cancel button', () => {
|
||||
render(<MemoryRouter><ContactFormPage /></MemoryRouter>);
|
||||
expect(screen.getByText('Abbrechen')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders form page with correct test id', () => {
|
||||
render(<MemoryRouter><ContactFormPage /></MemoryRouter>);
|
||||
expect(screen.getByTestId('contact-form-page')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders create title for new contact', () => {
|
||||
render(<MemoryRouter><ContactFormPage /></MemoryRouter>);
|
||||
expect(screen.getByText('Kontakt erstellen')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('first name field is marked as required', () => {
|
||||
render(<MemoryRouter><ContactFormPage /></MemoryRouter>);
|
||||
const firstNameInput = screen.getByTestId('contact-first-name-input');
|
||||
expect(firstNameInput).toHaveAttribute('required');
|
||||
});
|
||||
|
||||
it('last name field is marked as required', () => {
|
||||
render(<MemoryRouter><ContactFormPage /></MemoryRouter>);
|
||||
const lastNameInput = screen.getByTestId('contact-last-name-input');
|
||||
expect(lastNameInput).toHaveAttribute('required');
|
||||
});
|
||||
|
||||
it('renders company assignment section with available companies', () => {
|
||||
render(<MemoryRouter><ContactFormPage /></MemoryRouter>);
|
||||
expect(screen.getByTestId('company-assignment-list')).toBeInTheDocument();
|
||||
expect(screen.getByText('TestCorp GmbH')).toBeInTheDocument();
|
||||
expect(screen.getByText('Müller AG')).toBeInTheDocument();
|
||||
expect(screen.getByText('Schmidt GmbH')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('can select multiple companies for assignment', () => {
|
||||
render(<MemoryRouter><ContactFormPage /></MemoryRouter>);
|
||||
const checkboxes = screen.getAllByRole('checkbox');
|
||||
expect(checkboxes).toHaveLength(3);
|
||||
fireEvent.click(checkboxes[0]);
|
||||
fireEvent.click(checkboxes[1]);
|
||||
expect(checkboxes[0]).toBeChecked();
|
||||
expect(checkboxes[1]).toBeChecked();
|
||||
expect(checkboxes[2]).not.toBeChecked();
|
||||
});
|
||||
|
||||
it('shows inline validation error when submitting empty form', async () => {
|
||||
render(<MemoryRouter><ContactFormPage /></MemoryRouter>);
|
||||
fireEvent.click(screen.getByTestId('contact-submit-btn'));
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/Vorname ist erforderlich/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Nachname ist erforderlich/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,94 +1,191 @@
|
||||
import React from 'react';
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
||||
import { render, screen, fireEvent, waitFor, within } from '@testing-library/react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { ContactsListPage } from '@/pages/ContactsList';
|
||||
|
||||
const mockContacts = [
|
||||
{ id: '1', first_name: 'Max', last_name: 'Mustermann', email: 'max@test.de', phone: '+49 30 123', position: 'CEO', created_at: '2025-01-01T00:00:00Z', updated_at: '2025-01-01T00:00:00Z' },
|
||||
{ id: '2', first_name: 'Anna', last_name: 'Schmidt', email: 'anna@test.de', phone: '+49 89 987', position: 'CTO', created_at: '2025-01-02T00:00:00Z', updated_at: '2025-01-02T00:00:00Z' },
|
||||
{
|
||||
id: '1',
|
||||
type: 'company',
|
||||
displayname: 'TestCorp GmbH',
|
||||
name: 'TestCorp GmbH',
|
||||
email_1: 'info@test.de',
|
||||
phone_1: '+49 30 123',
|
||||
mailing_city: 'Berlin',
|
||||
tags: 'VIP, IT',
|
||||
discount_crew: 0,
|
||||
discount_transport: 0,
|
||||
discount_rental: 0,
|
||||
discount_sale: 0,
|
||||
discount_subrent: 0,
|
||||
discount_total: 0,
|
||||
created_at: '2025-01-01T00:00:00Z',
|
||||
updated_at: '2025-01-01T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
type: 'person',
|
||||
displayname: 'Max Mustermann',
|
||||
firstname: 'Max',
|
||||
surname: 'Mustermann',
|
||||
email_1: 'max@test.de',
|
||||
phone_1: '+49 89 987',
|
||||
mailing_city: 'München',
|
||||
tags: null,
|
||||
discount_crew: 0,
|
||||
discount_transport: 0,
|
||||
discount_rental: 0,
|
||||
discount_sale: 0,
|
||||
discount_subrent: 0,
|
||||
discount_total: 0,
|
||||
created_at: '2025-01-02T00:00:00Z',
|
||||
updated_at: '2025-01-02T00:00:00Z',
|
||||
},
|
||||
];
|
||||
|
||||
let mockData: any = { items: mockContacts, total: 2 };
|
||||
let mockListData: any = { items: mockContacts, total: 2, page: 1, page_size: 25 };
|
||||
let mockIsLoading = false;
|
||||
let mockDetailData: any = undefined;
|
||||
let mockDetailLoading = false;
|
||||
|
||||
vi.mock('@/api/hooks', () => ({
|
||||
useContacts: () => ({ data: mockData, isLoading: mockIsLoading }),
|
||||
useDeleteContact: () => ({ mutateAsync: vi.fn(), isPending: false }),
|
||||
useUnifiedContacts: () => ({ data: mockListData, isLoading: mockIsLoading }),
|
||||
useUnifiedContact: () => ({ data: mockDetailData, isLoading: mockDetailLoading }),
|
||||
useCreateUnifiedContact: () => ({ mutateAsync: vi.fn().mockResolvedValue({ id: 'new-1' }), isPending: false }),
|
||||
useUpdateUnifiedContact: () => ({ mutateAsync: vi.fn(), isPending: false }),
|
||||
useDeleteUnifiedContact: () => ({ mutateAsync: vi.fn(), isPending: false }),
|
||||
useCreateContactPerson: () => ({ mutateAsync: vi.fn(), isPending: false }),
|
||||
useUpdateContactPerson: () => ({ mutateAsync: vi.fn(), isPending: false }),
|
||||
useDeleteContactPerson: () => ({ mutateAsync: vi.fn(), isPending: false }),
|
||||
}));
|
||||
|
||||
vi.mock('@/components/ui/Toast', () => ({
|
||||
useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn() }),
|
||||
}));
|
||||
|
||||
function renderWithRouter() {
|
||||
return render(<MemoryRouter><ContactsListPage /></MemoryRouter>);
|
||||
function renderWithProviders() {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false } },
|
||||
});
|
||||
return render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<MemoryRouter>
|
||||
<ContactsListPage />
|
||||
</MemoryRouter>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
}
|
||||
|
||||
describe('ContactsListPage', () => {
|
||||
// jsdom renders both desktop (hidden md:flex) and mobile (flex md:hidden) views
|
||||
// because it doesn't process CSS media queries. Use getAllByTestId to handle duplicates.
|
||||
function getFirstByTestId(testId: string) {
|
||||
const elements = screen.getAllByTestId(testId);
|
||||
return elements[0];
|
||||
}
|
||||
|
||||
// Helper: click 'Alle Kontakte' folder to switch to list view (mobile)
|
||||
function goToList() {
|
||||
const folderTree = getFirstByTestId('contact-folder-tree');
|
||||
fireEvent.click(within(folderTree).getByText('Alle Kontakte'));
|
||||
}
|
||||
|
||||
describe('ContactsListPage (Unified)', () => {
|
||||
beforeEach(() => {
|
||||
mockListData = { items: mockContacts, total: 2, page: 1, page_size: 25 };
|
||||
mockIsLoading = false;
|
||||
mockDetailData = undefined;
|
||||
mockDetailLoading = false;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
mockListData = { items: mockContacts, total: 2, page: 1, page_size: 25 };
|
||||
mockIsLoading = false;
|
||||
mockDetailData = undefined;
|
||||
mockDetailLoading = false;
|
||||
});
|
||||
|
||||
it('renders the page', () => {
|
||||
renderWithRouter();
|
||||
expect(screen.getByTestId('contacts-list-page')).toBeInTheDocument();
|
||||
renderWithProviders();
|
||||
expect(getFirstByTestId('contacts-list-page')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders DataGrid for contacts (TanStack Table)', () => {
|
||||
renderWithRouter();
|
||||
expect(screen.getByTestId('contacts-grid')).toBeInTheDocument();
|
||||
it('renders folder tree with all contacts filter', () => {
|
||||
renderWithProviders();
|
||||
const folderTree = getFirstByTestId('contact-folder-tree');
|
||||
expect(folderTree).toBeInTheDocument();
|
||||
expect(within(folderTree).getByText('Alle Kontakte')).toBeInTheDocument();
|
||||
expect(within(folderTree).getByText('Firmen')).toBeInTheDocument();
|
||||
expect(within(folderTree).getByText('Privatpersonen')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders contact data in grid', () => {
|
||||
renderWithRouter();
|
||||
expect(screen.getByText('Max Mustermann')).toBeInTheDocument();
|
||||
expect(screen.getByText('Anna Schmidt')).toBeInTheDocument();
|
||||
it('renders contact list with contacts', () => {
|
||||
renderWithProviders();
|
||||
goToList();
|
||||
expect(screen.getAllByText('TestCorp GmbH').length).toBeGreaterThan(0);
|
||||
expect(screen.getAllByText('Max Mustermann').length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('renders new button', () => {
|
||||
renderWithProviders();
|
||||
goToList();
|
||||
expect(screen.getAllByTestId('contacts-new-btn').length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('renders search input', () => {
|
||||
renderWithRouter();
|
||||
expect(screen.getByLabelText(/Suchen/)).toBeInTheDocument();
|
||||
renderWithProviders();
|
||||
goToList();
|
||||
expect(screen.getAllByPlaceholderText('Kontakte durchsuchen...').length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('renders create button', () => {
|
||||
renderWithRouter();
|
||||
expect(screen.getByText('Kontakt erstellen')).toBeInTheDocument();
|
||||
it('shows empty detail panel when no contact selected', () => {
|
||||
renderWithProviders();
|
||||
expect(screen.getAllByText('Kein Kontakt ausgewählt').length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('renders table headers', () => {
|
||||
renderWithRouter();
|
||||
expect(screen.getByText('Name')).toBeInTheDocument();
|
||||
expect(screen.getByText('E-Mail')).toBeInTheDocument();
|
||||
expect(screen.getByText('Telefon')).toBeInTheDocument();
|
||||
expect(screen.getByText('Position')).toBeInTheDocument();
|
||||
it('shows contact detail when contact is selected', async () => {
|
||||
mockDetailData = {
|
||||
...mockContacts[0],
|
||||
contact_persons: [],
|
||||
};
|
||||
renderWithProviders();
|
||||
goToList();
|
||||
// Click on first contact in list (mobile view)
|
||||
const contactButtons = screen.getAllByText('TestCorp GmbH');
|
||||
fireEvent.click(contactButtons[0]);
|
||||
await waitFor(() => {
|
||||
expect(screen.getAllByTestId('contact-detail').length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
it('renders email as mailto link', () => {
|
||||
renderWithRouter();
|
||||
const emailLink = screen.getByText('max@test.de');
|
||||
expect(emailLink.closest('a')).toHaveAttribute('href', 'mailto:max@test.de');
|
||||
it('renders tags in folder tree from contacts', () => {
|
||||
renderWithProviders();
|
||||
const folderTree = getFirstByTestId('contact-folder-tree');
|
||||
expect(within(folderTree).getByText('VIP')).toBeInTheDocument();
|
||||
expect(within(folderTree).getByText('IT')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows empty state when no contacts and no search', () => {
|
||||
mockData = { items: [], total: 0 };
|
||||
renderWithRouter();
|
||||
expect(screen.getByText('Keine Kontakte vorhanden')).toBeInTheDocument();
|
||||
mockData = { items: mockContacts, total: 2 };
|
||||
});
|
||||
|
||||
it('clicking sort header toggles sort direction', () => {
|
||||
renderWithRouter();
|
||||
const emailHeader = screen.getByText('E-Mail');
|
||||
const th = emailHeader.closest('th');
|
||||
expect(th).toHaveAttribute('aria-sort', 'none');
|
||||
fireEvent.click(emailHeader);
|
||||
expect(th).toHaveAttribute('aria-sort', 'ascending');
|
||||
});
|
||||
|
||||
it('shows loading state in DataGrid when loading', () => {
|
||||
it('shows loading state', () => {
|
||||
mockIsLoading = true;
|
||||
mockData = undefined;
|
||||
renderWithRouter();
|
||||
expect(screen.getByTestId('contacts-grid')).toBeInTheDocument();
|
||||
expect(screen.getByText(/Wird geladen/)).toBeInTheDocument();
|
||||
mockIsLoading = false;
|
||||
mockData = { items: mockContacts, total: 2 };
|
||||
mockListData = undefined;
|
||||
renderWithProviders();
|
||||
goToList();
|
||||
expect(screen.getAllByTestId('contact-list-loading').length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('opens edit modal when new button clicked', () => {
|
||||
renderWithProviders();
|
||||
goToList();
|
||||
const newBtns = screen.getAllByTestId('contacts-new-btn');
|
||||
fireEvent.click(newBtns[0]);
|
||||
expect(screen.getByTestId('contact-type-select')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows empty state when no contacts', () => {
|
||||
mockListData = { items: [], total: 0, page: 1, page_size: 25 };
|
||||
renderWithProviders();
|
||||
goToList();
|
||||
expect(screen.getAllByTestId('contact-list-empty').length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -5,8 +5,10 @@ import { MemoryRouter } from 'react-router-dom';
|
||||
import { DashboardPage } from '@/pages/Dashboard';
|
||||
|
||||
vi.mock('@/api/hooks', () => ({
|
||||
useCompanies: () => ({ data: { items: [], total: 24 }, isLoading: false }),
|
||||
useContacts: () => ({ data: { items: [], total: 156 }, isLoading: false }),
|
||||
useUnifiedContacts: (page: number, pageSize: number, search: any, type: string) => ({
|
||||
data: { items: [], total: type === 'company' ? 24 : 156, page: 1, page_size: 25 },
|
||||
isLoading: false,
|
||||
}),
|
||||
useAuditLog: () => ({
|
||||
data: {
|
||||
items: [
|
||||
|
||||
@@ -52,7 +52,6 @@ describe('AppShell', () => {
|
||||
renderWithRouter();
|
||||
const sidebar = screen.getByTestId('sidebar');
|
||||
expect(within(sidebar).getByText('Dashboard')).toBeInTheDocument();
|
||||
expect(within(sidebar).getByText('Firmen')).toBeInTheDocument();
|
||||
expect(within(sidebar).getByText('Kontakte')).toBeInTheDocument();
|
||||
expect(within(sidebar).getByText('Einstellungen')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
@@ -12,7 +12,6 @@ describe('Sidebar', () => {
|
||||
</MemoryRouter>
|
||||
);
|
||||
expect(screen.getByLabelText('Dashboard')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('Firmen')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('Kontakte')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('Einstellungen')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user