335 lines
11 KiB
JavaScript
335 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 base = 'http://127.0.0.1:4179';
|
|
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));
|
|
page.on('dialog', (dialog) => dialog.accept());
|
|
const setResult = (value) =>
|
|
context.addCookies([{ name: 'creation_test_result', value, url: base }]);
|
|
const content = () => page.locator('#main-content');
|
|
const state = (value) =>
|
|
page.locator(`[data-form-state="${value}"]`).waitFor({ state: 'visible' });
|
|
const choose = async (value) => {
|
|
await page.locator(`input[name="creation_mode"][value="${value}"]`).focus();
|
|
await page.keyboard.press('Space');
|
|
};
|
|
const fillDetails = async () => {
|
|
await page
|
|
.getByLabel('Project name', { exact: true })
|
|
.fill('Frontend workspace');
|
|
await page.getByLabel('Project key', { exact: true }).fill('web');
|
|
};
|
|
const submit = () =>
|
|
page.getByRole('button', { name: 'Create project', exact: true }).click();
|
|
const focusWithTab = async (target) => {
|
|
await content().focus();
|
|
for (let step = 0; step < 40; step++) {
|
|
await page.keyboard.press('Tab');
|
|
if (
|
|
await target.evaluate(
|
|
(element) => element === document.activeElement,
|
|
)
|
|
) {
|
|
assert.equal(
|
|
await target.evaluate((element) =>
|
|
element.matches(':focus-visible'),
|
|
),
|
|
true,
|
|
);
|
|
return;
|
|
}
|
|
}
|
|
assert.fail('Form control was not reachable by keyboard');
|
|
};
|
|
|
|
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,
|
|
reducedMotion: 'reduce',
|
|
});
|
|
await page.goto(
|
|
`${base}/projects/create?viewport=${width}&theme=${theme}`,
|
|
);
|
|
await page
|
|
.getByRole('heading', { name: 'Create a project' })
|
|
.waitFor();
|
|
for (const mode of ['scratch', 'duplicate', 'template']) {
|
|
await choose(mode);
|
|
await page.evaluate(() => document.fonts.ready);
|
|
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,
|
|
`${mode} overflows at ${width} in ${theme}`,
|
|
);
|
|
await page.screenshot({
|
|
path: `/private/tmp/kan24-${mode}-${width}-${theme}.png`,
|
|
fullPage: true,
|
|
});
|
|
}
|
|
await choose('scratch');
|
|
const scratch = page.getByRole('radio', {
|
|
name: 'Start from scratch',
|
|
exact: true,
|
|
});
|
|
await focusWithTab(scratch);
|
|
await page.keyboard.press('ArrowRight');
|
|
assert.equal(
|
|
await page
|
|
.getByRole('radio', {
|
|
name: 'Duplicate a project',
|
|
exact: true,
|
|
})
|
|
.isChecked(),
|
|
true,
|
|
);
|
|
const board = page.getByRole('checkbox', {
|
|
name: 'Board columns',
|
|
exact: true,
|
|
});
|
|
await focusWithTab(board);
|
|
await page.keyboard.press('Space');
|
|
assert.equal(await board.isChecked(), true);
|
|
const source = page.getByLabel('Source project', { exact: true });
|
|
await focusWithTab(source);
|
|
await page.keyboard.press('o');
|
|
await page.keyboard.press('Tab');
|
|
await page.waitForFunction(
|
|
() =>
|
|
document.querySelector('#source_project_id').value === '8',
|
|
);
|
|
assert.equal(await source.inputValue(), '8');
|
|
}
|
|
}
|
|
|
|
await page.goto(`${base}/projects/create?empty`);
|
|
assert.equal(
|
|
await page
|
|
.getByRole('radio', { name: 'Start from scratch', exact: true })
|
|
.isChecked(),
|
|
true,
|
|
);
|
|
assert.equal(
|
|
await page
|
|
.getByRole('radio', { name: 'Duplicate a project', exact: true })
|
|
.isDisabled(),
|
|
true,
|
|
);
|
|
assert.equal(
|
|
await page
|
|
.getByRole('radio', { name: 'Use a template', exact: true })
|
|
.isDisabled(),
|
|
true,
|
|
);
|
|
await fillDetails();
|
|
const scratchRequest = page.waitForRequest(
|
|
(request) => request.method() === 'POST',
|
|
);
|
|
await submit();
|
|
assert.deepEqual((await scratchRequest).postDataJSON(), {
|
|
name: 'Frontend workspace',
|
|
key: 'web',
|
|
creation_mode: 'scratch',
|
|
source_project_id: '',
|
|
source_template_id: '',
|
|
copy_areas: [],
|
|
});
|
|
await page.waitForURL('**/projects/99');
|
|
|
|
await page.goto(`${base}/projects/create?template=4`);
|
|
assert.equal(
|
|
await page.getByLabel('Template', { exact: true }).inputValue(),
|
|
'4',
|
|
);
|
|
await page
|
|
.getByText('This template uses the default project setup.', {
|
|
exact: true,
|
|
})
|
|
.waitFor();
|
|
await fillDetails();
|
|
const templateRequest = page.waitForRequest(
|
|
(request) => request.method() === 'POST',
|
|
);
|
|
await submit();
|
|
const templateData = (await templateRequest).postDataJSON();
|
|
assert.equal(templateData.creation_mode, 'template');
|
|
assert.equal(templateData.source_template_id, '4');
|
|
assert.equal(templateData.source_project_id, '');
|
|
assert.deepEqual(templateData.copy_areas, []);
|
|
await page.waitForURL('**/projects/99');
|
|
|
|
await page.goto(`${base}/projects/create`);
|
|
await choose('duplicate');
|
|
await fillDetails();
|
|
await page.getByLabel('Source project', { exact: true }).selectOption('8');
|
|
await page
|
|
.getByRole('checkbox', { name: 'Board columns', exact: true })
|
|
.check();
|
|
await page
|
|
.getByRole('checkbox', { name: 'Custom ticket fields', exact: true })
|
|
.check();
|
|
await page.getByText('2 areas selected', { exact: true }).waitFor();
|
|
await page.getByText('WEB-1', { exact: true }).waitFor();
|
|
await choose('template');
|
|
await choose('scratch');
|
|
await choose('duplicate');
|
|
assert.equal(
|
|
await page.getByLabel('Source project', { exact: true }).inputValue(),
|
|
'8',
|
|
);
|
|
assert.equal(
|
|
await page
|
|
.getByRole('checkbox', { name: 'Board columns', exact: true })
|
|
.isChecked(),
|
|
true,
|
|
);
|
|
assert.equal(
|
|
await page
|
|
.getByRole('checkbox', {
|
|
name: 'Custom ticket fields',
|
|
exact: true,
|
|
})
|
|
.isChecked(),
|
|
true,
|
|
);
|
|
|
|
await setResult('validation');
|
|
const duplicateRequest = page.waitForRequest(
|
|
(request) => request.method() === 'POST',
|
|
);
|
|
await submit();
|
|
const duplicateData = (await duplicateRequest).postDataJSON();
|
|
assert.equal(duplicateData.source_project_id, '8');
|
|
assert.equal(duplicateData.source_template_id, '');
|
|
assert.deepEqual(duplicateData.copy_areas, [
|
|
'board_columns',
|
|
'ticket_fields',
|
|
]);
|
|
await state('validation');
|
|
assert.equal(
|
|
await page.getByLabel('Project name', { exact: true }).inputValue(),
|
|
'Frontend workspace',
|
|
);
|
|
assert.equal(
|
|
await page
|
|
.getByLabel('Project key', { exact: true })
|
|
.getAttribute('aria-invalid'),
|
|
'true',
|
|
);
|
|
await page
|
|
.getByText('The key has already been taken.', { exact: true })
|
|
.waitFor();
|
|
await page
|
|
.getByText('Select a valid configuration area.', { exact: true })
|
|
.waitFor();
|
|
assert.equal(
|
|
await page
|
|
.getByRole('checkbox', { name: 'Board columns', exact: true })
|
|
.getAttribute('aria-invalid'),
|
|
'true',
|
|
);
|
|
|
|
await choose('scratch');
|
|
assert.equal(
|
|
await page
|
|
.getByText('Select a valid configuration area.', { exact: true })
|
|
.count(),
|
|
0,
|
|
);
|
|
assert.equal(
|
|
await page
|
|
.getByLabel('Project key', { exact: true })
|
|
.getAttribute('aria-invalid'),
|
|
'true',
|
|
);
|
|
await choose('duplicate');
|
|
assert.equal(
|
|
await page
|
|
.getByRole('checkbox', { name: 'Board columns', exact: true })
|
|
.isChecked(),
|
|
true,
|
|
);
|
|
assert.equal(
|
|
await page
|
|
.getByRole('checkbox', { name: 'Board columns', exact: true })
|
|
.getAttribute('aria-invalid'),
|
|
'false',
|
|
);
|
|
|
|
await page.route('**/projects', (route) => route.abort('failed'));
|
|
await submit();
|
|
await state('network');
|
|
assert.equal(
|
|
await page.getByLabel('Project name', { exact: true }).inputValue(),
|
|
'Frontend workspace',
|
|
);
|
|
await page.unroute('**/projects');
|
|
await setResult('server');
|
|
await page.getByRole('button', { name: 'Try again' }).click();
|
|
await state('server');
|
|
await setResult('success');
|
|
let pending;
|
|
let submissions = 0;
|
|
await page.route('**/projects', (route) => {
|
|
submissions++;
|
|
pending = route;
|
|
});
|
|
await page.getByRole('button', { name: 'Try again' }).click();
|
|
await state('loading');
|
|
assert.equal(
|
|
await page
|
|
.getByRole('button', { name: 'Creating project…', exact: true })
|
|
.isDisabled(),
|
|
true,
|
|
);
|
|
assert.equal(
|
|
await page.getByLabel('Project name', { exact: true }).isDisabled(),
|
|
true,
|
|
);
|
|
await page.locator('form').evaluate((form) => form.requestSubmit());
|
|
assert.equal(submissions, 1);
|
|
await pending.continue();
|
|
await page.waitForURL('**/projects/99');
|
|
await page.unroute('**/projects');
|
|
|
|
await page.goto(`${base}/projects/create`);
|
|
await choose('duplicate');
|
|
await fillDetails();
|
|
const emptyCopyRequest = page.waitForRequest(
|
|
(request) => request.method() === 'POST',
|
|
);
|
|
await submit();
|
|
assert.deepEqual((await emptyCopyRequest).postDataJSON().copy_areas, []);
|
|
await page.waitForURL('**/projects/99');
|
|
assert.deepEqual(errors, []);
|
|
console.log(
|
|
'Project creation browser checks passed: all modes, preselection, payloads, retained input, validation, retry, duplicate submission protection, keyboard, 320/390/1440px and both themes.',
|
|
);
|
|
} finally {
|
|
await browser.close();
|
|
}
|