agtic/keycloak_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

storybooks second release

Browse Source
This commit is contained in:
Nima Shkouhfar
2024-10-19 17:24:29 -04:00
parent c9d7fc1b6e
commit 0cf8caa53b
20 changed files with 1015 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
stories/login/pages/LoginIdpLinkConfirm.stories.tsx
View File

@ -2,6 +2,14 @@ import React from "react";
import type { Meta, StoryObj } from "@storybook/react";
import { createKcPageStory } from "../KcPageStory";
// Mock kcContext to avoid the TS2304 error
const mockKcContext = {
url: {
loginAction: "/login-action"
},
idpAlias: "mockIdpAlias"
};
const { KcPageStory } = createKcPageStory({ pageId: "login-idp-link-confirm.ftl" });
const meta = {
@ -13,6 +21,35 @@ export default meta;
type Story = StoryObj<typeof meta>;
/**
* Default:
* - Purpose: Tests standard behavior with mock data.
* - Scenario: The component renders with a mocked identity provider alias (`mockIdpAlias`) and a login action URL (`/login-action`).
* - Key Aspect: Ensures the default behavior of the component with standard values for kcContext.
*/
export const Default: Story = {
render: () => <KcPageStory />
render: () => <KcPageStory kcContext={mockKcContext} />
};
/**
* WithFormSubmissionError:
* - Purpose: Tests how the component handles form submission errors.
* - Scenario: Simulates a form submission error by setting the login action URL to `/error` and displays an error message.
* - Key Aspect: Verifies that the component can display error messages during form submission failure, ensuring proper error handling.
*/
export const WithFormSubmissionError: Story = {
render: () => (
<KcPageStory
kcContext={{
...mockKcContext,
url: {
loginAction: "/error"
},
message: {
type: "error",
summary: "An error occurred during form submission."
}
}}
/>
)
};

65
stories/login/pages/LoginIdpLinkEmail.stories.tsx
View File

@ -2,6 +2,20 @@ import React from "react";
import type { Meta, StoryObj } from "@storybook/react";
import { createKcPageStory } from "../KcPageStory";
// Mock kcContext to avoid TS2304 error and to simulate the real environment
const mockKcContext = {
url: {
loginAction: "/login-action"
},
idpAlias: "mockIdpAlias",
brokerContext: {
username: "mockUser"
},
realm: {
displayName: "MockRealm"
}
};
const { KcPageStory } = createKcPageStory({ pageId: "login-idp-link-email.ftl" });
const meta = {
@ -13,13 +27,27 @@ export default meta;
type Story = StoryObj<typeof meta>;
/**
* Default:
* - Purpose: Tests the default behavior with mock data.
* - Scenario: The component renders with a mocked identity provider alias (`mockIdpAlias`), a default broker username (`mockUser`), and a default realm name (`MockRealm`).
* - Key Aspect: Ensures the default behavior of the component with typical kcContext values.
*/
export const Default: Story = {
render: () => <KcPageStory />
render: () => <KcPageStory kcContext={mockKcContext} />
};
/**
* WithIdpAlias:
* - Purpose: Tests behavior when the idpAlias is set to "Google".
* - Scenario: Simulates the component being used with a Google identity provider, showing the username "john.doe" and realm "MyRealm".
* - Key Aspect: Ensures the correct identity provider alias ("Google") and broker context (user info) are displayed in the email linking instructions.
*/
export const WithIdpAlias: Story = {
render: () => (
<KcPageStory
kcContext={{
...mockKcContext,
idpAlias: "Google",
brokerContext: {
username: "john.doe"
@ -31,32 +59,47 @@ export const WithIdpAlias: Story = {
/>
)
};
export const WithoutIdpAlias: Story = {
/**
* WithCustomRealmDisplayName:
* - Purpose: Tests behavior when the realm display name is customized.
* - Scenario: Simulates the component with a Facebook identity provider, a broker username "jane.doe", and a custom realm name "CustomRealm".
* - Key Aspect: Ensures that custom realm display names are rendered correctly alongside the idpAlias and broker context.
*/
export const WithCustomRealmDisplayName: Story = {
render: () => (
<KcPageStory
kcContext={{
idpAlias: undefined,
...mockKcContext,
idpAlias: "Facebook",
brokerContext: {
username: "john.doe"
username: "jane.doe"
},
realm: {
displayName: "MyRealm"
displayName: "CUSTOM REALM DISPLAY NAME"
}
}}
/>
)
};
export const WithCustomRealmDisplayName: Story = {
/**
* WithFormSubmissionError:
* - Purpose: Tests how the component handles form submission errors.
* - Scenario: Simulates a form submission error by setting the login action URL to `/error` and displays an error message.
* - Key Aspect: Verifies that the component can display error messages during form submission failure, ensuring proper error handling.
*/
export const WithFormSubmissionError: Story = {
render: () => (
<KcPageStory
kcContext={{
idpAlias: "Facebook",
brokerContext: {
username: "jane.doe"
...mockKcContext,
url: {
loginAction: "/error"
},
realm: {
displayName: "CustomRealm"
message: {
type: "error",
summary: "An error occurred during form submission."
}
}}
/>

44
stories/login/pages/LoginOauth2DeviceVerifyUserCode.stories.tsx
View File

@ -16,3 +16,47 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () => <KcPageStory />
};
/**
* WithErrorMessage:
* - Purpose: Tests when there is an error with the OAuth2 device user code entry.
* - Scenario: The component renders with an error message displayed to the user.
* - Key Aspect: Ensures the error message is properly shown when the user enters an invalid code.
*/
export const WithErrorMessage: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
oauth2DeviceVerificationAction: "/mock-oauth2-device-verification"
},
message: {
summary: "The user code you entered is invalid. Please try again.",
type: "error"
}
}}
/>
)
};
/**
* WithEmptyInputField:
* - Purpose: Tests when the user code field is left empty.
* - Scenario: The component renders the form, and the user tries to submit without entering any code.
* - Key Aspect: Ensures the form displays validation errors when the field is left empty.
*/
export const WithEmptyInputField: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
oauth2DeviceVerificationAction: "/mock-oauth2-device-verification"
},
message: {
summary: "User code cannot be empty. Please enter a valid code.",
type: "error"
}
}}
/>
)
};

70
stories/login/pages/LoginOauthGrant.stories.tsx
View File

@ -2,6 +2,25 @@ import React from "react";
import type { Meta, StoryObj } from "@storybook/react";
import { createKcPageStory } from "../KcPageStory";
// Mock kcContext to simulate real environment
const mockKcContext = {
url: {
oauthAction: "/oauth-action"
},
oauth: {
clientScopesRequested: [{ consentScreenText: "Scope1", dynamicScopeParameter: "dynamicScope1" }, { consentScreenText: "Scope2" }],
code: "mockCode"
},
client: {
attributes: {
policyUri: "https://twitter.com/en/tos",
tosUri: "https://twitter.com/en/privacy"
},
name: "Twitter",
clientId: "twitter-client-id"
}
};
const { KcPageStory } = createKcPageStory({ pageId: "login-oauth-grant.ftl" });
const meta = {
@ -13,6 +32,55 @@ export default meta;
type Story = StoryObj<typeof meta>;
/**
* Default:
* - Purpose: Tests the default behavior with meaningful logo (Twitter).
* - Scenario: The component renders with Twitter as the client, displaying its logo, policy, and terms of service links.
* - Key Aspect: Ensures the component works with a realistic `logoUri` and client name.
*/
export const Default: Story = {
render: () => <KcPageStory />
render: () => <KcPageStory kcContext={mockKcContext} />
};
/**
* WithoutScopes:
* - Purpose: Tests the component when no OAuth scopes are requested.
* - Scenario: The component renders with no scopes listed under the consent screen.
* - Key Aspect: Ensures the component renders correctly when there are no requested scopes.
*/
export const WithoutScopes: Story = {
render: () => (
<KcPageStory
kcContext={{
...mockKcContext,
oauth: {
...mockKcContext.oauth,
clientScopesRequested: []
}
}}
/>
)
};
/**
* WithFormSubmissionError:
* - Purpose: Tests how the component handles form submission errors.
* - Scenario: The `oauthAction` URL is set to an error route and an error message is displayed.
* - Key Aspect: Ensures that the component can display error messages when form submission fails.
*/
export const WithFormSubmissionError: Story = {
render: () => (
<KcPageStory
kcContext={{
...mockKcContext,
url: {
oauthAction: "/error"
},
message: {
type: "error",
summary: "An error occurred during form submission."
}
}}
/>
)
};

110
stories/login/pages/LoginOtp.stories.tsx
View File

@ -16,3 +16,113 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () => <KcPageStory />
};
/**
* MultipleOtpCredentials:
* - Purpose: Tests the behavior when the user has multiple OTP credentials to choose from.
* - Scenario: Simulates the scenario where the user is presented with multiple OTP credentials and must select one to proceed.
* - Key Aspect: Ensures that multiple OTP credentials are listed and selectable, and the correct credential is selected by default.
*/
export const MultipleOtpCredentials: Story = {
render: () => (
<KcPageStory
kcContext={{
otpLogin: {
userOtpCredentials: [
{ id: "credential1", userLabel: "Device 1" },
{ id: "credential2", userLabel: "Device 2" },
{ id: "credential2", userLabel: "Device 3" },
{ id: "credential2", userLabel: "Device 4" },
{ id: "credential2", userLabel: "Device 5" },
{ id: "credential2", userLabel: "Device 6" }
],
selectedCredentialId: "credential1"
},
url: {
loginAction: "/login-action"
},
messagesPerField: {
existsError: () => false
}
}}
/>
)
};
/**
* WithOtpError:
* - Purpose: Tests the behavior when an error occurs with the OTP field (e.g., invalid OTP code).
* - Scenario: Simulates an invalid OTP code scenario where an error message is displayed.
* - Key Aspect: Ensures that the OTP input displays error messages correctly and the error is visible.
*/
export const WithOtpError: Story = {
render: () => (
<KcPageStory
kcContext={{
otpLogin: {
userOtpCredentials: []
},
url: {
loginAction: "/login-action"
},
messagesPerField: {
existsError: (field: string) => field === "totp",
get: () => "Invalid OTP code"
}
}}
/>
)
};
/**
* NoOtpCredentials:
* - Purpose: Tests the behavior when no OTP credentials are provided for the user.
* - Scenario: Simulates the scenario where the user is not presented with any OTP credentials, and only the OTP input is displayed.
* - Key Aspect: Ensures that the component handles cases where there are no user OTP credentials, and the user is only prompted for the OTP code.
*/
export const NoOtpCredentials: Story = {
render: () => (
<KcPageStory
kcContext={{
otpLogin: {
userOtpCredentials: []
},
url: {
loginAction: "/login-action"
},
messagesPerField: {
existsError: () => false
}
}}
/>
)
};
/**
* WithErrorAndMultipleOtpCredentials:
* - Purpose: Tests behavior when there is both an error in the OTP field and multiple OTP credentials.
* - Scenario: Simulates the case where the user has multiple OTP credentials and encounters an error with the OTP input.
* - Key Aspect: Ensures that the component can handle both multiple OTP credentials and display an error message simultaneously.
*/
export const WithErrorAndMultipleOtpCredentials: Story = {
render: () => (
<KcPageStory
kcContext={{
otpLogin: {
userOtpCredentials: [
{ id: "credential1", userLabel: "Device 1" },
{ id: "credential2", userLabel: "Device 2" }
],
selectedCredentialId: "credential1"
},
url: {
loginAction: "/login-action"
},
messagesPerField: {
existsError: (field: string) => field === "totp",
get: () => "Invalid OTP code"
}
}}
/>
)
};

23
stories/login/pages/LoginPageExpired.stories.tsx
View File

@ -16,3 +16,26 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () => <KcPageStory />
};
/**
* WithErrorMessage:
* - Purpose: Tests behavior when an error message is displayed along with the page expiration message.
* - Scenario: Simulates a case where the session expired due to an error, and an error message is displayed alongside the expiration message.
* - Key Aspect: Ensures that error messages are displayed correctly in addition to the page expiration notice.
*/
export const WithErrorMessage: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
loginRestartFlowUrl: "/mock-restart-flow",
loginAction: "/mock-continue-login"
},
message: {
type: "error",
summary: "An error occurred while processing your session."
}
}}
/>
)
};

51
stories/login/pages/LoginPassword.stories.tsx
View File

@ -16,3 +16,54 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () => <KcPageStory />
};
/**
* WithPasswordError:
* - Purpose: Tests the behavior when an error occurs in the password field (e.g., incorrect password).
* - Scenario: Simulates a scenario where an invalid password is entered, and an error message is displayed.
* - Key Aspect: Ensures that the password input field displays error messages correctly.
*/
export const WithPasswordError: Story = {
render: () => (
<KcPageStory
kcContext={{
realm: {
resetPasswordAllowed: true
},
url: {
loginAction: "/mock-login",
loginResetCredentialsUrl: "/mock-reset-password"
},
messagesPerField: {
existsError: (field: string) => field === "password",
get: () => "Invalid password"
}
}}
/>
)
};
/**
* WithoutResetPasswordOption:
* - Purpose: Tests the behavior when the reset password option is disabled.
* - Scenario: Simulates a scenario where the `resetPasswordAllowed` is set to `false`, and the "Forgot Password" link is not rendered.
* - Key Aspect: Ensures that the component handles cases where resetting the password is not allowed.
*/
export const WithoutResetPasswordOption: Story = {
render: () => (
<KcPageStory
kcContext={{
realm: {
resetPasswordAllowed: false
},
url: {
loginAction: "/mock-login",
loginResetCredentialsUrl: "/mock-reset-password"
},
messagesPerField: {
existsError: () => false
}
}}
/>
)
};

22
stories/login/pages/LoginRecoveryAuthnCodeConfig.stories.tsx
View File

@ -16,3 +16,25 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () => <KcPageStory />
};
/**
* WithErrorDuringCodeGeneration:
* - Purpose: Tests when an error occurs while generating recovery authentication codes.
* - Scenario: The component renders an error message to inform the user of the failure during code generation.
* - Key Aspect: Ensures that error messages are properly displayed when recovery code generation fails.
*/
export const WithErrorDuringCodeGeneration: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
loginAction: "/mock-login-action"
},
message: {
summary: "An error occurred during recovery code generation. Please try again.",
type: "error"
}
}}
/>
)
};

79
stories/login/pages/LoginResetOtp.stories.tsx
View File

@ -16,3 +16,82 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () => <KcPageStory />
};
/**
* WithoutOtpCredentials:
* - Purpose: Tests the behavior when no OTP credentials are available.
* - Scenario: The component renders without any OTP credentials, showing only the submit button.
* - Key Aspect: Ensures that the component handles the absence of OTP credentials correctly.
*/
export const WithoutOtpCredentials: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
loginAction: "/mock-login"
},
configuredOtpCredentials: {
userOtpCredentials: [],
selectedCredentialId: undefined
},
messagesPerField: {
existsError: () => false
}
}}
/>
)
};
/**
* WithOtpError:
* - Purpose: Tests the behavior when an error occurs with the OTP selection.
* - Scenario: Simulates a scenario where an error occurs (e.g., no OTP selected), and an error message is displayed.
* - Key Aspect: Ensures that error messages are displayed correctly for OTP-related errors.
*/
export const WithOtpError: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
loginAction: "/mock-login"
},
configuredOtpCredentials: {
userOtpCredentials: [
{ id: "otp1", userLabel: "Device 1" },
{ id: "otp2", userLabel: "Device 2" }
],
selectedCredentialId: "otp1"
},
messagesPerField: {
existsError: (field: string) => field === "totp",
get: () => "Invalid OTP selection"
}
}}
/>
)
};
/**
* WithOnlyOneOtpCredential:
* - Purpose: Tests the behavior when there is only one OTP credential available.
* - Scenario: Simulates the case where the user has only one OTP credential, and it is pre-selected by default.
* - Key Aspect: Ensures that the component renders correctly with only one OTP credential pre-selected.
*/
export const WithOnlyOneOtpCredential: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
loginAction: "/mock-login"
},
configuredOtpCredentials: {
userOtpCredentials: [{ id: "otp1", userLabel: "Device 1" }],
selectedCredentialId: "otp1"
},
messagesPerField: {
existsError: () => false
}
}}
/>
)
};

30
stories/login/pages/LoginResetPassword.stories.tsx
View File

@ -29,3 +29,33 @@ export const WithEmailAsUsername: Story = {
/>
)
};
/**
* WithUsernameError:
* - Purpose: Tests behavior when an error occurs with the username input (e.g., invalid username).
* - Scenario: The component displays an error message next to the username input field.
* - Key Aspect: Ensures the username input shows error messages when validation fails.
*/
export const WithUsernameError: Story = {
render: () => (
<KcPageStory
kcContext={{
realm: {
loginWithEmailAllowed: false,
registrationEmailAsUsername: false,
duplicateEmailsAllowed: false
},
url: {
loginAction: "/mock-login-action",
loginUrl: "/mock-login-url"
},
messagesPerField: {
existsError: (field: string) => field === "username",
get: () => "Invalid username"
},
auth: {
attemptedUsername: "invalid_user"
}
}}
/>
)
};

46
stories/login/pages/LoginUpdatePassword.stories.tsx
View File

@ -16,3 +16,49 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () => <KcPageStory />
};
/**
* WithPasswordError:
* - Purpose: Tests when there is an error in the password input (e.g., invalid password).
* - Scenario: Simulates the case where the user enters an invalid password, and an error message is displayed.
* - Key Aspect: Ensures the password input field shows an error message when validation fails.
*/
export const WithPasswordError: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
loginAction: "/mock-login-action"
},
messagesPerField: {
existsError: (field: string) => field === "password",
get: () => "Password must be at least 8 characters long."
},
isAppInitiatedAction: false
}}
/>
)
};
/**
* WithPasswordConfirmError:
* - Purpose: Tests when there is an error in the password confirmation input (e.g., passwords do not match).
* - Scenario: Simulates the case where the user enters mismatching passwords, and an error message is displayed in the confirmation field.
* - Key Aspect: Ensures that the password confirmation field shows an error when passwords do not match.
*/
export const WithPasswordConfirmError: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
loginAction: "/mock-login-action"
},
messagesPerField: {
existsError: (field: string) => field === "password-confirm",
get: () => "Passwords do not match."
},
isAppInitiatedAction: false
}}
/>
)
};

23
stories/login/pages/LoginUpdateProfile.stories.tsx
View File

@ -16,3 +16,26 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () => <KcPageStory />
};
/**
* WithProfileError:
* - Purpose: Tests when an error occurs in one or more profile fields (e.g., invalid email format).
* - Scenario: The component displays error messages next to the affected fields.
* - Key Aspect: Ensures the profile fields show error messages when validation fails.
*/
export const WithProfileError: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
loginAction: "/mock-login-action"
},
messagesPerField: {
existsError: (field: string) => field === "email",
get: () => "Invalid email format"
},
isAppInitiatedAction: false
}}
/>
)
};

75
stories/login/pages/LoginVerifyEmail.stories.tsx
View File

@ -28,3 +28,78 @@ export const Default: Story = {
/>
)
};
/**
* WithSuccessMessage:
* - Purpose: Tests when the email verification is successful, and the user receives a confirmation message.
* - Scenario: The component renders a success message instead of a warning or error.
* - Key Aspect: Ensures the success message is displayed correctly when the email is successfully verified.
*/
export const WithSuccessMessage: Story = {
render: () => (
<KcPageStory
kcContext={{
message: {
summary: "Your email has been successfully verified.",
type: "success"
},
user: {
email: "john.doe@gmail.com"
},
url: {
loginAction: "/mock-login-action"
}
}}
/>
)
};
/**
* WithErrorMessage:
* - Purpose: Tests when there is an error during the email verification process.
* - Scenario: The component renders an error message indicating the email verification failed.
* - Key Aspect: Ensures the error message is shown correctly when the verification process encounters an issue.
*/
export const WithErrorMessage: Story = {
render: () => (
<KcPageStory
kcContext={{
message: {
summary: "There was an error verifying your email. Please try again.",
type: "error"
},
user: {
email: "john.doe@gmail.com"
},
url: {
loginAction: "/mock-login-action"
}
}}
/>
)
};
/**
* WithInfoMessage:
* - Purpose: Tests when the user is prompted to verify their email without any urgency.
* - Scenario: The component renders with an informational message for email verification.
* - Key Aspect: Ensures the informational message is displayed properly.
*/
export const WithInfoMessage: Story = {
render: () => (
<KcPageStory
kcContext={{
message: {
summary: "Please verify your email to continue using our services.",
type: "info"
},
user: {
email: "john.doe@gmail.com"
},
url: {
loginAction: "/mock-login-action"
}
}}
/>
)
};

25
stories/login/pages/LoginX509Info.stories.tsx
View File

@ -16,3 +16,28 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () => <KcPageStory />
};
/**
* WithoutUserEnabled:
* - Purpose: Tests when the user is not enabled to log in via x509.
* - Scenario: The component renders the certificate details but does not provide the option to log in or cancel.
* - Key Aspect: Ensures that the login buttons are not displayed when the user is not enabled.
*/
export const WithoutUserEnabled: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
loginAction: "/mock-login-action"
},
x509: {
formData: {
subjectDN: "CN=John Doe, OU=Example Org, O=Example Inc, C=US",
username: "johndoe",
isUserEnabled: false // User not enabled for login
}
}
}}
/>
)
};

29
stories/login/pages/LogoutConfirm.stories.tsx
View File

@ -16,3 +16,32 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () => <KcPageStory />
};
/**
* WithCustomLogoutMessage:
* - Purpose: Tests when a custom message is displayed for the logout confirmation.
* - Scenario: The component renders with a custom logout confirmation message instead of the default one.
* - Key Aspect: Ensures the custom logout message is displayed correctly.
*/
export const WithCustomLogoutMessage: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
logoutConfirmAction: "/mock-logout-action"
},
client: {
baseUrl: "/mock-client-url"
},
logoutConfirm: {
code: "mock-session-code",
skipLink: false
},
message: {
summary: "Are you sure you want to log out from all sessions?",
type: "warning"
}
}}
/>
)
};

21
stories/login/pages/SelectAuthenticator.stories.tsx
View File

@ -82,3 +82,24 @@ export const WithRealmTranslations: Story = {
/>
)
};
/**
* WithoutAuthenticationSelections:
* - Purpose: Tests when no authentication methods are available for selection.
* - Scenario: The component renders without any authentication options, providing a default message or fallback.
* - Key Aspect: Ensures that the component gracefully handles the absence of available authentication methods.
*/
export const WithoutAuthenticationSelections: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
loginAction: "/mock-login-action"
},
auth: {
authenticationSelections: [] // No authentication methods available
}
}}
/>
)
};

22
stories/login/pages/UpdateEmail.stories.tsx
View File

@ -16,3 +16,25 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () => <KcPageStory />
};
/**
* WithAppInitiatedAction:
* - Purpose: Tests when the form is displayed as part of an application-initiated action.
* - Scenario: The component renders the form with additional buttons like "Cancel."
* - Key Aspect: Ensures the "Cancel" button is visible and functional during app-initiated actions.
*/
export const WithAppInitiatedAction: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
loginAction: "/mock-login-action"
},
messagesPerField: {
exists: () => false
},
isAppInitiatedAction: true
}}
/>
)
};

141
stories/login/pages/WebauthnAuthenticate.stories.tsx
View File

@ -16,3 +16,144 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () => <KcPageStory />
};
/**
* WithMultipleAuthenticators:
* - Purpose: Tests when multiple WebAuthn authenticators are available for selection.
* - Scenario: The component renders multiple authenticators, allowing the user to choose between them.
* - Key Aspect: Ensures that the available authenticators are displayed, and the user can select one.
*/
export const WithMultipleAuthenticators: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
loginAction: "/mock-login-action"
},
authenticators: {
authenticators: [
{
credentialId: "authenticator-1",
label: "Security Key 1",
transports: {
iconClass: "kcAuthenticatorUsbIcon",
displayNameProperties: ["USB"]
},
createdAt: "2023-01-01"
},
{
credentialId: "authenticator-2",
label: "Security Key 2",
transports: {
iconClass: "kcAuthenticatorNfcIcon",
displayNameProperties: ["NFC"]
},
createdAt: "2023-02-01"
}
]
},
shouldDisplayAuthenticators: true
}}
/>
)
};
/**
* WithSingleAuthenticator:
* - Purpose: Tests when only one WebAuthn authenticator is available.
* - Scenario: The component renders the WebAuthn form with a single available authenticator.
* - Key Aspect: Ensures the form renders correctly when there is only one authenticator available.
*/
export const WithSingleAuthenticator: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
loginAction: "/mock-login-action"
},
authenticators: {
authenticators: [
{
credentialId: "authenticator-1",
label: "My Security Key",
transports: {
iconClass: "kcAuthenticatorUsbIcon",
displayNameProperties: ["USB"]
},
createdAt: "2023-01-01"
}
]
},
shouldDisplayAuthenticators: true
}}
/>
)
};
/**
* WithErrorDuringAuthentication:
* - Purpose: Tests the behavior when an error occurs during WebAuthn authentication.
* - Scenario: The component renders with an error message displayed to the user.
* - Key Aspect: Ensures the form handles authentication errors and displays a relevant message.
*/
export const WithErrorDuringAuthentication: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
loginAction: "/mock-login-action"
},
authenticators: {
authenticators: [
{
credentialId: "authenticator-1",
label: "My Security Key",
transports: {
iconClass: "kcAuthenticatorUsbIcon",
displayNameProperties: ["USB"]
},
createdAt: "2023-01-01"
}
]
},
shouldDisplayAuthenticators: true,
message: {
summary: "An error occurred during WebAuthn authentication.",
type: "error"
}
}}
/>
)
};
/**
* WithJavaScriptDisabled:
* - Purpose: Tests the behavior when JavaScript is disabled or not functioning.
* - Scenario: The component renders a fallback message prompting the user to enable JavaScript for WebAuthn authentication.
* - Key Aspect: Ensures the form provides a clear message when JavaScript is required but unavailable.
*/
export const WithJavaScriptDisabled: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
loginAction: "/mock-login-action"
},
authenticators: {
authenticators: [
{
credentialId: "authenticator-1",
label: "My Security Key",
transports: {
iconClass: "kcAuthenticatorUsbIcon",
displayNameProperties: ["USB"]
},
createdAt: "2023-01-01"
}
]
},
shouldDisplayAuthenticators: true
}}
/>
)
};

69
stories/login/pages/WebauthnError.stories.tsx
View File

@ -16,3 +16,72 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () => <KcPageStory />
};
/**
* WithRetryAvailable:
* - Purpose: Tests when the user can retry the WebAuthn authentication after an error.
* - Scenario: The component renders with a "Try Again" button to allow retrying the authentication process.
* - Key Aspect: Ensures the retry button functionality is visible and the user can retry authentication.
*/
export const WithRetryAvailable: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
loginAction: "/mock-login-action"
},
isAppInitiatedAction: false,
message: {
summary: "WebAuthn authentication failed. Please try again.",
type: "error"
}
}}
/>
)
};
/**
* WithAppInitiatedAction:
* - Purpose: Tests when the WebAuthn error form is part of an application-initiated action.
* - Scenario: The component renders with both a "Try Again" button and a "Cancel" button for app-initiated actions.
* - Key Aspect: Ensures the form renders correctly with both "Try Again" and "Cancel" options.
*/
export const WithAppInitiatedAction: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
loginAction: "/mock-login-action"
},
isAppInitiatedAction: true,
message: {
summary: "WebAuthn authentication failed. You can try again or cancel.",
type: "error"
}
}}
/>
)
};
/**
* WithJavaScriptDisabled:
* - Purpose: Tests the behavior when JavaScript is disabled or not functioning.
* - Scenario: The component renders with a message prompting the user to retry manually without JavaScript.
* - Key Aspect: Ensures the retry mechanism works properly when JavaScript is disabled or unavailable.
*/
export const WithJavaScriptDisabled: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
loginAction: "/mock-login-action"
},
isAppInitiatedAction: false,
message: {
summary: "JavaScript is disabled or not working. Please retry manually.",
type: "warning"
}
}}
/>
)
};

44
stories/login/pages/WebauthnRegister.stories.tsx
View File

@ -16,3 +16,47 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () => <KcPageStory />
};
/**
* WithRetryAvailable:
* - Purpose: Tests when the user is allowed to retry WebAuthn registration after a failure.
* - Scenario: The component renders the form with a retry option.
* - Key Aspect: Ensures the retry functionality is available and the form allows the user to retry.
*/
export const WithRetryAvailable: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
loginAction: "/mock-login-action"
},
isSetRetry: true,
isAppInitiatedAction: false
}}
/>
)
};
/**
* WithErrorDuringRegistration:
* - Purpose: Tests when an error occurs during WebAuthn registration.
* - Scenario: The component displays an error message related to WebAuthn registration failure.
* - Key Aspect: Ensures the error message is displayed correctly, informing the user of the registration failure.
*/
export const WithErrorDuringRegistration: Story = {
render: () => (
<KcPageStory
kcContext={{
url: {
loginAction: "/mock-login-action"
},
isSetRetry: false,
isAppInitiatedAction: false,
message: {
summary: "An error occurred during WebAuthn registration. Please try again.",
type: "error"
}
}}
/>
)
};