Add expense creation to E2E tests using Page Object Model

src/app/groups/[groupId]/expenses/expense-card.tsx

@@ -44,6 +44,7 @@ export function ExpenseCard({ expense, currency, groupId }: Props) {
   return (
     <div
       key={expense.id}
+      data-expense-card
       className={cn(
         'flex justify-between sm:mx-6 px-4 sm:rounded-lg sm:pr-2 sm:pl-4 py-4 text-sm cursor-pointer hover:bg-accent gap-1 items-stretch',
         expense.isReimbursement && 'italic',
@@ -73,6 +74,7 @@ export function ExpenseCard({ expense, currency, groupId }: Props) {
             'tabular-nums whitespace-nowrap',
             expense.isReimbursement ? 'italic' : 'font-bold',
           )}
+          data-amount
         >
           {formatCurrency(currency, expense.amount, locale)}
         </div>

tests/create-group.spec.ts

@@ -1,21 +1,38 @@
 import { expect, test } from '@playwright/test'
-import { CreateGroupPage } from './create-group-page'
+import { CreateGroupPage } from './pom/create-group-page'
+import { ExpensePage } from './pom/expense-page'
+import { GroupPage } from './pom/group-page'
 
-test('Create a new group', async ({ page }) => {
+test('Create a new group and add an expense', async ({ page }) => {
   const createGroupPage = new CreateGroupPage(page)
+  const groupPage = new GroupPage(page)
+  const expensePage = new ExpensePage(page)
 
-  await createGroupPage.navigate()
-  await createGroupPage.fillGroupName('New Test Group')
-  await createGroupPage.fillCurrency('USD')
-  await createGroupPage.fillAdditionalInfo('This is a test group.')
+  await test.step('Create a new group', async () => {
+    await createGroupPage.navigate()
+    await createGroupPage.fillGroupName('New Test Group')
+    await createGroupPage.fillCurrency('USD')
+    await createGroupPage.fillAdditionalInfo('This is a test group.')
+    await createGroupPage.addParticipant('John', 0)
+    await createGroupPage.addParticipant('Jane', 1)
+    await createGroupPage.submit()
+  })
 
-  await createGroupPage.addParticipant('John', 0)
-  await createGroupPage.addParticipant('Jane', 1)
+  await test.step('Check that the group is created', async () => {
+    await expect(groupPage.title).toHaveText('New Test Group')
+  })
 
-  await createGroupPage.submit()
+  await test.step('Create an expense', async () => {
+    await groupPage.createExpense()
+    await expensePage.fillTitle('Coffee')
+    await expensePage.fillAmount('4.5')
+    await expensePage.selectPayer('John')
+    await expensePage.submit()
+  })
 
-  await page.waitForURL(/.*\/groups\/.*\/expenses/)
-  await expect(
-    page.getByRole('heading', { name: 'New Test Group' }),
-  ).toBeVisible()
+  await test.step('Check that the expense is created', async () => {
+    const expenseCard = groupPage.getExpenseCard('Coffee')
+    await expect(expenseCard).toBeVisible()
+    await expect(expenseCard.locator('[data-amount]')).toHaveText('USD4.50')
+  })
 })

tests/pom/expense-page.ts

@@ -0,0 +1,31 @@
+import { Page } from '@playwright/test'
+
+export class ExpensePage {
+  constructor(private page: Page) {}
+
+  async navigateToGroupExpenses(groupId: string) {
+    await this.page.goto(`http://localhost:3002/groups/${groupId}/expenses`)
+  }
+
+  async fillTitle(expenseTitle: string) {
+    await this.page
+      .getByRole('textbox', { name: 'Expense title' })
+      .fill(expenseTitle)
+  }
+
+  async fillAmount(expenseAmount: string) {
+    await this.page.getByRole('textbox', { name: 'Amount' }).fill(expenseAmount)
+  }
+
+  async selectPayer(payer: string) {
+    await this.page
+      .getByRole('combobox')
+      .filter({ hasText: 'Select a participant' })
+      .click()
+    await this.page.getByRole('option', { name: payer, exact: true }).click()
+  }
+
+  async submit() {
+    await this.page.getByRole('button', { name: 'Create' }).click()
+  }
+}

tests/pom/group-page.ts

@@ -0,0 +1,21 @@
+import { Locator, Page } from '@playwright/test'
+
+export class GroupPage {
+  page: Page
+  title: Locator
+
+  constructor(page: Page) {
+    this.page = page
+    this.title = page.getByRole('main').getByRole('heading', { level: 1 })
+  }
+
+  async createExpense() {
+    await this.page.getByRole('link', { name: 'Create expense' }).click()
+  }
+
+  getExpenseCard(expenseTitle: string) {
+    return this.page
+      .locator('[data-expense-card]')
+      .filter({ hasText: expenseTitle })
+  }
+}