KanbanGit/tests/Fixtures/settings-browser.mjs

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