feat: 🎸 Use snapshots or OCR for E2E tests when comparing terminal

[ZedLi]

Description

When reviewing this PR, please take a look at both commits and test both.

The first commit adds a golden screenshot to compare to what we expect a properly connected SSH session to look like. This of course can be quite brittle due to many factors (size of window, if the EC2 instance has new updates, timestamps, etc) but allowing a little bit of difference seems to work still. It's hard to say how brittle it is as the target machines can change so I'm curious if it works well for others. I had to use poll as it turns out the documentation is a bit misleading and toHaveScreenshot doesn't actually wait until they match and just compares screenshots after they have been stabilized, which is usually before the SSH connection finishes.

The second commit adds tesseract.js and takes a different approach by using an OCR package to interpret the screenshot of the canvas element that holds our terminal. I use a phrase that I expect to see every time we connect to an EC2 instance and have it keep checking to see if it appears. The main downside is the setup of the package adds a decent amount of time (~5s on my mac but I set it up so it only runs once per worker and should be reused) and a few more seconds to actually recognize the image in the test. In theory this should be less brittle but may also be unnecessary as it's decently slower.

How to Test

Check out each commit and try running yarn desktop or yarn desktop:dev

Checklist

• [ ] I have added before and after screenshots for UI changes
• [ ] I have added JSON response output for API changes
• [ ] I have added steps to reproduce and test for bug fixes in the description
• I have commented on my code, particularly in hard-to-understand areas
• [ ] My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
boundary-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 21, 2024 0:33am
boundary-ui-desktop	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 21, 2024 0:33am

[moduli]

Some points of consideration

• Terminal output may look different if using docker-based infrastructure vs. AWS-based infrastructure. Not sure if there are any test cases that need docker.
• If using snapshots, it's possible that some people's personal shells may affect terminal output

[ZedLi]

Terminal output may look different if using docker-based infrastructure vs. AWS-based infrastructure. Not sure if there are any test cases that need docker.

I haven't used docker for anything yet in DC tests but my assumption was we would only be testing against targets that were spun up somewhere which I assumed would be EC2 instances when using SSH targets. What do you generally connect to for the docker based tests, localhost?

If using snapshots, it's possible that some people's personal shells may affect terminal output

Yup, the assumption was that the output from logging into an EC2 instance would scroll past it, which may not be true in all cases.