@byline/admin 6.2.0 → 6.3.0

package/src/forms/form-submit-isolation.test.tsx

@@ -0,0 +1,247 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { act } from 'react'
+
+import { defineAdminConfig } from '@byline/core'
+import { adminTranslations } from '@byline/i18n/admin'
+import { I18nProvider } from '@byline/i18n/react'
+import { createPortal } from 'react-dom'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { BylineFieldServicesProvider } from '../fields/field-services-context'
+import { FormRenderer } from './form-renderer'
+
+const globalWithAct = globalThis as any
+globalWithAct.IS_REACT_ACT_ENVIRONMENT = true
+
+defineAdminConfig({
+  i18n: {
+    admin: { defaultLocale: 'en', locales: ['en'] },
+    content: { defaultLocale: 'en', locales: ['en'] },
+  },
+  collections: [
+    {
+      path: 'pages',
+      labels: { singular: 'Page', plural: 'Pages' },
+      fields: [{ name: 'title', label: 'Title', type: 'text' }],
+    },
+  ],
+  slugifier: (value: string) => value.toLowerCase().trim().replace(/\s+/g, '-'),
+})
+
+const fieldServices = {
+  getCollectionDocuments: async () => ({ docs: [], total: 0 }),
+  uploadField: async () => ({}),
+} as any
+
+// Optional so submission is not blocked by validation: this file tests which
+// form a submit event belongs to, not what the form does with it.
+const fields = [{ name: 'title', label: 'Title', type: 'text' as const, optional: true }]
+
+let container: HTMLDivElement
+let root: Root
+let portalHost: HTMLDivElement
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  portalHost = document.createElement('div')
+  document.body.appendChild(portalHost)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => {
+    root.unmount()
+  })
+  container.remove()
+  portalHost.remove()
+})
+
+/**
+ * A nested form rendered through a portal: outside the parent `<form>` in the
+ * DOM, so no invalid nested-form markup arises, but still a descendant in the
+ * *React* tree — which is what React propagates synthetic events along.
+ */
+const PortalledInnerForm = ({
+  stopPropagation,
+  onInnerSubmit,
+}: {
+  stopPropagation: boolean
+  onInnerSubmit: () => void
+}) =>
+  createPortal(
+    <form
+      data-testid="inner-form"
+      onSubmit={(event) => {
+        event.preventDefault()
+        if (stopPropagation) event.stopPropagation()
+        onInnerSubmit()
+      }}
+    >
+      <input name="innerTitle" defaultValue="" />
+      <button type="submit">Save inner</button>
+    </form>,
+    portalHost
+  )
+
+const renderWithInnerForm = ({
+  parentSubmit,
+  onInnerSubmit = () => {},
+  stopPropagation = false,
+}: {
+  parentSubmit: () => Promise<void>
+  onInnerSubmit?: () => void
+  stopPropagation?: boolean
+}) => {
+  act(() => {
+    root.render(
+      <I18nProvider
+        bundle={adminTranslations({ locales: ['en'] })}
+        activeLocale="en"
+        defaultLocale="en"
+        localeDefinitions={[{ code: 'en', nativeName: 'English' }]}
+      >
+        <BylineFieldServicesProvider services={fieldServices}>
+          <FormRenderer
+            mode="create"
+            fields={fields}
+            collectionPath="pages"
+            onCancel={() => {}}
+            onSubmit={parentSubmit}
+            headerSlot={
+              <PortalledInnerForm stopPropagation={stopPropagation} onInnerSubmit={onInnerSubmit} />
+            }
+          />
+        </BylineFieldServicesProvider>
+      </I18nProvider>
+    )
+  })
+}
+
+const parentForm = () => {
+  const form = container.querySelector('form')
+  if (form == null) throw new Error('parent form not found')
+  return form
+}
+
+const innerForm = () => {
+  const form = portalHost.querySelector<HTMLFormElement>('[data-testid="inner-form"]')
+  if (form == null) throw new Error('inner form not found')
+  return form
+}
+
+const submit = async (form: HTMLFormElement) => {
+  await act(async () => {
+    form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
+  })
+}
+
+describe('submit isolation across a portal', () => {
+  /**
+   * The inner form here deliberately does **not** call `stopPropagation`, so
+   * these two cases exercise the parent's own guard. With the child-side defence
+   * in place as well, a broken parent guard would be invisible.
+   */
+  it('does not run the parent submit handler when a portalled inner form submits', async () => {
+    const parentSubmit = vi.fn(async () => {})
+    renderWithInnerForm({ parentSubmit })
+
+    await submit(innerForm())
+
+    expect(parentSubmit).not.toHaveBeenCalled()
+  })
+
+  it('still runs the inner form’s own handler', async () => {
+    const parentSubmit = vi.fn(async () => {})
+    const onInnerSubmit = vi.fn()
+    renderWithInnerForm({ parentSubmit, onInnerSubmit })
+
+    await submit(innerForm())
+
+    expect(onInnerSubmit).toHaveBeenCalledTimes(1)
+    expect(parentSubmit).not.toHaveBeenCalled()
+  })
+
+  it('still submits normally from the parent form itself', async () => {
+    const parentSubmit = vi.fn(async () => {})
+    renderWithInnerForm({ parentSubmit })
+
+    await submit(parentForm())
+
+    expect(parentSubmit).toHaveBeenCalledTimes(1)
+  })
+
+  it('leaves the parent form submitting on repeat after an inner submit', async () => {
+    const parentSubmit = vi.fn(async () => {})
+    renderWithInnerForm({ parentSubmit })
+
+    await submit(innerForm())
+    await submit(parentForm())
+    await submit(parentForm())
+
+    expect(parentSubmit).toHaveBeenCalledTimes(2)
+  })
+})
+
+/**
+ * The child-side defence, proved without the parent guard in the picture. If this
+ * were asserted against `FormRenderer`, a working parent guard would satisfy it
+ * whether or not the child stopped propagation, and the test would prove nothing
+ * about the child.
+ */
+describe('the child-side stopPropagation defence', () => {
+  const PlainParent = ({
+    onParentSubmit,
+    stopPropagation,
+  }: {
+    onParentSubmit: () => void
+    stopPropagation: boolean
+  }) => (
+    <form
+      data-testid="plain-parent"
+      onSubmit={(event) => {
+        event.preventDefault()
+        onParentSubmit()
+      }}
+    >
+      <PortalledInnerForm stopPropagation={stopPropagation} onInnerSubmit={() => {}} />
+    </form>
+  )
+
+  const renderPlain = (props: { onParentSubmit: () => void; stopPropagation: boolean }) => {
+    act(() => {
+      root.render(<PlainParent {...props} />)
+    })
+  }
+
+  it('keeps an unguarded parent handler from running when the child stops propagation', async () => {
+    const onParentSubmit = vi.fn()
+    renderPlain({ onParentSubmit, stopPropagation: true })
+
+    await submit(innerForm())
+
+    expect(onParentSubmit).not.toHaveBeenCalled()
+  })
+
+  /**
+   * The control: the same unguarded parent, with the child defence removed. It
+   * fails in exactly the way the feature is meant to prevent, which is what makes
+   * the assertion above meaningful.
+   */
+  it('runs an unguarded parent handler when the child does not stop propagation', async () => {
+    const onParentSubmit = vi.fn()
+    renderPlain({ onParentSubmit, stopPropagation: false })
+
+    await submit(innerForm())
+
+    expect(onParentSubmit).toHaveBeenCalledTimes(1)
+  })
+})