slp-modular-cms/frontend/src/components/cms/AddCmsInstanceDialog.test.tsx

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: 10000 });
    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('');
    });
});