fix: button with formnovalidate

ory · Sep 29, 2023 · 62bf68d · 62bf68d
1 parent 8ffb907
commit 62bf68d
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 1 deletion.
diff --git 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
@@ -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.