Improve mock and stories

src/login/KcContext/kcContextMocks.ts

@@ -99,13 +99,22 @@ export const kcContextCommonMock: KcContext.Common = {
         registrationEmailAsUsername: false
     },
     messagesPerField: {
-        printIfExists: () => {
+        get: () => "",
-            return undefined;
-        },
         existsError: () => false,
-        get: fieldName => `Fake error for ${fieldName}`,
+        printIfExists: function <T>(fieldName: string, text: T) {
-        exists: () => false,
+            return this.get(fieldName) !== "" ? text : undefined;
-        getFirstError: fieldName => `Fake error for ${fieldName}`
+        },
+        exists: function (fieldName) {
+            return this.get(fieldName) !== "";
+        },
+        getFirstError: function (...fieldNames) {
+            for (const fieldName of fieldNames) {
+                if (this.existsError(fieldName)) {
+                    return this.get(fieldName);
+                }
+            }
+            return "";
+        }
     },
     locale: {
         supported: [

stories/login/pages/Login.stories.tsx

@@ -17,6 +17,36 @@ export const Default: Story = {
     render: () => <KcPageStory />
 };
 
+export const WithInvalidCredential: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                message: {
+                    summary: "Invalid username or password.",
+                    type: "error"
+                },
+                login: {
+                    username: "johndoe"
+                },
+                messagesPerField: {
+                    // NOTE: The other functions of messagesPerField are derived from get() and
+                    // existsError() so they are the only ones that need to mock.
+                    existsError: (fieldName: string, ...otherFieldNames: string[]) => {
+                        const fieldNames = [fieldName, ...otherFieldNames];
+                        return fieldNames.includes("username") || fieldNames.includes("password");
+                    },
+                    get: (fieldName: string) => {
+                        if (fieldName === "username" || fieldName === "password") {
+                            return "Invalid username or password.";
+                        }
+                        return "";
+                    }
+                }
+            }}
+        />
+    )
+};
+
 export const WithoutRegistration: Story = {
     render: () => (
         <KcPageStory
@@ -180,3 +210,16 @@ export const WithoutPasswordField: Story = {
         />
     )
 };
+
+export const WithErrorMessage: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                message: {
+                    summary: "Please restart the login process.",
+                    type: "error"
+                }
+            }}
+        />
+    )
+};

stories/login/pages/Register.stories.tsx

@@ -17,22 +17,31 @@ export const Default: Story = {
     render: () => <KcPageStory />
 };
 
-export const WithFieldError: Story = {
+export const WithEmailAlreadyExists: Story = {
     render: () => (
         <KcPageStory
             kcContext={{
                 profile: {
                     attributesByName: {
+                        username: {
+                            value: "johndoe"
+                        },
                         email: {
-                            value: "max.mustermann@gmail.com"
+                            value: "jhon.doe@gmail.com"
+                        },
+                        firstName: {
+                            value: "John"
+                        },
+                        lastName: {
+                            value: "Doe"
                         }
                     }
                 },
                 messagesPerField: {
-                    existsError: (fieldName: string) => fieldName === "email",
+                    // NOTE: The other functions of messagesPerField are derived from get() and
-                    exists: (fieldName: string) => fieldName === "email",
+                    // existsError() so they are the only ones that need to mock.
-                    get: (fieldName: string) => (fieldName === "email" ? "I don't like your email address" : undefined),
+                    existsError: (fieldName: string, ...otherFieldNames: string[]) => [fieldName, ...otherFieldNames].includes("email"),
-                    printIfExists: <T,>(fieldName: string, x: T) => (fieldName === "email" ? x : undefined)
+                    get: (fieldName: string) => (fieldName === "email" ? "Email already exists." : undefined)
                 }
             }}
         />