Add Cypress tests #5497
Add Cypress tests #5497
Conversation
|
|
| <span className={bulletIconClassName}></span> | ||
| )} | ||
| {label} <ExternalLinkIcon /> | ||
| {label} <ExternalLinkIcon aria-label="External Link" /> |
There was a problem hiding this comment.
Used as a testing target and possibly a little a11y bonus.
| <div | ||
| <nav | ||
| className={cn(styles.menu, isScrollHidden && styles.isScrollHidden)} | ||
| ref={rootRef} | ||
| aria-label="Documentation Navigation" | ||
| > | ||
| <InnerSidebar onClick={onClick} activePaths={activePaths} /> | ||
| </div> | ||
| </nav> |
There was a problem hiding this comment.
Tweaked to add a reliable test target
| aria-label={ | ||
| isMenuOpen | ||
| ? 'Close documentation sidebar' | ||
| : 'Open documentation sidebar' | ||
| } |
There was a problem hiding this comment.
Tweaked to add a target for tests. Changes when open/closed in an attempt to be able to target something visible to verify the sidebar is open when trying to fix the odd sidebar-not-opening issue, but it didn't work. Still kept since I think it's good for a11y.
| "cypress:open": "cypress open --e2e", | ||
| "cypress:run": "cypress run --e2e", | ||
| "cypress:test": "start-server-and-test develop http://localhost:8000 cypress:run", | ||
| "cypress:test:open": "start-server-and-test develop http://localhost:8000 cypress:open", | ||
| "cypress:test:prod": "CYPRESS_BASE_URL=http://localhost:3000 start-server-and-test start http://localhost:3000 cypress:run", | ||
| "cypress:test:prod:open": "CYPRESS_BASE_URL=http://localhost:3000 start-server-and-test start http://localhost:3000 cypress:open", |
There was a problem hiding this comment.
This setup is just kind of arbitrary, but allows for all permutations of running the tests with dev/prod and run/open. The non start-server-and-test entries can be removed if you replace the script name passed to start-server-and-test with an escaped version of the full command (e.g. replace cypress:open with \"cypress open --e2e\")
The --e2e flag makes the Cypress UI go straight to e2e, which makes sense here because there's no component tests.
|
Hey, @rogermparent. Thanks for creating this PR. Unfortunately, I'd have to decline this. |
|
Understood! I'd probably do the same in your current position. Good luck! |
|
I looked into mkdocs and zensical. They seem solid, but for porting this site's docs in particular I'd personally recommend Docusaurus specifically because its MDX and custom component support makes it the closest to this site's architecture and likely the least work to port. It's also an SSG so it should host just as well (better, really, given this site's janky middleware proxy thing). No worries if you've already thought this through and my advice is redundant, I just had the thought and figured it could be helpful to share. Custom component support was the main sticking point I had when researching other potential engines in the past. |
3 participants
2025-12-11_22-07-13.mp4
Hello! I had the opportunity to test out an AI coding tool and decided to try out a little change on this site I used to work on. I took the opportunity to do something I wished I would have a long while ago- set up e2e tests!
I figured this code could be helpful even if just as a proof-of-concept, so I've turned it into a PR here. Feel free to use it or decide not to.
One unfortunate quirk I've noticed is that when running the test suite against the production server, the test will attempt to click the mobile sidebar toggle button and nothing will happen, causing the test to fail. Somehow I haven't been able to get it to happen in the dev server version or the headless run, and I didn't want to invest too more time untangling this edge case.