Adds frontend for cms page

2026-06-30 23:23:50 +02:00
parent c156107cb1
commit 488ab821a7
38 changed files with 2047 additions and 39 deletions
@@ -1,19 +1,70 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
 import { renderApp, mockAuthenticated, mockGuest } from '@/test/utils';
+import { server } from '@/mocks/server';
+import { API_BASE } from '@/mocks/auth/fixtures';
+import { resetMockCmsInstances } from '@/mocks/cms/handlers';
 import { _resetSetupStatusCache } from '@/router';

 beforeEach(() => {
    _resetSetupStatusCache();
+    resetMockCmsInstances();
 });

+const CMS_URL = `${API_BASE}/api/v1/CmsInstances`;
+
 describe('CmsPage', () => {
-    it('renders the CMS page title and placeholder', async () => {
+    it('renders the page title and Add button', async () => {
        mockAuthenticated();
        renderApp('/cms');

        expect(await screen.findByTestId('cms-title', {}, { timeout: 5000 })).toBeInTheDocument();
-        expect(screen.getByTestId('cms-placeholder')).toBeInTheDocument();
+        expect(screen.getByTestId('cms-add-button')).toBeInTheDocument();
+    });
+
+    it('renders list of CMS instances from seed data', async () => {
+        mockAuthenticated();
+        renderApp('/cms');
+
+        const rows = await screen.findAllByTestId('cms-instance-row', {}, { timeout: 5000 });
+        expect(rows.length).toBe(2);
+    });
+
+    it('renders empty state when no instances exist', async () => {
+        mockAuthenticated();
+        server.use(http.get(CMS_URL, () => HttpResponse.json([])));
+        renderApp('/cms');
+
+        expect(await screen.findByTestId('cms-empty-state', {}, { timeout: 5000 })).toBeInTheDocument();
+        expect(screen.getByTestId('cms-empty-add-button')).toBeInTheDocument();
+    });
+
+    it('opens AddCmsInstanceDialog when Add button is clicked', async () => {
+        mockAuthenticated();
+        renderApp('/cms');
+
+        await screen.findByTestId('cms-add-button', {}, { timeout: 5000 });
+        await userEvent.click(screen.getByTestId('cms-add-button'));
+
+        expect(await screen.findByTestId('add-cms-name')).toBeInTheDocument();
+    });
+
+    it('adds a CMS instance successfully', async () => {
+        mockAuthenticated();
+        renderApp('/cms');
+
+        await screen.findByTestId('cms-add-button', {}, { timeout: 5000 });
+        await userEvent.click(screen.getByTestId('cms-add-button'));
+
+        await userEvent.type(screen.getByTestId('add-cms-name'), 'New CMS');
+        await userEvent.type(screen.getByTestId('add-cms-url'), 'http://new.example.com');
+        await userEvent.type(screen.getByTestId('add-cms-apikey-input'), 'secret-key');
+        await userEvent.click(screen.getByTestId('add-cms-submit'));
+
+        const rows = await screen.findAllByTestId('cms-instance-row', {}, { timeout: 5000 });
+        expect(rows.length).toBe(3);
    });

    it('redirects unauthenticated users to login', async () => {