}
+ addIcon={({ size, color }) => }
+ documents={[
+ {
+ id: 'mock-passport',
+ label: 'Passport',
+ description: 'Registered',
+ onPress: onDocumentPress,
+ },
+ ]}
+ onBack={onBack}
+ onAddDocument={onAddDocument}
+ dialogue={dialogue}
+ onViewIdDetails={onViewIdDetails}
+ onRemoveId={onRemoveId}
+ onDismissDialogue={onDismissDialogue}
+ />
+ );
+};
diff --git a/packages/webview-app/tests/screens/home/homeSupportScreens.test.tsx b/packages/webview-app/tests/screens/home/homeSupportScreens.test.tsx
new file mode 100644
index 000000000..e0a49075c
--- /dev/null
+++ b/packages/webview-app/tests/screens/home/homeSupportScreens.test.tsx
@@ -0,0 +1,199 @@
+// SPDX-FileCopyrightText: 2025-2026 Social Connect Labs, Inc.
+// SPDX-License-Identifier: BUSL-1.1
+// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
+
+// @vitest-environment jsdom
+
+import type React from 'react';
+import { MemoryRouter, Route, Routes, useLocation } from 'react-router-dom';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { DevRouteMenu } from '../../../src/components/DevRouteMenu';
+import { SettingsScreen } from '../../../src/screens/account/SettingsScreen';
+import { HomeScreen } from '../../../src/screens/home/HomeScreen';
+import { IDDataScreen } from '../../../src/screens/home/IDDataScreen';
+import { ManageDocumentsScreen } from '../../../src/screens/home/ManageDocumentsScreen';
+
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+const analytics = { trackEvent: vi.fn() };
+const haptic = { trigger: vi.fn() };
+const lifecycle = { dismiss: vi.fn() };
+const documents = { loadDocumentCatalog: vi.fn() };
+
+vi.mock('../../../src/providers/SelfClientProvider', () => ({
+ useSelfClient: () => ({
+ analytics,
+ haptic,
+ lifecycle,
+ documents,
+ }),
+}));
+
+vi.mock('@selfxyz/euclid', () => ({
+ createSafeAreaProps: ({ top, bottom }: { top: number; bottom: number }) => ({
+ insets: { top, bottom, left: 0, right: 0 },
+ safeArea: { top, bottom, left: 0, right: 0 },
+ }),
+ GearIcon: () => null,
+ LeftArrowIcon: () => null,
+ PlusIcon: () => null,
+ IdCardIcon: () => null,
+ QuestionCircleStrokeIcon: () => null,
+ DocumentDetailsIcon: () => null,
+ LockIcon: () => null,
+ NotificationIcon: () => null,
+ ChatStrokeIcon: () => null,
+ ShareIcon: () => null,
+ CodeIcon: () => null,
+ HomeScreen: ({
+ idCard,
+ onAddIdPress,
+ topNavigationPrimaryButton,
+ }: {
+ idCard?: { title: string; subtitle: string };
+ onAddIdPress: () => void;
+ topNavigationPrimaryButton: { onPress: () => void };
+ }) => (
+
+ {idCard ?
{`${idCard.title} ${idCard.subtitle}`}
:
No document
}
+
+
+
+ {sections.flatMap(section =>
+ section.items.map(item => (
+
+ )),
+ )}
+
+ ),
+ ManageDocumentsScreen: ({
+ documents: docs,
+ onViewIdDetails,
+ onDismissDialogue,
+ dialogue,
+ }: {
+ documents: Array<{ id: string; label: string; onPress: () => void }>;
+ onViewIdDetails: () => void;
+ onDismissDialogue: () => void;
+ dialogue?: { title: string };
+ }) => (
+
+ {docs.map(doc => (
+
+ ))}
+ {dialogue ? (
+
+
{dialogue.title}
+
+
+
+ ) : null}
+
+
+
+
+ ),
+}));
+
+const LocationDisplay: React.FC = () => {
+ const location = useLocation();
+ return {location.pathname}
;
+};
+
+const renderRoutes = (initialEntries: string[]) =>
+ render(
+
+
+ } />
+ } />
+ } />
+ } />
+ } />
+
+
+
+ ,
+ );
+
+describe('WV-14 support screens', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ documents.loadDocumentCatalog.mockResolvedValue({
+ documents: [
+ {
+ id: 'doc-1',
+ documentType: 'p',
+ documentCategory: 'passport',
+ data: '{}',
+ mock: true,
+ isRegistered: true,
+ },
+ ],
+ });
+ sessionStorage.clear();
+ });
+
+ afterEach(() => {
+ cleanup();
+ });
+
+ it('stitches home to settings, manage documents, and ID data', async () => {
+ renderRoutes(['/']);
+
+ await waitFor(() => {
+ expect(screen.getByRole('button', { name: /open settings/i })).toBeTruthy();
+ });
+
+ fireEvent.click(screen.getByRole('button', { name: /open settings/i }));
+ expect(screen.getByTestId('location').textContent).toBe('/settings');
+
+ fireEvent.click(screen.getByRole('button', { name: /manage documents/i }));
+ expect(screen.getByTestId('location').textContent).toBe('/manage-documents');
+
+ fireEvent.click(screen.getByRole('button', { name: /passport/i }));
+ fireEvent.click(screen.getByRole('button', { name: /view details/i }));
+ expect(screen.getByTestId('location').textContent).toBe('/id-data');
+
+ fireEvent.click(screen.getByRole('button', { name: /manage id/i }));
+ expect(screen.getByTestId('location').textContent).toBe('/manage-documents');
+ });
+
+ it('exposes manage documents and ID data in the dev route menu', async () => {
+ renderRoutes(['/']);
+
+ await waitFor(() => {
+ expect(screen.getByRole('button', { name: /open settings/i })).toBeTruthy();
+ });
+
+ fireEvent.click(screen.getByRole('button', { name: /mock screens/i }));
+
+ expect(screen.getByRole('button', { name: 'Manage Documents' })).toBeTruthy();
+ expect(screen.getByRole('button', { name: 'ID Data' })).toBeTruthy();
+
+ fireEvent.click(screen.getByRole('button', { name: 'ID Data' }));
+ expect(screen.getByTestId('location').textContent).toBe('/id-data');
+ });
+});