From 59350b92eef1b6064e5fc4638e4d3cc88bba45b8 Mon Sep 17 00:00:00 2001
From: Nora Krantz <nkrantz@twilio.com>
Date: Tue, 4 Oct 2022 17:09:56 -0400
Subject: [PATCH] chore(utils): remove useMergeRef and add tests for
 useWindowSize

---
 .../__tests__/useWindowSize.test.tsx          | 39 ++++++++++++++
 .../paste-utils/src/hooks/useMergeRefs.ts     | 51 -------------------
 2 files changed, 39 insertions(+), 51 deletions(-)
 create mode 100644 packages/paste-utils/__tests__/useWindowSize.test.tsx
 delete mode 100644 packages/paste-utils/src/hooks/useMergeRefs.ts

diff --git a/packages/paste-utils/__tests__/useWindowSize.test.tsx b/packages/paste-utils/__tests__/useWindowSize.test.tsx
new file mode 100644
index 0000000000..8356e3fe98
--- /dev/null
+++ b/packages/paste-utils/__tests__/useWindowSize.test.tsx
@@ -0,0 +1,39 @@
+import * as React from 'React';
+import {renderHook, act} from '@testing-library/react-hooks';
+// import {render, screen} from '@testing-library/react';
+import {useWindowSize} from '../src/hooks/useWindowSize';
+import {Theme} from '@twilio-paste/theme';
+
+const resizeTo = (w: number, h: number): void => {
+  Object.defineProperty(document.documentElement, 'clientWidth', {
+    value: w,
+    configurable: true,
+  });
+  Object.defineProperty(document.documentElement, 'clientHeight', {
+    value: h,
+    configurable: true,
+  });
+  // (window.innerWidth as number) = w;
+  // (window.innerHeight as number) = h;
+  const resizeEvent = new Event('resize', {composed: true});
+  window.dispatchEvent(resizeEvent);
+};
+
+const wrapper = ({children}): React.ReactElement => <Theme.Provider theme="default">{children}</Theme.Provider>;
+
+const renderWindowSize = (): any => renderHook(() => useWindowSize(), {wrapper});
+
+describe('useWindowSize', () => {
+  // jest.useFakeTimers();
+  beforeEach(() => {
+    resizeTo(150, 150);
+    // jest.advanceTimersByTime(100);
+  });
+
+  it('should get the correct width and height', () => {
+    const data = renderWindowSize();
+    console.log(data.result.current);
+    expect(data.result.current.width).toEqual(0);
+    expect(data.result.current.height).toEqual(0);
+  });
+});
diff --git a/packages/paste-utils/src/hooks/useMergeRefs.ts b/packages/paste-utils/src/hooks/useMergeRefs.ts
deleted file mode 100644
index 2bfe7ca8f9..0000000000
--- a/packages/paste-utils/src/hooks/useMergeRefs.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-/* Credit to Chakra-UI
- * https://github.com/chakra-ui/chakra-ui/blob/main/packages/hooks/src/use-merge-refs.ts
- */
-import * as React from 'react';
-
-type ReactRef<T> = React.Ref<T> | React.MutableRefObject<T>;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function assignRef<T = any>(ref: ReactRef<T> | undefined, value: T): void {
-  if (ref == null) return;
-
-  if (typeof ref === 'function') {
-    ref(value);
-    return;
-  }
-
-  try {
-    /* eslint-disable no-param-reassign */
-    // @ts-expect-error - `ref` is a MutableRefObject
-    ref.current = value;
-    /* eslint-enable no-param-reassign */
-    // eslint-disable-next-line unicorn/prefer-optional-catch-binding
-  } catch (error) {
-    throw new Error(`Cannot assign value '${value}' to ref '${ref}'`);
-  }
-}
-
-/**
- * React hook that merges react refs into a single memoized function
- *
- * @example
- * import React from "react";
- * import { useMergeRefs } from `@twilio-paste/utils`;
- *
- * const Component = React.forwardRef((props, ref) => {
- *   const internalRef = React.useRef();
- *   return <div {...props} ref={useMergeRefs(internalRef, ref)} />;
- * });
- */
-export function useMergeRefs<T>(...refs: (ReactRef<T> | undefined)[]): ReactRef<T> {
-  return React.useMemo(() => {
-    if (refs.every((ref) => ref == null)) {
-      return null;
-    }
-    return (node: T) => {
-      refs.forEach((ref) => {
-        if (ref) assignRef(ref, node);
-      });
-    };
-  }, refs);
-}