Merge pull request #33 from trurl-master/update-io

IO: Refactor mock, add multi-node methods

Author: trurl-master

README.md

@@ -89,16 +89,24 @@ Example, using `React Testing Library`:
 ```jsx
 import { mockIntersectionObserver } from 'jsdom-testing-mocks';
 
-const intersectionObserver = mockIntersectionObserver();
+const io = mockIntersectionObserver();
 
+/*
+Assuming html:
+<div data-testid="container">
+  <img src="..." alt="alt text" />
+</div>
+
+And an IntersectionObserver, observing the container
+*/
 it('loads the image when the component is in the viewport', () => {
   const { container } = render(<TestComponent />);
 
   expect(screen.queryByAltText('alt text')).not.toBeInTheDocument();
 
   // when the component's observed node is in the viewport - show the image
   act(() => {
-    intersectionObserver.enterNode(container.firstChild);
+    io.enterNode(screen.getByTestId('container'));
   });
 
   expect(screen.getByAltText('alt text')).toBeInTheDocument();
@@ -109,17 +117,40 @@ it('loads the image when the component is in the viewport', () => {
 
 `mockIntersectionObserver` returns an object, that has several useful methods:
 
-#### .enterNode(node, desc) and .leaveNode(node, desc)
+#### .enterNode(node, desc)
+
+Triggers all IntersectionObservers observing the `node`, with `isIntersected` set to `true` and `intersectionRatio` set to `1`. Other `IntersectionObserverEntry` params can be passed as `desc` argument, you can override any parameter except `isIntersected`
+
+#### .leaveNode(node, desc)
+
+Triggers all IntersectionObservers observing the `node`, with `isIntersected` set to `false` and `intersectionRatio` set to `0`. Other `IntersectionObserverEntry` params can be passed as `desc` argument, you can override any parameter except `isIntersected`
+
+#### .enterNodes(nodeDescriptions)
+
+Triggers all IntersectionObservers observing the nodes in `nodeDescriptions` with multiple nodes entering at once. Each IntersectionObserver callback will receive only the nodes it's observing:
+
+```js
+io.enterNodes([
+  // you can pass multiple nodes each with its own state
+  { node: screen.getByText('First Node'), desc: { intersectionRatio: 0.5 } },
+  // description is optional:
+  { node: screen.getByText('Second Node') },
+  // or you can use a shorthand:
+  screen.getByText('Third Node'),
+]);
+```
+
+#### .leaveNodes(nodeDescriptions)
+
+Triggers all IntersectionObservers observing the nodes in `nodeDescriptions` with multiple nodes leaving at once. Each IntersectionObserver callback will receive only the nodes it's observing.
+
+#### .triggerNodes(nodeDescriptions)
 
-Triggers the intersection observer callback with only one node
-and `isIntersected` set to `true` (for `enterNode`) or `false` (for `leaveNode`).
-Other `IntersectionObserverEntry` params can be passed as `desc` argument
+Triggers all IntersectionObservers observing the nodes in `nodeDescriptions` with multiple nodes at once with custom descriptions (`isIntersected` is not enforced). Each IntersectionObserver callback will receive only the nodes it's observing
 
 #### .enterAll(desc) and .leaveAll(desc)
 
-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
+Triggers all IntersectionObservers for each of the observed nodes
 
 ## Mock ResizeObserver
 

example/App.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { BrowserRouter, Switch, Route } from 'react-router-dom';
 
 import Nav from './Nav';
 
@@ -10,24 +10,19 @@ import CustomUseMedia from './viewport/custom-use-media/CustomUseMedia';
 
 export default function App() {
   return (
-    <Router>
+    <BrowserRouter>
       <div>
         <Nav />
         <Switch>
-          <Route path="/intersection-observer">
-            <GlobalObserver />
-          </Route>
-          <Route path="/viewport">
-            <CustomUseMedia />
-          </Route>
-          <Route path="/resize-observer/do-i-fit">
-            <MeasureParent />
-          </Route>
-          <Route path="/resize-observer/print-my-size">
-            <PrintMySize />
-          </Route>
+          <Route path="/intersection-observer" component={GlobalObserver} />
+          <Route path="/viewport" component={CustomUseMedia} />
+          <Route path="/resize-observer/do-i-fit" component={MeasureParent} />
+          <Route
+            path="/resize-observer/print-my-size"
+            component={PrintMySize}
+          />
         </Switch>
       </div>
-    </Router>
+    </BrowserRouter>
   );
 }

example/intersection-observer/global-observer/GlobalObserver.tsx

@@ -26,7 +26,7 @@ export const Section = ({
   );
 };
 
-const App = (): ReactElement => {
+const App = () => {
   const sections = 10;
 
   return (

src/mocks/DOMRect.ts

@@ -0,0 +1,38 @@
+export class MockedDOMRectReadOnly implements DOMRectReadOnly {
+  readonly bottom: number = 0;
+  readonly height: number = 0;
+  readonly left: number = 0;
+  readonly right: number = 0;
+  readonly top: number = 0;
+  readonly width: number = 0;
+  readonly x: number = 0;
+  readonly y: number = 0;
+
+  constructor(x = 0, y = 0, width = 0, height = 0) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+  }
+
+  toJSON() {
+    return {
+      bottom: this.bottom,
+      height: this.height,
+      left: this.left,
+      right: this.right,
+      top: this.top,
+      width: this.width,
+      x: this.x,
+      y: this.y,
+    };
+  }
+}
+
+if (typeof DOMRectReadOnly === 'undefined') {
+  Object.defineProperty(window, 'DOMRectReadOnly', {
+    writable: true,
+    configurable: true,
+    value: MockedDOMRectReadOnly,
+  });
+}