280 lines
11 KiB
JavaScript
280 lines
11 KiB
JavaScript
import assert from 'node:assert/strict';
|
|
import process from 'node:process';
|
|
|
|
const { chromium } = await import(
|
|
process.env.PLAYWRIGHT_MODULE ?? 'playwright'
|
|
);
|
|
const browser = await chromium.launch({ channel: 'chrome', headless: true });
|
|
const page = await browser.newPage({ viewport: { width: 1440, height: 1000 } });
|
|
page.setDefaultTimeout(10000);
|
|
const base = 'http://127.0.0.1:4185/projects/7/tickets';
|
|
const errors = [];
|
|
page.on('pageerror', (error) => errors.push(error.message));
|
|
const field = (label) => form().getByLabel(label, { exact: true });
|
|
const form = () => page.locator('form').first();
|
|
const state = (value) =>
|
|
form().locator(`[data-form-state="${value}"]`).waitFor();
|
|
const button = (label) =>
|
|
form().getByRole('button', { name: label, exact: true });
|
|
async function visit(create, query = '') {
|
|
await page.goto(`${base}/${create ? 'create' : '42'}${query}`);
|
|
await page.getByRole('heading', { level: 1 }).waitFor();
|
|
if (!create) {
|
|
await page.locator('#ticket-edit > summary').click();
|
|
}
|
|
}
|
|
async function fill(create) {
|
|
await field('Title').fill('A complete ticket');
|
|
await field('Description').fill('Description with context.');
|
|
await field('Assignee').selectOption('2');
|
|
await field('Parent ticket').selectOption('40');
|
|
await field('Estimated story points').fill('0');
|
|
if (create) {
|
|
await button('Add criterion').click();
|
|
await button('Add criterion').click();
|
|
await button('Indent criterion 2').click();
|
|
}
|
|
await field('Criterion 1').fill('Main criterion');
|
|
await field('Criterion 2').fill('Nested criterion');
|
|
await form()
|
|
.getByRole('checkbox', {
|
|
name: 'Complete criterion 2: Nested criterion',
|
|
exact: true,
|
|
})
|
|
.check();
|
|
if (create) {
|
|
await field('Status').selectOption('4');
|
|
} else {
|
|
await field('Author').selectOption('1');
|
|
await field('Blocker comment').fill('Waiting for review');
|
|
await field('Impact score').fill('2.5');
|
|
await field('Reviewer').selectOption('2');
|
|
}
|
|
}
|
|
async function submit(create) {
|
|
const request = page.waitForRequest(
|
|
(r) =>
|
|
r.method() === (create ? 'POST' : 'PATCH') &&
|
|
r.url().split('?')[0] === (create ? base : `${base}/42`),
|
|
);
|
|
await button(create ? 'Create ticket' : 'Save changes').click();
|
|
return (await request).postDataJSON();
|
|
}
|
|
try {
|
|
for (const create of [true, false]) {
|
|
for (const width of [1440, 390, 320]) {
|
|
await page.setViewportSize({ width, height: 1000 });
|
|
for (const theme of ['light', 'dark']) {
|
|
await page.emulateMedia({
|
|
colorScheme: theme,
|
|
reducedMotion: 'reduce',
|
|
});
|
|
await visit(create, '?admin');
|
|
assert.equal(
|
|
await page
|
|
.locator('html')
|
|
.evaluate((el) => el.classList.contains('dark')),
|
|
theme === 'dark',
|
|
);
|
|
assert.equal(
|
|
await page.evaluate(
|
|
() =>
|
|
document.documentElement.scrollWidth <= innerWidth,
|
|
),
|
|
true,
|
|
`Overflow ${create}/${width}/${theme}`,
|
|
);
|
|
await field('Title').focus();
|
|
await page.keyboard.press('Tab');
|
|
assert.equal(
|
|
await field('Description').evaluate(
|
|
(el) =>
|
|
el === document.activeElement &&
|
|
el.matches(':focus-visible'),
|
|
),
|
|
true,
|
|
);
|
|
await fill(create);
|
|
await page.screenshot({
|
|
path: `/private/tmp/kan31-${create ? 'create' : 'edit'}-${width}-${theme}.png`,
|
|
fullPage: true,
|
|
});
|
|
page.once('dialog', (dialog) => dialog.dismiss());
|
|
await button('Discard changes').click();
|
|
assert.equal(
|
|
await field('Title').inputValue(),
|
|
'A complete ticket',
|
|
);
|
|
page.once('dialog', (dialog) => dialog.accept());
|
|
await button('Discard changes').click();
|
|
assert.equal(
|
|
await button('Discard changes').isDisabled(),
|
|
true,
|
|
);
|
|
assert.equal(
|
|
await field('Title').inputValue(),
|
|
create
|
|
? ''
|
|
: 'Implement a resilient caching layer for the project API',
|
|
);
|
|
}
|
|
}
|
|
await visit(create, '?admin&reject&allErrors');
|
|
await fill(create);
|
|
const data = await submit(create);
|
|
assert.equal(data.title, 'A complete ticket');
|
|
assert.equal(data.description, 'Description with context.');
|
|
assert.equal(Number(data.ticket_type_id), 1);
|
|
assert.equal(Number(data.ticket_priority_id), 2);
|
|
assert.equal(Number(data.assignee_user_id), 2);
|
|
assert.equal(Number(data.parent_ticket_id), 40);
|
|
assert.equal(Number(data.story_points), 0);
|
|
assert.deepEqual(
|
|
data.acceptance_criteria.map(({ text, checked, indent }) => ({
|
|
text,
|
|
checked,
|
|
indent,
|
|
})),
|
|
[
|
|
{ text: 'Main criterion', checked: false, indent: 0 },
|
|
{ text: 'Nested criterion', checked: true, indent: 1 },
|
|
],
|
|
);
|
|
if (create) {
|
|
assert.equal(Number(data.ticket_status_id), 4);
|
|
assert.equal('author_user_id' in data, false);
|
|
} else {
|
|
assert.equal(Number(data.author_user_id), 1);
|
|
assert.equal(data.is_blocked, true);
|
|
assert.equal(data.blocked_comment, 'Waiting for review');
|
|
assert.equal(Number(data.field_values[0].value_number), 2.5);
|
|
assert.equal(Number(data.field_values[1].value_user_id), 2);
|
|
assert.deepEqual(
|
|
data.acceptance_criteria.map((item) => item.id),
|
|
[10, 11],
|
|
);
|
|
assert.equal('ticket_status_id' in data, false);
|
|
}
|
|
await state('validation');
|
|
const fields = [
|
|
'Title',
|
|
'Description',
|
|
'Type',
|
|
'Priority',
|
|
'Assignee',
|
|
'Parent ticket',
|
|
'Estimated story points',
|
|
'Criterion 1',
|
|
...(create
|
|
? ['Status']
|
|
: ['Author', 'Blocker comment', 'Impact score', 'Reviewer']),
|
|
];
|
|
for (const label of fields) {
|
|
const control = field(label);
|
|
assert.equal(
|
|
await control.getAttribute('aria-invalid'),
|
|
'true',
|
|
label,
|
|
);
|
|
const errorId = (await control.getAttribute('aria-describedby'))
|
|
.split(' ')
|
|
.at(-1);
|
|
assert.ok(
|
|
(await page.locator(`[id="${errorId}"]`).innerText()).length,
|
|
`Missing associated error: ${label}`,
|
|
);
|
|
}
|
|
assert.equal(await field('Title').inputValue(), 'A complete ticket');
|
|
await page.route(create ? `${base}` : `${base}/42`, (route) =>
|
|
route.abort('failed'),
|
|
);
|
|
await button(create ? 'Create ticket' : 'Save changes').click();
|
|
await state('network');
|
|
assert.equal(
|
|
await field('Description').inputValue(),
|
|
'Description with context.',
|
|
);
|
|
await page.unrouteAll();
|
|
await visit(create, '?admin&serverError');
|
|
await fill(create);
|
|
await submit(create);
|
|
await state('server');
|
|
assert.equal(await field('Title').inputValue(), 'A complete ticket');
|
|
let pending;
|
|
let requests = 0;
|
|
await page.route(create ? `${base}` : `${base}/42`, (route) => {
|
|
requests++;
|
|
pending = route;
|
|
});
|
|
await button('Try again').click();
|
|
await state('loading');
|
|
assert.equal(await field('Title').isDisabled(), true);
|
|
assert.equal(
|
|
await button(
|
|
create ? 'Creating ticket…' : 'Saving changes…',
|
|
).isDisabled(),
|
|
true,
|
|
);
|
|
await form().evaluate((el) =>
|
|
el.dispatchEvent(
|
|
new Event('submit', { bubbles: true, cancelable: true }),
|
|
),
|
|
);
|
|
assert.equal(requests, 1);
|
|
await pending.abort();
|
|
await state('network');
|
|
await page.unrouteAll();
|
|
await visit(create, '?admin');
|
|
await fill(create);
|
|
page.once('dialog', (dialog) => dialog.dismiss());
|
|
await page
|
|
.locator('#main-content')
|
|
.getByRole('link', {
|
|
name: create ? 'Back to backlog' : 'Open backlog',
|
|
exact: true,
|
|
})
|
|
.click();
|
|
assert.ok(page.url().includes('/tickets/'));
|
|
const successData = await submit(create);
|
|
await page
|
|
.getByRole('heading', { name: successData.title, exact: true })
|
|
.waitFor();
|
|
if (create) {
|
|
await page.goBack();
|
|
await page
|
|
.getByRole('heading', { name: 'Create ticket', exact: true })
|
|
.waitFor();
|
|
await field('Title').waitFor();
|
|
assert.equal(await field('Title').inputValue(), '');
|
|
assert.equal(await field('Criterion 1').count(), 0);
|
|
} else {
|
|
await form()
|
|
.getByText('All changes saved', { exact: true })
|
|
.waitFor();
|
|
await field('Title').fill('Another draft');
|
|
page.once('dialog', (dialog) => dialog.accept());
|
|
await button('Discard changes').click();
|
|
assert.equal(
|
|
await field('Title').inputValue(),
|
|
'A complete ticket',
|
|
);
|
|
assert.equal(await field('Impact score').inputValue(), '2.5');
|
|
}
|
|
}
|
|
await visit(false, '?hideAuthor&hidePoints');
|
|
assert.equal(await field('Author').count(), 0);
|
|
assert.equal(await field('Estimated story points').count(), 0);
|
|
await visit(false);
|
|
assert.equal(await field('Author').isDisabled(), true);
|
|
await visit(true, '?hidePoints');
|
|
assert.equal(await field('Estimated story points').count(), 0);
|
|
await visit(true, '?noMetadata');
|
|
assert.equal(await page.locator('form').count(), 0);
|
|
assert.deepEqual(errors, []);
|
|
console.log(
|
|
'Ticket form browser checks passed: create/edit payloads, nested validation, retries, drafts, resets, permissions, keyboard, mobile and both themes.',
|
|
);
|
|
} finally {
|
|
await browser.close();
|
|
}
|