test: update useAnchoredPosition test and snapshot

Author: pksjce

packages/react/src/hooks/__tests__/__snapshots__/useAnchoredPosition.test.tsx.snap

@@ -0,0 +1,10 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`should should return a position 1`] = `
+{
+  "anchorAlign": "center",
+  "anchorSide": "outside-bottom",
+  "left": 8.550800000000002,
+  "top": 24.5,
+}
+`;

packages/react/src/hooks/__tests__/useAnchoredPosition.test.tsx

@@ -3,17 +3,34 @@ import {it, expect, vi} from 'vitest'
 import React from 'react'
 import {useAnchoredPosition} from '../../hooks/useAnchoredPosition'
 
-const Component = ({callback}: {callback: (hookReturnValue: ReturnType<typeof useAnchoredPosition>) => void}) => {
+const Component = ({
+  callback,
+}: {
+  callback: ({position}: {position: ReturnType<typeof useAnchoredPosition>['position']}) => void
+}) => {
   const floatingElementRef = React.useRef<HTMLDivElement>(null)
-  const anchorElementRef = React.useRef<HTMLDivElement>(null)
-  callback(useAnchoredPosition({floatingElementRef, anchorElementRef}))
+  const anchorElementRef = React.useRef<HTMLButtonElement>(null)
+  const {position} = useAnchoredPosition({floatingElementRef, anchorElementRef})
+  callback({position})
+  const floatStyle: React.CSSProperties = {
+    position: 'absolute',
+    height: '50px',
+    width: '50px',
+    ...(position
+      ? {
+          top: position.top,
+          left: position.left,
+        }
+      : {top: '20px', left: '20px'}),
+  }
   return (
     <div style={{position: 'absolute'}}>
-      <div
-        style={{position: 'absolute', top: '20px', left: '20px', height: '50px', width: '50px'}}
-        ref={floatingElementRef}
-      />
-      <div ref={anchorElementRef} />
+      <div style={floatStyle} ref={floatingElementRef}>
+        Floating element
+      </div>
+      <button ref={anchorElementRef} type="button">
+        Click me
+      </button>
     </div>
   )
 }
@@ -23,14 +40,6 @@ it('should should return a position', async () => {
   render(<Component callback={cb} />)
 
   await waitFor(() => {
-    expect(cb).toHaveBeenCalledTimes(2)
-    expect(cb.mock.calls[1][0]['position']).toMatchInlineSnapshot(`
-    {
-      "anchorAlign": "start",
-      "anchorSide": "outside-bottom",
-      "left": 0,
-      "top": 4,
-    }
-  `)
+    expect(cb.mock.calls[1][0].position).toMatchSnapshot()
   })
 })