fix(browse): no action and method for a form that JavaScript handles

README.md

@@ -333,7 +333,7 @@ happy-dom is not a dependency of Hono CLI. Install it in the project; without it
 }
 ```
 
-`console` has the page's console messages and its uncaught errors. An action that finds nothing stops the run with `"ok": false` and an `error`.
+A form that JavaScript handles (e.g. a React form action) has only `fields`, with no `action` and `method`: it never submits itself. A field without a `name` or label is keyed by its placeholder, `aria-label`, or `id`. `console` has the page's console messages and its uncaught errors. An action that finds nothing stops the run with `"ok": false` and an `error`.
 
 ### `snapshot`
 

src/commands/browse/browser.test.ts

@@ -30,6 +30,13 @@ const app = () => {
     const { title } = await c.req.parseBody()
     return c.redirect(`/?added=${title}`, 303)
   })
+  app.get('/react-form', (c) =>
+    c.html(
+      page(
+        `<form action="javascript:throw new Error('React form unexpectedly submitted.')"><input aria-label="Search" /></form>`
+      )
+    )
+  )
   app.get('/module', (c) =>
     c.html(page('<p id="out">waiting</p><script type="module" src="/m.js"></script>'))
   )
@@ -80,6 +87,11 @@ describe('browse', () => {
     expect(after.text).toContain('milk')
   })
 
+  it('reports no action and method for a form that JavaScript handles', async () => {
+    const result = await browse(happyDom, app(), '/react-form', [])
+    expect(result.forms).toEqual([{ fields: { Search: '' } }])
+  })
+
   it('stops at an action that finds nothing', async () => {
     const result = await browse(happyDom, app(), '/', [
       { type: 'fill', target: 'nothing', value: 'x' },

src/commands/browse/browser.ts

@@ -19,7 +19,8 @@ export interface BrowseResult {
   url: string
   title: string
   text: string
-  forms: { action: string; method: string; fields: Record<string, string> }[]
+  /** No action and method when JavaScript handles the submit */
+  forms: { action?: string; method?: string; fields: Record<string, string> }[]
   console: { type: string; text: string }[]
   actions: { action: string; ok: boolean; error?: string }[]
   note: string
@@ -354,9 +355,13 @@ export const browse = async (
           fields[namesOf(el)[0] ?? el.tagName.toLowerCase()] = field.value
         }
         const action = form.getAttribute('action') ?? ''
+        // React puts this placeholder when a function handles the submit:
+        // the form never sends itself, so it has no method to report
+        if (action.startsWith('javascript:')) {
+          return { fields }
+        }
         return {
-          // React puts a placeholder here when a function handles the submit
-          action: action.startsWith('javascript:') ? '' : action,
+          action,
           method: (form.getAttribute('method') ?? 'get').toUpperCase(),
           fields,
         }