Merge pull request #700 from nima70/main
Storybooks Second Release: Login Page Stories with Improved Coverage
This commit is contained in:
Joseph Garrone
GitHub
commit
e33693e20e
@ -16,3 +16,105 @@ type Story = StoryObj<typeof meta>;
|
||||
export const Default: Story = {
|
||||
render: () => <KcPageStory />
|
||||
};
|
||||
|
||||
/**
|
||||
* UsernameNotEditable:
|
||||
* - Purpose: Test the scenario where the username field is not editable.
|
||||
* - Scenario: The component renders, but the username field is disabled.
|
||||
* - Key Aspect: Ensures that the `editUsernameAllowed` condition is respected and the username field is read-only.
|
||||
*/
|
||||
export const UsernameNotEditable: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
account: {
|
||||
username: "john_doe",
|
||||
email: "john.doe@gmail.com",
|
||||
firstName: "John",
|
||||
lastName: "Doe"
|
||||
},
|
||||
realm: {
|
||||
registrationEmailAsUsername: false,
|
||||
editUsernameAllowed: false
|
||||
},
|
||||
referrer: {
|
||||
url: "/home"
|
||||
},
|
||||
url: {
|
||||
accountUrl: "/account"
|
||||
},
|
||||
messagesPerField: {
|
||||
printIfExists: () => ""
|
||||
},
|
||||
stateChecker: "state-checker"
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
/**
|
||||
* WithValidationErrors:
|
||||
* - Purpose: Test the form when there are validation errors.
|
||||
* - Scenario: The component renders with error messages for invalid input in the fields.
|
||||
* - Key Aspect: Ensures that error messages are properly displayed and the user can correct their inputs.
|
||||
*/
|
||||
export const WithValidationErrors: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
account: {
|
||||
username: "john_doe",
|
||||
email: "",
|
||||
firstName: "",
|
||||
lastName: "Doe"
|
||||
},
|
||||
realm: {
|
||||
registrationEmailAsUsername: false,
|
||||
editUsernameAllowed: true
|
||||
},
|
||||
referrer: {
|
||||
url: "/home"
|
||||
},
|
||||
url: {
|
||||
accountUrl: "/account"
|
||||
},
|
||||
messagesPerField: {
|
||||
printIfExists: field => (field === "email" || field === "firstName" ? "has-error" : "")
|
||||
},
|
||||
stateChecker: "state-checker"
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
/**
|
||||
* EmailAsUsername:
|
||||
* - Purpose: Test the form where email is used as the username.
|
||||
* - Scenario: The component renders without a separate username field, and the email field is treated as the username.
|
||||
* - Key Aspect: Ensures the form functions correctly when `registrationEmailAsUsername` is enabled.
|
||||
*/
|
||||
export const EmailAsUsername: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
account: {
|
||||
email: "john.doe@gmail.com",
|
||||
firstName: "John",
|
||||
lastName: "Doe"
|
||||
},
|
||||
realm: {
|
||||
registrationEmailAsUsername: true
|
||||
},
|
||||
referrer: {
|
||||
url: "/home"
|
||||
},
|
||||
url: {
|
||||
accountUrl: "/account"
|
||||
},
|
||||
messagesPerField: {
|
||||
printIfExists: () => ""
|
||||
},
|
||||
stateChecker: "state-checker"
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -78,3 +78,151 @@ export const Default: Story = {
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
// No Available Roles or Grants Scenario
|
||||
export const NoAvailableRolesOrGrants: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
pageId: "applications.ftl",
|
||||
applications: {
|
||||
applications: [
|
||||
{
|
||||
realmRolesAvailable: [],
|
||||
resourceRolesAvailable: {},
|
||||
additionalGrants: [],
|
||||
clientScopesGranted: [],
|
||||
effectiveUrl: "#",
|
||||
client: {
|
||||
clientId: "application1",
|
||||
name: "Application 1",
|
||||
consentRequired: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
// Consent Not Required Scenario
|
||||
export const ConsentNotRequired: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
pageId: "applications.ftl",
|
||||
applications: {
|
||||
applications: [
|
||||
{
|
||||
realmRolesAvailable: [],
|
||||
resourceRolesAvailable: {},
|
||||
additionalGrants: [],
|
||||
clientScopesGranted: [],
|
||||
effectiveUrl: "#",
|
||||
client: {
|
||||
clientId: "application1",
|
||||
name: "Application 1",
|
||||
consentRequired: false // No consent required
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
// No Roles Available but Consent Required Scenario
|
||||
export const NoRolesButConsentRequired: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
pageId: "applications.ftl",
|
||||
applications: {
|
||||
applications: [
|
||||
{
|
||||
realmRolesAvailable: [],
|
||||
resourceRolesAvailable: {},
|
||||
additionalGrants: [],
|
||||
clientScopesGranted: ["scope1", "scope2"], // Consent required but no roles
|
||||
effectiveUrl: "#",
|
||||
client: {
|
||||
clientId: "application1",
|
||||
name: "Application 1",
|
||||
consentRequired: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
// Only Resource Roles Available Scenario
|
||||
export const OnlyResourceRolesAvailable: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
pageId: "applications.ftl",
|
||||
applications: {
|
||||
applications: [
|
||||
{
|
||||
realmRolesAvailable: [], // No realm roles
|
||||
resourceRolesAvailable: {
|
||||
resource1: [
|
||||
{
|
||||
roleName: "Resource Role Name 1",
|
||||
roleDescription: "Resource role 1 description",
|
||||
clientName: "Client Name 1",
|
||||
clientId: "client1"
|
||||
}
|
||||
]
|
||||
},
|
||||
additionalGrants: [],
|
||||
clientScopesGranted: [],
|
||||
effectiveUrl: "#",
|
||||
client: {
|
||||
clientId: "application1",
|
||||
name: "Application 1",
|
||||
consentRequired: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
// No Additional Grants Scenario
|
||||
export const NoAdditionalGrants: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
pageId: "applications.ftl",
|
||||
applications: {
|
||||
applications: [
|
||||
{
|
||||
realmRolesAvailable: [
|
||||
{
|
||||
name: "Realm Role Name 1"
|
||||
}
|
||||
],
|
||||
resourceRolesAvailable: {},
|
||||
additionalGrants: [], // No additional grants
|
||||
clientScopesGranted: [],
|
||||
effectiveUrl: "#",
|
||||
client: {
|
||||
clientId: "application1",
|
||||
name: "Application 1",
|
||||
consentRequired: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -36,3 +36,61 @@ export const NotConnected: Story = {
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
/**
|
||||
* RemoveLinkNotPossible:
|
||||
* - Federated identities are connected, but the user cannot remove them due to restrictions.
|
||||
*/
|
||||
export const RemoveLinkNotPossible: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
pageId: "federatedIdentity.ftl",
|
||||
federatedIdentity: {
|
||||
identities: [
|
||||
{
|
||||
providerId: "google",
|
||||
displayName: "Google",
|
||||
userName: "john.doe@gmail.com",
|
||||
connected: true
|
||||
}
|
||||
],
|
||||
removeLinkPossible: false
|
||||
},
|
||||
stateChecker: "1234",
|
||||
url: {
|
||||
socialUrl: "/social"
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
/**
|
||||
* AddLinkForUnconnectedIdentity:
|
||||
* - The user has an identity that is not connected and can add it.
|
||||
*/
|
||||
export const AddLinkForUnconnectedIdentity: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
pageId: "federatedIdentity.ftl",
|
||||
federatedIdentity: {
|
||||
identities: [
|
||||
{
|
||||
providerId: "github",
|
||||
displayName: "GitHub",
|
||||
userName: "",
|
||||
connected: false
|
||||
}
|
||||
],
|
||||
removeLinkPossible: true
|
||||
},
|
||||
stateChecker: "1234",
|
||||
url: {
|
||||
socialUrl: "/social"
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -355,3 +355,107 @@ export const Default: Story = {
|
||||
/>
|
||||
)
|
||||
};
|
||||
export const LogsMissingDetails: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
pageId: "log.ftl",
|
||||
log: {
|
||||
events: [
|
||||
{
|
||||
date: "2024-04-26T12:29:08Z",
|
||||
ipAddress: "127.0.0.1",
|
||||
client: "",
|
||||
details: [],
|
||||
event: "login"
|
||||
}
|
||||
]
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
export const SingleLogEntry: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
pageId: "log.ftl",
|
||||
log: {
|
||||
events: [
|
||||
{
|
||||
date: "2024-04-26T12:29:08Z",
|
||||
ipAddress: "127.0.0.1",
|
||||
client: "keycloakify-frontend",
|
||||
details: [
|
||||
{ key: "auth_method", value: "openid-connect" },
|
||||
{ key: "username", value: "john.doe" }
|
||||
],
|
||||
event: "login"
|
||||
}
|
||||
]
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
export const LogsWithLongDetails: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
pageId: "log.ftl",
|
||||
log: {
|
||||
events: [
|
||||
{
|
||||
date: "2024-04-26T12:29:08Z",
|
||||
ipAddress: "127.0.0.1",
|
||||
client: "keycloakify-frontend",
|
||||
details: [
|
||||
{ key: "auth_method", value: "openid-connect" },
|
||||
{ key: "username", value: "john.doe" },
|
||||
{ key: "session_duration", value: "2 hours 30 minutes 45 seconds" },
|
||||
{ key: "location", value: "Windsor, Ontario, Canada" },
|
||||
{ key: "user_agent", value: "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" }
|
||||
],
|
||||
event: "login"
|
||||
}
|
||||
]
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
export const EmptyClientField: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
pageId: "log.ftl",
|
||||
log: {
|
||||
events: [
|
||||
{
|
||||
date: "2024-04-26T12:29:08Z",
|
||||
ipAddress: "127.0.0.1",
|
||||
client: "", // Empty client field
|
||||
details: [
|
||||
{ key: "auth_method", value: "openid-connect" },
|
||||
{ key: "username", value: "john.doe" }
|
||||
],
|
||||
event: "login"
|
||||
}
|
||||
]
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
export const NoLogsAvailable: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
pageId: "log.ftl",
|
||||
log: {
|
||||
events: [] // No log events
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -26,3 +26,79 @@ export const WithMessage: Story = {
|
||||
/>
|
||||
)
|
||||
};
|
||||
/**
|
||||
* FirstTimePasswordSetup:
|
||||
* - Purpose: Tests the page when no password is set (e.g., first login).
|
||||
* - Scenario: This renders the form without the current password field.
|
||||
* - Key Aspect: Ensures the page only displays fields for setting a new password.
|
||||
*/
|
||||
export const FirstTimePasswordSetup: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
account: {
|
||||
username: "john_doe"
|
||||
},
|
||||
password: {
|
||||
passwordSet: false
|
||||
},
|
||||
url: {
|
||||
passwordUrl: "/password"
|
||||
},
|
||||
stateChecker: "state-checker"
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
/**
|
||||
* IncorrectCurrentPassword:
|
||||
* - Purpose: Simulates validation error when the current password is incorrect.
|
||||
* - Scenario: This renders the page with an error message indicating the current password is incorrect.
|
||||
* - Key Aspect: Validates that an error message is correctly displayed for the current password input.
|
||||
*/
|
||||
export const IncorrectCurrentPassword: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
message: { type: "error", summary: "Incorrect current password." },
|
||||
account: {
|
||||
username: "john_doe"
|
||||
},
|
||||
password: {
|
||||
passwordSet: true
|
||||
},
|
||||
url: {
|
||||
passwordUrl: "/password"
|
||||
},
|
||||
stateChecker: "state-checker"
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
/**
|
||||
* SubmissionSuccessWithRedirect:
|
||||
* - Purpose: Simulates a successful form submission with a redirect or success message.
|
||||
* - Scenario: After successfully changing the password, a success message and redirect behavior are triggered.
|
||||
* - Key Aspect: Verifies the handling of successful submissions.
|
||||
*/
|
||||
export const SubmissionSuccessWithRedirect: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
message: { type: "success", summary: "Password successfully changed." },
|
||||
account: {
|
||||
username: "john_doe"
|
||||
},
|
||||
password: {
|
||||
passwordSet: true
|
||||
},
|
||||
url: {
|
||||
passwordUrl: "/password"
|
||||
},
|
||||
stateChecker: "state-checker"
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -57,3 +57,97 @@ export const WithError: Story = {
|
||||
/>
|
||||
)
|
||||
};
|
||||
/**
|
||||
* No active sessions scenario:
|
||||
* - Simulates the scenario where no sessions are active for the user.
|
||||
*/
|
||||
export const NoActiveSessions: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
sessions: {
|
||||
sessions: []
|
||||
},
|
||||
stateChecker: "randomStateCheckerValue"
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
/**
|
||||
* Single session scenario:
|
||||
* - Displays only one active session with session details.
|
||||
*/
|
||||
export const SingleSession: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
sessions: {
|
||||
sessions: [
|
||||
{
|
||||
expires: "2024-04-26T18:14:19Z",
|
||||
clients: ["account"],
|
||||
ipAddress: "172.20.0.1",
|
||||
started: "2024-04-26T08:14:19Z",
|
||||
lastAccess: "2024-04-26T08:30:54Z",
|
||||
id: "single-session-id"
|
||||
}
|
||||
]
|
||||
},
|
||||
stateChecker: "anotherStateChecker"
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
/**
|
||||
* Multiple clients per session scenario:
|
||||
* - Displays sessions where each session has multiple associated clients.
|
||||
*/
|
||||
export const MultipleClientsSession: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
sessions: {
|
||||
sessions: [
|
||||
{
|
||||
expires: "2024-04-26T18:14:19Z",
|
||||
clients: ["account", "admin-console", "another-client"],
|
||||
ipAddress: "172.20.0.1",
|
||||
started: "2024-04-26T08:14:19Z",
|
||||
lastAccess: "2024-04-26T08:30:54Z",
|
||||
id: "multiple-clients-session"
|
||||
}
|
||||
]
|
||||
},
|
||||
stateChecker: "multiClientsStateChecker"
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
/**
|
||||
* Session without client details scenario:
|
||||
* - Simulates a session where no client information is provided.
|
||||
*/
|
||||
export const SessionWithoutClients: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
sessions: {
|
||||
sessions: [
|
||||
{
|
||||
expires: "2024-04-26T18:14:19Z",
|
||||
clients: [], // No clients information
|
||||
ipAddress: "172.20.0.1",
|
||||
started: "2024-04-26T08:14:19Z",
|
||||
lastAccess: "2024-04-26T08:30:54Z",
|
||||
id: "no-clients-session"
|
||||
}
|
||||
]
|
||||
},
|
||||
stateChecker: "noClientsStateChecker"
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -180,3 +180,64 @@ export const MoreThanOneTotpProviders: Story = {
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
// TOTP Enabled but No Existing OTP Credentials
|
||||
export const TotpEnabledNoOtpCredentials: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
totp: {
|
||||
enabled: true,
|
||||
totpSecretEncoded: "HE4W MSTC OBKU CY2M",
|
||||
otpCredentials: [] // No OTP Credentials
|
||||
},
|
||||
stateChecker: "stateChecker123",
|
||||
url: {
|
||||
totpUrl: "http://localhost:8080/realms/myrealm/account/totp"
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
// Manual Mode TOTP without Scanning
|
||||
export const ManualModeTotp: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
mode: "manual", // Manual mode
|
||||
totp: {
|
||||
enabled: false,
|
||||
totpSecretEncoded: "HE4W MSTC OBKU CY2M",
|
||||
otpCredentials: []
|
||||
},
|
||||
stateChecker: "stateChecker123",
|
||||
url: {
|
||||
totpUrl: "http://localhost:8080/realms/myrealm/account/totp"
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
// Multiple OTP Devices Scenario
|
||||
export const MultipleOtpDevices: Story = {
|
||||
render: () => (
|
||||
<KcPageStory
|
||||
kcContext={{
|
||||
totp: {
|
||||
enabled: true,
|
||||
totpSecretEncoded: "G55E MZKC JFUD",
|
||||
otpCredentials: [
|
||||
{ id: "1", userLabel: "Phone 1" },
|
||||
{ id: "2", userLabel: "Tablet" }
|
||||
]
|
||||
},
|
||||
stateChecker: "stateChecker123",
|
||||
url: {
|
||||
totpUrl: "http://localhost:8080/realms/myrealm/account/totp"
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -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."
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -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."
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -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."
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -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."
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -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
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -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
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -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
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -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
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -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
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -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
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -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
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user