test: add tests for gutter

packages/DropdownMenu/src/index.tsx

@@ -12,6 +12,7 @@ import * as S from './styles'
 export interface DropdownMenuOptions extends Omit<Ariakit.MenuProps, 'gutter'> {
   /** add custom props from styled system on DropdownMenu inner */
   innerProps?: WuiProps
+  /** default 4px (space.xs) */
   gutter?: keyof WuiTheme['space'] | number
 }
 

packages/DropdownMenu/tests/index.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { renderHook } from '@testing-library/react-hooks'
+import userEvent from '@testing-library/user-event'
 
 import { render } from '../../../utils/tests'
 import { DropdownMenu, useDropdownMenu } from '../src'
@@ -22,4 +23,37 @@ describe('<DropdownMenu>', () => {
 
     expect(dropdown).toHaveTextContent(content)
   })
+
+  test.each([
+    ['md', 12],
+    ['xxl', 32],
+    [10, 10],
+    ['not a space', 0],
+  ] as const)('should render the gutter correctly - %s (%i)', async (gutter, expected) => {
+    const triggerDataTestId = 'trigger'
+    const dropdownDataTestId = 'menu'
+    const {
+      result: { current: dropdownMenu },
+    } = renderHook(() => useDropdownMenu({ open: true }))
+
+    const { getByTestId } = render(
+      <>
+        <DropdownMenu.Trigger data-testId={triggerDataTestId} store={dropdownMenu} />
+        <DropdownMenu dataTestId={dropdownDataTestId} gutter={gutter} store={dropdownMenu}>
+          {content}
+        </DropdownMenu>
+      </>
+    )
+    const trigger = getByTestId(triggerDataTestId)
+    const dropdown = getByTestId(dropdownDataTestId)
+
+    await userEvent.click(trigger)
+
+    const { transform } = getComputedStyle(dropdown.parentElement)
+    const y = parseInt(
+      transform.match(/translate3d\(\d*(?:px)?,(\d*)(?:px)?,\d*(?:px)?\)/)?.[1],
+      10
+    )
+    expect(y).toBe(expected)
+  })
 })