• Will Chen's avatar
    Fix preview navigation forward/back buttons and add E2E test (#2372) · 82e9ddb7
    Will Chen 提交于
    ## Summary
    - Add E2E test for preview navigation forward/back buttons
    - Fix back/forward navigation by sending target URL instead of using
    `history.back()`/`history.forward()` which don't work reliably in
    Electron iframes
    - Update dyad-shim.js to handle URL-based navigation with
    `location.replace`
    - Add popstate event handler to notify parent of navigation changes
    
    ## Test plan
    - Run `npm run e2e -- --grep "forward and back"` to verify the new test
    passes
    - Run `npm run e2e -- --grep "refresh"` to verify all refresh-related
    tests pass
    - Manually test back/forward navigation buttons in the preview panel
    
    🤖 Generated with [Claude Code](https://claude.com/claude-code)
    <!-- devin-review-badge-begin -->
    
    ---
    
    <a href="https://app.devin.ai/review/dyad-sh/dyad/pull/2372">
      <picture>
    <source media="(prefers-color-scheme: dark)"
    srcset="https://static.devin.ai/assets/gh-open-in-devin-review-dark.svg?v=1">
    <img
    src="https://static.devin.ai/assets/gh-open-in-devin-review-light.svg?v=1"
    alt="Open with Devin">
      </picture>
    </a>
    <!-- devin-review-badge-end -->
    
    <!-- CURSOR_SUMMARY -->
    ---
    
    > [!NOTE]
    > Ensures preview back/forward navigation works reliably in Electron
    iframes and preserves routes across refresh/HMR. Adds targeted E2E
    coverage.
    > 
    > - In `PreviewIframe.tsx`, switch back/forward handling to send the
    target URL via `postMessage` and update local `navigationHistory`,
    `currentHistoryPosition`, and `preservedUrls`; keep
    `currentIframeUrlRef` in sync.
    > - In `worker/dyad-shim.js`, add `popstate` handler to notify parent
    (`replaceState` message) and handle `navigate` messages by validating
    http/https URLs and using `location.replace`, with fallback to
    `history.go(±1)`.
    > - Add E2E test `refresh.spec.ts` for preview forward/back buttons,
    verifying initial disabled state, navigation to About, back to Home,
    then forward to About again.
    > 
    > <sup>Written by [Cursor
    Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
    7f9f790158262b9e3100ead96bf25f8e3ee8cac7. This will update automatically
    on new commits. Configure
    [here](https://cursor.com/dashboard?tab=bugbot).</sup>
    <!-- /CURSOR_SUMMARY -->
    
    <!-- This is an auto-generated description by cubic. -->
    ---
    ## Summary by cubic
    Fixes preview forward/back navigation and preserves the current route on
    refresh and HMR so the preview behaves like a real browser. Adds E2E
    tests for both flows.
    
    - **Bug Fixes**
    - Make back/forward work in Electron by posting the target URL to the
    iframe and navigating with location.replace; notify parent on popstate;
    validate http/https URLs to block unsafe protocols.
    - Track and restore the current route across refresh and HMR via
    previewCurrentUrlAtom and a URL ref; clear preserved URL on root path;
    reset on app switch and validate same-origin URLs.
    
    - **E2E Tests**
      - Add a multi-page react-router fixture (Home/About).
    - Add tests for route preservation on refresh and for forward/back
    buttons, including enabled/disabled states.
    
    <sup>Written for commit 7f9f790158262b9e3100ead96bf25f8e3ee8cac7.
    Summary will update on new commits.</sup>
    
    <!-- End of auto-generated description by cubic. -->
    
    ---------
    Co-authored-by: 's avatarClaude Opus 4.5 <noreply@anthropic.com>
    82e9ddb7