@onewelcome/react-lib-components 0.2.1 → 0.2.4

package/src/hooks/usePosition.test.tsx

@@ -1,10 +1,10 @@
-import React, { Fragment, useRef } from 'react';
-import { render } from '@testing-library/react';
-import { ConfigObject, usePosition } from './usePosition';
-import userEvent from '@testing-library/user-event';
+import React, { Fragment, useRef } from "react";
+import { render } from "@testing-library/react";
+import { ConfigObject, usePosition } from "./usePosition";
+import userEvent from "@testing-library/user-event";
 
 interface ConfigObjectWithoutRefs
-  extends Omit<ConfigObject, 'relativeElement' | 'elementToBePositioned'> {}
+  extends Omit<ConfigObject, "relativeElement" | "elementToBePositioned"> {}
 
 const createUsePositionComponent = (
   params?: (defaultParams: ConfigObjectWithoutRefs) => ConfigObjectWithoutRefs
@@ -16,9 +16,9 @@ const createUsePositionComponent = (
     const defaultParams: ConfigObject = {
       relativeElement: relativeElement,
       elementToBePositioned: elementToBePositioned,
-      placement: { horizontal: 'left', vertical: 'top' },
-      transformOrigin: { horizontal: 'left', vertical: 'top' },
-      offset: { top: 0, left: 0, right: 0, bottom: 0 },
+      placement: { horizontal: "left", vertical: "top" },
+      transformOrigin: { horizontal: "left", vertical: "top" },
+      offset: { top: 0, left: 0, right: 0, bottom: 0 }
     };
     let parameters: ConfigObject = defaultParams;
 
@@ -46,8 +46,8 @@ const createUsePositionComponent = (
   };
 
   const queries = render(<Component />);
-  const button = queries.getByTestId('button');
-  const popover = queries.getByTestId('popover');
+  const button = queries.getByTestId("button");
+  const popover = queries.getByTestId("popover");
 
   /** Let the hacking begin */
   button.getBoundingClientRect = () => ({
@@ -59,23 +59,23 @@ const createUsePositionComponent = (
     left: 250,
     right: 750,
     bottom: 750,
-    toJSON: () => jest.fn(),
+    toJSON: () => jest.fn()
   });
 
-  Object.defineProperty(window, 'innerHeight', {
+  Object.defineProperty(window, "innerHeight", {
     configurable: true,
-    value: 1000,
+    value: 1000
   });
-  Object.defineProperty(window, 'innerWidth', {
+  Object.defineProperty(window, "innerWidth", {
     configurable: true,
-    value: 1000,
+    value: 1000
   });
 
-  Object.defineProperty(popover, 'offsetHeight', { configurable: true, value: 100 });
-  Object.defineProperty(popover, 'offsetWidth', { configurable: true, value: 100 });
+  Object.defineProperty(popover, "offsetHeight", { configurable: true, value: 100 });
+  Object.defineProperty(popover, "offsetWidth", { configurable: true, value: 100 });
 
-  Object.defineProperty(document.body, 'innerHeight', { configurable: true, value: 1000 });
-  Object.defineProperty(document.body, 'innerWidth', { configurable: true, value: 1000 });
+  Object.defineProperty(document.body, "innerHeight", { configurable: true, value: 1000 });
+  Object.defineProperty(document.body, "innerWidth", { configurable: true, value: 1000 });
   /** Make it stop pls */
 
   userEvent.click(button);
@@ -83,412 +83,412 @@ const createUsePositionComponent = (
   return { ...queries, button, popover };
 };
 
-describe('returns proper values for default transformOrigin', () => {
-  it('returns the correct values for left top placement', () => {
+describe("returns proper values for default transformOrigin", () => {
+  it("returns the correct values for left top placement", () => {
     const { popover } = createUsePositionComponent();
 
-    expect(popover).toHaveStyle({ top: '250px', left: '250px' });
+    expect(popover).toHaveStyle({ top: "250px", left: "250px" });
   });
 
-  it('returns the correct values for left bottom placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for left bottom placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'left', vertical: 'bottom' },
+      placement: { horizontal: "left", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ top: '750px', left: '250px' });
+    expect(popover).toHaveStyle({ top: "750px", left: "250px" });
   });
 
-  it('returns the correct values for left center placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for left center placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'left', vertical: 'center' },
+      placement: { horizontal: "left", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: '500px', left: '250px' });
+    expect(popover).toHaveStyle({ top: "500px", left: "250px" });
   });
 
-  it('returns the correct values for center top placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for center top placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'center', vertical: 'top' },
+      placement: { horizontal: "center", vertical: "top" }
     }));
 
-    expect(popover).toHaveStyle({ top: '250px', left: '500px' });
+    expect(popover).toHaveStyle({ top: "250px", left: "500px" });
   });
 
-  it('returns the correct values for center center placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for center center placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'center', vertical: 'center' },
+      placement: { horizontal: "center", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: '500px', left: '500px' });
+    expect(popover).toHaveStyle({ top: "500px", left: "500px" });
   });
 
-  it('returns the correct values for center bottom placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for center bottom placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'center', vertical: 'bottom' },
+      placement: { horizontal: "center", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ top: '750px', left: '500px' });
+    expect(popover).toHaveStyle({ top: "750px", left: "500px" });
   });
 
-  it('returns the correct values for right top placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for right top placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'right', vertical: 'top' },
+      placement: { horizontal: "right", vertical: "top" }
     }));
 
-    expect(popover).toHaveStyle({ top: '250px', left: '750px' });
+    expect(popover).toHaveStyle({ top: "250px", left: "750px" });
   });
 
-  it('returns the correct values for right center placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for right center placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'right', vertical: 'center' },
+      placement: { horizontal: "right", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: '500px', left: '750px' });
+    expect(popover).toHaveStyle({ top: "500px", left: "750px" });
   });
 
-  it('returns the correct values for right bottom placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for right bottom placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'right', vertical: 'bottom' },
+      placement: { horizontal: "right", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ top: '750px', left: '750px' });
+    expect(popover).toHaveStyle({ top: "750px", left: "750px" });
   });
 });
 
-describe('it returns proper values for centered transformOrigin', () => {
-  it('returns the correct values for left top placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+describe("it returns proper values for centered transformOrigin", () => {
+  it("returns the correct values for left top placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      transformOrigin: { horizontal: 'center', vertical: 'center' },
+      transformOrigin: { horizontal: "center", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: '200px', left: '200px' });
+    expect(popover).toHaveStyle({ top: "200px", left: "200px" });
   });
 
-  it('returns the correct values for left bottom placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for left bottom placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'left', vertical: 'bottom' },
-      transformOrigin: { horizontal: 'center', vertical: 'center' },
+      placement: { horizontal: "left", vertical: "bottom" },
+      transformOrigin: { horizontal: "center", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: '700px', left: '200px' });
+    expect(popover).toHaveStyle({ top: "700px", left: "200px" });
   });
 
-  it('returns the correct values for left center placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for left center placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'left', vertical: 'center' },
-      transformOrigin: { horizontal: 'center', vertical: 'center' },
+      placement: { horizontal: "left", vertical: "center" },
+      transformOrigin: { horizontal: "center", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: '450px', left: '200px' });
+    expect(popover).toHaveStyle({ top: "450px", left: "200px" });
   });
 
-  it('returns the correct values for center top placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for center top placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'center', vertical: 'top' },
-      transformOrigin: { horizontal: 'center', vertical: 'center' },
+      placement: { horizontal: "center", vertical: "top" },
+      transformOrigin: { horizontal: "center", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: '200px', left: '450px' });
+    expect(popover).toHaveStyle({ top: "200px", left: "450px" });
   });
 
-  it('returns the correct values for center center placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for center center placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'center', vertical: 'center' },
-      transformOrigin: { horizontal: 'center', vertical: 'center' },
+      placement: { horizontal: "center", vertical: "center" },
+      transformOrigin: { horizontal: "center", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: '450px', left: '450px' });
+    expect(popover).toHaveStyle({ top: "450px", left: "450px" });
   });
 
-  it('returns the correct values for center bottom placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for center bottom placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'center', vertical: 'bottom' },
-      transformOrigin: { horizontal: 'center', vertical: 'center' },
+      placement: { horizontal: "center", vertical: "bottom" },
+      transformOrigin: { horizontal: "center", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: '700px', left: '450px' });
+    expect(popover).toHaveStyle({ top: "700px", left: "450px" });
   });
 
-  it('returns the correct values for right top placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for right top placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'right', vertical: 'top' },
-      transformOrigin: { horizontal: 'center', vertical: 'center' },
+      placement: { horizontal: "right", vertical: "top" },
+      transformOrigin: { horizontal: "center", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: '200px', left: '700px' });
+    expect(popover).toHaveStyle({ top: "200px", left: "700px" });
   });
 
-  it('returns the correct values for right center placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for right center placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'right', vertical: 'center' },
-      transformOrigin: { horizontal: 'center', vertical: 'center' },
+      placement: { horizontal: "right", vertical: "center" },
+      transformOrigin: { horizontal: "center", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: '450px', left: '700px' });
+    expect(popover).toHaveStyle({ top: "450px", left: "700px" });
   });
 
-  it('returns the correct values for right bottom placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for right bottom placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'right', vertical: 'bottom' },
-      transformOrigin: { horizontal: 'center', vertical: 'center' },
+      placement: { horizontal: "right", vertical: "bottom" },
+      transformOrigin: { horizontal: "center", vertical: "center" }
     }));
 
-    expect(popover).toHaveStyle({ top: '700px', left: '700px' });
+    expect(popover).toHaveStyle({ top: "700px", left: "700px" });
   });
 });
 
-describe('it returns proper values for right top transformOrigin', () => {
-  it('returns the correct values for left top placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+describe("it returns proper values for right top transformOrigin", () => {
+  it("returns the correct values for left top placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      transformOrigin: { horizontal: 'right', vertical: 'top' },
+      transformOrigin: { horizontal: "right", vertical: "top" }
     }));
 
-    expect(popover).toHaveStyle({ top: '250px', right: '750px' });
+    expect(popover).toHaveStyle({ top: "250px", right: "750px" });
   });
 
-  it('returns the correct values for left bottom placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for left bottom placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'left', vertical: 'bottom' },
-      transformOrigin: { horizontal: 'right', vertical: 'top' },
+      placement: { horizontal: "left", vertical: "bottom" },
+      transformOrigin: { horizontal: "right", vertical: "top" }
     }));
 
-    expect(popover).toHaveStyle({ top: '750px', right: '750px' });
+    expect(popover).toHaveStyle({ top: "750px", right: "750px" });
   });
 
-  it('returns the correct values for left center placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for left center placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'left', vertical: 'center' },
-      transformOrigin: { horizontal: 'right', vertical: 'top' },
+      placement: { horizontal: "left", vertical: "center" },
+      transformOrigin: { horizontal: "right", vertical: "top" }
     }));
 
-    expect(popover).toHaveStyle({ top: '500px', right: '750px' });
+    expect(popover).toHaveStyle({ top: "500px", right: "750px" });
   });
 
-  it('returns the correct values for center top placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for center top placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'center', vertical: 'top' },
-      transformOrigin: { horizontal: 'right', vertical: 'top' },
+      placement: { horizontal: "center", vertical: "top" },
+      transformOrigin: { horizontal: "right", vertical: "top" }
     }));
 
-    expect(popover).toHaveStyle({ top: '250px', right: '500px' });
+    expect(popover).toHaveStyle({ top: "250px", right: "500px" });
   });
 
-  it('returns the correct values for center center placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for center center placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'center', vertical: 'center' },
-      transformOrigin: { horizontal: 'right', vertical: 'top' },
+      placement: { horizontal: "center", vertical: "center" },
+      transformOrigin: { horizontal: "right", vertical: "top" }
     }));
 
-    expect(popover).toHaveStyle({ top: '500px', right: '500px' });
+    expect(popover).toHaveStyle({ top: "500px", right: "500px" });
   });
 
-  it('returns the correct values for center bottom placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for center bottom placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'center', vertical: 'bottom' },
-      transformOrigin: { horizontal: 'right', vertical: 'top' },
+      placement: { horizontal: "center", vertical: "bottom" },
+      transformOrigin: { horizontal: "right", vertical: "top" }
     }));
 
-    expect(popover).toHaveStyle({ top: '750px', right: '500px' });
+    expect(popover).toHaveStyle({ top: "750px", right: "500px" });
   });
 
-  it('returns the correct values for right top placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for right top placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'right', vertical: 'top' },
-      transformOrigin: { horizontal: 'right', vertical: 'top' },
+      placement: { horizontal: "right", vertical: "top" },
+      transformOrigin: { horizontal: "right", vertical: "top" }
     }));
 
-    expect(popover).toHaveStyle({ top: '250px', right: '250px' });
+    expect(popover).toHaveStyle({ top: "250px", right: "250px" });
   });
 
-  it('returns the correct values for right center placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for right center placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'right', vertical: 'center' },
-      transformOrigin: { horizontal: 'right', vertical: 'top' },
+      placement: { horizontal: "right", vertical: "center" },
+      transformOrigin: { horizontal: "right", vertical: "top" }
     }));
 
-    expect(popover).toHaveStyle({ top: '500px', right: '250px' });
+    expect(popover).toHaveStyle({ top: "500px", right: "250px" });
   });
 
-  it('returns the correct values for right bottom placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for right bottom placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'right', vertical: 'bottom' },
-      transformOrigin: { horizontal: 'right', vertical: 'top' },
+      placement: { horizontal: "right", vertical: "bottom" },
+      transformOrigin: { horizontal: "right", vertical: "top" }
     }));
 
-    expect(popover).toHaveStyle({ top: '750px', right: '250px' });
+    expect(popover).toHaveStyle({ top: "750px", right: "250px" });
   });
 });
 
-describe('it returns proper values for left bottom transformOrigin', () => {
-  it('returns the correct values for left top placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+describe("it returns proper values for left bottom transformOrigin", () => {
+  it("returns the correct values for left top placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      transformOrigin: { horizontal: 'left', vertical: 'bottom' },
+      transformOrigin: { horizontal: "left", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ bottom: '750px', left: '250px' });
+    expect(popover).toHaveStyle({ bottom: "750px", left: "250px" });
   });
 
-  it('returns the correct values for left bottom placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for left bottom placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'left', vertical: 'bottom' },
-      transformOrigin: { horizontal: 'left', vertical: 'bottom' },
+      placement: { horizontal: "left", vertical: "bottom" },
+      transformOrigin: { horizontal: "left", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ bottom: '250px', left: '250px' });
+    expect(popover).toHaveStyle({ bottom: "250px", left: "250px" });
   });
 
-  it('returns the correct values for left center placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for left center placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'left', vertical: 'center' },
-      transformOrigin: { horizontal: 'left', vertical: 'bottom' },
+      placement: { horizontal: "left", vertical: "center" },
+      transformOrigin: { horizontal: "left", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ bottom: '500px', left: '250px' });
+    expect(popover).toHaveStyle({ bottom: "500px", left: "250px" });
   });
 
-  it('returns the correct values for center top placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for center top placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'center', vertical: 'top' },
-      transformOrigin: { horizontal: 'left', vertical: 'bottom' },
+      placement: { horizontal: "center", vertical: "top" },
+      transformOrigin: { horizontal: "left", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ bottom: '750px', left: '500px' });
+    expect(popover).toHaveStyle({ bottom: "750px", left: "500px" });
   });
 
-  it('returns the correct values for center center placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for center center placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'center', vertical: 'center' },
-      transformOrigin: { horizontal: 'left', vertical: 'bottom' },
+      placement: { horizontal: "center", vertical: "center" },
+      transformOrigin: { horizontal: "left", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ bottom: '500px', left: '500px' });
+    expect(popover).toHaveStyle({ bottom: "500px", left: "500px" });
   });
 
-  it('returns the correct values for center bottom placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for center bottom placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'center', vertical: 'bottom' },
-      transformOrigin: { horizontal: 'left', vertical: 'bottom' },
+      placement: { horizontal: "center", vertical: "bottom" },
+      transformOrigin: { horizontal: "left", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ bottom: '250px', left: '500px' });
+    expect(popover).toHaveStyle({ bottom: "250px", left: "500px" });
   });
 
-  it('returns the correct values for right top placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for right top placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'right', vertical: 'top' },
-      transformOrigin: { horizontal: 'left', vertical: 'bottom' },
+      placement: { horizontal: "right", vertical: "top" },
+      transformOrigin: { horizontal: "left", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ bottom: '750px', left: '750px' });
+    expect(popover).toHaveStyle({ bottom: "750px", left: "750px" });
   });
 
-  it('returns the correct values for right center placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for right center placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'right', vertical: 'center' },
-      transformOrigin: { horizontal: 'left', vertical: 'bottom' },
+      placement: { horizontal: "right", vertical: "center" },
+      transformOrigin: { horizontal: "left", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ bottom: '500px', left: '750px' });
+    expect(popover).toHaveStyle({ bottom: "500px", left: "750px" });
   });
 
-  it('returns the correct values for right bottom placement', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("returns the correct values for right bottom placement", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      placement: { horizontal: 'right', vertical: 'bottom' },
-      transformOrigin: { horizontal: 'left', vertical: 'bottom' },
+      placement: { horizontal: "right", vertical: "bottom" },
+      transformOrigin: { horizontal: "left", vertical: "bottom" }
     }));
 
-    expect(popover).toHaveStyle({ bottom: '250px', left: '750px' });
+    expect(popover).toHaveStyle({ bottom: "250px", left: "750px" });
   });
 });
 
-describe('setting offsets work in different direction', () => {
-  it('has proper top offset', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+describe("setting offsets work in different direction", () => {
+  it("has proper top offset", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      offset: { top: 50, right: 0, bottom: 0, left: 0 },
+      offset: { top: 50, right: 0, bottom: 0, left: 0 }
     }));
 
-    expect(popover).toHaveStyle({ left: '250px', top: '300px' });
+    expect(popover).toHaveStyle({ left: "250px", top: "300px" });
   });
 
-  it('has proper right offset', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("has proper right offset", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      offset: { top: 0, right: 50, bottom: 0, left: 0 },
+      offset: { top: 0, right: 50, bottom: 0, left: 0 }
     }));
 
-    expect(popover).toHaveStyle({ left: '200px', top: '250px' });
+    expect(popover).toHaveStyle({ left: "200px", top: "250px" });
   });
 
-  it('has proper bottom offset', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("has proper bottom offset", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      offset: { top: 0, right: 0, bottom: 50, left: 0 },
+      offset: { top: 0, right: 0, bottom: 50, left: 0 }
     }));
 
-    expect(popover).toHaveStyle({ left: '250px', top: '200px' });
+    expect(popover).toHaveStyle({ left: "250px", top: "200px" });
   });
 
-  it('has proper left offset', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("has proper left offset", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      offset: { top: 0, right: 0, bottom: 0, left: 50 },
+      offset: { top: 0, right: 0, bottom: 0, left: 50 }
     }));
 
-    expect(popover).toHaveStyle({ left: '300px', top: '250px' });
+    expect(popover).toHaveStyle({ left: "300px", top: "250px" });
   });
 
-  it('can handle multiple values', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("can handle multiple values", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      offset: { top: 50, right: 25, bottom: 25, left: 50 },
+      offset: { top: 50, right: 25, bottom: 25, left: 50 }
     }));
 
-    expect(popover).toHaveStyle({ left: '275px', top: '275px' });
+    expect(popover).toHaveStyle({ left: "275px", top: "275px" });
   });
 
-  it('works with transformOrigin from bottom right as well', () => {
-    const { popover } = createUsePositionComponent((defaultParams) => ({
+  it("works with transformOrigin from bottom right as well", () => {
+    const { popover } = createUsePositionComponent(defaultParams => ({
       ...defaultParams,
-      transformOrigin: { horizontal: 'right', vertical: 'bottom' },
-      offset: { top: 50, right: 25, bottom: 25, left: 50 },
+      transformOrigin: { horizontal: "right", vertical: "bottom" },
+      offset: { top: 50, right: 25, bottom: 25, left: 50 }
     }));
 
-    expect(popover).toHaveStyle({ right: '725px', bottom: '725px' });
+    expect(popover).toHaveStyle({ right: "725px", bottom: "725px" });
   });
 });