chore(repo): add preview app tests with playwright

[wladpaiva]

Component / Package Name:

This PR contains:

• bugfix
• feature
• refactor
• documentation
• other

Are tests included?

• yes (bugfixes and features will not be merged without tests)
• no

Breaking Changes?

• yes (breaking changes will not be merged unless absolutely necessary)
• no

If yes, please include "BREAKING CHANGES:" in the first commit message body, followed by a description of what is breaking.

List any relevant issue numbers:

Description

Add playwright testing to make sure emails are getting rendered properly. It also added a github action to run testing on CI.

Things to do

• Fix eslint errors (I tried to disable the rules for .spec files only but eslint formatting was incompatible with prettier formatting so I just ignored it for now)
• Move the CI to the correct flow. Should it prevent release or only prevent merges?
• It's only testing one demo email so maybe the rest of them as well

[shellscape]

Thanks for putting this together!

As a point of reference, #101 had a preview error in it. But it didn't show up when running the preview from within the repo. That seems to be a continual pain point. I had to publish a new test version and install it independently, elsewhere on my file system and run the preview to surface a dependency issue with Vite where a dependency of postcss-color-functional-notation was causing a vite build issue, and need to be added to optimizeDeps:

postcss-color-functional-notation
  -> @csstools/postcss-progressive-custom-properties
       -> postcss-value-parser

FWIW this happens a lot when adding new dependencies.

So I'm going to have to figure out how to create a local project in isolation without having to publish and we can run playwright against that. Will work on the plumbing to make that happen.

[shellscape]

Tested some things locally and we can use the pnpm file: protocol for dependencies to accurately mimic a published version. Will add a script to this PR that generates a separate local test project using that.

[shellscape]

@wladpaiva no matter what I do, I keep getting Serving HTML report at http://localhost:9323. Press Ctrl+C to quit. when running the tests locally. Are you aware of any way to get past that and have the process end without user intervention?

[wladpaiva]

Weird, that's the report and comes from the playwright show-report command. Mine is not auto executing it. How are you running it?

[shellscape]

I ended up making a lot of changes last night, including swapping the html reporter for the line reporter, which is what you're seeing now. Ran into all kinds of clunkiness with playwright last night too. Things like it not being able to run this line and return the innerHtml https://github.com/shellscape/jsx-email/pull/102/files#diff-033c527a97d545b925c665015ba56236fc739ea416a1f72edcd15289bfd6867bR24, and snapshots being absolutely bafflingly weird.

[wladpaiva]

Pulled your last change and seems to be working without editing anything

[shellscape]

yessir! figured a few things out. I think we're good to go on this. there are a few changes I want to get into the preview app before we pull the trigger on this one.