add basic crud frontend for clients, tags and projects

e2e/auth.spec.ts

@@ -2,7 +2,6 @@ import { expect, test } from '@playwright/test';
 import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
 
 async function registerNewUser(page, email, password) {
-    //await page.getByRole('link', { name: 'Register' }).click();
     await page.goto(PLAYWRIGHT_BASE_URL + '/register');
     await page.getByLabel('Name').fill('John Doe');
     await page.getByLabel('Email').fill(email);

e2e/clients.spec.ts

@@ -0,0 +1,51 @@
+import { expect, Page } from '@playwright/test';
+import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
+import { test } from '../playwright/fixtures';
+
+async function goToProjectsOverview(page: Page) {
+    await page.goto(PLAYWRIGHT_BASE_URL + '/clients');
+}
+
+// Create new project via modal
+test('test that creating and deleting a new client via the modal works', async ({
+    page,
+}) => {
+    const newClientName =
+        'New Project ' + Math.floor(1 + Math.random() * 10000);
+    await goToProjectsOverview(page);
+    await page.getByRole('button', { name: 'Create Client' }).click();
+    await page.getByPlaceholder('Client Name').fill(newClientName);
+    await Promise.all([
+        page.getByRole('button', { name: 'Create Client' }).nth(1).click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/clients') &&
+                response.request().method() === 'POST' &&
+                response.status() === 201 &&
+                (await response.json()).data.id !== null &&
+                (await response.json()).data.name === newClientName
+        ),
+    ]);
+
+    await expect(page.getByTestId('client_table')).toContainText(newClientName);
+    const moreButton = page.locator(
+        "[aria-label='Actions for Client " + newClientName + "']"
+    );
+    moreButton.click();
+    const deleteButton = page.locator(
+        "[aria-label='Delete Client " + newClientName + "']"
+    );
+
+    await Promise.all([
+        deleteButton.click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/clients') &&
+                response.request().method() === 'DELETE' &&
+                response.status() === 204
+        ),
+    ]);
+    await expect(page.getByTestId('client_table')).not.toContainText(
+        newClientName
+    );
+});

e2e/projects.spec.ts

@@ -0,0 +1,65 @@
+import { expect, Page } from '@playwright/test';
+import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
+import { test } from '../playwright/fixtures';
+
+async function goToProjectsOverview(page: Page) {
+    await page.goto(PLAYWRIGHT_BASE_URL + '/projects');
+}
+
+// Create new project via modal
+test('test that creating and deleting a new project via the modal works', async ({
+    page,
+}) => {
+    const newProjectName =
+        'New Project ' + Math.floor(1 + Math.random() * 10000);
+    await goToProjectsOverview(page);
+    await page.getByRole('button', { name: 'Create Project' }).click();
+    await page.getByPlaceholder('Project Name').fill(newProjectName);
+    await Promise.all([
+        page.getByRole('button', { name: 'Create Project' }).nth(1).click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/projects') &&
+                response.request().method() === 'POST' &&
+                response.status() === 201 &&
+                (await response.json()).data.id !== null &&
+                (await response.json()).data.color !== null &&
+                (await response.json()).data.client_id === null &&
+                (await response.json()).data.name === newProjectName
+        ),
+    ]);
+
+    await expect(page.getByTestId('project_table')).toContainText(
+        newProjectName
+    );
+    const moreButton = page.locator(
+        "[aria-label='Actions for Project " + newProjectName + "']"
+    );
+    moreButton.click();
+    const deleteButton = page.locator(
+        "[aria-label='Delete Project " + newProjectName + "']"
+    );
+
+    await Promise.all([
+        deleteButton.click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/projects') &&
+                response.request().method() === 'DELETE' &&
+                response.status() === 204
+        ),
+    ]);
+    await expect(page.getByTestId('project_table')).not.toContainText(
+        newProjectName
+    );
+});
+
+// Create new project with new Client
+
+// Create new project with existing Client
+
+// Delete project via More Options
+
+// Test that project task count is displayed correctly
+
+// Test that active / archive / all filter works (once implemented)

e2e/tags.spec.ts

@@ -0,0 +1,48 @@
+import { expect, Page } from '@playwright/test';
+import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
+import { test } from '../playwright/fixtures';
+
+async function goToTagsOverview(page: Page) {
+    await page.goto(PLAYWRIGHT_BASE_URL + '/tags');
+}
+
+// Create new project via modal
+test('test that creating and deleting a new client via the modal works', async ({
+    page,
+}) => {
+    const newTagName = 'New Tag ' + Math.floor(1 + Math.random() * 10000);
+    await goToTagsOverview(page);
+    await page.getByRole('button', { name: 'Create Tag' }).click();
+    await page.getByPlaceholder('Tag Name').fill(newTagName);
+    await Promise.all([
+        page.getByRole('button', { name: 'Create Tag' }).nth(1).click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/tags') &&
+                response.request().method() === 'POST' &&
+                response.status() === 201 &&
+                (await response.json()).data.id !== null &&
+                (await response.json()).data.name === newTagName
+        ),
+    ]);
+
+    await expect(page.getByTestId('tag_table')).toContainText(newTagName);
+    const moreButton = page.locator(
+        "[aria-label='Actions for Tag " + newTagName + "']"
+    );
+    moreButton.click();
+    const deleteButton = page.locator(
+        "[aria-label='Delete Tag " + newTagName + "']"
+    );
+
+    await Promise.all([
+        deleteButton.click(),
+        page.waitForResponse(
+            async (response) =>
+                response.url().includes('/tags') &&
+                response.request().method() === 'DELETE' &&
+                response.status() === 204
+        ),
+    ]);
+    await expect(page.getByTestId('tag_table')).not.toContainText(newTagName);
+});

e2e/time.spec.ts

@@ -428,12 +428,15 @@ test('test that deleting a time entry from the overview works', async ({
 test('test that load more works when the end of page is reached', async ({
     page,
 }) => {
-    await goToTimeOverview(page);
-    await page.waitForResponse(
-        (response) =>
-            response.url().includes('/time-entries') &&
-            response.status() === 200
-    );
+    await Promise.all([
+        goToTimeOverview(page),
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/time-entries') &&
+                response.status() === 200
+        ),
+    ]);
+
     await page.waitForTimeout(200);
     await Promise.all([
         page.evaluate(() => window.scrollTo(0, document.body.scrollHeight)),

e2e/timetracker.spec.ts

@@ -7,8 +7,10 @@ import {
     startOrStopTimerWithButton,
     stoppedTimeEntryResponse,
 } from './utils/currentTimeEntry';
+import { Page } from '@playwright/test';
+import { newTagResponse } from './utils/tags';
 
-async function goToDashboard(page) {
+async function goToDashboard(page: Page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/dashboard');
 }
 
@@ -37,46 +39,16 @@ test('test that starting and stopping a timer with a description works', async (
         .getByTestId('time_entry_description')
         .fill('New Time Entry Description');
     await Promise.all([
-        page.waitForResponse(async (response) => {
-            return (
-                response.status() === 201 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
-                (await response.json()).data.id !== null &&
-                (await response.json()).data.start !== null &&
-                (await response.json()).data.end === null &&
-                (await response.json()).data.project_id === null &&
-                (await response.json()).data.description ===
-                    'New Time Entry Description' &&
-                (await response.json()).data.task_id === null &&
-                (await response.json()).data.duration === null &&
-                (await response.json()).data.user_id !== null &&
-                JSON.stringify((await response.json()).data.tags) ===
-                    JSON.stringify([])
-            );
+        newTimeEntryResponse(page, {
+            description: 'New Time Entry Description',
         }),
         startOrStopTimerWithButton(page),
     ]);
     await assertThatTimerHasStarted(page);
     await page.waitForTimeout(1500);
     await Promise.all([
-        page.waitForResponse(async (response) => {
-            return (
-                response.status() === 200 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
-                (await response.json()).data.id !== null &&
-                (await response.json()).data.start !== null &&
-                (await response.json()).data.end !== null &&
-                (await response.json()).data.project_id === null &&
-                (await response.json()).data.description ===
-                    'New Time Entry Description' &&
-                (await response.json()).data.task_id === null &&
-                (await response.json()).data.duration !== null &&
-                (await response.json()).data.user_id !== null &&
-                JSON.stringify((await response.json()).data.tags) ===
-                    JSON.stringify([])
-            );
+        stoppedTimeEntryResponse(page, {
+            description: 'New Time Entry Description',
         }),
         await startOrStopTimerWithButton(page),
     ]);
@@ -89,23 +61,7 @@ test('test that starting and updating the description while running works', asyn
     await goToDashboard(page);
 
     await Promise.all([
-        page.waitForResponse(async (response) => {
-            return (
-                response.status() === 201 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
-                (await response.json()).data.id !== null &&
-                (await response.json()).data.start !== null &&
-                (await response.json()).data.end === null &&
-                (await response.json()).data.project_id === null &&
-                (await response.json()).data.description === '' &&
-                (await response.json()).data.task_id === null &&
-                (await response.json()).data.duration === null &&
-                (await response.json()).data.user_id !== null &&
-                JSON.stringify((await response.json()).data.tags) ===
-                    JSON.stringify([])
-            );
-        }),
+        newTimeEntryResponse(page),
         startOrStopTimerWithButton(page),
     ]);
     await assertThatTimerHasStarted(page);
@@ -115,47 +71,18 @@ test('test that starting and updating the description while running works', asyn
         .fill('New Time Entry Description');
 
     await Promise.all([
-        page.waitForResponse(async (response) => {
-            return (
-                response.status() === 200 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
-                (await response.json()).data.id !== null &&
-                (await response.json()).data.start !== null &&
-                (await response.json()).data.end === null &&
-                (await response.json()).data.project_id === null &&
-                (await response.json()).data.description ===
-                    'New Time Entry Description' &&
-                (await response.json()).data.task_id === null &&
-                (await response.json()).data.duration === null &&
-                (await response.json()).data.user_id !== null &&
-                JSON.stringify((await response.json()).data.tags) ===
-                    JSON.stringify([])
-            );
+        newTimeEntryResponse(page, {
+            status: 200,
+            description: 'New Time Entry Description',
         }),
         page.getByTestId('time_entry_description').press('Tab'),
     ]);
     await page.waitForTimeout(500);
     await Promise.all([
-        page.waitForResponse(async (response) => {
-            return (
-                response.status() === 200 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
-                (await response.json()).data.id !== null &&
-                (await response.json()).data.start !== null &&
-                (await response.json()).data.end !== null &&
-                (await response.json()).data.project_id === null &&
-                (await response.json()).data.description ===
-                    'New Time Entry Description' &&
-                (await response.json()).data.task_id === null &&
-                (await response.json()).data.duration !== null &&
-                (await response.json()).data.user_id !== null &&
-                JSON.stringify((await response.json()).data.tags) ===
-                    JSON.stringify([])
-            );
+        stoppedTimeEntryResponse(page, {
+            description: 'New Time Entry Description',
         }),
-        await startOrStopTimerWithButton(page),
+        startOrStopTimerWithButton(page),
     ]);
     await assertThatTimerIsStopped(page);
 });
@@ -165,23 +92,7 @@ test('test that starting and updating the time while running works', async ({
 }) => {
     await goToDashboard(page);
     const [createResponse] = await Promise.all([
-        page.waitForResponse(async (response) => {
-            return (
-                response.status() === 201 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
-                (await response.json()).data.id !== null &&
-                (await response.json()).data.start !== null &&
-                (await response.json()).data.end === null &&
-                (await response.json()).data.project_id === null &&
-                (await response.json()).data.description === '' &&
-                (await response.json()).data.task_id === null &&
-                (await response.json()).data.duration === null &&
-                (await response.json()).data.user_id !== null &&
-                JSON.stringify((await response.json()).data.tags) ===
-                    JSON.stringify([])
-            );
-        }),
+        newTimeEntryResponse(page),
         await startOrStopTimerWithButton(page),
     ]);
     await assertThatTimerHasStarted(page);
@@ -214,71 +125,26 @@ test('test that starting and updating the time while running works', async ({
     await expect(page.getByTestId('time_entry_time')).toHaveValue(/00:20/);
     await page.waitForTimeout(500);
     await Promise.all([
-        page.waitForResponse(async (response) => {
-            return (
-                response.status() === 200 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
-                (await response.json()).data.id !== null &&
-                (await response.json()).data.start !== null &&
-                (await response.json()).data.end !== null &&
-                (await response.json()).data.project_id === null &&
-                (await response.json()).data.description === '' &&
-                (await response.json()).data.task_id === null &&
-                (await response.json()).data.duration !== null &&
-                (await response.json()).data.user_id !== null &&
-                JSON.stringify((await response.json()).data.tags) ===
-                    JSON.stringify([])
-            );
-        }),
+        stoppedTimeEntryResponse(page),
         startOrStopTimerWithButton(page),
     ]);
     await assertThatTimerIsStopped(page);
 });
 
-test('test that entering a time starts the timer on blur', async ({ page }) => {
+test('test that entering a human readable time starts the timer on blur', async ({
+    page,
+}) => {
     await goToDashboard(page);
     await page.getByTestId('time_entry_time').fill('20min');
     await Promise.all([
-        page.waitForResponse(async (response) => {
-            return (
-                response.status() === 201 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
-                (await response.json()).data.id !== null &&
-                (await response.json()).data.start !== null &&
-                (await response.json()).data.end === null &&
-                (await response.json()).data.project_id === null &&
-                (await response.json()).data.description === '' &&
-                (await response.json()).data.task_id === null &&
-                (await response.json()).data.duration === null &&
-                (await response.json()).data.user_id !== null &&
-                JSON.stringify((await response.json()).data.tags) ===
-                    JSON.stringify([])
-            );
-        }),
+        newTimeEntryResponse(page),
         page.getByTestId('time_entry_time').press('Tab'),
     ]);
+    await expect(page.getByTestId('time_entry_time')).toHaveValue(/00:20:/);
     await assertThatTimerHasStarted(page);
 
     await Promise.all([
-        page.waitForResponse(async (response) => {
-            return (
-                response.status() === 200 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
-                (await response.json()).data.id !== null &&
-                (await response.json()).data.start !== null &&
-                (await response.json()).data.end !== null &&
-                (await response.json()).data.project_id === null &&
-                (await response.json()).data.description === '' &&
-                (await response.json()).data.task_id === null &&
-                (await response.json()).data.duration !== null &&
-                (await response.json()).data.user_id !== null &&
-                JSON.stringify((await response.json()).data.tags) ===
-                    JSON.stringify([])
-            );
-        }),
+        stoppedTimeEntryResponse(page),
         startOrStopTimerWithButton(page),
     ]);
     await page.locator(
@@ -286,50 +152,71 @@ test('test that entering a time starts the timer on blur', async ({ page }) => {
     );
 });
 
+test('test that entering a number in the time range starts the timer on blur', async ({
+    page,
+}) => {
+    await goToDashboard(page);
+    await page.getByTestId('time_entry_time').fill('5');
+    await Promise.all([
+        newTimeEntryResponse(page),
+        page.getByTestId('time_entry_time').press('Tab'),
+    ]);
+    await expect(page.getByTestId('time_entry_time')).toHaveValue(/00:05:/);
+    await assertThatTimerHasStarted(page);
+
+    await Promise.all([
+        stoppedTimeEntryResponse(page),
+        startOrStopTimerWithButton(page),
+    ]);
+    await page.locator(
+        '[data-testid="dashboard_timer"] [data-testid="timer_button"].bg-accent-300/70'
+    );
+});
+
+test('test that entering a value with the format hh:mm in the time range starts the timer on blur', async ({
+    page,
+}) => {
+    await goToDashboard(page);
+    await page.getByTestId('time_entry_time').fill('12:30');
+    await Promise.all([
+        newTimeEntryResponse(page),
+        page.getByTestId('time_entry_time').press('Tab'),
+    ]);
+    await expect(page.getByTestId('time_entry_time')).toHaveValue(/12:30:/);
+    await assertThatTimerHasStarted(page);
+
+    await Promise.all([
+        stoppedTimeEntryResponse(page),
+        startOrStopTimerWithButton(page),
+    ]);
+    await page.locator(
+        '[data-testid="dashboard_timer"] [data-testid="timer_button"].bg-accent-300/70'
+    );
+});
+
+test('test that entering a random value in the time range does not start the timer on blur', async ({
+    page,
+}) => {
+    await goToDashboard(page);
+    await page.getByTestId('time_entry_time').fill('asdasdasd');
+    await page.getByTestId('time_entry_time').press('Tab'),
+        await page.locator(
+            '[data-testid="dashboard_timer"] [data-testid="timer_button"].bg-accent-300/70'
+        );
+});
+
 test('test that entering a time starts the timer on enter', async ({
     page,
 }) => {
     await goToDashboard(page);
     await page.getByTestId('time_entry_time').fill('20min');
     await Promise.all([
-        page.waitForResponse(async (response) => {
-            return (
-                response.status() === 201 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
-                (await response.json()).data.id !== null &&
-                (await response.json()).data.start !== null &&
-                (await response.json()).data.end === null &&
-                (await response.json()).data.project_id === null &&
-                (await response.json()).data.description === '' &&
-                (await response.json()).data.task_id === null &&
-                (await response.json()).data.duration === null &&
-                (await response.json()).data.user_id !== null &&
-                JSON.stringify((await response.json()).data.tags) ===
-                    JSON.stringify([])
-            );
-        }),
+        newTimeEntryResponse(page),
         page.getByTestId('time_entry_time').press('Enter'),
     ]);
     await assertThatTimerHasStarted(page);
     await Promise.all([
-        page.waitForResponse(async (response) => {
-            return (
-                response.status() === 200 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
-                (await response.json()).data.id !== null &&
-                (await response.json()).data.start !== null &&
-                (await response.json()).data.end !== null &&
-                (await response.json()).data.project_id === null &&
-                (await response.json()).data.description === '' &&
-                (await response.json()).data.task_id === null &&
-                (await response.json()).data.duration !== null &&
-                (await response.json()).data.user_id !== null &&
-                JSON.stringify((await response.json()).data.tags) ===
-                    JSON.stringify([])
-            );
-        }),
+        stoppedTimeEntryResponse(page),
         startOrStopTimerWithButton(page),
     ]);
     await assertThatTimerIsStopped(page);
@@ -342,14 +229,7 @@ test('test that adding a new tag works', async ({ page }) => {
     await page.getByTestId('tag_dropdown_search').fill(newTagName);
 
     await Promise.all([
-        page.waitForResponse(async (response) => {
-            return (
-                response.status() === 201 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
-                (await response.json()).data.name === newTagName
-            );
-        }),
+        newTagResponse(page, { name: newTagName }),
         page.getByTestId('tag_dropdown_search').press('Enter'),
     ]);
 
@@ -370,56 +250,18 @@ test('test that adding a new tag when the timer is running', async ({
     await page.getByTestId('tag_dropdown').click();
     await page.getByTestId('tag_dropdown_search').fill(newTagName);
     const [tagCreateResponse] = await Promise.all([
-        page.waitForResponse(async (response) => {
-            return (
-                response.status() === 201 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
-                (await response.json()).data.name === newTagName
-            );
-        }),
+        newTagResponse(page, { name: newTagName }),
         page.getByTestId('tag_dropdown_search').press('Enter'),
     ]);
-    await page.waitForResponse(async (response) => {
-        return (
-            response.status() === 200 &&
-            (await response.headerValue('Content-Type')) ===
-                'application/json' &&
-            (await response.json()).data.id !== null &&
-            (await response.json()).data.start !== null &&
-            (await response.json()).data.end === null &&
-            (await response.json()).data.project_id === null &&
-            (await response.json()).data.description === '' &&
-            (await response.json()).data.task_id === null &&
-            (await response.json()).data.duration === null &&
-            (await response.json()).data.user_id !== null &&
-            JSON.stringify((await response.json()).data.tags) ===
-                JSON.stringify([(await tagCreateResponse.json()).data.id])
-        );
-    });
+    const tagId = (await tagCreateResponse.json()).data.id;
+    await newTimeEntryResponse(page, { status: 200, tags: [tagId] });
     await expect(page.getByTestId('tag_dropdown_search')).toHaveValue('');
     await expect(page.getByRole('option', { name: newTagName })).toBeVisible();
     await page.getByTestId('tag_dropdown_search').press('Escape');
     await page.waitForTimeout(1000);
 
     await Promise.all([
-        page.waitForResponse(async (response) => {
-            return (
-                response.status() === 200 &&
-                (await response.headerValue('Content-Type')) ===
-                    'application/json' &&
-                (await response.json()).data.id !== null &&
-                (await response.json()).data.start !== null &&
-                (await response.json()).data.end !== null &&
-                (await response.json()).data.project_id === null &&
-                (await response.json()).data.description === '' &&
-                (await response.json()).data.task_id === null &&
-                (await response.json()).data.duration !== null &&
-                (await response.json()).data.user_id !== null &&
-                JSON.stringify((await response.json()).data.tags) ===
-                    JSON.stringify([(await tagCreateResponse.json()).data.id])
-            );
-        }),
+        stoppedTimeEntryResponse(page, { tags: [tagId] }),
         startOrStopTimerWithButton(page),
     ]);
     await assertThatTimerIsStopped(page);

e2e/utils/currentTimeEntry.ts

@@ -12,22 +12,25 @@ export async function assertThatTimerHasStarted(page: Page) {
     );
 }
 
-export function newTimeEntryResponse(page: Page) {
+export function newTimeEntryResponse(
+    page: Page,
+    { description = '', status = 201, tags = [] } = {}
+) {
     return page.waitForResponse(async (response) => {
         return (
-            response.status() === 201 &&
+            response.status() === status &&
             (await response.headerValue('Content-Type')) ===
                 'application/json' &&
             (await response.json()).data.id !== null &&
             (await response.json()).data.start !== null &&
             (await response.json()).data.end === null &&
             (await response.json()).data.project_id === null &&
-            (await response.json()).data.description === '' &&
+            (await response.json()).data.description === description &&
             (await response.json()).data.task_id === null &&
             (await response.json()).data.duration === null &&
             (await response.json()).data.user_id !== null &&
             JSON.stringify((await response.json()).data.tags) ===
-                JSON.stringify([])
+                JSON.stringify(tags)
         );
     });
 }
@@ -40,7 +43,10 @@ export async function assertThatTimerIsStopped(page: Page) {
     ).toHaveClass(/bg-accent-300\/50/);
 }
 
-export async function stoppedTimeEntryResponse(page: Page) {
+export async function stoppedTimeEntryResponse(
+    page: Page,
+    { description = '', tags = [] } = {}
+) {
     return page.waitForResponse(async (response) => {
         return (
             response.status() === 200 &&
@@ -50,12 +56,12 @@ export async function stoppedTimeEntryResponse(page: Page) {
             (await response.json()).data.start !== null &&
             (await response.json()).data.end !== null &&
             (await response.json()).data.project_id === null &&
-            (await response.json()).data.description === '' &&
+            (await response.json()).data.description === description &&
             (await response.json()).data.task_id === null &&
             (await response.json()).data.duration !== null &&
             (await response.json()).data.user_id !== null &&
             JSON.stringify((await response.json()).data.tags) ===
-                JSON.stringify([])
+                JSON.stringify(tags)
         );
     });
 }

e2e/utils/tags.ts

@@ -0,0 +1,12 @@
+import { Page } from '@playwright/test';
+
+export function newTagResponse(page: Page, { name = '' } = {}) {
+    return page.waitForResponse(async (response) => {
+        return (
+            response.status() === 201 &&
+            (await response.headerValue('Content-Type')) ===
+                'application/json' &&
+            (await response.json()).data.name === name
+        );
+    });
+}