KanbanGit/tests/Fixtures/project-creation.mjs

import assert from 'node:assert/strict';
import process from 'node:process';
import { fileURLToPath } from 'node:url';
import vue from '@vitejs/plugin-vue';
import tailwind from '@tailwindcss/vite';
import { createServer } from 'vite';
import { createSSRApp, h } from 'vue';
import { renderToString } from 'vue/server-renderer';
import { createInertiaApp } from '@inertiajs/vue3';

const serve = process.argv.includes('--serve');
const server = await createServer({
    configFile: false,
    cacheDir: 'node_modules/.vite/project-creation-fixture',
    plugins: [vue(), ...(serve ? [tailwind()] : [])],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('../../resources/js', import.meta.url)),
        },
    },
    server: serve
        ? { host: '127.0.0.1', port: 4179, strictPort: true, hmr: false }
        : { middlewareMode: true, hmr: false, watch: null },
    appType: 'custom',
});
const areas = [
    'project_settings',
    'board_columns',
    'ticket_statuses',
    'status_transitions',
    'ticket_types',
    'ticket_priorities',
    'ticket_fields',
    'ticket_link_types',
    'repository_connections',
    'notification_actions',
];
function makePage(url, errors = {}) {
    const query = new URL(url, 'http://localhost').searchParams;
    return {
        component: url.startsWith('/projects/create')
            ? 'Create'
            : 'Destination',
        url,
        version: null,
        clearHistory: false,
        encryptHistory: false,
        props: {
            name: 'KanbanGit',
            errors,
            sidebarOpen: true,
            auth: {
                user: {
                    id: 1,
                    name: 'Alex Morgan',
                    email: 'alex@example.test',
                    avatar: null,
                },
                permissions: {
                    globalAdmin: false,
                    projectCreate: true,
                    canManageTeams: false,
                },
            },
            navigation: { project: null },
            copyAreaOptions: areas.map((value) => ({
                value,
                label: value,
                description: 'Server description',
            })),
            sourceProjects: query.has('empty')
                ? []
                : [
                      {
                          id: 7,
                          key: 'ENG',
                          name: 'Engineering · Platform and developer experience',
                      },
                      { id: 8, key: 'OPS', name: 'Operations' },
                  ],
            sourceTemplates:
                query.has('empty') || query.has('no-templates')
                    ? []
                    : [
                          {
                              id: 3,
                              name: 'Team baseline',
                              slug: 'team-baseline',
                              copy_areas: ['board_columns', 'ticket_types'],
                          },
                          {
                              id: 4,
                              name: 'Minimal setup',
                              slug: 'minimal',
                              copy_areas: [],
                          },
                      ],
            selectedSourceTemplateId: query.has('template')
                ? Number(query.get('template'))
                : null,
        },
    };
}
if (serve) {
    // Real Vue/Inertia form with isolated transport; PHPUnit covers persisted projects.
    server.middlewares.use(async (request, response, next) => {
        if (!request.url.startsWith('/projects')) {
            return next();
        }
        let url = request.url;
        let errors = {};
        if (request.method === 'POST') {
            const result =
                request.headers.cookie?.match(
                    /creation_test_result=(\w+)/,
                )?.[1] ?? 'success';
            let body = '';
            for await (const chunk of request) {
                body += chunk;
            }
            const data = JSON.parse(body);
            if (result === 'server') {
                response.statusCode = 503;
                response.end('Simulated server failure');
                return;
            }
            url = result === 'validation' ? '/projects/create' : '/projects/99';
            if (result === 'validation') {
                errors = {
                    key: 'The key has already been taken.',
                    ...(data.creation_mode === 'duplicate'
                        ? {
                              'copy_areas.0':
                                  'Select a valid configuration area.',
                          }
                        : {}),
                };
            }
        }
        const page = makePage(url, errors);
        response.setHeader('Vary', 'X-Inertia');
        if (request.headers['x-inertia']) {
            response.setHeader('X-Inertia', 'true');
            response.setHeader('Content-Type', 'application/json');
            response.end(JSON.stringify(page));
            return;
        }
        const escaped = JSON.stringify(page)
            .replaceAll('&', '&')
            .replaceAll('"', '"')
            .replaceAll('<', '&lt;');
        response.setHeader('Content-Type', 'text/html');
        response.end(
            await server.transformIndexHtml(
                request.url,
                '<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><div id="app" data-page="' +
                    escaped +
                    '"></div><script type="module" src="/tests/Fixtures/project-creation-preview.mjs"></script></body></html>',
            ),
        );
    });
    await server.listen();
    console.log(
        'Project creation fixture ready at http://127.0.0.1:4179/projects/create',
    );
} else {
    try {
        const { createLocalization } = await server.ssrLoadModule(
            '/resources/js/lib/localization.ts',
        );
        const { createAppearance } = await server.ssrLoadModule(
            '/resources/js/composables/useAppearance.ts',
        );
        const { en } = await server.ssrLoadModule(
            '/resources/js/locales/en.ts',
        );
        const Create = (
            await server.ssrLoadModule(
                '/resources/js/pages/projects/Create.vue',
            )
        ).default;
        const render = async (
            url,
            errors = {},
            locale = createLocalization(),
        ) => {
            const response = await createInertiaApp({
                page: makePage(url, errors),
                resolve: () => Create,
                render: renderToString,
                setup: ({ App, props, plugin }) =>
                    createSSRApp({ render: () => h(App, props) })
                        .use(plugin)
                        .use(locale)
                        .use(createAppearance('light')),
            });
            return response.body.split('<main')[1].split('</main>')[0];
        };
        const empty = await render('/projects/create?empty');
        assert.match(empty, /value="scratch"[^>]*checked/);
        assert.match(empty, /value="duplicate"[^>]*disabled/);
        assert.match(empty, /value="template"[^>]*disabled/);
        assert.match(empty, /No accessible projects/);
        assert.match(empty, /No published templates/);
        assert.doesNotMatch(empty, /<select/);
        const scratch = await render('/projects/create?no-templates');
        assert.match(scratch, /value="duplicate"[^>]*aria-invalid="false"/);
        assert.doesNotMatch(scratch, /value="duplicate"[^>]*disabled/);
        const template = await render('/projects/create');
        assert.match(template, /value="template"[^>]*checked/);
        assert.match(template, /Team baseline/);
        assert.match(template, /Board columns/);
        assert.match(template, /Ticket types/);
        assert.match(template, /The project stays linked to this template/);
        assert.doesNotMatch(template, /Server description/);
        const preselected = await render('/projects/create?template=4');
        assert.match(preselected, /Minimal setup/);
        assert.match(
            preselected,
            /This template uses the default project setup/,
        );
        for (const id of [
            'name-error',
            'key-help',
            'key-error',
            'template-help',
            'source-template-error',
            'creation-mode-error',
        ]) {
            assert.ok(
                template.includes(`id="${id}"`),
                `Missing accessible feedback target: ${id}`,
            );
        }
        const translated = await render(
            '/projects/create',
            {},
            createLocalization(
                { locale: 'de' },
                {
                    de: {
                        ...en,
                        'projectCreation.title': 'Projekt anlegen',
                        'projectCreation.areas.boardColumns.label':
                            'Boardspalten',
                    },
                },
            ),
        );
        assert.match(translated, /Projekt anlegen/);
        assert.match(translated, /Boardspalten/);
        console.log('Project creation rendering checks passed.');
    } finally {
        await server.close();
    }
}