@onewelcome/react-lib-components 1.1.0 → 1.3.0

package/src/util/helper.test.tsx

@@ -14,7 +14,10 @@
  *    limitations under the License.
  */
 
-import { generateID, filterProps } from "./helper";
+import React, { useCallback, useEffect, useState } from "react";
+import { fireEvent, waitFor } from "@testing-library/dom";
+import { generateID, filterProps, debounce, throttle } from "./helper";
+import { render } from "@testing-library/react";
 
 /* Generate an ID of 20 characters with a string woven in */
 
@@ -66,3 +69,127 @@ describe("filterprops should return the correct object", () => {
     });
   });
 });
+
+describe("debounce function", () => {
+  it("debounced the resizing of the window, it will only execute 1 time", async () => {
+    const debouncedFunction = jest.fn();
+
+    window.addEventListener("resize", debounce(debouncedFunction, 200));
+
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+
+    await waitFor(() => expect(debouncedFunction).toHaveBeenCalledTimes(1));
+  });
+
+  it("Works in a react component as well, it should only fire the exampleFunction once.", async () => {
+    const ExampleComponent = ({
+      debouncedFunction
+    }: {
+      debouncedFunction: (...args: unknown[]) => unknown;
+    }) => {
+      const [variable, setVariable] = useState(0);
+
+      useEffect(() => {
+        debouncedFunction(variable);
+      }, [variable]);
+
+      const incrementVariable = () => {
+        setVariable(Math.random());
+      };
+
+      useEffect(() => {
+        window.addEventListener("resize", debounce(incrementVariable, 200));
+      }, []);
+
+      return null;
+    };
+
+    const exampleFunction = jest.fn();
+
+    render(<ExampleComponent debouncedFunction={exampleFunction} />);
+
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+
+    expect(exampleFunction).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("throttling works", () => {
+  it("throttles the function", async () => {
+    const throttledFunction = jest.fn();
+
+    window.addEventListener("resize", throttle(throttledFunction, 1));
+
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+
+    expect(throttledFunction).not.toHaveBeenCalledTimes(1);
+    expect(throttledFunction).not.toHaveBeenCalledTimes(10);
+  });
+
+  it("Works in a react component as well, it should only fire the exampleFunction once.", async () => {
+    const ExampleComponent = ({
+      throttledFunction
+    }: {
+      throttledFunction: (...args: unknown[]) => unknown;
+    }) => {
+      const [variable, setVariable] = useState(0);
+
+      useEffect(() => {
+        throttledFunction(variable);
+      }, [variable]);
+
+      const incrementVariable = useCallback(() => {
+        setVariable(Math.random());
+      }, []);
+
+      useEffect(() => {
+        window.addEventListener("resize", throttle(incrementVariable, 1));
+      }, []);
+
+      return null;
+    };
+
+    const exampleFunction = jest.fn();
+
+    render(<ExampleComponent throttledFunction={exampleFunction} />);
+
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+    await fireEvent.resize(window);
+
+    expect(exampleFunction).not.toHaveBeenCalledTimes(1);
+    expect(exampleFunction).not.toHaveBeenCalledTimes(10);
+  });
+});

package/src/util/helper.tsx

@@ -115,3 +115,31 @@ export const filterProps = (props: any, regexPattern: RegExp, returnFiltered: bo
       );
   }
 };
+
+export const debounce = (fn: (...args: unknown[]) => unknown, delay: number) => {
+  let timeout: undefined | ReturnType<typeof setTimeout>;
+
+  return function executedFunction(...args: unknown[]) {
+    const later = () => {
+      clearTimeout(timeout);
+      fn(...args);
+    };
+
+    clearTimeout(timeout);
+
+    timeout = setTimeout(later, delay);
+  };
+};
+
+export const throttle = (fn: (...args: unknown[]) => unknown, delay: number) => {
+  let lastTime = 0;
+
+  return function () {
+    let now = Date.now();
+
+    if (now - lastTime >= delay) {
+      fn();
+      lastTime = now;
+    }
+  };
+};