feat: add support for testing threshold values (#417)

This expands the `test-utils` to support defining a `threshold` value when checking for `isIntersecting`. Before you could only give a `boolean`.

This should allow you test more complex `threshold` based scenarios.

Author: thebuilder

README.md

@@ -153,7 +153,7 @@ argument for the hooks.
 | **delay** 🧪           | number             | undefined | false    | A number indicating the minimum delay in milliseconds between notifications from this observer for a given target. This must be set to at least `100` if `trackVisibility` is `true`.                                                                                                       |
 | **skip**               | boolean            | false     | false    | Skip creating the IntersectionObserver. You can use this to enable and disable the observer as needed. If `skip` is set while `inView`, the current state will still be kept.                                                                                                               |
 | **triggerOnce**        | boolean            | false     | false    | Only trigger the observer once.                                                                                                                                                                                                                                                             |
-| **initialInView**      | boolean            | false     | false    | Set the initial value of the `inView` boolean. This can be used if you expect the element to be in the viewport to start with, and you want to trigger something when it leaves.                                                                                                        |
+| **initialInView**      | boolean            | false     | false    | Set the initial value of the `inView` boolean. This can be used if you expect the element to be in the viewport to start with, and you want to trigger something when it leaves.                                                                                                            |
 
 > ⚠️ When passing an array to `threshold`, store the array in a constant to
 > avoid the component re-rendering too often. For example:
@@ -266,17 +266,18 @@ You can read more about this on these links:
 In order to write meaningful tests, the `IntersectionObserver` needs to be
 mocked. If you are writing your tests in Jest, you can use the included
 `test-utils.js`. It mocks the `IntersectionObserver`, and includes a few methods
-to assist with faking the `inView` state.
+to assist with faking the `inView` state. When setting the `isIntersecting`
+value you can pass either a `boolean` value or a threshold between `0` and `1`.
 
 ### `test-utils.js`
 
 Import the methods from `react-intersection-observer/test-utils`.
 
-**`mockAllIsIntersecting(isIntersecting:boolean)`**  
-Set the `isIntersecting` on all current IntersectionObserver instances.
+**`mockAllIsIntersecting(isIntersecting:boolean | number)`**  
+Set `isIntersecting` on all current IntersectionObserver instances.
 
-**`mockIsIntersecting(element:Element, isIntersecting:boolean)`**  
-Set the `isIntersecting` for the IntersectionObserver of a specific element.
+**`mockIsIntersecting(element:Element, isIntersecting:boolean | number)`**  
+Set `isIntersecting` for the IntersectionObserver of a specific element.
 
 **`intersectionMockInstance(element:Element): IntersectionObserver`**  
 Call the `intersectionMockInstance` method with an element, to get the (mocked)
@@ -287,7 +288,7 @@ Call the `intersectionMockInstance` method with an element, to get the (mocked)
 
 ```js
 import React from 'react';
-import { render } from 'react-testing-library';
+import { screen, render } from 'react-testing-library';
 import { useInView } from 'react-intersection-observer';
 import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils';
 
@@ -297,11 +298,22 @@ const HookComponent = ({ options }) => {
 };
 
 test('should create a hook inView', () => {
-  const { getByText } = render(<HookComponent />);
+  render(<HookComponent />);
 
   // This causes all (existing) IntersectionObservers to be set as intersecting
   mockAllIsIntersecting(true);
-  getByText('true');
+  screen.getByText('true');
+});
+
+test('should create a hook inView with threshold', () => {
+  render(<HookComponent options={{ threshold: 0.3 }} />);
+
+  mockAllIsIntersecting(0.1);
+  screen.getByText('false');
+
+  // Once the threshold has been passed, it will trigger inView.
+  mockAllIsIntersecting(0.3);
+  screen.getByText('true');
 });
 ```
 

src/__tests__/hooks.test.tsx

@@ -67,6 +67,16 @@ test('should create a hook inView', () => {
   getByText('true');
 });
 
+test('should mock thresholds', () => {
+  render(<HookComponent options={{ threshold: [0.5, 1] }} />);
+  mockAllIsIntersecting(0.2);
+  screen.getByText('false');
+  mockAllIsIntersecting(0.5);
+  screen.getByText('true');
+  mockAllIsIntersecting(1);
+  screen.getByText('true');
+});
+
 test('should create a hook with initialInView', () => {
   const { getByText } = render(
     <HookComponent options={{ initialInView: true }} />,

src/test-utils.ts

@@ -52,15 +52,28 @@ afterEach(() => {
 
 function triggerIntersection(
   elements: Element[],
-  isIntersecting: boolean,
+  trigger: boolean | number,
   observer: IntersectionObserver,
   item: Item,
 ) {
   const entries: IntersectionObserverEntry[] = [];
+
+  const isIntersecting =
+    typeof trigger === 'number'
+      ? observer.thresholds.some((threshold) => trigger >= threshold)
+      : trigger;
+
+  const ratio =
+    typeof trigger === 'number'
+      ? observer.thresholds.find((threshold) => trigger >= threshold) ?? 0
+      : trigger
+      ? 1
+      : 0;
+
   elements.forEach((element) => {
     entries.push({
       boundingClientRect: element.getBoundingClientRect(),
-      intersectionRatio: isIntersecting ? 1 : 0,
+      intersectionRatio: ratio,
       intersectionRect: isIntersecting
         ? element.getBoundingClientRect()
         : {
@@ -88,9 +101,9 @@ function triggerIntersection(
 
 /**
  * Set the `isIntersecting` on all current IntersectionObserver instances
- * @param isIntersecting {boolean}
+ * @param isIntersecting {boolean | number}
  */
-export function mockAllIsIntersecting(isIntersecting: boolean) {
+export function mockAllIsIntersecting(isIntersecting: boolean | number) {
   for (let [observer, item] of observers) {
     triggerIntersection(
       Array.from(item.elements),
@@ -103,10 +116,14 @@ export function mockAllIsIntersecting(isIntersecting: boolean) {
 
 /**
  * Set the `isIntersecting` for the IntersectionObserver of a specific element.
+ *
  * @param element {Element}
- * @param isIntersecting {boolean}
+ * @param isIntersecting {boolean | number}
  */
-export function mockIsIntersecting(element: Element, isIntersecting: boolean) {
+export function mockIsIntersecting(
+  element: Element,
+  isIntersecting: boolean | number,
+) {
   const observer = intersectionMockInstance(element);
   if (!observer) {
     throw new Error(