test(FloatingBox): Reuse common setup

Setup functions can be safely abstracted and reused across tests.
Royal-Navy · Dec 20, 2024 · 00fe246 · 00fe246
1 parent a093355
commit 00fe246
Showing 1 changed file with 30 additions and 58 deletions.
diff --git a/packages/react-component-library/src/primitives/FloatingBox/FloatingBox.test.tsx b/packages/react-component-library/src/primitives/FloatingBox/FloatingBox.test.tsx
@@ -6,17 +6,42 @@ import { render, screen, waitFor } from '@testing-library/react'
 import { FloatingBox } from '.'
 import { useStatefulRef } from '../../hooks/useStatefulRef'
 
-it('renders the floating box when provided with a `renderTarget` and arbitrary JSX content', () => {
+function setupOffsetHeightMock(offsetHeight: number) {
+  jest.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
+    top: 0,
+    left: 0,
+    right: 100,
+    bottom: 100,
+    width: 100,
+    height: 100,
+    x: 0,
+    y: 0,
+    toJSON() {
+      return this
+    },
+  })
+
+  Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+    value: offsetHeight,
+  })
+}
+
+function setup() {
   render(
     <FloatingBox
       isVisible
+      placement="bottom"
       renderTarget={<div>Hello, World!</div>}
       role="dialog"
       aria-modal
     >
       <pre>This is some arbitrary JSX</pre>
     </FloatingBox>
   )
+}
+
+it('renders the floating box when provided with a `renderTarget` and arbitrary JSX content', () => {
+  setup()
 
   expect(screen.getByTestId('floating-box')).toHaveAttribute('role', 'dialog')
   expect(screen.getByTestId('floating-box')).toHaveAttribute('aria-modal')
@@ -81,34 +106,8 @@ it('does not generate a new content `id` when the content changes', () => {
 it('sets the position of the floating box', async () => {
   const offsetHeight = 100
 
-  jest.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
-    top: 0,
-    left: 0,
-    right: 100,
-    bottom: 100,
-    width: 100,
-    height: 100,
-    x: 0,
-    y: 0,
-    toJSON() {
-      return this
-    },
-  })
-
-  Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
-    value: offsetHeight,
-  })
-
-  render(
-    <FloatingBox
-      isVisible
-      renderTarget={<div>Hello, World!</div>}
-      placement="bottom"
-      aria-modal
-    >
-      <pre>This is some arbitrary JSX</pre>
-    </FloatingBox>
-  )
+  setupOffsetHeightMock(offsetHeight)
+  setup()
 
   await waitFor(() => {
     expect(screen.getByTestId('floating-box')).toHaveStyle({
@@ -120,35 +119,8 @@ it('sets the position of the floating box', async () => {
 it('sets the position of the floating box when the ref is null', async () => {
   const offsetHeight = 100
 
-  jest.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
-    top: 0,
-    left: 0,
-    right: 100,
-    bottom: 100,
-    width: 100,
-    height: 100,
-    x: 0,
-    y: 0,
-    toJSON() {
-      return this
-    },
-  })
-
-  Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
-    value: offsetHeight,
-  })
-
-  render(
-    <FloatingBox
-      isVisible
-      renderTarget={<div>Hello, World!</div>}
-      placement="bottom"
-      aria-modal
-      ref={null}
-    >
-      <pre>This is some arbitrary JSX</pre>
-    </FloatingBox>
-  )
+  setupOffsetHeightMock(offsetHeight)
+  setup()
 
   await waitFor(() => {
     expect(screen.getByTestId('floating-box')).toHaveStyle({