Add Mailpit SMTP and refine Playwright tests

Author: Onatcer

.env.ci

@@ -34,7 +34,12 @@ SESSION_DRIVER=database
 SESSION_LIFETIME=120
 
 # Mail
-MAIL_MAILER=log
+MAIL_MAILER=smtp
+MAIL_HOST=localhost
+MAIL_PORT=1025
+MAIL_USERNAME=null
+MAIL_PASSWORD=null
+MAIL_ENCRYPTION=null
 MAIL_FROM_ADDRESS="no-reply@solidtime.test"
 MAIL_FROM_NAME="solidtime"
 MAIL_REPLY_TO_ADDRESS="hello@solidtime.test"

.github/workflows/playwright.yml

@@ -10,6 +10,9 @@ jobs:
     services:
       mailpit:
         image: 'axllent/mailpit:latest'
+        ports:
+          - 1025:1025
+          - 8025:8025
       pgsql_test:
         image: postgres:15
         env:
@@ -67,6 +70,7 @@ jobs:
         run: npx playwright test
         env:
           PLAYWRIGHT_BASE_URL: 'http://127.0.0.1:8000'
+          MAILPIT_BASE_URL: 'http://localhost:8025'
 
       - name: "Upload test results"
         uses: actions/upload-artifact@v4

docker-compose.yml

@@ -107,7 +107,7 @@ services:
             - sail
             - reverse-proxy
     playwright:
-        image: mcr.microsoft.com/playwright:v1.51.1-jammy
+        image: mcr.microsoft.com/playwright:v1.58.1-jammy
         command: ['npx', 'playwright', 'test', '--ui-port=8080', '--ui-host=0.0.0.0']
         working_dir: /src
         extra_hosts:

e2e/members.spec.ts

@@ -7,6 +7,10 @@ import type { Page } from '@playwright/test';
 import path from 'path';
 import fs from 'fs';
 import os from 'os';
+import { inviteAndAcceptMember } from './utils/members';
+
+// Tests that invite + accept members need more time
+test.describe.configure({ timeout: 60000 });
 
 async function goToMembersPage(page: Page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/members');
@@ -19,41 +23,45 @@ async function openInviteMemberModal(page: Page) {
     ]);
 }
 
-test('test that new manager can be invited', async ({ page }) => {
+test('test that new manager can be invited and accepted', async ({ page, browser }) => {
+    const memberId = Math.round(Math.random() * 100000);
+    const memberEmail = `manager+${memberId}@invite.test`;
+
+    await inviteAndAcceptMember(page, browser, 'Invited Mgr', memberEmail, 'Manager');
+
+    // Verify the member appears in the members table with the correct role
     await goToMembersPage(page);
-    await openInviteMemberModal(page);
-    const editorId = Math.round(Math.random() * 10000);
-    await page.getByLabel('Email').fill(`new+${editorId}@editor.test`);
-    await page.getByRole('button', { name: 'Manager' }).click();
-    await Promise.all([
-        page.getByRole('button', { name: 'Invite Member', exact: true }).click(),
-        expect(page.getByRole('main')).toContainText(`new+${editorId}@editor.test`),
-    ]);
+    const memberRow = page.getByRole('row').filter({ hasText: 'Invited Mgr' });
+    await expect(memberRow).toBeVisible();
+    await expect(memberRow.getByText('Manager', { exact: true })).toBeVisible();
 });
 
-test('test that new employee can be invited', async ({ page }) => {
+test('test that new employee can be invited and accepted', async ({ page, browser }) => {
+    const memberId = Math.round(Math.random() * 100000);
+    const memberEmail = `employee+${memberId}@invite.test`;
+
+    await inviteAndAcceptMember(page, browser, 'Invited Emp', memberEmail, 'Employee');
+
+    // Verify the member appears in the members table with the correct role
     await goToMembersPage(page);
-    await openInviteMemberModal(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 Promise.all([
-        page.getByRole('button', { name: 'Invite Member', exact: true }).click(),
-        expect(page.getByRole('main')).toContainText(`new+${editorId}@editor.test`),
-    ]);
+    const memberRow = page.getByRole('row').filter({ hasText: 'Invited Emp' });
+    await expect(memberRow).toBeVisible();
+    await expect(memberRow.getByText('Employee', { exact: true })).toBeVisible();
 });
 
-test('test that new admin can be invited', async ({ page }) => {
+test('test that new admin can be invited and accepted', async ({ page, browser }) => {
+    const memberId = Math.round(Math.random() * 100000);
+    const memberEmail = `admin+${memberId}@invite.test`;
+
+    await inviteAndAcceptMember(page, browser, 'Invited Adm', memberEmail, 'Administrator');
+
+    // Verify the member appears in the members table with the correct role
     await goToMembersPage(page);
-    await openInviteMemberModal(page);
-    const adminId = Math.round(Math.random() * 10000);
-    await page.getByLabel('Email').fill(`new+${adminId}@admin.test`);
-    await page.getByRole('button', { name: 'Administrator' }).click();
-    await Promise.all([
-        page.getByRole('button', { name: 'Invite Member', exact: true }).click(),
-        expect(page.getByRole('main')).toContainText(`new+${adminId}@admin.test`),
-    ]);
+    const memberRow = page.getByRole('row').filter({ hasText: 'Invited Adm' });
+    await expect(memberRow).toBeVisible();
+    await expect(memberRow.getByText('Admin', { exact: true })).toBeVisible();
 });
+
 test('test that error shows if no role is selected', async ({ page }) => {
     await goToMembersPage(page);
     await openInviteMemberModal(page);
@@ -131,7 +139,7 @@ async function createPlaceholderMemberViaImport(page: Page, placeholderName: str
     fs.unlinkSync(tmpFile);
 }
 
-test('test that changing member role updates the role in the member table', async ({ page }) => {
+test('test that changing role of placeholder member is rejected', async ({ page }) => {
     const placeholderName = 'RoleChange ' + Math.floor(Math.random() * 10000);
 
     // Create a placeholder member via import
@@ -141,7 +149,7 @@ test('test that changing member role updates the role in the member table', asyn
     await goToMembersPage(page);
     const memberRow = page.getByRole('row').filter({ hasText: placeholderName });
     await expect(memberRow).toBeVisible();
-    await expect(memberRow.getByText('Placeholder')).toBeVisible();
+    await expect(memberRow.getByText('Placeholder', { exact: true })).toBeVisible();
 
     // Open the edit modal for the placeholder member
     await memberRow.getByRole('button').click();
@@ -152,7 +160,53 @@ test('test that changing member role updates the role in the member table', asyn
     // Change role to Employee
     const roleSelect = page.getByRole('dialog').getByRole('combobox').first();
     await roleSelect.click();
+    await expect(page.getByRole('option', { name: 'Employee' })).toBeVisible();
     await page.getByRole('option', { name: 'Employee' }).click();
+    await expect(roleSelect).toContainText('Employee');
+
+    // Submit the change - the API should reject it with 400
+    await Promise.all([
+        page.getByRole('button', { name: 'Update Member' }).click(),
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/members/') &&
+                response.request().method() === 'PUT' &&
+                response.status() === 400
+        ),
+    ]);
+
+    // Verify error notification is shown
+    await expect(page.getByText('Failed to update member')).toBeVisible();
+});
+
+test('test that changing member role updates the role in the member table', async ({
+    page,
+    browser,
+}) => {
+    const memberId = Math.floor(Math.random() * 100000);
+    const memberEmail = `member+${memberId}@rolechange.test`;
+
+    // Invite and accept a new Employee member
+    await inviteAndAcceptMember(page, browser, 'Jane Smith', memberEmail, 'Employee');
+
+    // Verify the new member appears with the Employee role
+    await goToMembersPage(page);
+    const memberRow = page.getByRole('row').filter({ hasText: 'Jane Smith' });
+    await expect(memberRow).toBeVisible();
+    await expect(memberRow.getByText('Employee', { exact: true })).toBeVisible();
+
+    // Open the edit modal
+    await memberRow.getByRole('button').click();
+    await page.getByRole('menuitem').getByText('Edit').click();
+    await expect(page.getByRole('dialog')).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Update Member' })).toBeVisible();
+
+    // Change role to Manager
+    const roleSelect = page.getByRole('dialog').getByRole('combobox').first();
+    await roleSelect.click();
+    await expect(page.getByRole('option', { name: 'Manager' })).toBeVisible();
+    await page.getByRole('option', { name: 'Manager' }).click();
+    await expect(roleSelect).toContainText('Manager');
 
     // Submit the change and verify the API call succeeds
     await Promise.all([
@@ -169,7 +223,7 @@ test('test that changing member role updates the role in the member table', asyn
     await expect(page.getByRole('dialog')).not.toBeVisible();
 
     // Verify the role updated in the table
-    await expect(memberRow.getByText('Employee')).toBeVisible();
+    await expect(memberRow.getByText('Manager', { exact: true })).toBeVisible();
 });
 
 test('test that merging a placeholder member works', async ({ page }) => {
@@ -192,8 +246,8 @@ test('test that merging a placeholder member works', async ({ page }) => {
     await expect(page.getByRole('heading', { name: 'Merge Member' })).toBeVisible();
 
     // Select the current user (the owner) as merge target via MemberCombobox
-    const combobox = page.getByRole('dialog').getByRole('combobox');
-    await combobox.click();
+    // The MemberCombobox renders a Button as trigger; clicking it opens the popover with the combobox input
+    await page.getByRole('dialog').getByRole('button', { name: 'Select a member...' }).click();
 
     // Wait for dropdown options to load
     const firstOption = page.getByRole('option').first();

e2e/project-members.spec.ts

@@ -32,7 +32,7 @@ test('test that updating project member billable rate works for existing time en
     await page.getByRole('button', { name: 'Add Member' }).click();
 
     await expect(page.getByText('Add Project Member').first()).toBeVisible();
-    await page.getByRole('combobox').filter({ hasText: 'Select a member' }).click();
+    await page.getByRole('button', { name: 'Select a member...' }).click();
     await page.getByRole('option').first().click();
     await page.getByRole('button', { name: 'Add Project Member' }).click();
 

e2e/reporting.spec.ts

@@ -189,7 +189,7 @@ test('test that deselecting a project removes the filter', async ({ page }) => {
     // Deselect project
     await page.getByRole('button', { name: 'Projects' }).first().click();
     await page.getByRole('option').filter({ hasText: project1 }).click();
-    await Promise.all([page.keyboard.press('Escape'), waitForReportingUpdate(page)]);
+    await page.keyboard.press('Escape');
 
     // Verify badge count is gone (no count displayed when 0)
     await expect(
@@ -283,7 +283,7 @@ test('test that deselecting a client removes the filter', async ({ page }) => {
     // Deselect client
     await page.getByRole('button', { name: 'Clients' }).first().click();
     await page.getByRole('option').filter({ hasText: client1 }).click();
-    await Promise.all([page.keyboard.press('Escape'), waitForReportingUpdate(page)]);
+    await page.keyboard.press('Escape');
 
     await expect(
         page.getByRole('button', { name: 'Clients' }).first().getByText(/^\d+$/)
@@ -414,7 +414,7 @@ test('test that deselecting a member removes the filter', async ({ page }) => {
     // Deselect member
     await page.getByRole('button', { name: 'Members' }).first().click();
     await page.getByRole('option').filter({ hasText: 'John Doe' }).click();
-    await Promise.all([page.keyboard.press('Escape'), waitForReportingUpdate(page)]);
+    await page.keyboard.press('Escape');
 
     // Verify badge count is gone
     await expect(
@@ -506,7 +506,7 @@ test('test that deselecting a tag removes the filter', async ({ page }) => {
     // Deselect tag
     await page.getByRole('button', { name: 'Tags' }).click();
     await page.getByRole('option').filter({ hasText: tag1 }).click();
-    await Promise.all([page.keyboard.press('Escape'), waitForReportingUpdate(page)]);
+    await page.keyboard.press('Escape');
 
     await expect(page.getByRole('button', { name: 'Tags' }).getByText(/^\d+$/)).not.toBeVisible();
 });

e2e/time.spec.ts

@@ -392,7 +392,8 @@ test('test that mass update billable status works', async ({ page }) => {
         page.getByRole('button', { name: 'Update Time Entries' }).click(),
     ]);
     const massUpdateBody = await massUpdateResponse.json();
-    expect(massUpdateBody.data.billable).toBe(true);
+    expect(massUpdateBody.success.length).toBeGreaterThan(0);
+    expect(massUpdateBody.error.length).toBe(0);
 
     // Verify dialog closes
     await expect(page.getByRole('dialog')).not.toBeVisible();

playwright/config.ts

@@ -1 +1,2 @@
 export const PLAYWRIGHT_BASE_URL = process.env.PLAYWRIGHT_BASE_URL ?? 'http://solidtime.test';
+export const MAILPIT_BASE_URL = process.env.MAILPIT_BASE_URL ?? 'http://mailpit:8025';