HTTP tests and validation: what's the right approach?

[Rhainur]

In short, I need to test whether validation occurs successfully in a particular controller action

    const admin = await User.findByOrFail('email', '[email protected]')

    const response = await client
      .put(`/admin/users/${admin.id}`)
      .loginAs(admin)
      .form({
        email: '[email protected]' // email that already exists
      })
      .withCsrfToken()

    response.assertRedirectsTo(`/admin/users/${admin.id}`) // Test Failure #1 - it's redirecting to the login page instead
    response.assertFlashMessage('errors.email', ['This email is already taken']) // Test Failure #2 - there are no flash messages set

When the email already exists, VineJS will raise a ValidationError exception, and the default handler will

1. set flash messages for all the errors
2. redirect back

However, in this test case, it treats the login page as the "referer" for the request, and on top of that, the japa test client follows up to 5 redirects by default, so once it follows the redirect, the flash messages get wiped.

To make this test work, I had to rewrite it as

    const admin = await User.findByOrFail('email', '[email protected]')

    const response = await client
      .put(`/admin/users/${admin.id}`)
      .loginAs(admin)
      .form({
        email: '[email protected]' // email that already exists
      })
      .header('Referer', `/admin/users/${admin.id}/edit`) // Set referer header manually
      .redirects(0) // Instruct test client to not follow any redirects
      .withCsrfToken()

    response.assertHeader('location', `/admin/users/${admin.id}/edit`) // Passes
    response.assertFlashMessage('errors.email', ['This email is already taken']) // Passes

It's obviously a bit clunkier than the initial assertions, but maybe there's a better way that I'm not aware of, so I thought I'd ask the community for help

[thetutlage]

The best approach it to do browser testing using Playwright, where you navigate through your app like a real user and assert for errors/success messages by looking for the related elements on the webpage.

Using the client (aka API client) for a server rendered app has its own limitations and to be honest it should not be preferred over browser testing