test(frontend): comprehensive snapshot tests for all screens#66
Conversation
Add Jest + React Testing Library snapshot coverage for every page in the frontend (12 screens): Landing, Home, Documents, Profile, Passkeys, Login, Register, ForgotPassword, HowToUse, PrivacyPolicy, TermsOfService, and NotFound. Theme-aware pages are captured in both light and dark (22 snapshots total). Test harness: - jest.config.js: declare the Babel transform inline (preset-env + preset-react) so JSX is transformed for tests without adding a project babel.config.js that would interfere with the craco build. Extend the asset moduleNameMapper to fonts/audio. - setupTests.js: add jsdom polyfills (matchMedia, ResizeObserver, IntersectionObserver, scrollTo) and neutralize autoFocus globally so focus-sensitive markup is stable across environments. Determinism (passes identically on local + CI regardless of when/where): - LandingPage: stub the lazy WebGL hero (jsdom has no WebGL). - Home: stub the ESM markdown stack (react-markdown/remark/rehype), dompurify, the audio recorder, and heavy modals; freeze Date. - Profile: pin Math.random (avatar) and render the deterministic loading state with the network mocked. - Documents/Passkeys: render the deterministic empty/loading state offline. Verified: full suite 18 suites / 57 tests / 22 snapshots green in CI mode, and the snapshot suites pass against the committed baselines under UTC, Pacific/Kiritimati (UTC+14), Pacific/Pago_Pago (UTC-11), and Asia/Kolkata. The 6 existing project test suites still pass with the new transform. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
✅ Deploy Preview for docuthinker-ai-app ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces comprehensive snapshot testing for all frontend pages, along with updates to the README files, Jest configuration, and test setup with jsdom polyfills. The review feedback suggests two key improvements: utilizing Jest's built-in fake timers in the Home snapshot test instead of directly overriding the global Date class to avoid runtime errors, and avoiding a global override of HTMLElement.prototype.focus in setupTests.js to prevent breaking future focus-sensitive or accessibility tests.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| const RealDate = Date; | ||
| const FIXED_ISO = "2024-06-15T12:00:00.000Z"; | ||
|
|
||
| beforeAll(() => { | ||
| global.Date = class extends RealDate { | ||
| constructor(...args) { | ||
| super(...(args.length ? args : [FIXED_ISO])); | ||
| } | ||
| static now() { | ||
| return new RealDate(FIXED_ISO).getTime(); | ||
| } | ||
| }; | ||
| }); | ||
|
|
||
| afterAll(() => { | ||
| global.Date = RealDate; | ||
| }); |
There was a problem hiding this comment.
Overriding the global Date class directly can lead to unexpected side effects and test instability. For example, ES6 classes cannot be invoked without the new keyword, so any code or third-party library calling Date() as a function (which is valid in standard JavaScript to get a string representation of the current time) will throw a TypeError and crash.
Instead, use Jest's built-in modern fake timers (jest.useFakeTimers and jest.setSystemTime), which are designed specifically to freeze or manipulate the system clock safely and deterministically.
const FIXED_ISO = "2024-06-15T12:00:00.000Z";
beforeAll(() => {
jest.useFakeTimers();
jest.setSystemTime(new Date(FIXED_ISO));
});
afterAll(() => {
jest.useRealTimers();
});| // CI), which would make focus-sensitive snapshots flaky. Neutralize focus so | ||
| // the rendered markup is the unfocused state everywhere. (Not a jest mock, so | ||
| // clearMocks doesn't reset it between tests.) | ||
| HTMLElement.prototype.focus = () => {}; |
There was a problem hiding this comment.
Overriding HTMLElement.prototype.focus globally in setupTests.js permanently disables focus behavior for all tests in the entire suite. While this is useful for preventing flaky snapshot tests due to autoFocus inconsistencies, it will break any future unit or integration tests that need to assert focus behavior (e.g., verifying that an input is focused after an action, or testing keyboard accessibility).
Consider mocking HTMLElement.prototype.focus only within the snapshot tests themselves, or using a setup/teardown block to restore it afterward.
hoangsonww
added
bug
Resolve conflict in frontend/src/setupTests.js: keep master's jsdom polyfill block (matchMedia, scrollTo, scrollIntoView, Intersection/Resize observers) and append the autoFocus neutralization the snapshot suite needs. master's PR #64 already added snapshot coverage for the static pages, auth pages, app chrome, and the redesigned 3D LandingPage (07_snapshots.test.js). To avoid duplicating it, this branch now only keeps snapshot suites for the data-heavy pages #64 deliberately excluded — Home, Documents, Profile, and Passkeys — which render their deterministic initial/loading state. The overlapping per-screen files and the redundant inline-Babel jest.config change are dropped (a babel.config.js from #64 already transforms JSX). Docs updated to describe both snapshot suites. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
What
Adds Jest + React Testing Library snapshot tests for all 12 frontend screens — the app had no component/snapshot coverage before (the existing 6 suites only check repo structure/metadata).
Screens covered (theme-aware ones in light and dark → 22 snapshots):
DatefrozenMath.random(avatar) pinned; loading state, network mockedHarness
jest.config.js— Babel presets declared inline in the transform (not a projectbabel.config.js) so JSX transforms for tests without touching the craco build; assetmoduleNameMapperextended to fonts/audio.setupTests.js— jsdom polyfills (matchMedia,ResizeObserver,IntersectionObserver,scrollTo) + globalautoFocusneutralization (jsdom applies focus inconsistently across environments).Determinism — passes identically on local + CI regardless of when/where
WebGL stubbed,
autoFocusneutralized,Date/Math.randomfrozen, network mocked, data-heavy pages render their stable initial/loading state.Verification
Snapshot suites verified against the committed baselines under UTC, Pacific/Kiritimati (UTC+14), Pacific/Pago_Pago (UTC-11), and Asia/Kolkata — all pass. The 6 pre-existing project suites still pass with the new transform.
Docs updated: root
README.md("Frontend Unit & E2E Testing") andfrontend/README.md("Testing") both document the snapshot suites and how to run/update them. No new dependencies.🤖 Generated with Claude Code