chore(repo): add preview app tests with playwright - Githubissues

shellscape / jsx-email

Build emails with a delightful DX

https://jsx.email

MIT License

897 stars 28 forks source link

chore(repo): add preview app tests with playwright #102

Closed wladpaiva closed 6 months ago

wladpaiva commented 6 months ago

Component / Package Name:

This PR contains:

[ ] bugfix
[ ] feature
[ ] refactor
[ ] documentation
[x] other

Are tests included?

[x] yes (bugfixes and features will not be merged without tests)
[ ] no

Breaking Changes?

[ ] yes (breaking changes will not be merged unless absolutely necessary)
[x] 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

[x] 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)
[x] Move the CI to the correct flow. Should it prevent release or only prevent merges?
[x] It's only testing one demo email so maybe the rest of them as well

shellscape commented 6 months ago

Thanks for putting this together!

As a point of reference, https://github.com/shellscape/jsx-email/pull/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 commented 6 months ago

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 commented 6 months ago

@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 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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

shellscape commented 6 months ago

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.