From 62bf68ded53a9b58dec4cc95c257a327ba194bf4 Mon Sep 17 00:00:00 2001
From: Alano Terblanche <18033717+Benehiko@users.noreply.github.com>
Date: Fri, 29 Sep 2023 15:04:39 +0200
Subject: [PATCH 1/2] fix: button with formnovalidate

---
 .../ory/helpers/node.spec.tsx                 | 72 +++++++++++++++++++
 src/react-components/ory/helpers/node.tsx     |  2 +-
 2 files changed, 73 insertions(+), 1 deletion(-)

diff --git a/src/react-components/ory/helpers/node.spec.tsx b/src/react-components/ory/helpers/node.spec.tsx
index aadb9bd4..ebec3c0c 100644
--- a/src/react-components/ory/helpers/node.spec.tsx
+++ b/src/react-components/ory/helpers/node.spec.tsx
@@ -160,3 +160,75 @@ test("uiTextToFormattedMessage on a list", async ({ mount }) => {
   await expect(component).toContainText("te45pbc0")
   await expect(component).toContainText("q3vvtd4i")
 })
+
+test("button with id 1070007 or 1070008 should have formNoValidate", async ({
+  mount,
+}) => {
+  await test.step("button with id 1070007", async () => {
+    const component = await mount(
+      <Node
+        node={{
+          type: "input",
+          group: "default",
+          attributes: {
+            id: "111111",
+            name: "resend",
+            value: "code",
+            type: "submit",
+            node_type: "input",
+            required: true,
+            disabled: false,
+          },
+          messages: [],
+          meta: {
+            label: {
+              id: 1070007,
+              text: "",
+              type: "info",
+            },
+          },
+        }}
+      />,
+    )
+
+    // formnovalidate is inline and won't work with the .toHaveAttribute matcher
+    await expect(component.locator("[formnovalidate]")).toBeAttached()
+    // text is injected from the translation file
+    await expect(component).toHaveText("Email")
+
+    await component.unmount()
+  })
+
+  await test.step("button with id 1070008", async () => {
+    const component = await mount(
+      <Node
+        node={{
+          type: "input",
+          group: "default",
+          attributes: {
+            id: "111111",
+            name: "resend",
+            value: "code",
+            type: "submit",
+            node_type: "input",
+            required: true,
+            disabled: false,
+          },
+          messages: [],
+          meta: {
+            label: {
+              id: 1070008,
+              text: "",
+              type: "info",
+            },
+          },
+        }}
+      />,
+    )
+
+    // formnovalidate is inline and won't work with the .toHaveAttribute matcher
+    await expect(component.locator("[formnovalidate]")).toBeAttached()
+    // text is injected from the translation file
+    await expect(component).toHaveText("Resend code")
+  })
+})
diff --git a/src/react-components/ory/helpers/node.tsx b/src/react-components/ory/helpers/node.tsx
index 8fdb6273..9013594c 100644
--- a/src/react-components/ory/helpers/node.tsx
+++ b/src/react-components/ory/helpers/node.tsx
@@ -288,7 +288,7 @@ export const Node = ({
 
         // the recovery code resend button
         if (
-          node.meta.label?.id === 1070007 ?? // TODO: remove this once everyone has migrated to the fix (https://github.com/ory/kratos/pull/3067)
+          node.meta.label?.id === 1070007 || // TODO: remove this once everyone has migrated to the fix (https://github.com/ory/kratos/pull/3067)
           node.meta.label?.id === 1070008
         ) {
           // on html forms the required flag on an input field will prevent the form from submitting.

From a09968183d60aeed22f46515ba0a185b69f44658 Mon Sep 17 00:00:00 2001
From: Alano Terblanche <18033717+Benehiko@users.noreply.github.com>
Date: Fri, 29 Sep 2023 15:18:31 +0200
Subject: [PATCH 2/2] chore: separate tests

---
 .../ory/helpers/node.spec.tsx                 | 126 +++++++++---------
 1 file changed, 61 insertions(+), 65 deletions(-)

diff --git a/src/react-components/ory/helpers/node.spec.tsx b/src/react-components/ory/helpers/node.spec.tsx
index ebec3c0c..2ec2983f 100644
--- a/src/react-components/ory/helpers/node.spec.tsx
+++ b/src/react-components/ory/helpers/node.spec.tsx
@@ -161,74 +161,70 @@ test("uiTextToFormattedMessage on a list", async ({ mount }) => {
   await expect(component).toContainText("q3vvtd4i")
 })
 
-test("button with id 1070007 or 1070008 should have formNoValidate", async ({
-  mount,
-}) => {
-  await test.step("button with id 1070007", async () => {
-    const component = await mount(
-      <Node
-        node={{
-          type: "input",
-          group: "default",
-          attributes: {
-            id: "111111",
-            name: "resend",
-            value: "code",
-            type: "submit",
-            node_type: "input",
-            required: true,
-            disabled: false,
-          },
-          messages: [],
-          meta: {
-            label: {
-              id: 1070007,
-              text: "",
-              type: "info",
-            },
+test("button with id 1070007 should have formnovalidate", async ({ mount }) => {
+  const component = await mount(
+    <Node
+      node={{
+        type: "input",
+        group: "default",
+        attributes: {
+          id: "111111",
+          name: "resend",
+          value: "code",
+          type: "submit",
+          node_type: "input",
+          required: true,
+          disabled: false,
+        },
+        messages: [],
+        meta: {
+          label: {
+            id: 1070007,
+            text: "",
+            type: "info",
           },
-        }}
-      />,
-    )
-
-    // formnovalidate is inline and won't work with the .toHaveAttribute matcher
-    await expect(component.locator("[formnovalidate]")).toBeAttached()
-    // text is injected from the translation file
-    await expect(component).toHaveText("Email")
+        },
+      }}
+    />,
+  )
 
-    await component.unmount()
-  })
+  // formnovalidate is inline and won't work with the .toHaveAttribute matcher
+  await expect(component.locator("[formnovalidate]")).toBeAttached()
+  // text is injected from the translation file
+  await expect(component).toHaveText("Email")
+})
 
-  await test.step("button with id 1070008", async () => {
-    const component = await mount(
-      <Node
-        node={{
-          type: "input",
-          group: "default",
-          attributes: {
-            id: "111111",
-            name: "resend",
-            value: "code",
-            type: "submit",
-            node_type: "input",
-            required: true,
-            disabled: false,
-          },
-          messages: [],
-          meta: {
-            label: {
-              id: 1070008,
-              text: "",
-              type: "info",
-            },
+test("button with label id 1070008 should have formnovalidate", async ({
+  mount,
+}) => {
+  const component = await mount(
+    <Node
+      node={{
+        type: "input",
+        group: "default",
+        attributes: {
+          id: "111111",
+          name: "resend",
+          value: "code",
+          type: "submit",
+          node_type: "input",
+          required: true,
+          disabled: false,
+        },
+        messages: [],
+        meta: {
+          label: {
+            id: 1070008,
+            text: "",
+            type: "info",
           },
-        }}
-      />,
-    )
+        },
+      }}
+    />,
+  )
 
-    // formnovalidate is inline and won't work with the .toHaveAttribute matcher
-    await expect(component.locator("[formnovalidate]")).toBeAttached()
-    // text is injected from the translation file
-    await expect(component).toHaveText("Resend code")
-  })
+  // formnovalidate is inline and won't work with the .toHaveAttribute matcher
+  await expect(component.locator("[formnovalidate]")).toBeAttached()
+  // text is injected from the translation file
+  await expect(component).toHaveText("Resend code")
 })