test: Refactor the usePosition test

Signed-off-by: Arthur Andrade <arthurfelandrade@gmail.com>
vtex · Mar 31, 2022 · 511453e · 511453e
1 parent ca6b822
commit 511453e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/packages/ui/src/molecules/Dropdown/Dropdown.test.tsx b/packages/ui/src/molecules/Dropdown/Dropdown.test.tsx
@@ -40,8 +40,8 @@ describe('Dropdown', () => {
   it('Should render DropdownMenu in correct position', () => {
     const { getByText, getByTestId } = render(
       <>
-        <div style={{ height: 200, width: 200 }}>Large element</div>
         <SimpleDropdown />
+        <div style={{ height: 2000, width: 200 }}>Large element</div>
       </>
     )
 
@@ -55,10 +55,15 @@ describe('Dropdown', () => {
 
     const buttonRect = dropdownButton?.getBoundingClientRect()
 
-    const topLevel = buttonRect?.top ?? 0
-    const topOffset = buttonRect?.height ?? 0
-    const topPosition = topLevel + topOffset
-    const leftPosition = buttonRect?.left ?? 0
+    fireEvent.scroll(window, { target: { scrollY: 300 } })
+
+    const topLevel: number = buttonRect?.top ?? 0
+    const topOffset: number = buttonRect?.height ?? 0
+    const topPosition =
+      topLevel + topOffset + document.documentElement.scrollTop
+
+    const leftLevel = buttonRect?.left ?? 0
+    const leftPosition = leftLevel + document.documentElement.scrollLeft
 
     const topMenuPosition = dropdownMenu.style.top
     const leftMenuPosition = dropdownMenu.style.left

diff --git a/packages/ui/src/molecules/Dropdown/hooks/useDropdownPosition.ts b/packages/ui/src/molecules/Dropdown/hooks/useDropdownPosition.ts
@@ -12,6 +12,8 @@ export const useDropdownPosition = (): DropdownPosition => {
   const buttonRect = dropdownButtonRef?.current?.getBoundingClientRect()
   const topLevel: number = buttonRect?.top ?? 0
   const topOffset: number = buttonRect?.height ?? 0
+
+  // The scroll properties fix the position of DropdownMenu when the scroll is activated.
   const topPosition = topLevel + topOffset + document.documentElement.scrollTop
   const leftLevel = buttonRect?.left ?? 0
   const leftPosition = leftLevel + document.documentElement.scrollLeft