T07a: frontend core SPA — shell + auth + routing + i18n + UI library + a11y
- React 18 + Vite + TypeScript + Tailwind CSS setup - AppShell with Sidebar (plugin menu) + TopBar (tenant switcher, search, notifications, user menu) - Auth pages: Login, PasswordResetRequest, PasswordResetConfirm - Protected routes with auth guard - API client (axios with interceptors: session cookie, 401 redirect, 422 validation) - TanStack Query hooks for auth, users, companies, contacts, notifications - Zustand stores: authStore, uiStore - i18n setup (de/en locales) with react-i18next - UI component library: Button, Input, Select, Modal, Toast, Table, Card, Badge, Avatar, Pagination, EmptyState, Skeleton, ConfirmDialog - Accessibility: ARIA labels, 44px touch targets, keyboard nav, reduced-motion, sr-only - Design tokens from prototype as CSS custom properties - 111 tests passing across 20 test files - tsc --noEmit: 0 errors - npm run build: success (471KB JS, 24KB CSS)
This commit is contained in:
leocrm-bot
@@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { render, screen, within } from '@testing-library/react';
|
||||
import { MemoryRouter, Route, Routes } from 'react-router-dom';
|
||||
import { AppShell } from '@/components/layout/AppShell';
|
||||
|
||||
vi.mock('@/api/hooks', () => ({
|
||||
useLogout: () => ({ mutateAsync: vi.fn(), isPending: false }),
|
||||
useSwitchTenant: () => ({ mutateAsync: vi.fn(), isPending: false }),
|
||||
}));
|
||||
|
||||
function renderWithRouter(initialPath = '/dashboard') {
|
||||
return render(
|
||||
<MemoryRouter initialEntries={[initialPath]}>
|
||||
<Routes>
|
||||
<Route path="*" element={<AppShell />} />
|
||||
</Routes>
|
||||
</MemoryRouter>
|
||||
);
|
||||
}
|
||||
|
||||
describe('AppShell', () => {
|
||||
it('renders sidebar, topbar, and content area', () => {
|
||||
renderWithRouter();
|
||||
expect(screen.getByTestId('app-shell')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('sidebar')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('topbar')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('content-area')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('sidebar contains navigation items', () => {
|
||||
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();
|
||||
});
|
||||
|
||||
it('topbar contains tenant switcher, search, notifications, and user menu', () => {
|
||||
renderWithRouter();
|
||||
const topbar = screen.getByTestId('topbar');
|
||||
expect(within(topbar).getByLabelText('Mandant wechseln')).toBeInTheDocument();
|
||||
expect(within(topbar).getByLabelText('Suchen...')).toBeInTheDocument();
|
||||
expect(within(topbar).getByLabelText('Benachrichtigungen')).toBeInTheDocument();
|
||||
expect(within(topbar).getByLabelText('Benutzermenü')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('content area has main role for screen readers', () => {
|
||||
renderWithRouter();
|
||||
expect(screen.getByRole('main')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { render, screen, act } from '@testing-library/react';
|
||||
import { MemoryRouter, Route, Routes, Navigate } from 'react-router-dom';
|
||||
import { ProtectedRoute } from '@/routes/ProtectedRoute';
|
||||
import { useAuthStore } from '@/store/authStore';
|
||||
|
||||
function ProtectedTest() {
|
||||
return (
|
||||
<MemoryRouter initialEntries={['/dashboard']}>
|
||||
<Routes>
|
||||
<Route path="/login" element={<div data-testid="login-page">Login</div>} />
|
||||
<Route path="/dashboard" element={
|
||||
<ProtectedRoute>
|
||||
<div data-testid="protected-content">Protected</div>
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
</Routes>
|
||||
</MemoryRouter>
|
||||
);
|
||||
}
|
||||
|
||||
describe('Router & ProtectedRoute', () => {
|
||||
it('redirects to /login when not authenticated', () => {
|
||||
useAuthStore.setState({ isAuthenticated: false, user: null });
|
||||
render(<ProtectedTest />);
|
||||
expect(screen.getByTestId('login-page')).toBeInTheDocument();
|
||||
expect(screen.queryByTestId('protected-content')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows protected content when authenticated', () => {
|
||||
useAuthStore.setState({
|
||||
isAuthenticated: true,
|
||||
user: { id: '1', email: 'test@test.de', first_name: 'Test', last_name: 'User', role: 'admin', avatar_url: null, tenants: [{ id: 't1', name: 'Test Tenant', slug: 'test' }] },
|
||||
currentTenant: { id: 't1', name: 'Test Tenant', slug: 'test' },
|
||||
});
|
||||
render(<ProtectedTest />);
|
||||
expect(screen.getByTestId('protected-content')).toBeInTheDocument();
|
||||
expect(screen.queryByTestId('login-page')).not.toBeInTheDocument();
|
||||
useAuthStore.setState({ isAuthenticated: false, user: null });
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,40 @@
|
||||
import React from 'react';
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { render, screen, within } from '@testing-library/react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { Sidebar } from '@/components/layout/Sidebar';
|
||||
|
||||
describe('Sidebar', () => {
|
||||
it('renders navigation links with ARIA labels', () => {
|
||||
render(
|
||||
<MemoryRouter initialEntries={['/dashboard']}>
|
||||
<Sidebar />
|
||||
</MemoryRouter>
|
||||
);
|
||||
expect(screen.getByLabelText('Dashboard')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('Firmen')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('Kontakte')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('Einstellungen')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('has navigation landmark with aria-label', () => {
|
||||
render(
|
||||
<MemoryRouter initialEntries={['/dashboard']}>
|
||||
<Sidebar />
|
||||
</MemoryRouter>
|
||||
);
|
||||
expect(screen.getByLabelText('Seitenleiste Navigation')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('all nav links have min 44px touch targets', () => {
|
||||
render(
|
||||
<MemoryRouter initialEntries={['/dashboard']}>
|
||||
<Sidebar />
|
||||
</MemoryRouter>
|
||||
);
|
||||
const navLinks = screen.getAllByRole('link');
|
||||
navLinks.forEach((link) => {
|
||||
expect(link.className).toContain('min-h-touch');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,68 @@
|
||||
import React from 'react';
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { render, screen, within } from '@testing-library/react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { TopBar } from '@/components/layout/TopBar';
|
||||
import { useAuthStore } from '@/store/authStore';
|
||||
|
||||
vi.mock('@/api/hooks', () => ({
|
||||
useLogout: () => ({ mutateAsync: vi.fn(), isPending: false }),
|
||||
useSwitchTenant: () => ({ mutateAsync: vi.fn(), isPending: false }),
|
||||
}));
|
||||
|
||||
function renderTopBar() {
|
||||
return render(
|
||||
<MemoryRouter initialEntries={['/dashboard']}>
|
||||
<TopBar />
|
||||
</MemoryRouter>
|
||||
);
|
||||
}
|
||||
|
||||
describe('TopBar', () => {
|
||||
beforeEach(() => {
|
||||
useAuthStore.setState({
|
||||
isAuthenticated: true,
|
||||
user: {
|
||||
id: '1',
|
||||
email: 'max@test.de',
|
||||
first_name: 'Max',
|
||||
last_name: 'Mustermann',
|
||||
role: 'admin',
|
||||
avatar_url: null,
|
||||
tenants: [
|
||||
{ id: 't1', name: 'Firma Alpha', slug: 'alpha' },
|
||||
{ id: 't2', name: 'Firma Beta', slug: 'beta' },
|
||||
],
|
||||
},
|
||||
currentTenant: { id: 't1', name: 'Firma Alpha', slug: 'alpha' },
|
||||
});
|
||||
});
|
||||
|
||||
it('renders tenant switcher with current tenant name', () => {
|
||||
renderTopBar();
|
||||
expect(screen.getByText('Firma Alpha')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders search input with aria-label', () => {
|
||||
renderTopBar();
|
||||
expect(screen.getByLabelText('Suchen...')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders notifications button with aria-label', () => {
|
||||
renderTopBar();
|
||||
expect(screen.getByLabelText('Benachrichtigungen')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders user menu button with aria-label', () => {
|
||||
renderTopBar();
|
||||
expect(screen.getByLabelText('Benutzermenü')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('all interactive elements have min-h-touch for 44px targets', () => {
|
||||
renderTopBar();
|
||||
const buttons = screen.getAllByRole('button');
|
||||
buttons.forEach((btn) => {
|
||||
expect(btn.className).toContain('min-h-touch');
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user