Testing Page Object Pattern

gistfile1.txt

// test-utils/page-objects/LoginPage.ts
export class LoginPage {
  constructor(private user: ReturnType<typeof userEvent.setup>) {}

  async login(email: string, password: string) {
    await this.user.type(screen.getByLabelText(/email/i), email)
    await this.user.type(screen.getByLabelText(/password/i), password)
    await this.user.click(screen.getByRole('button', { name: /login/i }))
  }

  getErrorMessage() {
    return screen.queryByRole('alert')
  }

  async logout() {
    await this.user.click(screen.getByRole('button', { name: /logout/i }))
  }
}

// Test usando Page Object
it('login flow', async () => {
  const user = userEvent.setup()
  const loginPage = new LoginPage(user)

  render(<App />)

  await loginPage.login('test@example.com', 'password123')

  expect(screen.getByText(/welcome/i)).toBeInTheDocument()
  expect(loginPage.getErrorMessage()).not.toBeInTheDocument()
})