✨ Add static HTML report generation for TDD run #168
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Generates a self-contained HTML report after `vizzly tdd run` completes, allowing offline viewing of visual test results without a running server. **New features:** - Static report generated at `.vizzly/report/index.html` - SSR-rendered HTML with inlined CSS (no JavaScript required) - Images copied to `report/images/` for offline access - Report auto-opens in browser after tests complete - `--no-open` flag to skip browser opening - `--keep-server` flag for interactive mode (live dashboard) **Technical approach:** - Uses React's `renderToString` for true SSR - Separate Vite SSR build config for Node-compatible output - Hook-free React component for SSR compatibility - Native `<details>/<summary>` for expand/collapse without JS **Cleanup:** - Removed dead SPA static mode code from React app - Removed unused `isStaticMode()` and `useStaticMode()` hook - Simplified TDD queries and SSE hooks
This comment was marked as resolved.
This comment was marked as resolved.
Security: - Add URL validation to openBrowser() to prevent command injection - Only allow http://, https://, and file:// URL schemes Tests: - Add unit tests for static-report-generator.js - Add unit tests for browser.js URL validation Fixes: - Restore null guards in screenshot-list.jsx handlers - Add comment about race condition assumption in CLI
This comment has been minimized.
This comment has been minimized.
Now that SSR-based static report generation works properly, we don't need the `--keep-server` workaround. This was tech debt from when static reports weren't working. Simplifies the tdd run flow: tests run, report generates, browser opens.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
vizzly tdd runthat creates a self-contained report at.vizzly/report/index.htmlrenderToStringfor true static HTML output (no JavaScript required to view)--no-openflag to skip auto-opening the report in browser--keep-serverflag to use interactive live dashboard instead of static report<details>/<summary>HTML elements for expand/collapse functionalityThis should address #159
Technical Details
SSR Architecture:
vite.ssr.config.js) outputs Node-compatible ES modulestatic-report-view.jsx) for SSR compatibilityrenderToStringfromreact-dom/server<style>tag, images copied toreport/images/folderReport UI:
Cleanup:
isStaticMode()function from API clientuseStaticMode()hookindex.htmlTest plan
vizzly tdd run "npm run test:reporter"and verify static report opensfile://URL--no-openflag skips browser opening--keep-serverflag shows live dashboard insteadnpm run buildnpm test