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
@@ -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();
+}