feat(KAN-24): rebuild project creation flow
CI/CD / test_and_check_app (push) Canceled after 0s
CI/CD / Publish immutable image (push) Canceled after 0s
CI/CD / test_and_check_app (pull_request) Canceled after 0s
CI/CD / Publish immutable image (pull_request) Canceled after 0s

This commit is contained in:
2026-09-11 14:19:32 +02:00
parent 32e3496248
commit cd7fae3841
6 changed files with 1307 additions and 282 deletions
@@ -0,0 +1,50 @@
<?php
namespace Tests\Feature\Projects;
use App\Models\ProjectTemplate;
use App\Models\User;
use Illuminate\Foundation\Testing\RefreshDatabase;
use PHPUnit\Framework\Attributes\DataProvider;
use Symfony\Component\Process\Process;
use Tests\TestCase;
class ProjectCreationTest extends TestCase
{
use RefreshDatabase;
#[DataProvider('missingSources')]
public function test_creation_requires_the_selected_source(string $mode, string $field): void
{
$user = User::factory()->admin()->create();
$this->actingAs($user)->from(route('projects.create'))
->post(route('projects.store'), ['creation_mode' => $mode, 'name' => 'New project', 'key' => 'NEW'])
->assertRedirect(route('projects.create'))->assertSessionHasErrors($field);
$this->assertDatabaseMissing('projects', ['key' => 'NEW']);
}
/** @return array<string, array{string, string}> */
public static function missingSources(): array
{
return ['duplicate' => ['duplicate', 'source_project_id'], 'template' => ['template', 'source_template_id']];
}
public function test_an_unpublished_template_cannot_be_used_to_create_a_project(): void
{
$user = User::factory()->admin()->create();
$template = ProjectTemplate::factory()->create(['is_published' => false]);
$this->actingAs($user)->post(route('projects.store'), [
'creation_mode' => 'template', 'source_template_id' => $template->id, 'name' => 'New project', 'key' => 'NEW',
])->assertSessionHasErrors('source_template_id');
$this->assertDatabaseMissing('projects', ['key' => 'NEW']);
}
public function test_creation_page_rendering_and_localization(): void
{
$process = new Process(['node', 'tests/Fixtures/project-creation.mjs'], base_path());
$process->setTimeout(60);
$process->run();
$this->assertTrue($process->isSuccessful(), $process->getOutput().$process->getErrorOutput());
$this->assertStringContainsString('Project creation rendering checks passed.', $process->getOutput());
}
}
+334
View File
@@ -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();
}
@@ -0,0 +1,19 @@
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import '../../resources/css/app.css';
import Create from '../../resources/js/pages/projects/Create.vue';
import { createAppearance } from '../../resources/js/composables/useAppearance';
import { createLocalization } from '../../resources/js/lib/localization';
createInertiaApp({
resolve: (name) =>
name === 'Create'
? Create
: { render: () => h('h1', 'Project created') },
setup: ({ el, App, props, plugin }) =>
createApp({ render: () => h(App, props) })
.use(plugin)
.use(createLocalization())
.use(createAppearance())
.mount(el),
});
+256
View File
@@ -0,0 +1,256 @@
import assert from 'node:assert/strict';
import process from 'node:process';
import { fileURLToPath } from 'node:url';
import vue from '@vitejs/plugin-vue';
import tailwind from '@tailwindcss/vite';
import { createServer } from 'vite';
import { createSSRApp, h } from 'vue';
import { renderToString } from 'vue/server-renderer';
import { createInertiaApp } from '@inertiajs/vue3';
const serve = process.argv.includes('--serve');
const server = await createServer({
configFile: false,
cacheDir: 'node_modules/.vite/project-creation-fixture',
plugins: [vue(), ...(serve ? [tailwind()] : [])],
resolve: {
alias: {
'@': fileURLToPath(new URL('../../resources/js', import.meta.url)),
},
},
server: serve
? { host: '127.0.0.1', port: 4179, strictPort: true, hmr: false }
: { middlewareMode: true, hmr: false, watch: null },
appType: 'custom',
});
const areas = [
'project_settings',
'board_columns',
'ticket_statuses',
'status_transitions',
'ticket_types',
'ticket_priorities',
'ticket_fields',
'ticket_link_types',
'repository_connections',
'notification_actions',
];
function makePage(url, errors = {}) {
const query = new URL(url, 'http://localhost').searchParams;
return {
component: url.startsWith('/projects/create')
? 'Create'
: 'Destination',
url,
version: null,
clearHistory: false,
encryptHistory: false,
props: {
name: 'KanbanGit',
errors,
sidebarOpen: true,
auth: {
user: {
id: 1,
name: 'Alex Morgan',
email: 'alex@example.test',
avatar: null,
},
permissions: {
globalAdmin: false,
projectCreate: true,
canManageTeams: false,
},
},
navigation: { project: null },
copyAreaOptions: areas.map((value) => ({
value,
label: value,
description: 'Server description',
})),
sourceProjects: query.has('empty')
? []
: [
{
id: 7,
key: 'ENG',
name: 'Engineering · Platform and developer experience',
},
{ id: 8, key: 'OPS', name: 'Operations' },
],
sourceTemplates:
query.has('empty') || query.has('no-templates')
? []
: [
{
id: 3,
name: 'Team baseline',
slug: 'team-baseline',
copy_areas: ['board_columns', 'ticket_types'],
},
{
id: 4,
name: 'Minimal setup',
slug: 'minimal',
copy_areas: [],
},
],
selectedSourceTemplateId: query.has('template')
? Number(query.get('template'))
: null,
},
};
}
if (serve) {
// Real Vue/Inertia form with isolated transport; PHPUnit covers persisted projects.
server.middlewares.use(async (request, response, next) => {
if (!request.url.startsWith('/projects')) {
return next();
}
let url = request.url;
let errors = {};
if (request.method === 'POST') {
const result =
request.headers.cookie?.match(
/creation_test_result=(\w+)/,
)?.[1] ?? 'success';
let body = '';
for await (const chunk of request) {
body += chunk;
}
const data = JSON.parse(body);
if (result === 'server') {
response.statusCode = 503;
response.end('Simulated server failure');
return;
}
url = result === 'validation' ? '/projects/create' : '/projects/99';
if (result === 'validation') {
errors = {
key: 'The key has already been taken.',
...(data.creation_mode === 'duplicate'
? {
'copy_areas.0':
'Select a valid configuration area.',
}
: {}),
};
}
}
const page = makePage(url, errors);
response.setHeader('Vary', 'X-Inertia');
if (request.headers['x-inertia']) {
response.setHeader('X-Inertia', 'true');
response.setHeader('Content-Type', 'application/json');
response.end(JSON.stringify(page));
return;
}
const escaped = JSON.stringify(page)
.replaceAll('&', '&amp;')
.replaceAll('"', '&quot;')
.replaceAll('<', '&lt;');
response.setHeader('Content-Type', 'text/html');
response.end(
await server.transformIndexHtml(
request.url,
'<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><div id="app" data-page="' +
escaped +
'"></div><script type="module" src="/tests/Fixtures/project-creation-preview.mjs"></script></body></html>',
),
);
});
await server.listen();
console.log(
'Project creation fixture ready at http://127.0.0.1:4179/projects/create',
);
} else {
try {
const { createLocalization } = await server.ssrLoadModule(
'/resources/js/lib/localization.ts',
);
const { createAppearance } = await server.ssrLoadModule(
'/resources/js/composables/useAppearance.ts',
);
const { en } = await server.ssrLoadModule(
'/resources/js/locales/en.ts',
);
const Create = (
await server.ssrLoadModule(
'/resources/js/pages/projects/Create.vue',
)
).default;
const render = async (
url,
errors = {},
locale = createLocalization(),
) => {
const response = await createInertiaApp({
page: makePage(url, errors),
resolve: () => Create,
render: renderToString,
setup: ({ App, props, plugin }) =>
createSSRApp({ render: () => h(App, props) })
.use(plugin)
.use(locale)
.use(createAppearance('light')),
});
return response.body.split('<main')[1].split('</main>')[0];
};
const empty = await render('/projects/create?empty');
assert.match(empty, /value="scratch"[^>]*checked/);
assert.match(empty, /value="duplicate"[^>]*disabled/);
assert.match(empty, /value="template"[^>]*disabled/);
assert.match(empty, /No accessible projects/);
assert.match(empty, /No published templates/);
assert.doesNotMatch(empty, /<select/);
const scratch = await render('/projects/create?no-templates');
assert.match(scratch, /value="duplicate"[^>]*aria-invalid="false"/);
assert.doesNotMatch(scratch, /value="duplicate"[^>]*disabled/);
const template = await render('/projects/create');
assert.match(template, /value="template"[^>]*checked/);
assert.match(template, /Team baseline/);
assert.match(template, /Board columns/);
assert.match(template, /Ticket types/);
assert.match(template, /The project stays linked to this template/);
assert.doesNotMatch(template, /Server description/);
const preselected = await render('/projects/create?template=4');
assert.match(preselected, /Minimal setup/);
assert.match(
preselected,
/This template uses the default project setup/,
);
for (const id of [
'name-error',
'key-help',
'key-error',
'template-help',
'source-template-error',
'creation-mode-error',
]) {
assert.ok(
template.includes(`id="${id}"`),
`Missing accessible feedback target: ${id}`,
);
}
const translated = await render(
'/projects/create',
{},
createLocalization(
{ locale: 'de' },
{
de: {
...en,
'projectCreation.title': 'Projekt anlegen',
'projectCreation.areas.boardColumns.label':
'Boardspalten',
},
},
),
);
assert.match(translated, /Projekt anlegen/);
assert.match(translated, /Boardspalten/);
console.log('Project creation rendering checks passed.');
} finally {
await server.close();
}
}