add dashboard frontend

This commit is contained in:
Gregor Vostrak
2024-03-11 18:02:54 +01:00
parent e8912650c0
commit 20fc123c36
86 changed files with 5124 additions and 849 deletions

View File

@@ -8,9 +8,7 @@ async function registerNewUser(page, email, password) {
await page.getByLabel('Password', { exact: true }).fill(password);
await page.getByLabel('Confirm Password').fill(password);
await page.getByRole('button', { name: 'Register' }).click();
await expect(
page.getByRole('heading', { name: 'Dashboard' })
).toBeVisible();
await expect(page.getByTestId('dashboard_view')).toBeVisible();
}
test('can register, logout and log back in', async ({ page }) => {
@@ -18,20 +16,15 @@ test('can register, logout and log back in', async ({ page }) => {
const email = `john+${Math.round(Math.random() * 10000)}@doe.com`;
const password = 'suchagreatpassword123';
await registerNewUser(page, email, password);
await expect(
page.getByRole('button', { name: "John's Organization" })
).toBeVisible();
await page.locator('#currentUserButton').click();
await page.getByRole('button', { name: 'Log Out' }).click();
await expect(page.getByTestId('dashboard_view')).toBeVisible();
await page.getByTestId('current_user_button').click();
await page.getByText('Log Out').click();
await page.waitForURL(PLAYWRIGHT_BASE_URL + '/');
await page.goto(PLAYWRIGHT_BASE_URL + '/login');
await page.getByLabel('Email').fill(email);
await page.getByLabel('Password').fill(password);
await page.getByRole('button', { name: 'Log in' }).click();
await expect(
page.getByRole('heading', { name: 'Dashboard' })
).toBeVisible();
await expect(page.getByTestId('dashboard_view')).toBeVisible();
});
test('can register and delete account', async ({ page }) => {

View File

@@ -3,8 +3,8 @@ import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
async function goToOrganizationSettings(page) {
await page.goto(PLAYWRIGHT_BASE_URL + '/dashboard');
await page.locator('#currentTeamButton').click();
await page.getByRole('link', { name: 'Team Settings' }).click();
await page.getByTestId('organization_switcher').click();
await page.getByText('Team Settings').click();
}
test('test that organization name can be updated', async ({ page }) => {
@@ -12,14 +12,28 @@ test('test that organization name can be updated', async ({ page }) => {
await page.getByLabel('Team Name').fill('NEW ORG NAME');
await page.getByLabel('Team Name').press('Enter');
await page.getByLabel('Team Name').press('Meta+r');
await expect(page.getByRole('navigation')).toContainText('NEW ORG NAME');
await expect(page.getByTestId('organization_switcher')).toContainText(
'NEW ORG NAME'
);
});
test('test that new editor can be invited', async ({ page }) => {
test('test that new manager can be invited', async ({ page }) => {
await goToOrganizationSettings(page);
const editorId = Math.round(Math.random() * 10000);
await page.getByLabel('Email').fill(`new+${editorId}@editor.test`);
await page.getByRole('button', { name: 'Editor' }).click();
await page.getByRole('button', { name: 'Manager' }).click();
await page.getByRole('button', { name: 'Add' }).click();
await page.reload();
await expect(page.getByRole('main')).toContainText(
`new+${editorId}@editor.test`
);
});
test('test that new employee can be invited', async ({ page }) => {
await goToOrganizationSettings(page);
const editorId = Math.round(Math.random() * 10000);
await page.getByLabel('Email').fill(`new+${editorId}@editor.test`);
await page.getByRole('button', { name: 'Employee' }).click();
await page.getByRole('button', { name: 'Add' }).click();
await page.reload();
await expect(page.getByRole('main')).toContainText(

507
e2e/timetracker.spec.ts Normal file
View File

@@ -0,0 +1,507 @@
import { expect, test } from '../playwright/fixtures';
import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
async function goToDashboard(page) {
await page.goto(PLAYWRIGHT_BASE_URL + '/dashboard');
}
async function startOrStopTimerWithButton(page) {
await page
.locator('[data-testid="dashboard_timer"] [data-testid="timer_button"]')
.click();
}
async function assertThatTimerHasStarted(page) {
await page.locator(
'[data-testid="dashboard_timer"] [data-testid="timer_button"].bg-red-400/80'
);
}
async function assertNewTimeEntryResponse(page) {
await 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([])
);
});
}
async function assertThatTimerIsStoped(page) {
await page.locator(
'[data-testid="dashboard_timer"] [data-testid="timer_button"].bg-accent-300/70'
);
}
test('test that starting and stopping a timer without description and project works', async ({
page,
}) => {
await goToDashboard(page);
await startOrStopTimerWithButton(page);
await assertNewTimeEntryResponse(page);
await assertThatTimerHasStarted(page);
await page.waitForTimeout(1500);
await startOrStopTimerWithButton(page);
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 assertThatTimerIsStoped(page);
});
test('test that starting and stopping a timer with a description works', async ({
page,
}) => {
await goToDashboard(page);
await page
.getByTestId('time_entry_description')
.fill('New Time Entry Description');
await startOrStopTimerWithButton(page);
await 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([])
);
});
await assertThatTimerHasStarted(page);
await page.waitForTimeout(500);
await startOrStopTimerWithButton(page);
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 ===
'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([])
);
});
await assertThatTimerIsStoped(page);
});
test('test that starting and updating the description while running works', async ({
page,
}) => {
await goToDashboard(page);
await startOrStopTimerWithButton(page);
await 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([])
);
});
await assertThatTimerHasStarted(page);
await page.waitForTimeout(500);
await page
.getByTestId('time_entry_description')
.fill('New Time Entry Description');
await page.getByTestId('time_entry_description').press('Tab');
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 ===
'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([])
);
});
await page.waitForTimeout(500);
await startOrStopTimerWithButton(page);
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 ===
'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([])
);
});
await assertThatTimerIsStoped(page);
});
test('test that starting and updating the description while running works', async ({
page,
}) => {
await goToDashboard(page);
await startOrStopTimerWithButton(page);
await 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([])
);
});
await assertThatTimerHasStarted(page);
await page.waitForTimeout(500);
await page
.getByTestId('time_entry_description')
.fill('New Time Entry Description');
await page.getByTestId('time_entry_description').press('Tab');
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 ===
'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([])
);
});
await page.waitForTimeout(500);
await startOrStopTimerWithButton(page);
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 ===
'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([])
);
});
await assertThatTimerIsStoped(page);
});
test('test that starting and updating the time while running works', async ({
page,
}) => {
await goToDashboard(page);
await startOrStopTimerWithButton(page);
const createResponse = await 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([])
);
});
await assertThatTimerHasStarted(page);
await page.waitForTimeout(500);
await page.getByTestId('time_entry_time').fill('20min');
await page.getByTestId('time_entry_time').press('Tab');
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.start !==
(await createResponse.json()).data.start &&
(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 expect(page.getByTestId('time_entry_time')).toHaveValue(/00:20/);
await page.waitForTimeout(500);
await startOrStopTimerWithButton(page);
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 assertThatTimerIsStoped(page);
});
test('test that entering a time starts the timer on blur', async ({ page }) => {
await goToDashboard(page);
await page.getByTestId('time_entry_time').fill('20min');
await page.getByTestId('time_entry_time').press('Tab');
await 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([])
);
});
await assertThatTimerHasStarted(page);
await startOrStopTimerWithButton(page);
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 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 page.getByTestId('time_entry_time').press('Enter');
await 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([])
);
});
await assertThatTimerHasStarted(page);
await startOrStopTimerWithButton(page);
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 assertThatTimerIsStoped(page);
});
test('test that adding a new tag works', async ({ page }) => {
const newTagName = 'New Tag' + Math.floor(Math.random() * 10000);
await goToDashboard(page);
await page.getByTestId('tag_dropdown').click();
await page.getByTestId('tag_dropdown_search').fill(newTagName);
await page.getByTestId('tag_dropdown_search').press('Enter');
await page.waitForResponse(async (response) => {
return (
response.status() === 201 &&
(await response.headerValue('Content-Type')) ===
'application/json' &&
(await response.json()).data.name === newTagName
);
});
await expect(page.getByTestId('tag_dropdown_search')).toHaveValue('');
await expect(page.getByTestId('tag_dropdown_entries')).toHaveText(
newTagName
);
});
test('test that adding a new tag when the timer is running', async ({
page,
}) => {
const newTagName = 'New Tag' + Math.floor(Math.random() * 10000);
await goToDashboard(page);
await startOrStopTimerWithButton(page);
await assertNewTimeEntryResponse(page);
await assertThatTimerHasStarted(page);
await page.getByTestId('tag_dropdown').click();
await page.getByTestId('tag_dropdown_search').fill(newTagName);
await page.getByTestId('tag_dropdown_search').press('Enter');
const tagCreateResponse = await page.waitForResponse(async (response) => {
return (
response.status() === 201 &&
(await response.headerValue('Content-Type')) ===
'application/json' &&
(await response.json()).data.name === newTagName
);
});
await expect(page.getByTestId('tag_dropdown_search')).toHaveValue('');
await expect(page.getByTestId('tag_dropdown_entries')).toHaveText(
newTagName
);
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])
);
});
await page.getByTestId('tag_dropdown_search').press('Escape');
await page.waitForTimeout(1000);
await startOrStopTimerWithButton(page);
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])
);
});
await assertThatTimerIsStoped(page);
});
// test that adding a new tag when the timer is running
// test that search is working