feat(KAN-36): rebuild profile and appearance settings

2026-09-14 17:36:41 +02:00
parent 2409c3b18f
commit 1377ee8510
11 changed files with 1004 additions and 322 deletions
@@ -84,15 +84,11 @@ try {
        renderTheme('light'),
        renderTheme('dark'),
    ]);
-    const selectedButton = (html) =>
-        html.match(
-            /<button[^>]*aria-pressed="true"[^>]*>([\s\S]*?)<\/button>/,
-        )[1];
-    assert.match(selectedButton(light), />Light</);
-    assert.match(selectedButton(dark), />Dark</);
-    assert.match(light, /role="group" aria-label="Color theme"/);
-    assert.equal((light.match(/type="button"/g) ?? []).length, 3);
-    assert.equal((dark.match(/aria-pressed="true"/g) ?? []).length, 1);
+    assert.match(light, /value="light"[^>]*checked/);
+    assert.match(dark, /value="dark"[^>]*checked/);
+    assert.match(light, /<legend class="sr-only">Color theme<\/legend>/);
+    assert.equal((light.match(/type="radio"/g) ?? []).length, 3);
+    assert.equal((dark.match(/ checked/g) ?? []).length, 1);
    assert.equal(normalizeAppearance('unexpected'), 'system');

    const blade = await readFile('resources/views/app.blade.php', 'utf8');
@@ -0,0 +1,146 @@
+import assert from 'node:assert/strict';
+import { Buffer } from 'node:buffer';
+import process from 'node:process';
+
+const { chromium } = await import(
+    process.env.PLAYWRIGHT_MODULE ?? 'playwright'
+);
+const browser = await chromium.launch({ channel: 'chrome', headless: true });
+const base = 'http://127.0.0.1:4184';
+const context = await browser.newContext({
+    viewport: { width: 1440, height: 1000 },
+});
+const page = await context.newPage();
+page.setDefaultTimeout(10000);
+const errors = [];
+page.on('pageerror', (error) => {
+    errors.push(error.message);
+    console.error(error.message);
+});
+page.on('dialog', (dialog) => dialog.accept());
+const setResult = (value) =>
+    context.addCookies([{ name: 'settings_test_result', value, url: base }]);
+const state = (value) =>
+    page.locator(`[data-form-state="${value}"]`).waitFor({ state: 'visible' });
+const themeRadio = (value) =>
+    page.locator(`input[name="appearance"][value="${value}"]`);
+const chooseTheme = (value) =>
+    page
+        .locator(`label:has(input[name="appearance"][value="${value}"])`)
+        .click();
+const image = {
+    name: 'profile.png',
+    mimeType: 'image/png',
+    buffer: Buffer.from(
+        'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9Wl2nWQAAAAASUVORK5CYII=',
+        'base64',
+    ),
+};
+
+try {
+    for (const width of [1440, 390, 320]) {
+        await page.setViewportSize({ width, height: 1000 });
+        for (const theme of ['light', 'dark']) {
+            await page.emulateMedia({ colorScheme: theme });
+            await page.goto(`${base}/settings/appearance`);
+            await page
+                .getByRole('heading', { name: 'Settings', exact: true })
+                .waitFor();
+            await chooseTheme(theme);
+            assert.equal(await themeRadio(theme).isChecked(), true);
+            assert.equal(
+                await page
+                    .locator('html')
+                    .evaluate((element) => element.classList.contains('dark')),
+                theme === 'dark',
+            );
+            assert.equal(
+                await page.evaluate(
+                    () =>
+                        document.documentElement.scrollWidth <=
+                        window.innerWidth,
+                ),
+                true,
+                `Appearance overflows at ${width}px in ${theme}`,
+            );
+        }
+    }
+
+    await page.goto(`${base}/settings/appearance`);
+    const light = themeRadio('light');
+    await light.focus();
+    await page.keyboard.press('ArrowRight');
+    assert.equal(await themeRadio('dark').isChecked(), true);
+    await page.reload();
+    assert.equal(await themeRadio('dark').isChecked(), true);
+
+    await page.setViewportSize({ width: 320, height: 900 });
+    await page.goto(`${base}/settings/profile`);
+    const avatarInput = page.locator('#avatar');
+    assert.equal(
+        await avatarInput.getAttribute('accept'),
+        'image/png,image/jpeg,image/webp',
+    );
+    await avatarInput.setInputFiles(image);
+    await page.getByText('Selected: profile.png', { exact: true }).waitFor();
+    assert.match(
+        await page
+            .locator('img[alt="Profile picture preview"]')
+            .getAttribute('src'),
+        /^blob:/,
+    );
+    assert.equal(
+        await page.evaluate(
+            () => document.documentElement.scrollWidth <= window.innerWidth,
+        ),
+        true,
+    );
+
+    await setResult('validation');
+    await page.getByLabel('Name', { exact: true }).fill('Updated User');
+    await page
+        .getByRole('button', { name: 'Save profile', exact: true })
+        .click();
+    await state('validation');
+    await page
+        .getByText('The avatar must be a file of type: jpg, jpeg, png, webp.', {
+            exact: true,
+        })
+        .waitFor();
+    assert.equal(await avatarInput.getAttribute('aria-invalid'), 'true');
+    assert.equal(
+        await page.getByLabel('Name', { exact: true }).inputValue(),
+        'Updated User',
+    );
+    assert.match(
+        await page
+            .locator('img[alt="Profile picture preview"]')
+            .getAttribute('src'),
+        /^blob:/,
+    );
+
+    await page.route('**/settings/profile?*', (route) => route.abort('failed'));
+    await page
+        .getByRole('button', { name: 'Save profile', exact: true })
+        .click();
+    await state('network');
+    await page.unroute('**/settings/profile?*');
+    await setResult('success');
+    await page.getByRole('button', { name: 'Try again' }).click();
+    await state('success');
+
+    await page.goto(`${base}/settings/profile`);
+    await page
+        .getByRole('button', { name: 'Remove picture', exact: true })
+        .click();
+    await page
+        .getByRole('button', { name: 'Remove picture', exact: true })
+        .waitFor({ state: 'detached' });
+
+    assert.deepEqual(errors, []);
+    console.log(
+        'Settings browser checks passed: avatar preview, upload errors and retry, removal, keyboard, 320/390/1440px and both themes.',
+    );
+} finally {
+    await browser.close();
+}
@@ -0,0 +1,17 @@
+import { createApp, h } from 'vue';
+import { createInertiaApp } from '@inertiajs/vue3';
+import '../../resources/css/app.css';
+import Appearance from '../../resources/js/pages/settings/Appearance.vue';
+import Profile from '../../resources/js/pages/settings/Profile.vue';
+import { createAppearance } from '../../resources/js/composables/useAppearance';
+import { createLocalization } from '../../resources/js/lib/localization';
+
+createInertiaApp({
+    resolve: (name) => (name === 'Appearance' ? Appearance : Profile),
+    setup: ({ el, App, props, plugin }) =>
+        createApp({ render: () => h(App, props) })
+            .use(plugin)
+            .use(createLocalization())
+            .use(createAppearance())
+            .mount(el),
+});
@@ -0,0 +1,207 @@
+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/settings-fixture',
+    plugins: [vue(), ...(serve ? [tailwind()] : [])],
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('../../resources/js', import.meta.url)),
+        },
+    },
+    server: serve
+        ? { host: '127.0.0.1', port: 4184, strictPort: true, hmr: false }
+        : { middlewareMode: true, hmr: false, watch: null },
+    appType: 'custom',
+});
+
+function makeUser(generated = false) {
+    return {
+        id: 1,
+        name: 'Alex Morgan',
+        email: 'alex@example.test',
+        avatar: generated ? null : '/avatar.png',
+        avatar_color: '#10B981',
+        avatar_is_generated: generated,
+        email_verified_at: null,
+        must_change_password_on_next_login: false,
+        created_at: '2026-09-14T00:00:00Z',
+        updated_at: '2026-09-14T00:00:00Z',
+    };
+}
+
+function makePage(url, errors = {}, generated = false) {
+    return {
+        component: url.startsWith('/settings/appearance')
+            ? 'Appearance'
+            : 'Profile',
+        url,
+        version: null,
+        clearHistory: false,
+        encryptHistory: false,
+        props: {
+            name: 'KanbanGit',
+            errors,
+            sidebarOpen: true,
+            mustVerifyEmail: true,
+            status: null,
+            appearance: 'system',
+            auth: {
+                user: makeUser(generated),
+                permissions: {
+                    globalAdmin: false,
+                    projectCreate: false,
+                    canManageTeams: false,
+                },
+            },
+            navigation: { project: null },
+        },
+    };
+}
+
+if (serve) {
+    server.middlewares.use(async (request, response, next) => {
+        if (!request.url.startsWith('/settings')) {
+            return next();
+        }
+
+        let url = request.url;
+        let errors = {};
+        let generated = false;
+        if (request.method !== 'GET') {
+            const result =
+                request.headers.cookie?.match(
+                    /settings_test_result=(\w+)/,
+                )?.[1] ?? 'success';
+            if (result === 'server') {
+                response.statusCode = 503;
+                response.end('Simulated server failure');
+                return;
+            }
+            if (result === 'validation') {
+                errors = {
+                    avatar: 'The avatar must be a file of type: jpg, jpeg, png, webp.',
+                };
+            }
+            generated = request.url.startsWith('/settings/profile/avatar');
+            url = '/settings/profile';
+        }
+
+        const page = makePage(url, errors, generated);
+        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" data-appearance="system"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script>try{const value=localStorage.getItem("appearance");if(["light","dark","system"].includes(value)){document.documentElement.dataset.appearance=value}}catch{}</script></head><body><div id="app" data-page="' +
+                    escaped +
+                    '"></div><script type="module" src="/tests/Fixtures/settings-preview.mjs"></script></body></html>',
+            ),
+        );
+    });
+    await server.listen();
+    console.log(
+        'Settings fixture ready at http://127.0.0.1:4184/settings/profile',
+    );
+} 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 Profile = (
+            await server.ssrLoadModule(
+                '/resources/js/pages/settings/Profile.vue',
+            )
+        ).default;
+        const Appearance = (
+            await server.ssrLoadModule(
+                '/resources/js/pages/settings/Appearance.vue',
+            )
+        ).default;
+        const render = async (
+            url,
+            component,
+            locale = createLocalization(),
+        ) => {
+            const response = await createInertiaApp({
+                page: makePage(url),
+                resolve: () => component,
+                render: renderToString,
+                setup: ({ App, props, plugin }) =>
+                    createSSRApp({ render: () => h(App, props) })
+                        .use(plugin)
+                        .use(locale)
+                        .use(createAppearance('system')),
+            });
+            return response.body;
+        };
+
+        const profile = await render('/settings/profile', Profile);
+        assert.match(profile, /Account settings/);
+        assert.match(profile, /Profile picture/);
+        assert.match(profile, /Choose picture/);
+        assert.match(profile, /accept="image\/png,image\/jpeg,image\/webp"/);
+        assert.match(
+            profile,
+            /On mobile, you can select from your photo library or camera/,
+        );
+        assert.match(profile, /aria-current="page"[^>]*>[\s\S]*Profile/);
+        assert.match(profile, /Delete account/);
+
+        const appearance = await render('/settings/appearance', Appearance);
+        assert.equal((appearance.match(/name="appearance"/g) ?? []).length, 3);
+        assert.match(appearance, /value="light"/);
+        assert.match(appearance, /value="dark"/);
+        assert.match(appearance, /value="system"[^>]*checked/);
+        assert.match(appearance, /Follow the light or dark preference/);
+        assert.match(appearance, /aria-current="page"[^>]*>[\s\S]*Appearance/);
+
+        const localized = await render(
+            '/settings/profile',
+            Profile,
+            createLocalization(
+                { locale: 'de' },
+                {
+                    de: {
+                        ...en,
+                        'settings.eyebrow': 'Kontoeinstellungen',
+                        'profile.title': 'Profil',
+                        'profile.choosePicture': 'Bild auswählen',
+                    },
+                },
+            ),
+        );
+        assert.match(localized, /Kontoeinstellungen/);
+        assert.match(localized, /Profil/);
+        assert.match(localized, /Bild auswählen/);
+        console.log('Settings rendering and localization checks passed.');
+    } finally {
+        await server.close();
+    }
+}