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
@@ -0,0 +1,71 @@
+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 } 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();
+});
+
+async function openDialog() {
+    mockAuthenticated();
+    renderApp('/cms');
+    await screen.findByTestId('cms-add-button', {}, { timeout: 5000 });
+    await userEvent.click(screen.getByTestId('cms-add-button'));
+    expect(screen.getByTestId('add-cms-name')).toBeInTheDocument();
+}
+
+describe('AddCmsInstanceDialog', () => {
+    it('shows name, url and apiKey fields on open', async () => {
+        await openDialog();
+        expect(screen.getByTestId('add-cms-name')).toBeInTheDocument();
+        expect(screen.getByTestId('add-cms-url')).toBeInTheDocument();
+        expect(screen.getByTestId('add-cms-apikey-input')).toBeInTheDocument();
+        expect(screen.getByTestId('add-cms-submit')).toBeInTheDocument();
+    });
+
+    it('shows field error when name is empty', async () => {
+        await openDialog();
+        await userEvent.click(screen.getByTestId('add-cms-url'));
+        await userEvent.click(screen.getByTestId('add-cms-name'));
+        await userEvent.tab();
+        expect(await screen.findByTestId('add-cms-name-error')).toBeInTheDocument();
+    });
+
+    it('shows field error when URL has no protocol', async () => {
+        await openDialog();
+        await userEvent.type(screen.getByTestId('add-cms-url'), 'cms.example.com');
+        await userEvent.tab();
+        expect(await screen.findByTestId('add-cms-url-error')).toBeInTheDocument();
+    });
+
+    it('shows FormErrorBanner on HTTP 400', async () => {
+        server.use(
+            http.post(`${API_BASE}/api/v1/CmsInstances`, () =>
+                HttpResponse.json({ title: 'Bad Request' }, { status: 400 }),
+            ),
+        );
+        await openDialog();
+        await userEvent.type(screen.getByTestId('add-cms-name'), 'CMS');
+        await userEvent.type(screen.getByTestId('add-cms-url'), 'http://example.com');
+        await userEvent.type(screen.getByTestId('add-cms-apikey-input'), 'key');
+        await userEvent.click(screen.getByTestId('add-cms-submit'));
+
+        expect(await screen.findByTestId('form-error-banner')).toBeInTheDocument();
+        expect(screen.getByTestId('add-cms-name')).toBeInTheDocument();
+    });
+
+    it('resets form when dialog is closed and reopened', async () => {
+        await openDialog();
+        await userEvent.type(screen.getByTestId('add-cms-name'), 'Typed value');
+        await userEvent.keyboard('{Escape}');
+        await userEvent.click(screen.getByTestId('cms-add-button'));
+        expect((screen.getByTestId('add-cms-name') as HTMLInputElement).value).toBe('');
+    });
+});