add hasher tests & refactor, update README example

Author: rob2d

README.md

@@ -100,26 +100,18 @@ If passed an `options.hasher` function, this will be used to calculate a hash th
 import useViewportSizes from 'use-viewport-sizes';
 
 function getBreakpointHash({ vpW, vpH }) {
-    if(vpW < 640) {
-        return 'md';
-    }
-    if(vpW < 320) {
-        return 'sm';
-    }
-    else if(vpW < 240) {
-        return 'xs';
-    }
-    else {
-        return 'lg';
-    }
+    if(vpW <= 240) { return 'xs' }
+    if(vpW <= 320) { return 'sm' }
+    else if(vpW <= 640) { return 'md' }
+    else return 'lg';
 }
 
 function MyBreakpointBehaviorComponent() {
-    const [vpW, vpH, bp] = useViewportSizes({ hasher: getBreakpointHash });
+    const [vpW, vpH] = useViewportSizes({ hasher: getBreakpointHash });
 
-    // do-something-with-breakpoints in render
-    // and add new update for vpW, vpH in this component's
-    // subtree only when a named breakpoint changes
+    // do-something in render and add new update for vpW, 
+    // vpH in this component's subtree only when a breakpoint
+    // hash updates
 }
 ```
 

src/index.test.js

@@ -3,21 +3,21 @@ import React from 'react';
 import { render, screen, act, fireEvent }  from '@testing-library/react';
 import useViewportSizes from './index';
 
-function BasicUseCase() {
-    const [vpW, vpH] = useViewportSizes();
+function DimensionView({ options }) {
+    const [dimension] = useViewportSizes(options);
     return (
         <div>
-            <div data-testid='vpw'>{vpW}</div>
-            <div data-testid='vph'>{vpH}</div>
+            <div data-testid='dimension'>{dimension}</div>
         </div>
     );
 }
 
-function WithDimensionArgument({ options }) {
-    const [dimension] = useViewportSizes(options);
+function DimensionsView({ options }) {
+    const [vpW, vpH] = useViewportSizes(options);
     return (
         <div>
-            <div data-testid='dimension'>{dimension}</div>
+            <div data-testid='vpw'>{vpW}</div>
+            <div data-testid='vph'>{vpH}</div>
         </div>
     );
 }
@@ -32,17 +32,20 @@ function setViewportDimensions(width, height) {
 }
 
 describe('useViewportSizes', () => {
+    afterEach(() => {
+        jest.useRealTimers();
+    });
     describe('calling with no options', () => {
         test('renders viewport width/height when run with no arguments', async () => {
             setViewportDimensions(640, 480);
-            render(<BasicUseCase />);
+            render(<DimensionsView />);
             expect(screen.getByTestId('vpw').textContent).toEqual('640');
             expect(screen.getByTestId('vph').textContent).toEqual('480');
         });
 
         test('updates viewport width/height read when the window is resized', async () => {
             setViewportDimensions(640, 480);
-            render(<BasicUseCase />);
+            render(<DimensionsView />);
             expect(screen.getByTestId('vpw').textContent).toEqual('640');
             expect(screen.getByTestId('vph').textContent).toEqual('480');
 
@@ -55,7 +58,7 @@ describe('useViewportSizes', () => {
     describe('calling with one dimension option passed', () => {
         test('renders width of viewport when passed dimension: `w`, and updates this', async () => {
             setViewportDimensions(640, 480);
-            render(<WithDimensionArgument options={{ dimension: 'w' }} />);
+            render(<DimensionView options={{ dimension: 'w' }} />);
             expect(screen.getByTestId('dimension').textContent).toEqual('640');
 
             setViewportDimensions(44, 80);
@@ -64,11 +67,55 @@ describe('useViewportSizes', () => {
 
         test('renders width of viewport when passed dimension: `h`, and updates this', async () => {
             setViewportDimensions(640, 480);
-            render(<WithDimensionArgument options={{ dimension: 'h' }} />);
+            render(<DimensionView options={{ dimension: 'h' }} />);
             expect(screen.getByTestId('dimension').textContent).toEqual('480');
 
             setViewportDimensions(44, 80);
             expect(screen.getByTestId('dimension').textContent).toEqual('80');
         });
     });
+
+    describe('other scenarios', () => {
+        test('works with a custom hasher to only update when a breakpoint changes', async () => {
+            jest.useFakeTimers();
+            setViewportDimensions(640, 480);
+            const options = { 
+                hasher: ({ vpW }) => {
+                    if(vpW <= 240) { return 'xs' }
+                    if(vpW <= 320) { return 'sm' }
+                    else if(vpW <= 640) { return 'md' }
+                    else return 'lg';
+                } 
+            };
+
+            render(<DimensionsView options={options} />);
+            expect(screen.getByTestId('vpw').textContent).toEqual('640');
+
+            setViewportDimensions(639, 480);
+            jest.runAllTimers();
+            expect(screen.getByTestId('vpw').textContent).toEqual('640');
+
+            setViewportDimensions(645, 480);
+            jest.runAllTimers();
+
+            expect(screen.getByTestId('vpw').textContent).toEqual('645');
+            
+            setViewportDimensions(240, 480);
+            jest.runAllTimers();
+            expect(screen.getByTestId('vpw').textContent).toEqual('240');
+
+            setViewportDimensions(238, 480);
+            jest.runAllTimers();
+            expect(screen.getByTestId('vpw').textContent).toEqual('240');
+
+            setViewportDimensions(300, 480);
+            jest.runAllTimers();
+            expect(screen.getByTestId('vpw').textContent).toEqual('300');
+
+            
+            setViewportDimensions(500, 200);
+            jest.runAllTimers();
+            expect(screen.getByTestId('vpw').textContent).toEqual('500');
+        });
+    });
 });