feat(KAN-38): rebuild personal Git connection settings

2026-09-15 14:01:31 +00:00
parent 3869e5b8a6
commit 9b90c24224
8 changed files with 1051 additions and 240 deletions
@@ -0,0 +1,210 @@
+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/git-connections-fixture',
+    plugins: [vue(), ...(serve ? [tailwind()] : [])],
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('../../resources/js', import.meta.url)),
+        },
+    },
+    server: serve
+        ? { host: '127.0.0.1', port: 4186, strictPort: true, hmr: false }
+        : { middlewareMode: true, hmr: false, watch: null },
+    appType: 'custom',
+});
+const connection = {
+    id: 1,
+    user_id: 1,
+    provider: 'gitea',
+    provider_label: 'Gitea',
+    base_url: 'https://git.example.test',
+    provider_user_id: '42',
+    account_login: 'alex',
+    account_name: 'Alex Morgan',
+    created_at: null,
+    updated_at: null,
+};
+function makePage(extra = {}) {
+    return {
+        component: 'GitConnections',
+        url: '/settings/git-connections',
+        version: null,
+        clearHistory: false,
+        encryptHistory: false,
+        props: {
+            name: 'KanbanGit',
+            errors: {},
+            sidebarOpen: true,
+            appearance: 'system',
+            status: null,
+            gitConnections: [connection],
+            auth: {
+                user: {
+                    id: 1,
+                    name: 'Alex Morgan',
+                    email: 'alex@example.test',
+                    avatar: null,
+                    avatar_color: '#10B981',
+                    avatar_is_generated: true,
+                },
+                permissions: {
+                    globalAdmin: false,
+                    projectCreate: false,
+                    canManageTeams: false,
+                },
+            },
+            navigation: { project: null },
+            ...extra,
+        },
+    };
+}
+if (serve) {
+    let connections = [connection];
+    server.middlewares.use(async (request, response, next) => {
+        if (!request.url.startsWith('/settings')) {
+            return next();
+        }
+        const url = new URL(request.url, 'http://localhost');
+        const mutation = request.method !== 'GET';
+        const result =
+            request.headers.cookie?.match(/git_test_result=(\w+)/)?.[1] ??
+            'success';
+        let extra = {};
+        if (!mutation && url.searchParams.has('reset')) {
+            connections = [connection];
+        }
+        if (mutation && ['server', 'forbidden'].includes(result)) {
+            response.statusCode = result === 'forbidden' ? 403 : 503;
+            response.end('Simulated request failure');
+            return;
+        }
+        if (mutation) {
+            let body = '';
+            for await (const chunk of request) {
+                body += chunk;
+            }
+            const data = body ? JSON.parse(body) : {};
+            if (result === 'validation') {
+                extra.errors = {
+                    api_token:
+                        'Gitea could not authenticate with this base URL and token.',
+                };
+            } else if (request.method === 'DELETE') {
+                connections = connections.filter(
+                    (item) =>
+                        item.id !== Number(url.pathname.split('/').at(-1)),
+                );
+                extra.status = 'alex @ https://git.example.test was removed.';
+            } else if (request.method === 'PATCH') {
+                connections = connections.map((item) =>
+                    item.id === Number(url.pathname.split('/').at(-1))
+                        ? { ...item, base_url: data.base_url }
+                        : item,
+                );
+                extra.status = 'Git connection was updated.';
+            } else {
+                connections.push({
+                    ...connection,
+                    id: 2,
+                    account_login: 'new-account',
+                    base_url: data.base_url,
+                });
+                extra.status = 'Git connection was added.';
+            }
+        }
+        const page = makePage({
+            gitConnections: url.searchParams.has('empty') ? [] : connections,
+            ...extra,
+        });
+        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('&', '&amp;')
+            .replaceAll('"', '&quot;')
+            .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/git-connections-preview.mjs"></script></body></html>',
+            ),
+        );
+    });
+    await server.listen();
+    console.log('Git connections fixture ready.');
+} 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 component = (
+            await server.ssrLoadModule(
+                '/resources/js/pages/settings/GitConnections.vue',
+            )
+        ).default;
+        const render = async (extra = {}, locale = createLocalization()) =>
+            (
+                await createInertiaApp({
+                    page: makePage(extra),
+                    resolve: () => component,
+                    render: renderToString,
+                    setup: ({ App, props, plugin }) =>
+                        createSSRApp({ render: () => h(App, props) })
+                            .use(plugin)
+                            .use(locale)
+                            .use(createAppearance()),
+                })
+            ).body;
+        const html = await render();
+        assert.match(html, /Gitea/);
+        assert.match(html, /https:\/\/git.example.test/);
+        assert.match(html, /Edit alex at https:\/\/git.example.test/);
+        assert.doesNotMatch(html, /name="api_token"/);
+        assert.match(
+            await render({ gitConnections: [] }),
+            /No Git connections yet/,
+        );
+        assert.match(
+            await render(
+                {},
+                createLocalization(
+                    { locale: 'de' },
+                    {
+                        de: {
+                            ...en,
+                            'gitConnections.add': 'Verbindung hinzufügen',
+                        },
+                    },
+                ),
+            ),
+            /Verbindung hinzufügen/,
+        );
+        console.log('Git connections rendering checks passed.');
+    } finally {
+        await server.close();
+    }
+}