nibtime / next-safe-middleware

Strict CSP (Content-Security-Policy) for Next.js hybrid apps https://web.dev/strict-csp/
https://next-safe-middleware.vercel.app
MIT License
78 stars 20 forks source link

e2e test automation #42

Open nibtime opened 2 years ago

nibtime commented 2 years ago

Motivation

for testing the strict CSP features, it is mandatory to do so in a real production test environment. Until now, I've been doing that manually with the provisionary e2e test app. For version 1.0, automated e2e tests are mandatory

Ideas

In #34, someone asked how to make this package work with styles from Mantine, so I created a setup for it. I think it's the React component framework with the best design I've seen so far, so I really like to go with that to build a beautiful interactive app with it: https://e2e-next-safe-middleware.vercel.app/mantine. It uses a very common CSS-in-JS framework (emotion) under the hood. The goal of this package is, to get CSP out of the way for actual app development, so building an app with Mantine would in and itself show if that's the case, both for scripts (if no interaction isn't blocked, strict CSP works) and styles (if it displays beautifully, strict inline styles work)

For test automation, I thought the Checkly integration with Vercel could be a great fit, as PRs already deploy with Vercel and the integration can make deployments fail if post-deploy e2e tests fail which then blocks the PR, without any additional setup to the repository required. Checkly tests use Playwright.

I just set up a docs website with Nextra (#30), (a SSG for MDX on top of Next.js) with 12.2 and stable middleware. So the docs website itself is sort of an e2e test for the package as well.

Help wanted

I am open to any good ideas and questions regarding test scenarios and test strategies. If you have something on your mind, feel free to share it.