@onewelcome/react-lib-components 6.0.0 → 6.1.0

package/src/components/Wizard/WizardSteps/WizardSteps.test.tsx

@@ -1,125 +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, { useReducer } from "react";
-import { WizardSteps, Props } from "./WizardSteps";
-import { getAllByRole, getByText, render } from "@testing-library/react";
-import { WizardStateContext, Props as ProviderProps } from "../WizardStateProvider";
-import { WizardStateType, reducer, changeCurrentStepNo } from "../wizardStateReducer";
-import userEvent from "@testing-library/user-event";
-
-const initWizardState: WizardStateType = {
-  steps: [
-    {
-      label: "Step 1"
-    },
-    {
-      label: "Step 2"
-    },
-    {
-      label: "Step 3",
-      disabled: true
-    },
-    {
-      label: "Step 4"
-    }
-  ],
-  currentStepNo: 1,
-  mode: "add"
-};
-
-const initParams: Props = {
-  onStepClick: jest.fn()
-};
-
-const renderWizardSteps = (initReducerState?: WizardStateType) => {
-  const wizardState = initReducerState ? initReducerState : initWizardState;
-  const dispatch = jest.fn();
-
-  const Provider = ({ children }: ProviderProps) => {
-    const [state] = useReducer(reducer, wizardState);
-    return (
-      <WizardStateContext.Provider value={{ state, dispatch }}>
-        {children}
-      </WizardStateContext.Provider>
-    );
-  };
-
-  const renderObj = render(
-    <Provider initialState={initWizardState}>
-      <WizardSteps {...initParams} />
-    </Provider>
-  );
-
-  return {
-    ...renderObj,
-    dispatch
-  };
-};
-
-const getStepButtons = (container: HTMLElement) => getAllByRole(container, "button");
-
-describe("WizardSteps", () => {
-  it("renders without crashing", async () => {
-    const { container, dispatch } = renderWizardSteps();
-    const buttons = getStepButtons(container);
-    (
-      initParams.onStepClick as jest.MockedFunction<typeof initParams.onStepClick>
-    ).mockReturnValueOnce(true);
-
-    expect(buttons).toHaveLength(4);
-    await userEvent.click(buttons[0]);
-    expect(initParams.onStepClick).toHaveBeenCalledWith(initWizardState.currentStepNo, 0);
-    expect(dispatch).toBeCalledWith(changeCurrentStepNo(0));
-    expect(buttons[0].querySelector(".checkmark")).toBeDefined();
-    expect(getByText(buttons[1], "2")).toBeDefined();
-    expect(getByText(buttons[2], "3")).toBeDefined();
-    expect(getByText(buttons[3], "4")).toBeDefined();
-
-    await userEvent.click(buttons[1]);
-    await userEvent.click(buttons[2]);
-    await userEvent.click(buttons[3]);
-    expect(initParams.onStepClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("should allow to click on future and prev steps but not on current and disabled steps when mode is set to `edit`", async () => {
-    const { container, dispatch } = renderWizardSteps({ ...initWizardState, mode: "edit" });
-    const buttons = getStepButtons(container);
-    (
-      initParams.onStepClick as jest.MockedFunction<typeof initParams.onStepClick>
-    ).mockReturnValueOnce(true);
-
-    await userEvent.click(buttons[3]);
-    expect(initParams.onStepClick).toHaveBeenCalledWith(initWizardState.currentStepNo, 3);
-    expect(dispatch).toBeCalledWith(changeCurrentStepNo(3));
-
-    await userEvent.click(buttons[1]);
-    await userEvent.click(buttons[2]);
-    expect(initParams.onStepClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("should do not change step when `onStepClick` callback returns false", async () => {
-    const { container, dispatch } = renderWizardSteps({ ...initWizardState, mode: "edit" });
-    const buttons = getStepButtons(container);
-    (
-      initParams.onStepClick as jest.MockedFunction<typeof initParams.onStepClick>
-    ).mockReturnValueOnce(false);
-
-    await userEvent.click(buttons[3]);
-    expect(initParams.onStepClick).toHaveBeenCalledWith(initWizardState.currentStepNo, 3);
-    expect(dispatch).not.toBeCalled();
-  });
-});

package/src/components/_BaseStyling_/BaseStyling.test.tsx

@@ -1,55 +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, { Fragment } from "react";
-import { BaseStyling } from "./BaseStyling";
-import { Button } from "../Button/Button";
-import { render } from "@testing-library/react";
-
-describe("BaseStyling should render", () => {
-  it("renders without crashing", async () => {
-    const { container, findByTestId } = render(
-      <Fragment>
-        <BaseStyling>
-          <Button data-testid="button">Test</Button>
-        </BaseStyling>
-      </Fragment>
-    );
-
-    const button = await findByTestId("button");
-    expect(button).toHaveStyle({ backgroundColor: "rgb(158, 0, 107);" });
-    expect(container.querySelector("#child")).toBeDefined();
-  });
-});
-
-describe("Should override default color", () => {
-  it("overrides primary color", async () => {
-    const { findByTestId } = render(
-      <Fragment>
-        <BaseStyling
-          properties={{
-            colorPrimary: "rgb(255, 255, 255);"
-          }}
-        >
-          <Button data-testid="button">Test</Button>
-        </BaseStyling>
-      </Fragment>
-    );
-
-    const button = await findByTestId("button");
-    expect(button).toHaveStyle({ backgroundColor: "rgb(255, 255, 255);" });
-  });
-});

package/src/hooks/useAnimation.test.tsx

@@ -1,65 +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, { Fragment } from "react";
-import { render, fireEvent } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { useAnimation } from "./useAnimation";
-import { act } from "react-dom/test-utils";
-
-describe("useAnimation", () => {
-  it("should execute", async () => {
-    const callback = jest.fn();
-
-    const Component = () => {
-      const { ref, animationStarted, startAnimation } = useAnimation<HTMLDivElement>(callback);
-
-      return (
-        <Fragment>
-          <button data-testid="button" onClick={() => startAnimation()}>
-            start animation
-          </button>
-          <div
-            data-testid="animated-div"
-            ref={ref}
-            className={animationStarted ? "animation-started" : ""}
-          >
-            animated div
-          </div>
-        </Fragment>
-      );
-    };
-
-    const { getByTestId } = render(<Component />);
-
-    const animatedDiv = getByTestId("animated-div");
-    const startButton = getByTestId("button");
-
-    expect(animatedDiv).not.toHaveClass("animation-started");
-    expect(callback).not.toBeCalled();
-    await userEvent.click(startButton);
-
-    expect(animatedDiv).toHaveClass("animation-started");
-    expect(callback).not.toBeCalled();
-
-    act(() => {
-      fireEvent.animationEnd(animatedDiv);
-    });
-
-    expect(animatedDiv).toHaveClass("animation-started");
-    expect(callback).toBeCalled();
-  });
-});

package/src/hooks/useBodyClick.test.tsx

@@ -1,55 +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, { Fragment, useState } from "react";
-import { useBodyClick } from "./useBodyClick";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-describe("function should be executed", () => {
-  it("should execute", async () => {
-    const clickHandler = jest.fn();
-    const validateFunction = jest.fn(() => true);
-
-    const Component = () => {
-      const [variable, setVariable] = useState(true);
-      const [variable2, setvariable2] = useState(true);
-      useBodyClick(validateFunction, clickHandler, [variable, variable2]);
-
-      return (
-        <Fragment>
-          <button data-testid="button1" onClick={() => setVariable(!variable)}>
-            Test
-          </button>
-          <button data-testid="button2" onClick={() => setvariable2(!variable2)}>
-            Test
-          </button>
-        </Fragment>
-      );
-    };
-
-    const { getByTestId } = render(<Component></Component>);
-
-    const button1 = getByTestId("button1");
-    const button2 = getByTestId("button2");
-
-    await userEvent.click(button1);
-    await userEvent.click(button2);
-
-    expect(clickHandler).toHaveBeenCalledTimes(2);
-    expect(validateFunction).toHaveBeenCalledTimes(2);
-  });
-});

package/src/hooks/useDebouncedCallback.test.ts

@@ -1,150 +0,0 @@
-import { renderHook, act } from "@testing-library/react";
-import { useDebouncedCallback } from "./useDebouncedCallback";
-
-const BASE_DELAY = 300;
-const EXTRA_DELAY = 200;
-
-const sleep = (delay: number) => new Promise(resolve => setTimeout(resolve, delay));
-
-describe("Testing the useDebouncedCallback hook", () => {
-  it("should run callback after specified delay", async () => {
-    const delay = BASE_DELAY;
-    const callback = jest.fn();
-
-    const { result } = renderHook(() => useDebouncedCallback(callback, delay));
-
-    expect(callback).toHaveBeenCalledTimes(0);
-    act(result.current);
-    await sleep(delay + EXTRA_DELAY);
-
-    expect(callback).toHaveBeenCalledTimes(1);
-
-    act(result.current);
-    await sleep(delay + EXTRA_DELAY);
-
-    expect(callback).toHaveBeenCalledTimes(2);
-  });
-
-  it("should pass args through to callback function", async () => {
-    let mutableValue = "";
-    const delay = BASE_DELAY;
-    const callback = jest.fn(arg => (mutableValue = `got arg ${arg}`));
-
-    const { result } = renderHook(() => useDebouncedCallback(callback, delay));
-
-    act(() => result.current("passthrough"));
-    await sleep(delay + EXTRA_DELAY);
-
-    expect(callback).toHaveBeenCalledTimes(1);
-    expect(mutableValue).toBe(`got arg passthrough`);
-  });
-
-  it("should cancel pending call if fn is called again", async () => {
-    const delay = BASE_DELAY;
-    const callback = jest.fn();
-
-    const { result } = renderHook(() => useDebouncedCallback(callback, delay));
-
-    expect(callback).toHaveBeenCalledTimes(0);
-    act(result.current);
-    await sleep(delay / 2);
-
-    act(result.current);
-    await sleep(delay + EXTRA_DELAY);
-
-    expect(callback).toHaveBeenCalledTimes(1);
-  });
-
-  it("should cancel pending call if callback changes", async () => {
-    const delay = BASE_DELAY;
-    const callback1 = jest.fn();
-    const callback2 = jest.fn();
-
-    const { result, rerender } = renderHook(
-      ({ callback, delay }: { callback: () => unknown; delay: number }) =>
-        useDebouncedCallback(callback, delay),
-      { initialProps: { callback: callback1, delay } }
-    );
-
-    act(result.current);
-    await sleep(delay / 2);
-
-    rerender({ callback: callback2, delay });
-    act(result.current);
-    await sleep(delay + EXTRA_DELAY);
-
-    expect(callback1).toHaveBeenCalledTimes(0);
-    expect(callback2).toHaveBeenCalledTimes(1);
-  });
-
-  it("should cancel pending call if delay changes", async () => {
-    const delay1 = BASE_DELAY;
-    const delay2 = BASE_DELAY * 2;
-    const callback = jest.fn();
-
-    const { result, rerender } = renderHook(
-      ({ callback, delay }: { callback: () => unknown; delay: number }) =>
-        useDebouncedCallback(callback, delay),
-      { initialProps: { callback, delay: delay1 } }
-    );
-
-    act(result.current);
-    await sleep(delay1 / 2);
-
-    rerender({ callback, delay: delay2 });
-    act(result.current);
-    await sleep(delay2 + EXTRA_DELAY);
-
-    expect(callback).toHaveBeenCalledTimes(1);
-  });
-
-  it("should cancel pending call if dependencies change", async () => {
-    const delay = BASE_DELAY;
-    const callback = jest.fn();
-
-    const { result, rerender } = renderHook(
-      ({
-        callback,
-        delay,
-        dependencies
-      }: {
-        callback: () => unknown;
-        delay: number;
-        dependencies: any[];
-      }) => useDebouncedCallback(callback, delay, dependencies),
-      { initialProps: { callback, delay, dependencies: ["a"] } }
-    );
-
-    act(result.current);
-    await sleep(delay / 2);
-
-    rerender({ callback, delay, dependencies: ["b"] });
-    act(result.current);
-    await sleep(delay + EXTRA_DELAY);
-
-    expect(callback).toHaveBeenCalledTimes(1);
-  });
-
-  it("should support async callbacks", async () => {
-    const makeAsyncCall = jest.fn(
-      () =>
-        new Promise(async resolve => {
-          await sleep(delay / 2);
-          resolve(null);
-        })
-    );
-
-    const delay = BASE_DELAY;
-    const callback = jest.fn(async () => {
-      await makeAsyncCall();
-    });
-
-    const { result } = renderHook(() => useDebouncedCallback(callback, delay));
-
-    await act(async () => result.current());
-    await sleep(delay + EXTRA_DELAY);
-
-    expect(callback).toHaveBeenCalledTimes(1);
-    expect(makeAsyncCall).toHaveBeenCalledTimes(1);
-  });
-});

package/src/hooks/useDetermineStatusIcon.test.ts

@@ -1,28 +0,0 @@
-import { renderHook } from "@testing-library/react";
-import { useDetermineStatusIcon } from "./useDetermineStatusIcon";
-
-describe("it should return the correct icon", () => {
-  it("should return an icon of type success", () => {
-    const { result } = renderHook(useDetermineStatusIcon, {
-      initialProps: { success: true, error: false }
-    });
-
-    expect(result.current).toBeDefined();
-    expect(result.current?.props?.["data-icon-status"]).toEqual("success");
-  });
-
-  it("should return an icon of type error", () => {
-    const { result } = renderHook(useDetermineStatusIcon, {
-      initialProps: { success: true, error: true }
-    });
-
-    expect(result.current).toBeDefined();
-    expect(result.current?.props?.["data-icon-status"]).toEqual("error");
-  });
-
-  it("should return null", () => {
-    const { result } = renderHook(useDetermineStatusIcon);
-
-    expect(result.current).toBeNull();
-  });
-});

package/src/hooks/useFormSelector.test.ts

@@ -1,56 +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 { useFormSelector } from "./useFormSelector";
-import { renderHook } from "@testing-library/react";
-
-describe("we should get the correct return values and describedBy is the same as identifier", () => {
-  it("should return correct values", () => {
-    const { result } = renderHook(() =>
-      useFormSelector({
-        name: "test",
-        errorMessage: "errormessage",
-        error: false,
-        parentErrorId: "parenterrorid",
-        helperText: "helpertext",
-        parentHelperId: "parenthelperid"
-      })
-    );
-
-    expect(result.current.describedBy).toHaveLength(15);
-    expect(result.current.errorId).toHaveLength(15);
-    expect(result.current.identifier).toHaveLength(15);
-
-    expect(result.current.describedBy).toBe(result.current.identifier);
-  });
-});
-
-describe("describedBy should be the parenterrorid", () => {
-  it("should be linked correctly", () => {
-    const { result } = renderHook(() =>
-      useFormSelector({
-        name: "test",
-        errorMessage: "errormessage",
-        error: true,
-        parentErrorId: "parenterrorid",
-        helperText: "helpertext",
-        parentHelperId: "parenthelperid"
-      })
-    );
-
-    expect(result.current.describedBy).toBe("parenterrorid");
-  });
-});