Initial commit: React frontend (SLP Software) + AIDLC workflow docs

Co-authored-by: Junie <junie@jetbrains.com>

src/components/__tests__/Nav.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, beforeEach } from 'vitest';
+import { Nav } from '../Nav';
+import { ThemeProvider } from '../../theme/ThemeProvider';
+
+function renderNav() {
+  return render(
+    <ThemeProvider>
+      <Nav />
+    </ThemeProvider>,
+  );
+}
+
+describe('Nav', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    document.documentElement.className = '';
+  });
+
+  it('renders all nav links including the CTA', () => {
+    renderNav();
+    expect(screen.getByText('Pakketten')).toBeInTheDocument();
+    expect(screen.getByText('Werkwijze')).toBeInTheDocument();
+    expect(screen.getByText('Over')).toBeInTheDocument();
+    expect(screen.getByTestId('nav-cta-link')).toHaveTextContent('Start project');
+  });
+
+  it('renders the theme toggle with a Dutch accessible label', () => {
+    renderNav();
+    expect(screen.getByRole('button', { name: 'Wissel kleurthema' })).toBeInTheDocument();
+  });
+
+  it('toggles the theme when the toggle button is clicked', () => {
+    renderNav();
+    const toggle = screen.getByTestId('theme-toggle-button');
+    expect(toggle).toHaveAttribute('aria-pressed', 'false');
+    fireEvent.click(toggle);
+    expect(toggle).toHaveAttribute('aria-pressed', 'true');
+  });
+});

src/components/__tests__/PackagesSection.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { PackagesSection } from '../PackagesSection';
+import { packages } from '../../data/content';
+
+function renderWithQueryClient() {
+  const queryClient = new QueryClient();
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <PackagesSection />
+    </QueryClientProvider>,
+  );
+}
+
+describe('PackagesSection', () => {
+  it('renders one PackageCard per package once loaded', async () => {
+    renderWithQueryClient();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('packages-grid').children.length).toBe(packages.length);
+    });
+
+    for (const pkg of packages) {
+      expect(screen.getByTestId(`package-card-${pkg.id}`)).toBeInTheDocument();
+      expect(screen.getByText(pkg.title)).toBeInTheDocument();
+    }
+  });
+
+  it('marks the featured package as "Meest gekozen"', async () => {
+    renderWithQueryClient();
+
+    await waitFor(() => {
+      expect(screen.getByText('Meest gekozen')).toBeInTheDocument();
+    });
+  });
+});