fix(open-amdocs#7): Upgraded to React 17, including fix to Scrollable…

… and effect cleanup timing

package.json

@@ -42,13 +42,13 @@
     "@rollup/plugin-babel": "5.2.1",
     "@rollup/plugin-commonjs": "16.0.0",
     "@rollup/plugin-node-resolve": "10.0.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.2.2",
     "babel-plugin-module-resolver": "4.0.0",
     "babel-plugin-rewire": "1.2.0",
     "chai": "4.2.0",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.5",
     "eslint": "7.15.0",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-notice": "0.9.10",

src/hooks/useClickOutside/useClickOutside.test.js

@@ -7,31 +7,34 @@ import {mount, shallow} from 'enzyme';
 import OverrideContext from './useClickOutside.context';
 import {useClickOutside, ClickOutside, ClickOutsideOverride} from './useClickOutside';
 
-const Elem = () => {
-    let test = 1234;
-    const ref = sinon.spy();
-    useClickOutside(ref, () => test = 4321);
-    return <div>{test}</div>;
+const Elem = callback => {
+    useClickOutside(callback);
+    return <div/>;
 };
 
 describe('useClickOutside()', () => {
     it('Should add an event listener to the document', () => {
         document.addEventListener = sinon.spy();
         document.removeEventListener = sinon.spy();
-
         let elem;
-        act(() => {
-            elem = mount(<Elem/>);
-        });
-        expect(elem.text()).to.eql('1234');
+        act(() => {elem = mount(<Elem/>)});
         expect(document.addEventListener.calledTwice).to.eql(true);
         expect(document.addEventListener.calledWith('mousedown')).to.eql(true);
         expect(document.addEventListener.calledWith('mouseup')).to.eql(true);
-        elem.unmount();
+        act(() => {elem.unmount()});
+        expect(document.removeEventListener.calledTwice).to.eql(true);
         expect(document.removeEventListener.calledWith('mousedown')).to.eql(true);
         expect(document.removeEventListener.calledWith('mouseup')).to.eql(true);
     });
 
+    it('Should not trigger the callback on click inside', () => {
+        const callback = sinon.spy();
+        const elem = mount(<Elem callback={callback}/>);
+        expect(elem.find('div'));
+        elem.simulate('click');
+        expect(callback.callCount).to.eql(0);
+    });
+
     it('<ClickOutside/>', () => {
         const wrapper = shallow(<ClickOutside><div/></ClickOutside>);
         expect(() => shallow(<ClickOutside/>)).to.throw();

src/hooks/useDebounce/useDebounce.js

@@ -24,7 +24,10 @@ export default (callback, wait) => {
     useEffect(() => {cb.current = callback}, [callback]);
 
     // Cleanup pending timeouts when unmounting.
-    useEffect(() => () => clearTimeout(timeout.current), []);
+    useEffect(() => {
+        const _timeout = timeout.current;
+        return () => clearTimeout(_timeout);
+    }, []);
 
     return useCallback((...args) => {
         clearTimeout(timeout.current);

src/hooks/useDebounce/useDebounce.test.js

@@ -18,6 +18,18 @@ const Elem = () => {
 };
 
 describe('useDebounce()', () => {
+    let spy;
+    beforeEach(() => {
+        spy = sinon.spy(global, 'clearTimeout')
+    });
+    afterEach(() => {
+        spy.resetHistory();
+        spy.restore();
+    });
+    after(() => {
+        spy.restore();
+    });
+
     it('Should delay calls', async () => {
         let wrapper = null;
         act(() => {wrapper = mount(<Elem/>)});
@@ -40,10 +52,8 @@ describe('useDebounce()', () => {
     });
     it('Should cleanup', async () => {
         let wrapper = null;
-        const spy = sinon.spy(global, 'clearTimeout');
         act(() => {wrapper = mount(<Elem/>)});
-        wrapper.unmount();
+        act(() => {wrapper.unmount()});
         expect(spy.callCount).to.eql(1);
-        spy.restore();
     });
 });

src/hooks/useDimensions/useDimensions.test.js

@@ -11,7 +11,7 @@ const Elem = () => {
     );
 };
 
-describe('useDebounce()', () => {
+describe('useDimensions()', () => {
     it('Should return the previous value', async () => {
         let wrapper = null;
         let observed = 0, disconnected = 0;
@@ -24,7 +24,7 @@ describe('useDebounce()', () => {
         expect(observed).to.eql(1);
         expect(disconnected).to.eql(0);
 
-        wrapper.unmount();
+        act(() => {wrapper.unmount()});
         expect(observed).to.eql(1);
         expect(disconnected).to.eql(1);
     });

src/hooks/useThrottle/useThrottle.js

@@ -20,8 +20,11 @@ export default (callback, threshold) => {
     const wait = useRef(false);
     const timeout = useRef(-1);
 
-    useEffect(() => () => {
-        clearTimeout(timeout.current);
+    useEffect(() => {
+        const _timeout = timeout.current;
+        return () => {
+            clearTimeout(_timeout);
+        }
     }, []); // No need for deps here since 'timeout' is mutated
 
     return useCallback((...args) => {