diff --git a/frontend/src/lib/layout/AppBar.svelte b/frontend/src/lib/layout/AppBar.svelte index 8ed482334..9df42494e 100644 --- a/frontend/src/lib/layout/AppBar.svelte +++ b/frontend/src/lib/layout/AppBar.svelte @@ -20,13 +20,13 @@
{#if environmentName !== 'production'} - + {$t('environment_warning', { environmentName })} {/if}
- +
{$t('appbar.app_name')} diff --git a/frontend/tests/components/deleteProjectModal.ts b/frontend/tests/components/deleteProjectModal.ts new file mode 100644 index 000000000..7e5e99f7f --- /dev/null +++ b/frontend/tests/components/deleteProjectModal.ts @@ -0,0 +1,22 @@ +import { type Locator, type Page } from '@playwright/test'; +import { BaseComponent } from './baseComponent'; + +export class DeleteProjectModal extends BaseComponent { + + get confirmationInput(): Locator { + return this.componentLocator.getByLabel(`Enter 'DELETE PROJECT' to confirm`); + } + + get submitButton(): Locator { + return this.componentLocator.getByRole('button', { name: 'Delete Project' }); + } + + constructor(page: Page) { + super(page, page.locator(`dialog.modal:has-text("Enter 'DELETE PROJECT' to confirm")`)); + } + + async confirmDeleteProject(): Promise { + await this.confirmationInput.fill('DELETE PROJECT'); + await this.submitButton.click(); + } +} diff --git a/frontend/tests/errorHandling.test.ts b/frontend/tests/errorHandling.test.ts index 7d7441985..3c09fa540 100644 --- a/frontend/tests/errorHandling.test.ts +++ b/frontend/tests/errorHandling.test.ts @@ -67,7 +67,7 @@ test('client-side gql 500 does not break the application', async ({ page }) => { await responsePromise.catch(() => { });// Ignore the error await expect(page.locator(':text-matches("Unexpected response:.*(500)", "g")').first()).toBeVisible(); await page.getByRole('button', { name: 'Dismiss' }).click(); - await page.getByText('Lexbox').click(); + await page.locator('#home').click(); await new UserDashboardPage(page).waitFor(); test.fail(); // Everything up to here passed, but we expect a soft 500 response assertion to ultimately fail the test }); diff --git a/frontend/tests/fixtures.ts b/frontend/tests/fixtures.ts index 2468df58b..2a292ab86 100644 --- a/frontend/tests/fixtures.ts +++ b/frontend/tests/fixtures.ts @@ -21,7 +21,7 @@ export interface TempProject { name: string } -type CreateProjectResponse = {data: {createProject: {createProjectResponse: {id: UUID}}}} +export type CreateProjectResponse = {data: {createProject: {createProjectResponse: {id: UUID}}}} type Fixtures = { contextFactory: (options: BrowserContextOptions) => Promise, diff --git a/frontend/tests/pages/adminDashboardPage.ts b/frontend/tests/pages/adminDashboardPage.ts index 7608c2cce..92c9af3f2 100644 --- a/frontend/tests/pages/adminDashboardPage.ts +++ b/frontend/tests/pages/adminDashboardPage.ts @@ -1,5 +1,7 @@ import type { Locator, Page } from '@playwright/test'; + import { AuthenticatedBasePage } from './authenticatedBasePage'; +import { CreateProjectPage } from './createProjectPage'; import { ProjectPage } from './projectPage'; export class AdminDashboardPage extends AuthenticatedBasePage { @@ -19,4 +21,9 @@ export class AdminDashboardPage extends AuthenticatedBasePage { const table = this.page.locator('table').nth(0); return table.getByRole('link', {name: projectName, exact: true}).click(); } + + async clickCreateProject(): Promise { + await this.page.getByRole('link', {name: 'Create Project', exact: true}).click(); + return new CreateProjectPage(this.page).waitFor(); + } } diff --git a/frontend/tests/pages/createProjectPage.ts b/frontend/tests/pages/createProjectPage.ts new file mode 100644 index 000000000..93b743ddf --- /dev/null +++ b/frontend/tests/pages/createProjectPage.ts @@ -0,0 +1,25 @@ +import { BasePage } from './basePage'; +import type { Page } from '@playwright/test'; + +export class CreateProjectPage extends BasePage { + constructor(page: Page) { + super(page, page.getByRole('heading', { name: 'Create Project' }), `/project/create`); + } + + async fillForm(values: { code: string, customCode?: boolean, name?: string, type?: string, purpose?: string, description?: string }): Promise { + const { code, customCode = false, name = code, type, purpose = 'Software Developer', description = name } = values; + await this.page.getByLabel('Name').fill(name); + await this.page.getByLabel('Description').fill(description ?? name); + if (type) await this.page.getByLabel('Project type').selectOption({ label: type }); + if (purpose) await this.page.getByLabel('Purpose').selectOption({ label: purpose }); + await this.page.getByLabel('Language Code').fill(code); + if (customCode) { + await this.page.getByLabel('Custom Code').check(); + await this.page.getByLabel('Code', { exact: true }).fill(code); + } + } + + async submit(): Promise { + await this.page.getByRole('button', {name: 'Create Project'}).click(); + } +} diff --git a/frontend/tests/pages/projectPage.ts b/frontend/tests/pages/projectPage.ts index 3f2f55373..3d5af18a3 100644 --- a/frontend/tests/pages/projectPage.ts +++ b/frontend/tests/pages/projectPage.ts @@ -2,6 +2,7 @@ import type { Locator, Page } from '@playwright/test'; import { AddMemberModal } from '../components/addMemberModal'; import { BasePage } from './basePage'; +import { DeleteProjectModal } from '../components/deleteProjectModal'; import { ResetProjectModal } from '../components/resetProjectModal'; export class ProjectPage extends BasePage { @@ -12,7 +13,7 @@ export class ProjectPage extends BasePage { get addMemberButton(): Locator { return this.page.getByRole('button', {name: 'Add/Invite Member'}); } constructor(page: Page, name: string, code: string) { - super(page, page.locator(`.breadcrumbs :text('${name}')`), `/project/${code}`); + super(page, page.getByRole('heading', {name: `Project: ${name}`}), `/project/${code}`); } openMoreSettings(): Promise { @@ -24,9 +25,10 @@ export class ProjectPage extends BasePage { return new AddMemberModal(this.page).waitFor() } - async clickDeleteProject(): Promise { + async clickDeleteProject(): Promise { await this.openMoreSettings(); await this.deleteProjectButton.click(); + return await new DeleteProjectModal(this.page).waitFor(); } async clickResetProject(): Promise { diff --git a/frontend/tests/recreateProject.test.ts b/frontend/tests/recreateProject.test.ts new file mode 100644 index 000000000..9c0817997 --- /dev/null +++ b/frontend/tests/recreateProject.test.ts @@ -0,0 +1,40 @@ +import * as testEnv from './envVars'; + +import { AdminDashboardPage } from './pages/adminDashboardPage'; +import { ProjectPage } from './pages/projectPage'; +import { loginAs } from './utils/authHelpers'; +import { test, type CreateProjectResponse } from './fixtures'; +import { waitForGqlResponse } from './utils/gqlHelpers'; +import { expect } from '@playwright/test'; + +test('delete and recreate project', async ({ page, uniqueTestId }) => { + // Step 1: Login + await loginAs(page.request, 'admin', testEnv.defaultPassword); + const adminDashboard = await new AdminDashboardPage(page).goto(); + + // Step 2: Create a new project + const createProjectPage = await adminDashboard.clickCreateProject(); + const projectCode = `recreate-project-test-${uniqueTestId}`; + await createProjectPage.fillForm({ code: projectCode, customCode: true }); + await createProjectPage.submit(); + const projectPage = await new ProjectPage(page, projectCode, projectCode).waitFor(); + + // Step 3: Delete the project + const deleteProjectModal = await projectPage.clickDeleteProject(); + await deleteProjectModal.confirmDeleteProject(); + await adminDashboard.waitFor(); + + // Step 4: Recreate the project + await adminDashboard.clickCreateProject(); + await createProjectPage.fillForm({ code: projectCode, customCode: true }); + + const createProjectResponse = await waitForGqlResponse(page, async () => { + await createProjectPage.submit(); + }); + await projectPage.waitFor(); + + // Step 5: Clean up the last created project (the first one is only soft deleted, but that's probably fine) + const projectId = createProjectResponse.data.createProject.createProjectResponse.id; + const deleteResponse = await page.request.delete(`${testEnv.serverBaseUrl}/api/project/${projectId}`); + expect(deleteResponse.ok()).toBeTruthy(); +}); diff --git a/frontend/tests/utils/gqlHelpers.ts b/frontend/tests/utils/gqlHelpers.ts index 208a7760b..160d4359f 100644 --- a/frontend/tests/utils/gqlHelpers.ts +++ b/frontend/tests/utils/gqlHelpers.ts @@ -1,4 +1,4 @@ -import { expect, type APIRequestContext } from '@playwright/test'; +import { expect, type APIRequestContext, type Page } from '@playwright/test'; import { serverBaseUrl } from '../envVars'; export function validateGqlErrors(json: {errors: unknown, data: unknown}, expectError = false): void { @@ -17,3 +17,14 @@ export async function executeGql(api: APIRequestContext, gql: string, expectE validateGqlErrors(json as {errors: unknown, data: unknown}, expectError); return json as T; } + +export async function waitForGqlResponse(page: Page, action: () => Promise): Promise { + const gqlPromise = page.waitForResponse('/api/graphql'); + await action(); + const response = await gqlPromise; + expect(response.ok(), `code was ${response.status()} (${response.statusText()})`).toBeTruthy(); + const json: unknown = await response.json(); + expect(json, `for query ${response.request().postData()}`).not.toBeNull(); + validateGqlErrors(json as { errors: unknown, data: unknown }); + return json as T; +}