Add initial end-to-end tests

[JeffersonBledsoe]

This PR adds some initial end-to-end tests using Cypress. Testing Library is used for the cypress tests to make best-practise tests easier to write and easier to read. This PR is progress towards #66.

Tests to complete before ready for merge

• Sign-in page flow (/api/auth/signin):
  • Buttons are displayed for each of the configured providers
  • Entering a valid email
  • Entering an invalid email causes the error page to be displayed
  • Each provider button takes you to the page corresponding with that providers auth
  • A JWT workflow with a database works
  • A JWT workflow without a database works
• Sign-out page flow (api/auth/signout):
  • Button displayed for signing out
  • Text displayed asking if the user is sure
• Email verification page flow (/api/auth/verify-request)
  • Correct text is displayed for email verification
• Error page flow (/api/auth/error):
  • Sign in failed page content
  • Server error page content
  • Access denied page content
  • Verification page content
• Example start page (/):
  • Text and button along the top changes if you are signed in or signed out
  • When signed in, check the user has a name and/ or email, as well as an image

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/nextauthjs/next-auth/f5v4073e4
✅ Preview: https://next-auth-git-fork-jeffersonbledsoe-e2e-tests.nextauthjs.vercel.app

[JeffersonBledsoe]

@iaincollins Any luck with that docker-compose command to spin up the DBs for E2E testing? I noticed a couple of docker-compose changes in #274, but don't quite think I've got the out-of-the-box pieces to get started on the tests discussed in the scope section of #66.

[iaincollins]

@JeffersonBledsoe This is wonderful, thank you!

I'm going to take a short break (somewhat knackered! XD) but this is my priority when I am back, I'm really looking forward to having this in main!

I haven't done the Docker image yet, but will take a look over the next few days.

Very happy to give you access to this repo if you'd like to be able to collaborate on a branch!

[JeffersonBledsoe]

@iaincollins That's understandable with all the work that's been put into getting V2 out the door!
I'd be more than happy to collaborate on this!

[iaincollins]

@JeffersonBledsoe Thanks for understanding! Looking forward to working on this more in the next week or so.

I've added you as a contributor in the meantime! (Feel free to move your branch, or not. :-)

I should be able to raise a PR and merge in the Docker stuff to main when I work on it, if you want to pull it down that way!

[JeffersonBledsoe]

@iaincollins Sorry about the radio silence on this, it's been one of those weeks! I'll move this PR to a branch on the repo this week to collaborate easier :)

I've seen there's lots of great test work done by @ndom91 for #357, as well as some discussion around testing in #341, think any of that is worth feeding into the tests here? E.g. Would cypress-social-logins be of any use even though it currently only seems to support google OAuth, or is integrating the tests with a docker container still the goal?

[JeffersonBledsoe]

@iaincollins
I didn't realise you'd moved the repo to the nextauthjs organisation! I'll close my fork off and move the PR to a branch 🙂
Sorry for the radio silence (again), I've not managed to do any Next.js for a while.

Trying to recall where we got to with this/ what was next? Anything I can do on the Docker side to speed things along?

[NickBolles]

I'd be curious to see how applicable this type of thing might be to consuming apps. It seems like the tests could be very applicable to all consuming apps and we could expose the tests (or utilities for the tests), with configuration as inputs for developers to quickly test auth flows for their app.

[JeffersonBledsoe]

I'd be curious to see how applicable this type of thing might be to consuming apps. It seems like the tests could be very applicable to all consuming apps and we could expose the tests (or utilities for the tests), with configuration as inputs for developers to quickly test auth flows for their app.

@NickBolles I did have a similar thought when reading through #357. Cypress has a plugin system and an API for adding custom commands to make this feasible. Or rather than providing helper functions for testing NextAuth with cypress, were you thinking we gave users tests out-of-the-box for the NextAuth side of things that they would somehow configure?

[NickBolles]

Yea I was thinking a set of Cypress plugins probably to help with some common auth tasks (login, sign out etc.), But also a few out of the box tests for users. So I'd imagine it being something like this.

Import { loginTest } from "cypress-next-auth";

Describe("auth", () => {
  It("should login", loginTest({
     provider: "GitHub",
     //... Some other options that we are specific to this app, maybe baseUrl, etc..
  });
});

[ndom91]

I've been trying to use cypress-social-logins to test next-authv3 in a consuming app. I added details on my current workflow to the tutorial docs section here, however it doesnt work in CI yet, only locally. So I've been on the lookout for a better solution. What would we have to do to make this a reality?

[iaincollins]

HI @JeffersonBledsoe sorry it's taken so long to looking at this. If it's okay with you I'd really like to merge this in now (am happy to resolve the package.json issues) and to build on it from there to get it runnable locally?

[JeffersonBledsoe]

HI @JeffersonBledsoe sorry it's taken so long to looking at this. If it's okay with you I'd really like to merge this in now (am happy to resolve the package.json issues) and to build on it from there to get it runnable locally?

@iaincollins LGTM! Sorry (again again) for the radio silence on this, I haven't found any time do work on any of my projects that would use next-auth. I'm certainly still up for working on this though.

@ndom91 We would essentially re-create what cypress-login-flow is doing, entering in the details into the inputs and returning the relevant cookies, but across multiple providers. That, or improve cypress-login-flow to cover other providers and add it as a dependency. I'm quite surprised there isn't already a more complete solution for this though. Once the problem of entering the details onto an auth provider is solved, cypress has a fairly good API and plugin system to allow us to create custom commands.

[iaincollins]

Thanks @JeffersonBledsoe! I'm going to merge these in and configure them to run against the Docker image and push that branch to master and continue to build on it in future PRs (will fix up the package-lock file there).

The checklist is super very helpful, would you mind if I copied that over to a dedicated ticket for testing so we can track coverage and add to it until we get to a good baseline?

[github-actions]

🎉 This PR is included in version 3.2.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀