feat(KAN-24): rebuild project creation flow
This commit is contained in:
@@ -0,0 +1,334 @@
|
||||
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();
|
||||
}
|
||||
Reference in New Issue
Block a user