wanjakrah/agiledancers
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

frontend-toegevoegd

Browse Source
This commit is contained in:
Wanja Krah
2026-10-27 15:34:56 +01:00
parent 777d9f199d
commit 02337fafaa
43 changed files with 10548 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
agiledancers-fe/e2e/school-management.spec.ts Normal file
View File

@@ -0,0 +1,162 @@
import { test, expect, Page } from '@playwright/test';
const backend = 'http://127.0.0.1:8080';
let schoolToDelete: number | undefined;
test.afterEach(async ({ request }) => {
if (schoolToDelete !== undefined) {
await request.delete(`${backend}/api/dance-schools/${schoolToDelete}`);
schoolToDelete = undefined;
}
});
async function tab(page: Page, label: string) {
await page
.getByRole('navigation', { name: 'Dansschool onderdelen' })
.getByRole('link', { name: new RegExp(`^${label}`) })
.click();
}
async function save(page: Page) {
await page.getByRole('dialog').getByRole('button', { name: 'Opslaan', exact: true }).click();
await expect(page.getByRole('dialog')).toHaveCount(0);
}
async function confirmDelete(page: Page) {
await page
.getByRole('dialog')
.getByRole('button', { name: 'Definitief verwijderen', exact: true })
.click();
await expect(page.getByRole('dialog')).toHaveCount(0);
}
test('manages a school, shared memberships and shows through the real REST API', async ({
page,
}) => {
const schoolName = `E2E Studio ${Date.now()}`;
let schoolId: number | undefined;
const browserErrors: string[] = [];
page.on('pageerror', (error) => browserErrors.push(error.message));
await page.goto('/');
await page.getByRole('button', { name: 'Dansschool toevoegen' }).click();
await page.getByRole('dialog').getByLabel('Naam', { exact: true }).fill(schoolName);
const created = page.waitForResponse(
(response) =>
response.url().endsWith('/api/dance-schools') && response.request().method() === 'POST',
);
await save(page);
schoolId = (await (await created).json()).id;
schoolToDelete = schoolId;
await page.getByRole('link', { name: new RegExp(schoolName) }).click();
await expect(page.getByRole('heading', { name: schoolName, exact: true })).toBeVisible();
await page.getByRole('button', { name: 'School bewerken' }).click();
await page
.getByRole('dialog')
.getByLabel('Naam', { exact: true })
.fill(`${schoolName} vernieuwd`);
await save(page);
await expect(
page.getByRole('heading', { name: `${schoolName} vernieuwd`, exact: true }),
).toBeVisible();
await page.getByRole('button', { name: /Voeg een danser toe/ }).click();
await page.getByRole('dialog').getByLabel('Naam', { exact: true }).fill('Sam Testdanser');
await page.getByLabel('Geboortedatum').fill('2010-05-12');
await save(page);
await tab(page, 'Dansers');
await expect(page.getByRole('cell', { name: 'Sam Testdanser', exact: true })).toBeVisible();
await page.getByRole('button', { name: 'Sam Testdanser bewerken' }).click();
await page.getByLabel('Geboortedatum').fill('2011-06-13');
await save(page);
await expect(page.getByRole('cell', { name: '13 jun 2011' })).toBeVisible();
await tab(page, 'Dansgroepen');
for (const name of ['Hiphop Teens', 'Jazz Teens']) {
await page.getByRole('button', { name: 'Dansgroep toevoegen' }).click();
const dialog = page.getByRole('dialog');
await dialog.getByLabel('Naam / categorie').fill(name);
await dialog.getByLabel('Leeftijd vanaf').fill('12');
await dialog.getByLabel('Leeftijd tot en met').fill('18');
await dialog.getByLabel(name.startsWith('Hiphop') ? 'Hiphop' : 'Jazz', { exact: true }).check();
await save(page);
await page.getByRole('button', { name: `Dansers beheren voor ${name}`, exact: true }).click();
await page
.getByRole('dialog')
.locator('.member-row')
.filter({ hasText: 'Sam Testdanser' })
.getByRole('checkbox')
.check();
await expect(page.getByRole('dialog').getByText('1 van 1 dansers gekoppeld')).toBeVisible();
await page.getByRole('button', { name: 'Gereed', exact: true }).click();
await expect(
page
.getByRole('article')
.filter({ has: page.getByRole('heading', { name, exact: true }) })
.getByText(/1 dansers/),
).toBeVisible();
}
await page.getByRole('button', { name: 'Hiphop Teens bewerken' }).click();
await page.getByLabel('Naam / categorie').fill('Hiphop Selectie');
await page.getByLabel('Type', { exact: true }).selectOption({ label: 'Selectie' });
await save(page);
await expect(
page
.getByRole('article')
.filter({ hasText: 'Hiphop Selectie' })
.getByText(/1 dansers/),
).toBeVisible();
await page.screenshot({ path: 'test-results/groups-desktop.png', fullPage: true });
await tab(page, 'Shows');
await page.getByRole('button', { name: 'Show toevoegen' }).click();
await page.getByRole('dialog').getByLabel('Naam', { exact: true }).fill('Zomershow');
await page.getByLabel('Datum', { exact: true }).fill('2027-06-12');
await save(page);
await expect(page.getByText('Ochtend', { exact: true })).toBeVisible();
await expect(page.getByText('Middag', { exact: true })).toBeVisible();
await expect(page.getByText('Avond', { exact: true })).toBeVisible();
await page.getByRole('button', { name: 'Zomershow bewerken' }).click();
await page.getByLabel('Datum', { exact: true }).fill('2027-07-01');
await save(page);
await expect(page.locator('.date-tile')).toContainText('jul 2027');
await tab(page, 'Overzicht');
await page.setViewportSize({ width: 390, height: 844 });
await expect(
page.getByRole('heading', { name: `${schoolName} vernieuwd`, exact: true }),
).toBeVisible();
expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(
true,
);
await page.screenshot({ path: 'test-results/overview-mobile.png', fullPage: true });
await page.setViewportSize({ width: 1440, height: 1000 });
await page.screenshot({ path: 'test-results/overview-desktop.png', fullPage: true });
await tab(page, 'Dansers');
await page.getByRole('button', { name: 'Sam Testdanser verwijderen' }).click();
await confirmDelete(page);
await expect(page.getByText('De dansvloer is nog leeg')).toBeVisible();
await tab(page, 'Dansgroepen');
await expect(page.getByText(/0 dansers/)).toHaveCount(2);
await page.getByRole('button', { name: 'Hiphop Selectie verwijderen' }).click();
await confirmDelete(page);
await expect(page.getByRole('heading', { name: 'Hiphop Selectie', exact: true })).toHaveCount(0);
await tab(page, 'Shows');
await page.getByRole('button', { name: 'Zomershow verwijderen' }).click();
await confirmDelete(page);
await expect(page.getByText('Het podium wacht op je')).toBeVisible();
await tab(page, 'Overzicht');
await page.getByRole('button', { name: 'School verwijderen', exact: true }).click();
await confirmDelete(page);
await expect(page).toHaveURL(/\/schools$/);
await expect(page.getByRole('link', { name: new RegExp(schoolName) })).toHaveCount(0);
expect(browserErrors).toEqual([]);
});
test('shows a useful connection error and recovers on retry', async ({ page }) => {
await page.route('**/api/dance-schools', (route) => route.abort('connectionfailed'));
await page.goto('/schools');
await expect(page.getByRole('alert')).toContainText('niet bereikbaar');
await page.unroute('**/api/dance-schools');
await page.getByRole('button', { name: 'Opnieuw proberen' }).click();
await expect(page.getByRole('heading', { name: /Mijn dansscholen/ })).toBeVisible();
});