52 lines
2.5 KiB
JavaScript
52 lines
2.5 KiB
JavaScript
// Checks the size modes (Compact / Normal / Large): body text and the heights of a table row, a
|
|
// text field, the submit button and (on phones) a mobile menu link. Sets the size on the admin
|
|
// account, so it needs the redmine_tonalmine plugin (dev/docker-compose.yml); resets it when done.
|
|
// Usage: node check-sizes.mjs (exits 1 on any failure)
|
|
import { chromium } from 'playwright';
|
|
import { setSize } from './size.mjs';
|
|
|
|
const BASE = process.env.REDMINE_URL ?? 'http://127.0.0.1:3070';
|
|
// size → [body text, fields / buttons / phone table rows, mobile menu links]
|
|
const SIZES = { compact: ['13px', 32, 40], normal: ['14px', 40, 48], large: ['16px', 48, 56] };
|
|
const browser = await chromium.launch();
|
|
let failures = 0;
|
|
|
|
function check(name, got, want) {
|
|
const ok = got === want;
|
|
if (!ok) failures++;
|
|
console.log(`${ok ? 'ok ' : 'FAIL'} ${name}${ok ? '' : `\n expected ${want}, got ${got}`}`);
|
|
}
|
|
|
|
const height = (page, selector) => page.$eval(selector, (el) => Math.round(el.getBoundingClientRect().height));
|
|
|
|
for (const [width, mobile] of [[1440, false], [390, true]]) {
|
|
const page = await browser.newPage({ viewport: { width, height: 900 } });
|
|
await page.goto(`${BASE}/login`);
|
|
await page.fill('#username', 'admin');
|
|
await page.fill('#password', 'admin');
|
|
await page.click('#login-submit');
|
|
await page.waitForURL((url) => !url.pathname.startsWith('/login'));
|
|
|
|
for (const [size, [text, control, menuLink]] of Object.entries(SIZES)) {
|
|
await setSize(page, size);
|
|
const at = `${size} ${width}`;
|
|
await page.goto(`${BASE}/projects/apollo/issues`, { waitUntil: 'networkidle' });
|
|
check(`${at} body text`, await page.$eval('body', (el) => getComputedStyle(el).fontSize), text);
|
|
// On desktop the cells' 4px padding comes on top of their block-size
|
|
check(`${at} issue row`, await height(page, 'table.list.issues tbody tr:first-child'), control + (mobile ? 0 : 8));
|
|
if (mobile) {
|
|
await page.click('.mobile-toggle-button');
|
|
await page.waitForSelector('.flyout-menu .js-project-menu a.overview', { state: 'visible' });
|
|
check(`${at} mobile menu link`, await height(page, '.flyout-menu .js-project-menu a.overview'), menuLink);
|
|
}
|
|
await page.goto(`${BASE}/projects/apollo/issues/new`, { waitUntil: 'networkidle' });
|
|
check(`${at} text field`, await height(page, '#issue_subject'), control);
|
|
check(`${at} submit button`, await height(page, 'input[name="commit"]'), control);
|
|
}
|
|
await setSize(page);
|
|
await page.close();
|
|
}
|
|
|
|
await browser.close();
|
|
process.exit(failures ? 1 : 0);
|