test: add tests for useBreakpoint and useWindowSize hooks

Author: thomasthiebaud

package-lock.json

@@ -33,6 +33,7 @@
     "@semantic-release/release-notes-generator": "7.1.4",
     "@types/jest": "24.0.13",
     "@types/react": "16.8.17",
+    "@types/react-dom": "16.8.4",
     "@typescript-eslint/eslint-plugin": "1.9.0",
     "@typescript-eslint/parser": "1.9.0",
     "commitlint": "7.6.1",
@@ -45,6 +46,7 @@
     "jest": "24.8.0",
     "prettier": "1.17.1",
     "react": "16.8.6",
+    "react-dom": "16.8.6",
     "semantic-release": "15.13.12",
     "ts-jest": "24.0.2",
     "typescript": "3.4.5"

package.json

@@ -1,3 +1,3 @@
-export { useBreakpoint, useBreakpoints } from './useBreakpoint';
-export { useComponentSize } from './useComponentSize';
-export { useWindowSize } from './useWindowSize';
+export * from './useBreakpoint';
+export * from './useComponentSize';
+export * from './useWindowSize';

src/index.ts

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+
+import { useBreakpoint, useBreakpoints } from '../src';
+
+describe('useBreakpoint', () => {
+    let container: Element;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        document.body.removeChild(container);
+    });
+
+    it('should switch component based on a single breakpoint', () => {
+        const Component = () => {
+            const isSmall = useBreakpoint(500);
+
+            if (isSmall) {
+                return <p id="small">Small</p>
+            }
+
+            return <p id="big">Big</p>
+        }
+        
+        act(() => {
+            ReactDOM.render(<Component />, container);
+        });
+
+        let big = container.querySelector('#big');
+        let small = container.querySelector('#small');
+        expect(big && big.textContent).toEqual('Big');
+        expect(small).toBeNull();
+
+        Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 400 })
+
+        act(() => {
+            window.dispatchEvent(new Event('resize'))
+        })
+
+        big = container.querySelector('#big');
+        small = container.querySelector('#small');
+        expect(small && small.textContent).toEqual('Small');
+        expect(big).toBeNull();
+    })
+
+    it('should switch component based on multiple breakpoints', () => {
+        const Component = () => {
+            const [isSmall, isMedium] = useBreakpoints([500, 700]);
+
+            if (isSmall) {
+                return <p id="small">Small</p>
+            }
+
+            if (isMedium) {
+                return <p id="medium">Medium</p>
+            }
+
+            return <p id="big">Big</p>
+        }
+        
+        act(() => {
+            ReactDOM.render(<Component />, container);
+        });
+
+        Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 400 })
+        act(() => {
+            window.dispatchEvent(new Event('resize'))
+        })
+
+        let big = container.querySelector('#big');
+        let medium = container.querySelector('#medium');
+        let small = container.querySelector('#small');
+        expect(medium).toBeNull();
+        expect(big).toBeNull();
+        expect(small && small.textContent).toEqual('Small');
+
+        Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 600 })
+        act(() => {
+            window.dispatchEvent(new Event('resize'))
+        })
+
+        big = container.querySelector('#big');
+        medium = container.querySelector('#medium');
+        small = container.querySelector('#small');
+        expect(small).toBeNull();
+        expect(big).toBeNull();
+        expect(medium && medium.textContent).toEqual('Medium');
+
+        Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 800 })
+        act(() => {
+            window.dispatchEvent(new Event('resize'))
+        })
+
+        big = container.querySelector('#big');
+        medium = container.querySelector('#medium');
+        small = container.querySelector('#small');
+        expect(small).toBeNull();
+        expect(medium).toBeNull();
+        expect(big && big.textContent).toEqual('Big');
+    })
+});

tests/useBreakpoint.spec.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+
+import { useWindowSize } from '../src';
+
+describe('useWindowSize', () => {
+    let container: Element;
+
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        document.body.removeChild(container);
+    });
+
+    it('should return the window size', () => {
+        const Component = () => {
+            const { width, height } = useWindowSize();
+
+            return <><p id="height">{height}</p><p id="width">{width}</p></>
+        }
+        
+        act(() => {
+            ReactDOM.render(<Component />, container);
+        });
+
+        const height = container.querySelector('#height');
+        const width = container.querySelector('#width');
+
+        expect(height && height.textContent).toEqual('768');
+        expect(width && width.textContent).toEqual('1024');
+
+        Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 500 })
+        Object.defineProperty(window, 'innerHeight', { writable: true, configurable: true, value: 200 })
+
+        act(() => {
+            window.dispatchEvent(new Event('resize'))
+        })
+
+        expect(height && height.textContent).toEqual('200');
+        expect(width && width.textContent).toEqual('500');
+    })
+});