slp-modular-cms/frontend/src/pages/CmsPage.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, 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 page title and Add button', async () => {
        mockAuthenticated();
        renderApp('/cms');

        expect(await screen.findByTestId('cms-title', {}, { timeout: 10000 })).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: 10000 });
        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: 10000 })).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: 10000 });
        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: 10000 });
        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: 10000 });
        expect(rows.length).toBe(3);
    });

    it('redirects unauthenticated users to login', async () => {
        mockGuest();
        renderApp('/cms');
        expect(await screen.findByTestId('login-form-submit-button')).toBeInTheDocument();
    });
});