Skip to content

feat: connection loading and success screen #2171

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nrmnqdds wants to merge 13 commits into
base: main
Choose a base branch
from
Open

feat: connection loading and success screen #2171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
8b21dd6
feat: display connecting loading screen
nrmnqdds Nov 4, 2025
d08907f
feat: success screen
nrmnqdds Nov 4, 2025
2c86d42
feat: display connection success for 1 second
nrmnqdds Nov 4, 2025
7175c30
Merge remote-tracking branch 'origin/main' into feat/connect-loading-…
nrmnqdds Nov 4, 2025
5bd97c4
fix: update tests for connection loading
nrmnqdds Nov 4, 2025
7fb1579
fix: webauthn edgecase
nrmnqdds Nov 4, 2025
1cbcda7
feat: move state to context
nrmnqdds Nov 7, 2025
dd9da93
Merge remote-tracking branch 'origin/main' into feat/connect-loading-…
nrmnqdds Nov 7, 2025
a8984d2
fix: update tests
nrmnqdds Nov 7, 2025
85eca1e
Merge remote-tracking branch 'origin/main' into feat/connect-loading-…
nrmnqdds Nov 7, 2025
2b9dadd
Merge remote-tracking branch 'origin/main' into feat/connect-loading-…
nrmnqdds Nov 8, 2025
318f5fa
fix: update tests
nrmnqdds Nov 8, 2025
ea18f2e
Merge remote-tracking branch 'origin/main' into feat/connect-loading-…
nrmnqdds Nov 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
209 changes: 209 additions & 0 deletions packages/keychain/src/components/ConnectRoute.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,12 @@ describe("ConnectRoute", () => {
name: "TestApp",
verified: true,
},
isNewUser: false,
authMethod: undefined,
showSuccessScreen: false,
setShowSuccessScreen: vi.fn(),
setIsNewUser: vi.fn(),
setAuthMethod: vi.fn(),
});
});

Expand All @@ -100,6 +106,12 @@ describe("ConnectRoute", () => {
controller: mockController,
policies: null,
verified: true,
isNewUser: false,
authMethod: undefined,
showSuccessScreen: false,
setShowSuccessScreen: vi.fn(),
setIsNewUser: vi.fn(),
setAuthMethod: vi.fn(),
});

renderWithProviders(<ConnectRoute />);
Expand All @@ -122,6 +134,12 @@ describe("ConnectRoute", () => {
messages: [],
},
verified: true,
isNewUser: false,
authMethod: undefined,
showSuccessScreen: false,
setShowSuccessScreen: vi.fn(),
setIsNewUser: vi.fn(),
setAuthMethod: vi.fn(),
});

renderWithProviders(<ConnectRoute />);
Expand All @@ -148,6 +166,12 @@ describe("ConnectRoute", () => {
messages: [],
},
verified: false,
isNewUser: false,
authMethod: undefined,
showSuccessScreen: false,
setShowSuccessScreen: vi.fn(),
setIsNewUser: vi.fn(),
setAuthMethod: vi.fn(),
});

renderWithProviders(<ConnectRoute />);
Expand All @@ -165,6 +189,12 @@ describe("ConnectRoute", () => {
messages: [],
},
verified: true,
isNewUser: false,
authMethod: undefined,
showSuccessScreen: false,
setShowSuccessScreen: vi.fn(),
setIsNewUser: vi.fn(),
setAuthMethod: vi.fn(),
});

renderWithProviders(<ConnectRoute />);
Expand Down Expand Up @@ -198,6 +228,12 @@ describe("ConnectRoute", () => {
name: "TestApp",
verified: true,
},
isNewUser: false,
authMethod: undefined,
showSuccessScreen: false,
setShowSuccessScreen: vi.fn(),
setIsNewUser: vi.fn(),
setAuthMethod: vi.fn(),
});

renderWithProviders(<ConnectRoute />);
Expand All @@ -222,6 +258,12 @@ describe("ConnectRoute", () => {
name: "TestApp",
verified: true,
},
isNewUser: false,
authMethod: undefined,
showSuccessScreen: false,
setShowSuccessScreen: vi.fn(),
setIsNewUser: vi.fn(),
setAuthMethod: vi.fn(),
});

renderWithProviders(<ConnectRoute />);
Expand All @@ -243,6 +285,12 @@ describe("ConnectRoute", () => {
name: "TestApp",
verified: true,
},
isNewUser: false,
authMethod: undefined,
showSuccessScreen: false,
setShowSuccessScreen: vi.fn(),
setIsNewUser: vi.fn(),
setAuthMethod: vi.fn(),
});

renderWithProviders(<ConnectRoute />);
Expand All @@ -263,6 +311,12 @@ describe("ConnectRoute", () => {
messages: [],
},
verified: false,
isNewUser: false,
authMethod: undefined,
showSuccessScreen: false,
setShowSuccessScreen: vi.fn(),
setIsNewUser: vi.fn(),
setAuthMethod: vi.fn(),
});

renderWithProviders(<ConnectRoute />);
Expand All @@ -279,6 +333,12 @@ describe("ConnectRoute", () => {
name: "TestApp",
verified: false,
},
isNewUser: false,
authMethod: undefined,
showSuccessScreen: false,
setShowSuccessScreen: vi.fn(),
setIsNewUser: vi.fn(),
setAuthMethod: vi.fn(),
});

renderWithProviders(<ConnectRoute />);
Expand All @@ -294,6 +354,12 @@ describe("ConnectRoute", () => {
controller: mockController,
policies: null,
verified: true,
isNewUser: false,
authMethod: undefined,
showSuccessScreen: false,
setShowSuccessScreen: vi.fn(),
setIsNewUser: vi.fn(),
setAuthMethod: vi.fn(),
});

renderWithProviders(<ConnectRoute />);
Expand Down Expand Up @@ -321,6 +387,12 @@ describe("ConnectRoute", () => {
messages: [],
},
verified: true,
isNewUser: false,
authMethod: undefined,
showSuccessScreen: false,
setShowSuccessScreen: vi.fn(),
setIsNewUser: vi.fn(),
setAuthMethod: vi.fn(),
});

renderWithProviders(<ConnectRoute />);
Expand All @@ -335,6 +407,12 @@ describe("ConnectRoute", () => {
controller: null,
policies: null,
verified: false,
isNewUser: false,
authMethod: undefined,
showSuccessScreen: false,
setShowSuccessScreen: vi.fn(),
setIsNewUser: vi.fn(),
setAuthMethod: vi.fn(),
});

const { container } = renderWithProviders(<ConnectRoute />);
Expand All @@ -356,6 +434,12 @@ describe("ConnectRoute", () => {
name: "TestApp",
verified: true,
},
isNewUser: false,
authMethod: undefined,
showSuccessScreen: false,
setShowSuccessScreen: vi.fn(),
setIsNewUser: vi.fn(),
setAuthMethod: vi.fn(),
});

renderWithProviders(<ConnectRoute />);
Expand All @@ -380,6 +464,12 @@ describe("ConnectRoute", () => {
controller: mockController,
policies: null,
verified: true,
isNewUser: false,
authMethod: undefined,
showSuccessScreen: false,
setShowSuccessScreen: vi.fn(),
setIsNewUser: vi.fn(),
setAuthMethod: vi.fn(),
});

renderWithProviders(<ConnectRoute />);
Expand All @@ -406,6 +496,12 @@ describe("ConnectRoute", () => {
messages: [{ id: "3", content: "Sign this", authorized: true }],
},
verified: true,
isNewUser: false,
authMethod: undefined,
showSuccessScreen: false,
setShowSuccessScreen: vi.fn(),
setIsNewUser: vi.fn(),
setAuthMethod: vi.fn(),
});

renderWithProviders(<ConnectRoute />);
Expand All @@ -423,4 +519,117 @@ describe("ConnectRoute", () => {
});
});
});

describe("Success screen", () => {
it("shows success screen when showSuccessScreen is true in context", () => {
mockUseConnection.mockReturnValue({
controller: mockController,
policies: null,
verified: true,
isNewUser: true,
authMethod: "webauthn",
showSuccessScreen: true,
setShowSuccessScreen: vi.fn(),
setIsNewUser: vi.fn(),
setAuthMethod: vi.fn(),
});

renderWithProviders(<ConnectRoute />);

// Should show ConnectionSuccess component
expect(screen.getByText(/Success!/i)).toBeInTheDocument();
});

it("hides success screen after 1 second timeout", async () => {
const mockSetShowSuccessScreen = vi.fn();

mockUseConnection.mockReturnValue({
controller: mockController,
policies: null,
verified: true,
isNewUser: false,
authMethod: "webauthn",
showSuccessScreen: true,
setShowSuccessScreen: mockSetShowSuccessScreen,
setIsNewUser: vi.fn(),
setAuthMethod: vi.fn(),
});

renderWithProviders(<ConnectRoute />);

// Should show success screen initially
expect(screen.getByText(/Success!/i)).toBeInTheDocument();

// setShowSuccessScreen should not be called immediately
expect(mockSetShowSuccessScreen).not.toHaveBeenCalled();

// Wait for the timeout (1 second) to complete
await waitFor(
() => {
expect(mockSetShowSuccessScreen).toHaveBeenCalledWith(false);
},
{ timeout: 1500 },
);
});

it("does not show success screen when controller is not available", () => {
mockUseConnection.mockReturnValue({
controller: null,
policies: null,
verified: false,
isNewUser: true,
authMethod: "webauthn",
showSuccessScreen: true,
setShowSuccessScreen: vi.fn(),
setIsNewUser: vi.fn(),
setAuthMethod: vi.fn(),
});

const { container } = renderWithProviders(<ConnectRoute />);

// Should return null when controller is not available
expect(container.firstChild).toBeNull();
});

it("does not show success screen when showSuccessScreen is false", () => {
mockUseConnection.mockReturnValue({
controller: mockController,
policies: null,
verified: true,
isNewUser: true,
authMethod: "webauthn",
showSuccessScreen: false,
setShowSuccessScreen: vi.fn(),
setIsNewUser: vi.fn(),
setAuthMethod: vi.fn(),
});

renderWithProviders(<ConnectRoute />);

// Should NOT show success screen
expect(screen.queryByText(/Success!/i)).not.toBeInTheDocument();
});

it("prevents auto-connect when showing success screen", () => {
mockUseConnection.mockReturnValue({
controller: mockController,
policies: null,
verified: true,
isNewUser: true,
authMethod: "webauthn",
showSuccessScreen: true,
setShowSuccessScreen: vi.fn(),
setIsNewUser: vi.fn(),
setAuthMethod: vi.fn(),
});

renderWithProviders(<ConnectRoute />);

// Should show success screen
expect(screen.getByText(/Success!/i)).toBeInTheDocument();

// Should NOT auto-connect while showing success screen
expect(mockParams.resolve).not.toHaveBeenCalled();
});
});
});
Loading
Loading