feat: use spark form within drawer+dialog

adevinta · Nov 26, 2024 · a6d8968 · a6d8968
1 parent 1097309
commit a6d8968
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 36 deletions.
diff --git a/e2e/form/index.spec.tsx b/e2e/form/index.spec.tsx
@@ -2,46 +2,81 @@ import { expect, test } from '@playwright/test'
 
 import { BASE_URL } from '../constant'
 
-test('spark form with various fields', async ({ page }) => {
-  await page.goto(`${BASE_URL}/spark-form-with-various-fields`)
+const implementations = [
+  {
+    dialog: 'spark-form-within-dialog',
+  },
+  {
+    drawer: 'spark-form-within-drawer',
+  },
+]
 
-  const dropdown = page.getByRole('combobox', { name: 'position' })
-  const dropdownMulti = page.getByRole('combobox', { name: 'hobbies' })
+test.describe('Spark form components', () => {
+  implementations.forEach(implem => {
+    test(`Spark form within ${Object.keys(implem)[0]}`, async ({ page }) => {
+      await page.goto(`${BASE_URL}/${Object.values(implem)[0]}`)
 
-  // Dropdown
-  await test.step('should toggle menu', async () => {
-    await dropdown.click()
-    await expect(page.getByRole('option')).toHaveCount(5)
+      const dropdown = page.getByRole('combobox', { name: 'position' })
+      const dropdownMulti = page.getByRole('combobox', { name: 'hobbies' })
 
-    await dropdown.blur()
-    await expect(page.getByRole('option')).toHaveCount(0)
-  })
+      // Dropdown
+      await test.step('should toggle menu', async () => {
+        await dropdown.click()
+        await expect(page.getByRole('option')).toHaveCount(5)
+
+        await dropdown.blur()
+        await expect(page.getByRole('option')).toHaveCount(0)
+      })
+
+      await test.step('should update values from options', async () => {
+        // Simple Dropdown selection
+        await dropdown.click()
+        await page.getByRole('option', { name: 'Engineering Manager' }).click()
+
+        await expect(page.getByRole('option')).toHaveCount(0)
+        await expect(dropdown).toHaveText('Engineering Manager')
+
+        // Multiple Dropdown selection
+        await dropdownMulti.click()
+        await expect(page.getByRole('option')).toHaveCount(4)
+
+        /**
+         * There is an issue on Downshift, that makes onMouseMove and onClick events triggered
+         * in the same frame, leading to inaccurate values.
+         * So we need to use this workaround here (delay).
+         *
+         * See https://github.com/downshift-js/downshift/pull/1571#issuecomment-2079395469
+         */
+        await page.getByRole('option', { name: 'Cooking' }).click({ delay: 1 })
+        await expect(dropdownMulti).toHaveText('Cooking')
+
+        await page.getByRole('option', { name: 'Sport' }).click({ delay: 1 })
+
+        await expect(page.getByRole('option')).toHaveCount(4)
+        await expect(dropdownMulti).toHaveText('Cooking, +1')
+      })
+
+      await test.step('should update values from options using keyboard', async () => {
+        // Simple Dropdown selection
+        await expect(dropdown).toHaveText('Engineering Manager')
 
-  await test.step('should update values from options', async () => {
-    // Simple Dropdown selection
-    await dropdown.click()
-    await page.getByRole('option', { name: 'Engineering Manager' }).click()
+        await dropdown.press('ArrowDown')
+        await expect(page.getByRole('option')).toHaveCount(5)
 
-    await expect(page.getByRole('option')).toHaveCount(0)
-    await expect(dropdown).toHaveText('Engineering Manager')
+        await dropdown.press('ArrowDown')
+        await dropdown.press('Enter')
 
-    // Multiple Dropdown selection
-    await dropdownMulti.click()
-    await expect(page.getByRole('option')).toHaveCount(4)
-    await expect(dropdownMulti).toHaveText('What are your hobbies?')
+        await expect(dropdown).toHaveText('Product Manager')
 
-    /**
-     * There is an issue on Downshift, that makes onMouseMove and onClick events triggered
-     * in the same frame, leading to inaccurate values.
-     * So we need to use this workaround here.
-     *
-     * See https://github.com/downshift-js/downshift/pull/1571#issuecomment-2079395469
-     */
-    await page.getByRole('option', { name: 'Cooking' }).click({ delay: 1 })
-    await page.getByRole('option', { name: 'Sport' }).click({ delay: 1 })
+        // Multiple Dropdown selection
+        await expect(dropdownMulti).toHaveText('Cooking, +1')
 
-    await expect(dropdownMulti).toHaveText('Cooking, +1')
+        await dropdownMulti.press('Space')
+        await expect(page.getByRole('option')).toHaveCount(4)
 
-    await expect(page.getByRole('option')).toHaveCount(4)
+        await page.getByRole('option', { name: 'Sport' }).press('Space')
+        await expect(dropdownMulti).toHaveText('Cooking')
+      })
+    })
   })
 })
diff --git a/e2e/form/index.tsx b/e2e/form/index.tsx
@@ -1,11 +1,13 @@
 import { Button } from '@spark-ui/button'
+import { Dialog } from '@spark-ui/dialog'
+import { Drawer } from '@spark-ui/drawer'
 import React from 'react'
 
 import { DropdownField as PositionField } from './fields/DropdownField'
 import { DropdownMultipleField as HobbiesField } from './fields/DropdownMultipleField'
 import { InputField as NameField } from './fields/InputField'
 
-export const SparkForm = () => {
+const SparkForm = () => {
   return (
     <form style={{ width: 400 }} className="m-lg mx-auto flex flex-col gap-xl">
       <NameField defaultValue="" />
@@ -20,3 +22,47 @@ export const SparkForm = () => {
     </form>
   )
 }
+
+export const DialogForm = () => (
+  <Dialog defaultOpen>
+    <Dialog.Trigger asChild>
+      <Button>Open dialog form</Button>
+    </Dialog.Trigger>
+
+    <Dialog.Portal>
+      <Dialog.Overlay />
+
+      <Dialog.Content>
+        <Dialog.Header>
+          <Dialog.Title>Dialog form</Dialog.Title>
+        </Dialog.Header>
+
+        <SparkForm />
+
+        <Dialog.CloseButton aria-label="Close dialog" />
+      </Dialog.Content>
+    </Dialog.Portal>
+  </Dialog>
+)
+
+export const DrawerForm = () => (
+  <Drawer defaultOpen>
+    <Drawer.Trigger asChild>
+      <Button>Open drawer form</Button>
+    </Drawer.Trigger>
+
+    <Drawer.Portal>
+      <Drawer.Overlay />
+
+      <Drawer.Content>
+        <Drawer.Header>
+          <Drawer.Title>Drawer form</Drawer.Title>
+        </Drawer.Header>
+
+        <SparkForm />
+
+        <Drawer.CloseButton aria-label="Close drawer" />
+      </Drawer.Content>
+    </Drawer.Portal>
+  </Drawer>
+)
diff --git a/e2e/main.tsx b/e2e/main.tsx
@@ -8,7 +8,7 @@ import { a11yRoutes } from './a11y/routes'
 import { ComboboxWithinDialog } from './combobox-within-dialog'
 import { DropdownWithAdjacentButtons } from './dropdown-with-adjacent-buttons'
 import { DropdownWithinDialog } from './dropdown-within-dialog'
-import { SparkForm } from './form'
+import { DialogForm, DrawerForm } from './form'
 
 const router = createBrowserRouter([
   ...a11yRoutes,
@@ -25,8 +25,12 @@ const router = createBrowserRouter([
     element: <DropdownWithAdjacentButtons />,
   },
   {
-    path: 'spark-form-with-various-fields',
-    element: <SparkForm />,
+    path: 'spark-form-within-dialog',
+    element: <DialogForm />,
+  },
+  {
+    path: 'spark-form-within-drawer',
+    element: <DrawerForm />,
   },
 ])