289 lines
9.8 KiB
JavaScript
289 lines
9.8 KiB
JavaScript
import assert from 'node:assert/strict';
|
|
import process from 'node:process';
|
|
|
|
const playwright = await import(process.env.PLAYWRIGHT_MODULE ?? 'playwright');
|
|
const { chromium } = playwright.default ?? playwright;
|
|
const browser = await chromium.launch({ channel: 'chrome', headless: true });
|
|
const page = await browser.newPage({
|
|
viewport: { width: 1440, height: 1200 },
|
|
hasTouch: true,
|
|
});
|
|
page.setDefaultTimeout(10000);
|
|
const failures = [];
|
|
const requests = [];
|
|
page.on('pageerror', (error) => failures.push(error.message));
|
|
page.on('request', (request) => {
|
|
if (['POST', 'PATCH'].includes(request.method())) {
|
|
requests.push(request);
|
|
}
|
|
});
|
|
const base = 'http://127.0.0.1:4181/projects/7/board';
|
|
const handle = () =>
|
|
page.getByRole('button', {
|
|
name: 'Drag ENG-42 to change status',
|
|
exact: true,
|
|
});
|
|
const card = () => page.locator('article').filter({ hasText: 'ENG-42' });
|
|
const visit = async (query = '') => {
|
|
await page.goto(base + query);
|
|
await page.getByRole('heading', { level: 1 }).waitFor();
|
|
requests.length = 0;
|
|
};
|
|
const center = async (locator) => {
|
|
const box = await locator.boundingBox();
|
|
assert.ok(box);
|
|
return { x: box.x + box.width / 2, y: box.y + box.height / 2 };
|
|
};
|
|
const begin = async () => {
|
|
await handle().scrollIntoViewIfNeeded();
|
|
const from = await center(handle());
|
|
await page.mouse.move(from.x, from.y);
|
|
await page.mouse.down();
|
|
await page.mouse.move(from.x + 12, from.y, { steps: 3 });
|
|
};
|
|
const moveToColumn = async (id) => {
|
|
const to = await center(page.locator(`#board-column-title-${id}`));
|
|
await page.mouse.move(to.x, to.y, { steps: 10 });
|
|
};
|
|
const dragToColumn = async (id) => {
|
|
await begin();
|
|
await moveToColumn(id);
|
|
await page.mouse.up();
|
|
};
|
|
const originalCard = async () => {
|
|
assert.equal(
|
|
await page
|
|
.locator('#board-column-1 article')
|
|
.filter({ hasText: 'ENG-42' })
|
|
.count(),
|
|
1,
|
|
);
|
|
};
|
|
try {
|
|
for (const theme of ['light', 'dark']) {
|
|
await page.emulateMedia({
|
|
colorScheme: theme,
|
|
reducedMotion: 'reduce',
|
|
});
|
|
await visit();
|
|
assert.equal(
|
|
await page
|
|
.getByRole('button', { name: 'Drag ENG-43 to change status' })
|
|
.isDisabled(),
|
|
true,
|
|
);
|
|
await begin();
|
|
assert.equal(
|
|
await page
|
|
.locator('#board-column-2')
|
|
.evaluate((el) => el.classList.contains('border-primary')),
|
|
true,
|
|
);
|
|
assert.equal(
|
|
await page
|
|
.locator('#board-column-3')
|
|
.evaluate((el) => el.classList.contains('opacity-40')),
|
|
true,
|
|
);
|
|
await moveToColumn(3);
|
|
await page.mouse.up();
|
|
await originalCard();
|
|
assert.equal(requests.length, 0);
|
|
|
|
await begin();
|
|
await moveToColumn(2);
|
|
await page.keyboard.press('Escape');
|
|
await page.mouse.up();
|
|
assert.equal(requests.length, 0);
|
|
await originalCard();
|
|
|
|
// Pointer capture cancellation must never become a drop.
|
|
await begin();
|
|
await handle().dispatchEvent('pointercancel', { pointerId: 1 });
|
|
await page.mouse.up();
|
|
assert.equal(requests.length, 0);
|
|
|
|
await visit('?multiple');
|
|
await dragToColumn(2);
|
|
const dialog = page.getByRole('dialog');
|
|
await dialog.waitFor();
|
|
assert.equal(requests.length, 0);
|
|
assert.deepEqual(
|
|
await dialog
|
|
.locator('option')
|
|
.evaluateAll((options) =>
|
|
options.map((option) => option.value),
|
|
),
|
|
['20', '21'],
|
|
);
|
|
await page.keyboard.press('Escape');
|
|
await dialog.waitFor({ state: 'hidden' });
|
|
assert.equal(
|
|
await handle().evaluate((el) => el === document.activeElement),
|
|
true,
|
|
);
|
|
assert.equal(requests.length, 0);
|
|
await originalCard();
|
|
await dragToColumn(2);
|
|
const select = dialog.getByLabel('Destination status');
|
|
await select.focus();
|
|
await select.selectOption('21');
|
|
await page.keyboard.press('Tab');
|
|
await page.keyboard.press('Tab');
|
|
assert.equal(await page.locator(':focus').innerText(), 'Update status');
|
|
await page.keyboard.press('Enter');
|
|
await page
|
|
.getByText('ENG-42 moved successfully.', { exact: true })
|
|
.waitFor();
|
|
assert.equal(requests.length, 1);
|
|
assert.deepEqual(requests[0].postDataJSON(), {
|
|
ticket_status_id: 21,
|
|
redirect_to: 'board',
|
|
});
|
|
assert.equal(
|
|
await page
|
|
.locator('#board-column-2 article')
|
|
.filter({ hasText: 'ENG-42' })
|
|
.count(),
|
|
1,
|
|
);
|
|
|
|
await visit('?reject');
|
|
await dragToColumn(2);
|
|
await page
|
|
.getByText('This transition is no longer allowed.', { exact: true })
|
|
.waitFor();
|
|
await originalCard();
|
|
assert.equal(requests.length, 1);
|
|
|
|
await visit('?slow');
|
|
await dragToColumn(2);
|
|
await page.locator('[data-form-state="loading"]').waitFor();
|
|
assert.equal(await handle().isDisabled(), true);
|
|
assert.equal(
|
|
await page.getByLabel('Move ENG-42', { exact: true }).isDisabled(),
|
|
true,
|
|
);
|
|
// Attempt a competing form submit even though its controls are disabled.
|
|
await card()
|
|
.locator('form')
|
|
.evaluate((form) => form.requestSubmit());
|
|
await page
|
|
.getByText('ENG-42 moved successfully.', { exact: true })
|
|
.waitFor();
|
|
assert.equal(requests.length, 1);
|
|
|
|
await visit('?slow');
|
|
await card()
|
|
.getByRole('button', { name: 'Update status', exact: true })
|
|
.click();
|
|
assert.equal(await handle().isDisabled(), true);
|
|
await page
|
|
.getByText('ENG-42 moved successfully.', { exact: true })
|
|
.waitFor();
|
|
assert.equal(requests.length, 1);
|
|
|
|
await visit();
|
|
await page.route('**/tickets/42/status', (route) =>
|
|
route.abort('failed'),
|
|
);
|
|
await dragToColumn(2);
|
|
await page.locator('[data-form-state="network"]').waitFor();
|
|
await originalCard();
|
|
assert.equal(await handle().isEnabled(), true);
|
|
await page.unroute('**/tickets/42/status');
|
|
await page
|
|
.getByRole('button', { name: 'Try again', exact: true })
|
|
.click();
|
|
await page
|
|
.getByText('ENG-42 moved successfully.', { exact: true })
|
|
.waitFor();
|
|
assert.equal(requests.length, 2);
|
|
|
|
await visit();
|
|
await page.route('**/tickets/42/status', (route) =>
|
|
route.fulfill({ status: 500, body: 'Unavailable' }),
|
|
);
|
|
await dragToColumn(2);
|
|
await page.locator('[data-form-state="server"]').waitFor();
|
|
await originalCard();
|
|
await page.unroute('**/tickets/42/status');
|
|
|
|
// Normal touch gestures still scroll; only the explicit handle captures a drag.
|
|
await page.setViewportSize({ width: 390, height: 1000 });
|
|
await visit('?multiple');
|
|
await handle().scrollIntoViewIfNeeded();
|
|
assert.equal(
|
|
await handle().evaluate((el) => getComputedStyle(el).touchAction),
|
|
'none',
|
|
);
|
|
assert.notEqual(
|
|
await card().evaluate((el) => getComputedStyle(el).touchAction),
|
|
'none',
|
|
);
|
|
const cdp = await page.context().newCDPSession(page);
|
|
const from = await center(handle());
|
|
await cdp.send('Input.dispatchTouchEvent', {
|
|
type: 'touchStart',
|
|
touchPoints: [{ ...from, id: 1 }],
|
|
});
|
|
await cdp.send('Input.dispatchTouchEvent', {
|
|
type: 'touchMove',
|
|
touchPoints: [{ x: from.x + 16, y: from.y, id: 1 }],
|
|
});
|
|
const tray = page.locator('[data-board-mobile-targets]');
|
|
await tray.waitFor();
|
|
const to = await center(tray.locator('[data-board-drop-column="2"]'));
|
|
await cdp.send('Input.dispatchTouchEvent', {
|
|
type: 'touchMove',
|
|
touchPoints: [{ ...to, id: 1 }],
|
|
});
|
|
await page.screenshot({
|
|
path: `/private/tmp/kan28-mobile-drag-${theme}.png`,
|
|
fullPage: true,
|
|
});
|
|
assert.equal(
|
|
await page.evaluate(
|
|
() => document.documentElement.scrollWidth <= innerWidth,
|
|
),
|
|
true,
|
|
);
|
|
await cdp.send('Input.dispatchTouchEvent', {
|
|
type: 'touchEnd',
|
|
touchPoints: [],
|
|
});
|
|
await page.getByRole('dialog').waitFor();
|
|
await page.getByLabel('Destination status').selectOption('20');
|
|
await page
|
|
.getByRole('dialog')
|
|
.getByRole('button', { name: 'Update status' })
|
|
.click();
|
|
await page
|
|
.getByText('ENG-42 moved successfully.', { exact: true })
|
|
.waitFor();
|
|
assert.equal(
|
|
await page.getByLabel('Choose a column').inputValue(),
|
|
'2',
|
|
);
|
|
assert.equal(requests.length, 1);
|
|
await cdp.detach();
|
|
await page.screenshot({
|
|
path: `/private/tmp/kan28-mobile-result-${theme}.png`,
|
|
fullPage: true,
|
|
});
|
|
|
|
await visit('?readonly');
|
|
assert.equal(
|
|
await page.getByRole('button', { name: /Drag ENG/ }).count(),
|
|
0,
|
|
);
|
|
await page.setViewportSize({ width: 1440, height: 1200 });
|
|
}
|
|
assert.deepEqual(failures, []);
|
|
console.log(
|
|
'Board drag checks passed: mouse, touch, workflow restrictions, selection, cancellation, focus, request guards and recovery in both themes.',
|
|
);
|
|
} finally {
|
|
await browser.close();
|
|
}
|