Merge pull request #23 from trurl-master/develop

Add ResizeObserver mock

Author: trurl-master

.github/workflows/main.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node: ['10.x', '12.x', '14.x']
+        node: ['12.x', '14.x']
         os: [ubuntu-latest, windows-latest, macOS-latest]
 
     steps:

README.md

@@ -80,7 +80,7 @@ describe('Desktop specific tests', () => {
 })
 ```
 
-## Mock intersection observer
+## Mock IntersectionObserver
 
 Provides a way of triggering intersection observer events
 
@@ -121,6 +121,81 @@ Triggers the intersection observer callback for all of the observed nodes
 and `isIntersected` set to `true` (for `enterAll`) or `false` (for `leaveAll`).
 Other `IntersectionObserverEntry` params can be passed as `desc` argument
 
+## Mock ResizeObserver
+
+Provides a way of triggering resize observer events. It's up to you to mock elements' sizes. If your component uses `contentRect` provided by the callback, you must mock element's `getBoundingClientRect` (for exemple using a helper function `mockElementBoundingClientRect` provided by the lib)
+
+_Currently the mock doesn't take into account multi-column layouts, so `borderBoxSize` and `contentBoxSize` will contain only one full-sized item_
+
+Example, using `React Testing Library`:
+
+```jsx
+import {
+  mockResizeObserver,
+  mockElementBoundingClientRect,
+} from 'jsdom-testing-mocks';
+
+const DivWithSize = () => {
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const observer = new ResizeObserver(entries => {
+      setSize({
+        width: entries[0].contentRect.width,
+        height: entries[0].contentRect.height,
+      });
+    });
+
+    observer.observe(ref.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <div data-testid="theDiv" ref={ref}>
+      {size.width} x {size.height}
+    </div>
+  );
+};
+
+const resizeObserver = mockResizeObserver();
+
+it('prints the size of the div', () => {
+  render(<DivWithSize />);
+
+  const theDiv = screen.getByTestId('theDiv');
+
+  expect(screen.getByText('0 x 0')).toBeInTheDocument();
+
+  mockElementBoundingClientRect(theDiv, { width: 300, height: 200 });
+
+  act(() => {
+    resizeObserver.resize(theDiv);
+  });
+
+  expect(screen.getByText('300 x 200')).toBeInTheDocument();
+
+  mockElementBoundingClientRect(theDiv, { width: 200, height: 500 });
+
+  act(() => {
+    resizeObserver.resize(theDiv);
+  });
+
+  expect(screen.getByText('200 x 500')).toBeInTheDocument();
+});
+```
+
+### API
+
+`mockResizeObserver` returns an object, that has one method:
+
+#### .resize(elements: HTMLElement | HTMLElement[])
+
+Triggers all resize observer callbacks for all observers that observe the passed elements
+
 <!-- prettier-ignore-start -->
 
 [version-badge]: https://img.shields.io/npm/v/jsdom-testing-mocks.svg?style=flat-square

example/App.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 
 import Nav from './Nav';
 
 import GlobalObserver from './intersection-observer/global-observer/GlobalObserver';
+import MeasureParent from './resize-observer/measure-parent/MeasureParent';
+import PrintMySize from './resize-observer/print-my-size/PrintMySize';
 import CustomUseMedia from './viewport/custom-use-media/CustomUseMedia';
 
 export default function App() {
@@ -18,6 +20,12 @@ export default function App() {
           <Route path="/viewport">
             <CustomUseMedia />
           </Route>
+          <Route path="/resize-observer/do-i-fit">
+            <MeasureParent />
+          </Route>
+          <Route path="/resize-observer/print-my-size">
+            <PrintMySize />
+          </Route>
         </Switch>
       </div>
     </Router>

example/Nav.tsx

@@ -13,6 +13,14 @@ const Nav = (): React.ReactElement => (
       <li style={{ marginRight: '2em' }}>
         <Link to="/intersection-observer">Intersection Observer</Link>
       </li>
+      <li style={{ marginRight: '2em' }}>
+        <Link to="/resize-observer/do-i-fit">Resize Observer: do I fit?</Link>
+      </li>
+      <li style={{ marginRight: '2em' }}>
+        <Link to="/resize-observer/print-my-size">
+          Resize Observer: print my size
+        </Link>
+      </li>
       <li>
         <Link to="/viewport">Viewport</Link>
       </li>

example/index.html

@@ -9,6 +9,6 @@
 
   <body>
     <div id="root"></div>
-    <script src="./index.tsx"></script>
+    <script src="./index.tsx" type="module"></script>
   </body>
 </html>

example/index.tsx

@@ -1,4 +1,3 @@
-import 'react-app-polyfill/ie11';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import App from './App';

example/package.json

@@ -20,7 +20,7 @@
     "@types/jest": "^26.0.21",
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.8.4",
-    "parcel": "^2.0.0-beta.2",
+    "parcel": "^2.0.1",
     "typescript": "^3.4.5"
   }
 }

example/resize-observer/measure-parent/MeasureParent.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { useRef } from 'react';
+
+import useDoIFit from './useDoIFit';
+
+const MeasureParent = () => {
+  const ref1 = useRef(null);
+  const ref2 = useRef(null);
+  const iFit1 = useDoIFit(ref1);
+  const iFit2 = useDoIFit(ref2);
+
+  return (
+    <div>
+      <div>
+        <div
+          style={{
+            width: 400,
+            height: 200,
+            backgroundColor: 'rgba(255,0,0,0.5)',
+          }}
+          data-testid="parent1"
+        >
+          <div
+            ref={ref1}
+            style={{
+              width: 200,
+              height: 100,
+              backgroundColor: 'rgba(0,0,0,0.5)',
+            }}
+            data-testid="child1"
+          />
+        </div>
+        <div data-testid="result">{iFit1 ? 'fit' : "doesn't fit"}</div>
+      </div>
+      <div>
+        <div
+          style={{
+            width: 400,
+            height: 200,
+            backgroundColor: 'rgba(255,0,0,0.5)',
+            marginTop: 20,
+          }}
+          data-testid="parent2"
+        >
+          <div
+            ref={ref2}
+            style={{
+              width: 500,
+              height: 300,
+              backgroundColor: 'rgba(0,0,0,0.5)',
+            }}
+            data-testid="child2"
+          />
+        </div>
+        <div data-testid="result">{iFit2 ? 'fit' : "doesn't fit"}</div>
+      </div>
+    </div>
+  );
+};
+
+export default MeasureParent;

example/resize-observer/measure-parent/useDoIFit.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+
+const useDoIFit = (ref: React.RefObject<HTMLElement>) => {
+  const [iFit, setIFit] = useState(false);
+
+  useEffect(() => {
+    if (!ref.current || !ref.current.parentElement) {
+      return;
+    }
+
+    const parentElement = ref.current.parentElement;
+
+    const observer = new ResizeObserver(entries => {
+      const { width, height } = entries[0].contentRect;
+      const childElement = parentElement.children[0] as HTMLElement;
+      const {
+        width: childWidth,
+        height: childHeight,
+      } = childElement.getBoundingClientRect();
+
+      setIFit(childWidth < width && childHeight < height);
+    });
+
+    observer.observe(parentElement);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return iFit;
+};
+
+export default useDoIFit;

example/resize-observer/print-my-size/PrintMySize.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { useState, useEffect, useRef } from 'react';
+
+const PrintMySize = () => {
+  const ref1 = useRef<HTMLDivElement>(null);
+  const ref2 = useRef<HTMLDivElement>(null);
+  const [sizes, setSizes] = useState<{ width: number; height: number }[]>([]);
+
+  useEffect(() => {
+    if (!ref1.current || !ref2.current) {
+      return;
+    }
+
+    const observer = new ResizeObserver(entries => {
+      setSizes(entries.map(entry => entry.contentRect));
+    });
+
+    observer.observe(ref1.current);
+    observer.observe(ref2.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <div>
+      <div
+        style={{
+          width: 400,
+          height: 200,
+          backgroundColor: 'rgba(255,0,0,0.5)',
+        }}
+        data-testid="element"
+        ref={ref1}
+      >
+        {sizes[0] && `${sizes[0].width}x${sizes[0].height}`}
+      </div>
+      <div
+        style={{
+          width: 230,
+          height: 70,
+          backgroundColor: 'rgba(255,0,0,0.5)',
+          marginTop: 20,
+        }}
+        data-testid="element"
+        ref={ref2}
+      >
+        {sizes[1] && `${sizes[1].width}x${sizes[1].height}`}
+      </div>
+    </div>
+  );
+};
+
+export default PrintMySize;