test: extend submitter tests

vercel · Feb 26, 2025 · 6720eae · 6720eae
1 parent 19ebc88
commit 6720eae
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 19 deletions.
diff --git a/...efault/app/forms/submitter-value/page.tsx → ...bmitter-value/button-type-submit/page.tsx b/...efault/app/forms/submitter-value/page.tsx → ...bmitter-value/button-type-submit/page.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import Form from 'next/form'
 
-export default function Home() {
+export default function Page() {
   return (
     <Form action="/search" id="search-form">
       <button id="submit-btn-one" type="submit" name="query" value="one">

diff --git a/test/e2e/app-dir/next-form/default/app/forms/submitter-value/input-type-image/page.tsx b/test/e2e/app-dir/next-form/default/app/forms/submitter-value/input-type-image/page.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import Form from 'next/form'
+
+function textImg(text: string) {
+  return `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'><text y='.9em' font-size='16'>${text}</text></svg>`
+}
+
+export default function Page() {
+  return (
+    <Form action="/search" id="search-form">
+      <input
+        id="submit-btn-one"
+        type="image"
+        src={textImg('1️⃣')}
+        alt="1"
+        name="buttonOne"
+      />
+      <input
+        id="submit-btn-two"
+        type="image"
+        src={textImg('2️⃣')}
+        alt="2"
+        name="buttonTwo"
+      />
+    </Form>
+  )
+}
diff --git a/test/e2e/app-dir/next-form/default/app/forms/submitter-value/input-type-submit/page.tsx b/test/e2e/app-dir/next-form/default/app/forms/submitter-value/input-type-submit/page.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react'
+import Form from 'next/form'
+
+export default function Page() {
+  return (
+    <Form action="/search" id="search-form">
+      <input id="submit-btn-one" type="submit" name="query" value="one" />
+      <input id="submit-btn-two" type="submit" name="query" value="two" />
+    </Form>
+  )
+}
diff --git a/test/e2e/app-dir/next-form/default/next-form.test.ts b/test/e2e/app-dir/next-form/default/next-form.test.ts
@@ -56,28 +56,73 @@ describe.each(['app', 'pages'])('%s dir - form', (type) => {
     expect(await navigationTracker.didMpaNavigate()).toBe(false)
   })
 
-  it('should include the value of the submitter in search params', async () => {
-    const session = await next.browser(pathPrefix + '/forms/submitter-value')
-    const navigationTracker = await trackMpaNavs(session)
+  describe('should include the value of the submitter in search params', () => {
+    it.each([
+      {
+        name: '<button type="submit>',
+        path: '/forms/submitter-value/button-type-submit',
+      },
+      {
+        name: '<input type="submit">',
+        path: '/forms/submitter-value/input-type-submit',
+      },
+    ])('$name', async ({ path }) => {
+      const session = await next.browser(pathPrefix + path)
+      const navigationTracker = await trackMpaNavs(session)
 
-    const submitButtonOne = await session.elementById('submit-btn-one')
-    await submitButtonOne.click()
-    {
-      const result = await session.waitForElementByCss('#search-results').text()
-      expect(result).toMatch(/query: "one"/)
-    }
+      const submitButtonOne = await session.elementById('submit-btn-one')
+      await submitButtonOne.click()
+      {
+        const result = await session
+          .waitForElementByCss('#search-results')
+          .text()
+        expect(result).toMatch(/query: "one"/)
+      }
 
-    expect(await navigationTracker.didMpaNavigate()).toBe(false)
+      expect(await navigationTracker.didMpaNavigate()).toBe(false)
 
-    await session.back()
+      await session.back()
 
-    const submitButtonTwo = await session.elementById('submit-btn-two')
-    await submitButtonTwo.click()
+      const submitButtonTwo = await session.elementById('submit-btn-two')
+      await submitButtonTwo.click()
+      {
+        const result = await session
+          .waitForElementByCss('#search-results')
+          .text()
+        expect(result).toMatch(/query: "two"/)
+      }
+    })
 
-    {
-      const result = await session.waitForElementByCss('#search-results').text()
-      expect(result).toMatch(/query: "two"/)
-    }
+    test('<input type="image>', async () => {
+      const session = await next.browser(
+        pathPrefix + '/forms/submitter-value/input-type-image'
+      )
+      const navigationTracker = await trackMpaNavs(session)
+
+      const submitButtonOne = await session.elementById('submit-btn-one')
+      await submitButtonOne.click()
+      await session.waitForElementByCss('#search-results')
+
+      // input type image sends `{name}.x` and `{name}.y` specifying the relative coordinates of the click
+      // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image#using_the_x_and_y_data_points
+      expect(new URL(await session.url()).search).toMatch(
+        /\?buttonOne\.x=\d+&buttonOne\.y=\d+/
+      )
+
+      expect(await navigationTracker.didMpaNavigate()).toBe(false)
+
+      await session.back()
+
+      const submitButtonTwo = await session.elementById('submit-btn-two')
+      await submitButtonTwo.click()
+      await session.waitForElementByCss('#search-results')
+
+      // input type image sends `{name}.x` and `{name}.y` specifying the relative coordinates of the click
+      // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image#using_the_x_and_y_data_points
+      expect(new URL(await session.url()).search).toMatch(
+        /\?buttonTwo\.x=\d+&buttonTwo\.y=\d+/
+      )
+    })
   })
 
   // `<form action={someFunction}>` is only supported in React 19.x

diff --git a/...pages-dir/forms/submitter-value/index.tsx → ...mitter-value/button-type-submit/index.tsx b/...pages-dir/forms/submitter-value/index.tsx → ...mitter-value/button-type-submit/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import Form from 'next/form'
 
-export default function Home() {
+export default function Page() {
   return (
     <Form action="/pages-dir/search" id="search-form">
       <button id="submit-btn-one" type="submit" name="query" value="one">

diff --git a/...pp-dir/next-form/default/pages/pages-dir/forms/submitter-value/input-type-image/index.tsx b/...pp-dir/next-form/default/pages/pages-dir/forms/submitter-value/input-type-image/index.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import Form from 'next/form'
+
+function textImg(text: string) {
+  return `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'><text y='.9em' font-size='16'>${text}</text></svg>`
+}
+
+export default function Page() {
+  return (
+    <Form action="/pages-dir/search" id="search-form">
+      <input
+        id="submit-btn-one"
+        type="image"
+        src={textImg('1️⃣')}
+        alt="1"
+        name="buttonOne"
+      />
+      <input
+        id="submit-btn-two"
+        type="image"
+        src={textImg('2️⃣')}
+        alt="2"
+        name="buttonTwo"
+      />
+    </Form>
+  )
+}
diff --git a/...p-dir/next-form/default/pages/pages-dir/forms/submitter-value/input-type-submit/index.tsx b/...p-dir/next-form/default/pages/pages-dir/forms/submitter-value/input-type-submit/index.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react'
+import Form from 'next/form'
+
+export default function Page() {
+  return (
+    <Form action="/pages-dir/search" id="search-form">
+      <input id="submit-btn-one" type="submit" name="query" value="one" />
+      <input id="submit-btn-two" type="submit" name="query" value="two" />
+    </Form>
+  )
+}