From 7aef0699b2ec9049819b9b1c6714ed75fa10ccb7 Mon Sep 17 00:00:00 2001
From: Alano Terblanche <18033717+Benehiko@users.noreply.github.com>
Date: Fri, 22 Sep 2023 16:39:13 +0200
Subject: [PATCH] test: node error message

---
 .../ory/helpers/error-flow-nodes.spec.tsx     | 100 ++++++++++++++++++
 src/stories/Ory/AuthError.stories.tsx         |   8 +-
 src/stories/Ory/auth-error-400.json           |  12 ---
 src/stories/Ory/auth-error-500.json           |  12 ---
 src/stories/Ory/auth-error-data.ts            |  34 ++++++
 5 files changed, 137 insertions(+), 29 deletions(-)
 create mode 100644 src/react-components/ory/helpers/error-flow-nodes.spec.tsx
 delete mode 100644 src/stories/Ory/auth-error-400.json
 delete mode 100644 src/stories/Ory/auth-error-500.json
 create mode 100644 src/stories/Ory/auth-error-data.ts

diff --git a/src/react-components/ory/helpers/error-flow-nodes.spec.tsx b/src/react-components/ory/helpers/error-flow-nodes.spec.tsx
new file mode 100644
index 000000000..68aa237e0
--- /dev/null
+++ b/src/react-components/ory/helpers/error-flow-nodes.spec.tsx
@@ -0,0 +1,100 @@
+import { test, expect } from "@playwright/experimental-ct-react"
+import { NodeMessages } from "./error-messages"
+
+test("should render error message", async ({ mount }) => {
+  const component = await mount(
+    <NodeMessages
+      severity="error"
+      uiMessages={[
+        {
+          id: 4000010,
+          text: "Account not active yet. Did you forget to verify your email address?",
+          context: {},
+          type: "error",
+        },
+      ]}
+    />,
+  )
+  await expect(
+    component.locator("[data-testid='ui/message/4000010']"),
+  ).toBeVisible()
+  await expect(component).toContainText(
+    "Account not active yet. Did you forget to verify your email address?",
+  )
+})
+
+test("should render info message", async ({ mount }) => {
+  const component = await mount(
+    <NodeMessages
+      severity="info"
+      uiMessages={[
+        {
+          id: 1080002,
+          text: "You successfully verified your email address.",
+          context: {},
+          type: "info",
+        },
+      ]}
+    />,
+  )
+
+  await expect(
+    component.locator("[data-testid='ui/message/1080002']"),
+  ).toBeVisible()
+  await expect(component).toContainText(
+    "You successfully verified your email address.",
+  )
+})
+
+test("can render multiple messages", async ({ mount }) => {
+  const component = await mount(
+    <NodeMessages
+      severity="info"
+      uiMessages={[
+        {
+          id: 1080002,
+          text: "You successfully verified your email address.",
+          context: {},
+          type: "info",
+        },
+      ]}
+      nodes={[
+        {
+          group: "default",
+          type: "input",
+          attributes: {
+            name: "traits.name",
+            type: "text",
+            value: "",
+            disabled: false,
+            node_type: "input",
+          },
+          messages: [
+            {
+              id: 4000002,
+              text: "Property {property} is missing.",
+              context: {
+                property: "name",
+              },
+              type: "info",
+            },
+          ],
+          meta: {},
+        },
+      ]}
+    />,
+  )
+
+  await expect(
+    component.locator("[data-testid='ui/message/4000002']"),
+  ).toBeVisible()
+
+  await expect(component).toContainText("Property name is missing.")
+
+  await expect(component).toContainText(
+    "You successfully verified your email address.",
+  )
+  await expect(
+    component.locator("[data-testid='ui/message/1080002']"),
+  ).toBeVisible()
+})
diff --git a/src/stories/Ory/AuthError.stories.tsx b/src/stories/Ory/AuthError.stories.tsx
index 1e6ab1d32..393c8523d 100644
--- a/src/stories/Ory/AuthError.stories.tsx
+++ b/src/stories/Ory/AuthError.stories.tsx
@@ -1,10 +1,8 @@
-import { FlowError } from "@ory/client"
 import { ComponentMeta, Story } from "@storybook/react"
 import { UserErrorCard, UserErrorCardProps } from "../../react-components"
 import { Container } from "../storyhelper"
 
-import authError400 from "./auth-error-400.json"
-import authError500 from "./auth-error-500.json"
+import { authError400, authError500 } from "./auth-error-data"
 
 export default {
   title: "Ory/ErrorAuthCard",
@@ -20,7 +18,7 @@ const Template: Story<UserErrorCardProps> = (args: UserErrorCardProps) => (
 export const ErrorAuthCard400 = Template.bind({})
 
 ErrorAuthCard400.args = {
-  error: authError400 as FlowError,
+  error: authError400,
   backUrl: "https://acme.com/login",
   contactSupportEmail: "help@help.com",
 }
@@ -28,7 +26,7 @@ ErrorAuthCard400.args = {
 export const ErrorAuthCard500 = Template.bind({})
 
 ErrorAuthCard500.args = {
-  error: authError500 as FlowError,
+  error: authError500,
   backUrl: "https://acme.com/login",
   contactSupportEmail: "help@help.com",
 }
diff --git a/src/stories/Ory/auth-error-400.json b/src/stories/Ory/auth-error-400.json
deleted file mode 100644
index 59eefdc38..000000000
--- a/src/stories/Ory/auth-error-400.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "id": "993c948b-6ac1-411c-bcaf-029f56b44d5e",
-  "error": {
-    "code": 400,
-    "debug": "key ory_kratos_oidc_auth_code_session does not exist in cookie: ory_kratos_continuity\n",
-    "message": "no resumable session found",
-    "reason": "The browser does not contain the necessary cookie to resume the session. This is a security violation and was blocked. Please clear your browser's cookies and cache and try again!",
-    "status": "Bad Request"
-  },
-  "created_at": "2022-08-11T14:08:09.054554Z",
-  "updated_at": "2022-08-11T14:08:09.054554Z"
-}
diff --git a/src/stories/Ory/auth-error-500.json b/src/stories/Ory/auth-error-500.json
deleted file mode 100644
index 1f43e24c5..000000000
--- a/src/stories/Ory/auth-error-500.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "id": "993c948b-6ac1-411c-bcaf-029f56b44d5e",
-  "error": {
-    "code": 500,
-    "debug": "key ory_kratos_oidc_auth_code_session does not exist in cookie: ory_kratos_continuity\n",
-    "message": "no resumable session found",
-    "reason": "The browser does not contain the necessary cookie to resume the session. This is a security violation and was blocked. Please clear your browser's cookies and cache and try again!",
-    "status": "Bad Request"
-  },
-  "created_at": "2022-08-11T14:08:09.054554Z",
-  "updated_at": "2022-08-11T14:08:09.054554Z"
-}
diff --git a/src/stories/Ory/auth-error-data.ts b/src/stories/Ory/auth-error-data.ts
new file mode 100644
index 000000000..931b4f2e9
--- /dev/null
+++ b/src/stories/Ory/auth-error-data.ts
@@ -0,0 +1,34 @@
+// Copyright © 2023 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import { FlowError } from "@ory/client"
+
+export const authError400: FlowError = {
+  id: "993c948b-6ac1-411c-bcaf-029f56b44d5e",
+  error: {
+    code: 400,
+    debug:
+      "key ory_kratos_oidc_auth_code_session does not exist in cookie: ory_kratos_continuity\n",
+    message: "no resumable session found",
+    reason:
+      "The browser does not contain the necessary cookie to resume the session. This is a security violation and was blocked. Please clear your browser's cookies and cache and try again!",
+    status: "Bad Request",
+  },
+  created_at: "2022-08-11T14:08:09.054554Z",
+  updated_at: "2022-08-11T14:08:09.054554Z",
+}
+
+export const authError500: FlowError = {
+  id: "993c948b-6ac1-411c-bcaf-029f56b44d5e",
+  error: {
+    code: 500,
+    debug:
+      "key ory_kratos_oidc_auth_code_session does not exist in cookie: ory_kratos_continuity\n",
+    message: "no resumable session found",
+    reason:
+      "The browser does not contain the necessary cookie to resume the session. This is a security violation and was blocked. Please clear your browser's cookies and cache and try again!",
+    status: "Bad Request",
+  },
+  created_at: "2022-08-11T14:08:09.054554Z",
+  updated_at: "2022-08-11T14:08:09.054554Z",
+}