@onewelcome/react-lib-components 6.0.0 → 6.2.0

package/src/hooks/useSpacing.test.ts

@@ -1,86 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import { useSpacing } from "./useSpacing";
-
-describe("useSpacing should set propert padding and margin css properties", () => {
-  it("should set padding and margin for 4 values definition", () => {
-    const styles = useSpacing({ padding: "0 0.5 1 2", margin: "0 0.5 1 2" });
-    expect(styles).toHaveProperty("padding", "0rem 0.125rem 0.25rem 0.5rem");
-    expect(styles).toHaveProperty("margin", "0rem 0.125rem 0.25rem 0.5rem");
-  });
-
-  it("should set padding and margin for 3 values definition", () => {
-    const styles = useSpacing({ padding: "3 4 5", margin: "3 4 5" });
-    expect(styles).toHaveProperty("padding", "0.75rem 1rem 1.25rem");
-    expect(styles).toHaveProperty("margin", "0.75rem 1rem 1.25rem");
-  });
-
-  it("should set padding and margin for 2 values definition", () => {
-    const styles = useSpacing({ padding: "6 7", margin: "6 7" });
-    expect(styles).toHaveProperty("padding", "1.5rem 1.75rem");
-    expect(styles).toHaveProperty("margin", "1.5rem 1.75rem");
-  });
-
-  it("should set padding and margin for 1 value definition", () => {
-    const styles = useSpacing({ padding: 8, margin: "8" });
-    expect(styles).toHaveProperty("padding", "2rem");
-    expect(styles).toHaveProperty("margin", "2rem");
-  });
-
-  it("should set paddingLeft, paddingRight, paddingTop, paddingBottom, marginLeft, marginRight, marginTop, marginBottom css values when all provided", async () => {
-    const styles = useSpacing({
-      paddingLeft: "1",
-      paddingRight: 1,
-      paddingTop: "2",
-      paddingBottom: 0.5,
-      marginLeft: 3,
-      marginRight: 4,
-      marginTop: 5,
-      marginBottom: 6
-    });
-    expect(styles).toHaveProperty("paddingLeft", "0.25rem");
-    expect(styles).toHaveProperty("paddingRight", "0.25rem");
-    expect(styles).toHaveProperty("paddingTop", "0.5rem");
-    expect(styles).toHaveProperty("paddingBottom", "0.125rem");
-    expect(styles).toHaveProperty("marginLeft", "0.75rem");
-    expect(styles).toHaveProperty("marginRight", "1rem");
-    expect(styles).toHaveProperty("marginTop", "1.25rem");
-    expect(styles).toHaveProperty("marginBottom", "1.5rem");
-    expect(styles?.padding).toBeUndefined();
-    expect(styles?.margin).toBeUndefined();
-  });
-});
-
-describe("useSpacing should add/repalce properties in passed style object", () => {
-  it("should add properties to style object", () => {
-    const styles = useSpacing({ padding: 8, margin: "8" }, { backgroundColor: "red" });
-    expect(styles).toStrictEqual({ padding: "2rem", margin: "2rem", backgroundColor: "red" });
-  });
-
-  it("should add and replace properties to style object", () => {
-    const styles = useSpacing(
-      { padding: 8, margin: "8" },
-      { padding: "2px", paddingTop: 2, backgroundColor: "red" }
-    );
-    expect(styles).toStrictEqual({
-      padding: "2rem",
-      margin: "2rem",
-      paddingTop: 2,
-      backgroundColor: "red"
-    });
-  });
-});

package/src/hooks/useUploadFile.test.ts

@@ -1,211 +0,0 @@
-import { useUploadFile } from "./useUploadFile";
-import { renderHook } from "@testing-library/react";
-import { waitFor } from "@testing-library/react";
-import { FileType } from "../components/Form/FileUpload/FileUpload";
-
-const DONE = 4;
-
-const mockXhrRequest = (status: number, readyState?: number, response?: Object) => {
-  return {
-    open: jest.fn(),
-    send: jest.fn(),
-    addEventListener: jest.fn(),
-    onprogress: jest.fn(),
-    responseText: response,
-    onreadystatechange: jest.fn(),
-    getResponseHeader: jest.fn(),
-    upload: {
-      addEventListener: jest.fn()
-    },
-    DONE,
-    setRequestHeader: jest.fn(),
-    readyState: readyState || 4,
-    status
-  };
-};
-
-type mockRequestParams = Parameters<typeof mockXhrRequest>;
-
-const progressData = {
-  loaded: 12,
-  total: 100
-};
-
-const requestInfo = { url: "https://www.test.io", withCredentials: true };
-
-const file = {
-  name: "test.txt",
-  data: new File([""], "test.txt"),
-  size: 5,
-  type: ""
-};
-
-const setupXhrEnvironment = (mockParams: mockRequestParams) => {
-  const mock = mockXhrRequest(...mockParams);
-  const mockClass = () => mock;
-
-  // @ts-ignore
-  window.XMLHttpRequest = jest.fn().mockImplementation(mockClass);
-
-  return mock;
-};
-
-const expectReadyStateInfo = async (
-  files: FileType[],
-  mock: ReturnType<typeof mockXhrRequest>,
-  response: { code: number; body: { message: string } }
-) => {
-  const { result } = renderHook(() =>
-    useUploadFile(files, { ...requestInfo, responseErrorPath: "body.message" })
-  );
-
-  expect(mock.addEventListener).toHaveBeenCalled();
-  const [[, readystatechange]] = mock.addEventListener.mock.calls;
-  await waitFor(() => readystatechange());
-  const currentFile = result.current.updatedFiles[0];
-  expect(currentFile.status).toEqual("error");
-  expect(currentFile.error).toEqual(response.body.message);
-};
-
-describe("it should perform upload", () => {
-  it("should register the correct progress", async () => {
-    const mock = setupXhrEnvironment([200]);
-    const { result } = renderHook(() => useUploadFile([file], requestInfo));
-    expect(result.current).toBeDefined();
-    expect(mock.upload.addEventListener).toHaveBeenCalled();
-    const [[, progress]] = mock.upload.addEventListener.mock.calls;
-    await waitFor(() => progress(progressData));
-
-    const targetFile = result.current.updatedFiles[0];
-    expect(targetFile.name).toEqual(file.name);
-    expect(targetFile.progress).toEqual(12);
-  });
-
-  it("should contain a file with status of retry", async () => {
-    const mock = setupXhrEnvironment([0, DONE]);
-    const files2 = [
-      {
-        name: "test2.txt",
-        data: new File([""], "test2.txt"),
-        size: 5,
-        type: ""
-      }
-    ];
-    const { result } = renderHook(() => useUploadFile(files2, requestInfo));
-    expect(result.current).toBeDefined();
-    expect(mock.addEventListener).toHaveBeenCalled();
-    const [[, readystatechange]] = mock.addEventListener.mock.calls;
-    await waitFor(() => readystatechange());
-    expect(result.current.updatedFiles[0].status).toEqual("retry");
-  });
-
-  it("should contain a file with status of error", async () => {
-    const response = { code: 404, body: { message: "Error test" } };
-    const mock = setupXhrEnvironment([404, DONE, JSON.stringify(response)]);
-    const files3 = [
-      {
-        name: "test3.txt",
-        data: new File([""], "test3.txt"),
-        size: 5,
-        type: ""
-      }
-    ];
-    await expectReadyStateInfo(files3, mock, response);
-  });
-
-  it("should contain a file with status of server error", async () => {
-    const response = { code: 500, body: { message: "Error test" } };
-    const mock = setupXhrEnvironment([500, DONE, JSON.stringify(response)]);
-    const files6 = [
-      {
-        name: "test6.txt",
-        data: new File([""], "test3.txt"),
-        size: 5,
-        type: ""
-      }
-    ];
-    await expectReadyStateInfo(files6, mock, response);
-  });
-
-  it("should contain a file with status of success", async () => {
-    const mock = setupXhrEnvironment([200, DONE]);
-    const files3 = [
-      {
-        name: "test3.txt",
-        data: new File([""], "test3.txt"),
-        size: 5,
-        type: ""
-      }
-    ];
-    const { result } = renderHook(() => useUploadFile(files3, requestInfo));
-    expect(result.current).toBeDefined();
-    expect(mock.addEventListener).toHaveBeenCalled();
-    const [[, readystatechange]] = mock.addEventListener.mock.calls;
-    await waitFor(() => readystatechange());
-    const currentFile = result.current.updatedFiles[0];
-    expect(currentFile.status).toEqual("completed");
-  });
-});
-
-describe("should return data according to the parameters", () => {
-  it("should call custom callbacks", async () => {
-    const onComplete = jest.fn();
-    const onProgress = jest.fn();
-    const mock = setupXhrEnvironment([200, DONE]);
-    const files4 = [
-      {
-        name: "test4.txt",
-        data: new File([""], "test3.txt"),
-        size: 5,
-        type: ""
-      }
-    ];
-    renderHook(() => useUploadFile(files4, requestInfo, { onProgress, onComplete }));
-
-    const [[, progress]] = mock.upload.addEventListener.mock.calls;
-    await waitFor(() => progress(progressData));
-
-    const [[, readystatechange]] = mock.addEventListener.mock.calls;
-    await waitFor(() => readystatechange());
-
-    expect(mock.addEventListener).toHaveBeenCalled();
-    expect(onComplete).toHaveBeenCalled();
-    expect(onComplete).toHaveBeenCalled();
-  });
-
-  it("should add the correct error message", async () => {
-    const mock = setupXhrEnvironment([0, DONE]);
-    const files5 = [
-      {
-        name: "test5.txt",
-        data: new File([""], "test5.txt"),
-        size: 5,
-        type: ""
-      }
-    ];
-    const error = "Network error";
-    const { result } = renderHook(() =>
-      useUploadFile(files5, { ...requestInfo, networkErrorText: error })
-    );
-    const [[, readystatechange]] = mock.addEventListener.mock.calls;
-    await waitFor(() => readystatechange());
-
-    expect(mock.addEventListener).toHaveBeenCalled();
-    const file = result.current.updatedFiles[0];
-    expect(file.error).toEqual(error);
-  });
-});
-
-describe("useFileUpload hook should not fire when url and array of files is not present", () => {
-  it("should return an empty array if url is empty", () => {
-    const { result } = renderHook(() => useUploadFile([], { url: "https://yoohoo.co" }));
-
-    expect(result.current.uploadingFiles.length).toBe(0);
-  });
-
-  it("should return an empty array if url is empty", () => {
-    const { result } = renderHook(() => useUploadFile([file], { url: "" }));
-
-    expect(result.current.uploadingFiles.length).toBe(0);
-  });
-});

package/src/util/helper.test.tsx

@@ -1,403 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import React, { useCallback, useEffect, useState } from "react";
-import { fireEvent, waitFor } from "@testing-library/dom";
-import {
-  debounce,
-  filterProps,
-  generateID,
-  remToPx,
-  throttle,
-  areArraysDifferent,
-  getValueByPath,
-  isEqual,
-  isJsonString,
-  deepMerge
-} from "./helper";
-import { render } from "@testing-library/react";
-import { act } from "react-dom/test-utils";
-
-/* Generate an ID of 20 characters with a string woven in */
-
-describe("generateID should correctly generate IDs in the correct way", () => {
-  it("generates an ID of length 20 with a string woven in", () => {
-    const ID1 = generateID(20, "thistestingstring");
-    expect(ID1.length).toBe(20);
-  });
-
-  it("genereates an ID without a string woven in", () => {
-    const ID2 = generateID(20);
-    expect(ID2.length).toBe(20);
-  });
-});
-
-describe("filterprops should return the correct object", () => {
-  it("gives back the props we told it to filter", () => {
-    const propsObject = {
-      "data-filter": true,
-      "data-test": false,
-      "aria-hidden": false,
-      "aria-expanded": true,
-      title: "test",
-      className: "example-classname"
-    };
-
-    const returnedPropsObject = filterProps(propsObject, /^data-/);
-
-    expect(returnedPropsObject).toStrictEqual({ "data-filter": true, "data-test": false });
-  });
-
-  it("gives back the propsObject without the props we told it to filter", () => {
-    const propsObject = {
-      "data-filter": true,
-      "data-test": false,
-      "aria-hidden": false,
-      "aria-expanded": true,
-      title: "test",
-      className: "example-classname"
-    };
-
-    const returnedPropsObject = filterProps(propsObject, /^data-/, false);
-
-    expect(returnedPropsObject).toStrictEqual({
-      "aria-hidden": false,
-      "aria-expanded": true,
-      title: "test",
-      className: "example-classname"
-    });
-  });
-});
-
-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));
-
-    act(() => {
-      fireEvent.resize(window);
-      fireEvent.resize(window);
-      fireEvent.resize(window);
-      fireEvent.resize(window);
-      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 = () => {
-        act(() => {
-          setVariable(Math.random());
-        });
-      };
-
-      useEffect(() => {
-        window.addEventListener("resize", debounce(incrementVariable, 200));
-      }, []);
-
-      return null;
-    };
-
-    const exampleFunction = jest.fn();
-
-    render(<ExampleComponent debouncedFunction={exampleFunction} />);
-
-    act(() => {
-      fireEvent.resize(window);
-      fireEvent.resize(window);
-      fireEvent.resize(window);
-      fireEvent.resize(window);
-      fireEvent.resize(window);
-    });
-
-    expect(exampleFunction).toHaveBeenCalledTimes(1);
-  });
-});
-
-describe("throttling works", () => {
-  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(() => {
-        act(() => {
-          setVariable(Math.random());
-        });
-      }, []);
-
-      useEffect(() => {
-        window.addEventListener("resize", throttle(incrementVariable, 1));
-      }, []);
-
-      return null;
-    };
-
-    const exampleFunction = jest.fn();
-
-    render(<ExampleComponent throttledFunction={exampleFunction} />);
-
-    act(() => {
-      fireEvent.resize(window);
-      fireEvent.resize(window);
-      fireEvent.resize(window);
-      fireEvent.resize(window);
-      fireEvent.resize(window);
-      fireEvent.resize(window);
-      fireEvent.resize(window);
-      fireEvent.resize(window);
-      fireEvent.resize(window);
-      fireEvent.resize(window);
-    });
-
-    expect(exampleFunction).not.toHaveBeenCalledTimes(1);
-    expect(exampleFunction).not.toHaveBeenCalledTimes(10);
-  });
-});
-
-describe("areArraysDifferent works as expected", () => {
-  it("should return true for different arrays", () => {
-    const arr1 = [
-      {
-        name: "test1"
-      },
-      {
-        name: "test2"
-      }
-    ];
-
-    const arr2 = [
-      {
-        name: "test1"
-      },
-      {
-        name: "test3"
-      }
-    ];
-
-    const result = areArraysDifferent(arr1, arr2, "name");
-    expect(result).toBe(true);
-  });
-
-  it("should return false for arrays with same values", () => {
-    const arr1 = [
-      {
-        name: "test1"
-      }
-    ];
-
-    const arr2 = [
-      {
-        name: "test1"
-      }
-    ];
-
-    const result = areArraysDifferent(arr1, arr2, "name");
-    expect(result).toBe(false);
-  });
-
-  it("should return false for falsy values", () => {
-    const arr1 = [
-      {
-        name: "test1"
-      }
-    ];
-
-    const arr2 = [
-      {
-        label: "test1"
-      }
-    ];
-
-    const result = areArraysDifferent(arr1, arr2, "name");
-    expect(result).toBe(true);
-  });
-});
-
-describe("return correct values from getValueByPath", () => {
-  it("should return the correct value form a multi layered object", () => {
-    const val = "test";
-    const obj = {
-      firstNode: {
-        secondNode: {
-          thirdNode: {
-            val
-          }
-        }
-      }
-    };
-
-    const result = getValueByPath(obj, "firstNode.secondNode.thirdNode.val");
-    expect(result).toBe(val);
-  });
-});
-
-describe("verifies if isEqual returns the correct value", () => {
-  it("should return true for equal values objects", () => {
-    const obj1 = {
-      name1: "test1",
-      name2: {
-        val: "test2"
-      }
-    };
-
-    const obj2 = {
-      name1: "test1",
-      name2: {
-        val: "test2"
-      }
-    };
-
-    const res = isEqual(obj1, obj2);
-    expect(res).toBe(true);
-  });
-
-  it("should return false for unequal values objects", () => {
-    const obj1 = {
-      name1: "test1",
-      name2: {
-        val: "test2"
-      }
-    };
-
-    const obj2 = {
-      name1: "test1"
-    };
-
-    const res = isEqual(obj1, obj2);
-    expect(res).toBe(false);
-  });
-
-  it("should return false for falsy values", () => {
-    const obj1 = {
-      name1: "test1",
-      name2: {
-        val: "test2"
-      }
-    };
-    const obj2 = null;
-
-    const res = isEqual(obj1, obj2);
-    expect(res).toBe(false);
-  });
-
-  it("should return false for different types", () => {
-    const obj1 = [
-      {
-        name1: "test1",
-        name2: {
-          val: "test2"
-        }
-      }
-    ];
-    const obj2 = {
-      name1: "test1",
-      name2: {
-        val: "test2"
-      }
-    };
-
-    const res = isEqual(obj1, obj2);
-    expect(res).toBe(false);
-  });
-});
-
-describe("pixel to rem function works", () => {
-  document.documentElement.style.setProperty("font-size", "16px");
-
-  it.each([
-    [1, 16],
-    [1.25, 20],
-    [1.5, 24],
-    [1.75, 28],
-    [2, 32]
-  ])("%p rem equals %p px when font-size is 16px", async (rem: number, px: number) => {
-    const result = remToPx(rem);
-
-    expect(result).toBe(px);
-  });
-});
-
-describe("isJsonString should work", () => {
-  it("should return true when parameter is a valid JSON string", () => {
-    const param = JSON.stringify({ test: 1 });
-
-    expect(isJsonString(param)).toEqual(true);
-  });
-
-  it("should return false when parameter is a valid JSON string", () => {
-    const param = { test: 2 };
-
-    expect(isJsonString(param)).toEqual(false);
-  });
-});
-
-describe("deepMerge function", () => {
-  it("should return the first object if the second one is falsy", () => {
-    const obj1 = { a: 1 };
-    const obj2 = false;
-
-    expect(deepMerge(obj1, obj2)).toEqual({ a: 1 });
-  });
-
-  it("should return a merged object with no nested object", () => {
-    const obj1 = { a: 1, b: 2 };
-    const obj2 = { b: 3, c: 4 };
-
-    expect(deepMerge(obj1, obj2)).toEqual({ a: 1, b: 3, c: 4 });
-  });
-
-  it("should return a merged object with nested object", () => {
-    const obj1 = { a: 1, b: { x: 1, y: 2 } };
-    const obj2 = { b: { y: 3, z: 4 }, c: 4 };
-
-    expect(deepMerge(obj1, obj2)).toEqual({ a: 1, b: { x: 1, y: 3, z: 4 }, c: 4 });
-  });
-
-  it("should replace non-object values in the first object with values in the second object", () => {
-    const obj1 = { a: 1, b: 2 };
-    const obj2 = { b: { y: 3, z: 4 }, c: 4 };
-
-    expect(deepMerge(obj1, obj2)).toEqual({ a: 1, b: { y: 3, z: 4 }, c: 4 });
-  });
-
-  it("should not merge array values but replace them", () => {
-    const obj1 = { a: 1, b: [1, 2] };
-    const obj2 = { b: [3, 4], c: 4 };
-
-    expect(deepMerge(obj1, obj2)).toEqual({ a: 1, b: [3, 4], c: 4 });
-  });
-});