Skip to content

Conversation

@cliffhall
Copy link
Member

Summary

Adds comprehensive test coverage for the MCP Apps implementation, including tests for both AppsTab and AppRenderer components.

Fixes #1041 where you can follow the creation, troubleshooting, and testing progress.

Changes

  • AppsTab Tests: 13 tests covering app detection, filtering, display, selection, and interaction
  • AppRenderer Tests: 17 tests covering loading, rendering, AppBridge integration, and error handling
  • Jest Configuration: Updated to handle ES modules from @modelcontextprotocol/ext-apps

Test Coverage

AppsTab Component:

  • App detection and filtering (tools with _meta.ui.resourceUri)
  • Grid display of multiple apps
  • Refresh functionality
  • Error handling
  • App selection and deselection
  • Dynamic tool list updates
  • Resource content handling

AppRenderer Component:

  • Loading states
  • Resource fetching logic
  • Error states (missing URI, missing contentWindow)
  • Iframe rendering with proper attributes
  • AppBridge initialization and connection
  • JSON and HTML content parsing
  • Custom permissions handling
  • Component lifecycle (mount/update/unmount)

Configuration Updates

Updated client/jest.config.cjs:

  • Added transform for .mjs files
  • Added transformIgnorePatterns to handle @modelcontextprotocol packages
  • Ensures ES modules from external packages are properly transformed

Testing

  • ✅ All 478 tests pass successfully
  • ✅ 30 new tests added for MCP Apps support
  • ✅ Follows existing test patterns and conventions
  • ✅ Comprehensive coverage of component functionality

Closes #1041


Generated with Claude Code

github-actions bot and others added 4 commits January 26, 2026 20:30
- Fixed AppRenderer useEffect dependency array to include resourceContent
  This ensures the component re-evaluates when resource content arrives
- Added detailed console logging throughout the app lifecycle:
  * Resource fetch and response tracking in App.tsx
  * Setup conditions and AppBridge creation in AppRenderer.tsx
  * HTML parsing and iframe rendering steps
  * PostMessageTransport and AppBridge connection status
  * App tool filtering and selection in AppsTab.tsx
- Refactored AppsTab selectedTool rendering for better tracking

The issue was that resourceContent prop updates weren't triggering
the AppRenderer setup effect. Now the effect properly responds to
both resourceUri and resourceContent changes.

Co-authored-by: Cliff Hall <[email protected]>
The app was getting stuck on 'Loading MCP App...' because the iframe was
hidden (display: none) until the oninitialized event fired. However, the
PostMessage handshake requires the iframe to be visible to complete.

This fix:
- Sets loading to false immediately after writing HTML to the iframe
- Makes the iframe visible before establishing PostMessage transport
- Allows the AppBridge initialization handshake to complete successfully
- Removes redundant setLoading(false) from oninitialized callback

The iframe is now visible and ready for PostMessage communication before
the AppBridge connect() call, enabling proper initialization.

Co-authored-by: Cliff Hall <[email protected]>
The AppRenderer was incorrectly checking for a 'type' field in resource
contents, but TextResourceContents objects only have uri, mimeType, and
text fields according to the MCP specification.

Fixed by checking for the presence of the 'text' field directly instead
of checking a non-existent 'type' field. This allows the HTML content
to be properly extracted and rendered in the iframe.

Co-authored-by: Cliff Hall <[email protected]>
- Add tests for AppsTab component (13 tests)
- Add tests for AppRenderer component (17 tests)
- Update jest.config.cjs to handle ES modules from @modelcontextprotocol/ext-apps
- All 478 tests pass successfully

Co-authored-by: Cliff Hall <[email protected]>
@cliffhall cliffhall closed this Jan 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add MCP Apps support

2 participants