@onewelcome/react-lib-components 5.2.0 → 6.1.0

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

@@ -1,218 +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, { useState } from "react";
-import { Wizard, Props } from "./Wizard";
-import {
-  getAllByRole,
-  getByText,
-  render,
-  getByTestId,
-  queryByRole,
-  findByText
-} from "@testing-library/react";
-import { WizardActions, Props as WizardActionProps } from "./WizardActions/WizardActions";
-import { WizardSteps } from "./WizardSteps/WizardSteps";
-import userEvent from "@testing-library/user-event";
-
-type initWizardPropsType = Omit<Omit<Props, "onStepChange">, "children">;
-
-const initWizardParams: initWizardPropsType = {
-  steps: [
-    {
-      label: "Step 1"
-    },
-    {
-      label: "Step 2"
-    },
-    {
-      label: "Step 3",
-      disabled: true
-    },
-    {
-      label: "Step 4"
-    }
-  ],
-  initialStepNo: 0,
-  mode: "add"
-};
-
-const initWizardStepsProps = {
-  onStepClick: jest.fn()
-};
-
-const initWizardActionsProps: WizardActionProps = {
-  actions: {
-    next: {
-      label: "Next",
-      onClick: jest.fn()
-    },
-    previous: {
-      label: "Previous",
-      onClick: jest.fn()
-    },
-    saveAndClose: {
-      label: "Save and close",
-      onClick: jest.fn()
-    }
-  }
-};
-
-const renderWizard = (wizardProps?: initWizardPropsType) => {
-  const customWizardProps = wizardProps ? wizardProps : initWizardParams;
-
-  const Content = () => {
-    const [step, setStep] = useState(customWizardProps.initialStepNo || 0);
-
-    return (
-      <Wizard {...customWizardProps} onStepChange={(stepNo: number) => setStep(stepNo)}>
-        <WizardSteps data-testid="wizard-steps" {...initWizardStepsProps} />
-        <div data-testid="wizard-content">Step {step + 1}</div>
-        <div data-testid="wizard-actions">
-          <WizardActions {...initWizardActionsProps} />
-        </div>
-      </Wizard>
-    );
-  };
-
-  return render(<Content />);
-};
-
-const getWizardContent = (container: HTMLElement) => getByTestId(container, "wizard-content");
-
-const getStepButtons = (container: HTMLElement) =>
-  getAllByRole(getByTestId(container, "wizard-steps"), "button");
-
-const getActionsButtons = (container: HTMLElement) => {
-  const actionsContainer = getByTestId(container, "wizard-actions");
-  const next = queryByRole(actionsContainer, "button", {
-    name: initWizardActionsProps.actions.next.label
-  });
-  const prev = queryByRole(actionsContainer, "button", {
-    name: initWizardActionsProps.actions.previous.label
-  });
-  const save = queryByRole(actionsContainer, "button", {
-    name: initWizardActionsProps.actions.saveAndClose.label
-  });
-  return { next, prev, save };
-};
-
-describe("Wizard", () => {
-  it("renders without crashing", () => {
-    const { container } = renderWizard();
-    const { prev, next, save } = getActionsButtons(container);
-    const stepButtons = getStepButtons(container);
-    const wizardContent = getWizardContent(container);
-
-    expect(stepButtons).toHaveLength(4);
-    expect(getByText(stepButtons[0], "1")).toBeDefined();
-    expect(getByText(stepButtons[1], "2")).toBeDefined();
-    expect(getByText(stepButtons[2], "3")).toBeDefined();
-    expect(getByText(stepButtons[3], "4")).toBeDefined();
-    expect(wizardContent).toHaveTextContent("Step 1");
-    expect(next).toBeDefined();
-    expect(prev).toBeNull();
-    expect(save).toBeNull();
-  });
-
-  it("should be able to click over whole wizard via action buttons", async () => {
-    const { container } = renderWizard();
-    const { next } = getActionsButtons(container);
-    const wizardContent = getWizardContent(container);
-    (
-      initWizardActionsProps.actions.next.onClick as jest.MockedFunction<
-        typeof initWizardActionsProps.actions.next.onClick
-      >
-    ).mockReturnValue(true);
-
-    await findByText(wizardContent, "Step 1");
-    next && (await userEvent.click(next));
-    await findByText(wizardContent, "Step 2");
-    next && (await userEvent.click(next));
-    await findByText(wizardContent, "Step 4");
-    const { save, prev } = getActionsButtons(container);
-    save && (await userEvent.click(save));
-    expect(initWizardActionsProps.actions.saveAndClose.onClick).toBeCalledWith(3);
-    prev && (await userEvent.click(prev));
-    await findByText(wizardContent, "Step 2");
-    prev && (await userEvent.click(prev));
-    await findByText(wizardContent, "Step 1");
-  });
-
-  it("should not be able to click over whole wizard via steps buttons in add mode", async () => {
-    const { container } = renderWizard();
-    const { next } = getActionsButtons(container);
-    const stepsButtons = getStepButtons(container);
-    const wizardContent = getWizardContent(container);
-    (
-      initWizardActionsProps.actions.next.onClick as jest.MockedFunction<
-        typeof initWizardActionsProps.actions.next.onClick
-      >
-    ).mockReturnValue(true);
-    (
-      initWizardStepsProps.onStepClick as jest.MockedFunction<
-        typeof initWizardStepsProps.onStepClick
-      >
-    ).mockReturnValue(true);
-
-    await userEvent.click(stepsButtons[1]);
-    await userEvent.click(stepsButtons[2]);
-    await userEvent.click(stepsButtons[3]);
-    expect(initWizardStepsProps.onStepClick).toBeCalledTimes(0);
-    await findByText(wizardContent, "Step 1");
-
-    next && (await userEvent.click(next));
-    next && (await userEvent.click(next));
-    await findByText(wizardContent, "Step 4");
-    await userEvent.click(stepsButtons[2]);
-    expect(initWizardStepsProps.onStepClick).toBeCalledTimes(0);
-    await userEvent.click(stepsButtons[1]);
-    expect(initWizardStepsProps.onStepClick).toBeCalledTimes(1);
-    await findByText(wizardContent, "Step 2");
-    await userEvent.click(stepsButtons[0]);
-    expect(initWizardStepsProps.onStepClick).toBeCalledTimes(2);
-    await findByText(wizardContent, "Step 1");
-  });
-
-  it("should be able to click over whole wizard via steps buttons in edit mode", async () => {
-    const { container } = renderWizard({ ...initWizardParams, mode: "edit" });
-    const stepsButtons = getStepButtons(container);
-    const wizardContent = getWizardContent(container);
-    (
-      initWizardStepsProps.onStepClick as jest.MockedFunction<
-        typeof initWizardStepsProps.onStepClick
-      >
-    ).mockReturnValue(true);
-
-    await userEvent.click(stepsButtons[1]);
-    expect(initWizardStepsProps.onStepClick).toBeCalledTimes(1);
-    await findByText(wizardContent, "Step 2");
-    await userEvent.click(stepsButtons[2]);
-    expect(initWizardStepsProps.onStepClick).toBeCalledTimes(1);
-    await userEvent.click(stepsButtons[3]);
-    expect(initWizardStepsProps.onStepClick).toBeCalledTimes(2);
-    await findByText(wizardContent, "Step 4");
-
-    await userEvent.click(stepsButtons[2]);
-    expect(initWizardStepsProps.onStepClick).toBeCalledTimes(2);
-    await userEvent.click(stepsButtons[1]);
-    expect(initWizardStepsProps.onStepClick).toBeCalledTimes(3);
-    await findByText(wizardContent, "Step 2");
-    await userEvent.click(stepsButtons[0]);
-    expect(initWizardStepsProps.onStepClick).toBeCalledTimes(4);
-    await findByText(wizardContent, "Step 1");
-  });
-});

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

@@ -1,187 +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 { WizardActions, Props } from "./WizardActions";
-import { queryByRole, 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: 0,
-  mode: "add"
-};
-
-const initParams: Props = {
-  actions: {
-    next: {
-      label: "Next",
-      onClick: jest.fn()
-    },
-    previous: {
-      label: "Previous",
-      onClick: jest.fn()
-    },
-    saveAndClose: {
-      label: "Save and close",
-      onClick: jest.fn()
-    }
-  }
-};
-
-const renderWizardActions = (initReducerState?: WizardStateType, props?: Props) => {
-  const wizardState = initReducerState ? initReducerState : initWizardState;
-  const actionsProps = props ? props : initParams;
-  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}>
-      <WizardActions {...actionsProps} />
-    </Provider>
-  );
-
-  return {
-    ...renderObj,
-    dispatch
-  };
-};
-
-const getActionsButtons = (container: HTMLElement) => {
-  const next = queryByRole(container, "button", { name: initParams.actions.next.label });
-  const prev = queryByRole(container, "button", { name: initParams.actions.previous.label });
-  const save = queryByRole(container, "button", { name: initParams.actions.saveAndClose.label });
-  return { next, prev, save };
-};
-
-describe("WizardActions", () => {
-  it("renders without crashing", async () => {
-    const { container, dispatch } = renderWizardActions();
-    const { prev, next, save } = getActionsButtons(container);
-    (
-      initParams.actions.next.onClick as jest.MockedFunction<typeof initParams.actions.next.onClick>
-    ).mockReturnValueOnce(true);
-
-    expect(next).toBeDefined();
-    next && (await userEvent.click(next));
-    expect(prev).toBeNull();
-    expect(save).toBeNull();
-
-    expect(initParams.actions.next.onClick).toHaveBeenCalledWith(0);
-    expect(dispatch).toBeCalledWith(changeCurrentStepNo(1));
-  });
-
-  it("should allow going prev and forward when there are prev step and next step (next step is disabled but next one can be used)", async () => {
-    const { container, dispatch } = renderWizardActions({ ...initWizardState, currentStepNo: 1 });
-    const { prev, next, save } = getActionsButtons(container);
-    (
-      initParams.actions.next.onClick as jest.MockedFunction<typeof initParams.actions.next.onClick>
-    ).mockReturnValueOnce(true);
-
-    expect(prev).toBeDefined();
-    prev && (await userEvent.click(prev));
-    expect(initParams.actions.previous.onClick).toBeCalled();
-    expect(dispatch).toBeCalledWith(changeCurrentStepNo(0));
-
-    expect(next).toBeDefined();
-    next && (await userEvent.click(next));
-    expect(initParams.actions.next.onClick).toHaveBeenCalledWith(1);
-    expect(dispatch).toBeCalledWith(changeCurrentStepNo(3));
-
-    expect(save).toBeNull();
-  });
-
-  it("should render save button but not next button when current step is the last step", async () => {
-    const { container } = renderWizardActions({ ...initWizardState, currentStepNo: 3 });
-    const { prev, next, save } = getActionsButtons(container);
-
-    expect(prev).toBeDefined();
-    expect(next).toBeNull();
-    expect(save).toBeDefined();
-
-    save && (await userEvent.click(save));
-    expect(initParams.actions.saveAndClose.onClick).toHaveBeenCalledWith(3);
-  });
-
-  it("should show save and close when next steps are disabled", async () => {
-    const steps = [
-      initWizardState.steps[0],
-      { ...initWizardState.steps[1], disabled: true },
-      { ...initWizardState.steps[2], disabled: true }
-    ];
-    const { container } = renderWizardActions({
-      ...initWizardState,
-      steps: steps,
-      currentStepNo: 0
-    });
-    const { prev, next, save } = getActionsButtons(container);
-
-    expect(prev).toBeNull();
-    expect(next).toBeNull();
-    expect(save).toBeDefined();
-
-    save && (await userEvent.click(save));
-    expect(initParams.actions.saveAndClose.onClick).toHaveBeenCalledWith(0);
-  });
-
-  it("should show save button on middle step when mode is `edit`", async () => {
-    const { container } = renderWizardActions({ ...initWizardState, mode: "edit" });
-    const { prev, next, save } = getActionsButtons(container);
-
-    expect(prev).toBeNull();
-    expect(next).toBeDefined();
-    expect(save).toBeDefined();
-
-    save && (await userEvent.click(save));
-    expect(initParams.actions.saveAndClose.onClick).toHaveBeenCalledWith(0);
-  });
-
-  it("should not allow going forward when dev returns false on onNext callback", async () => {
-    const { container, dispatch } = renderWizardActions();
-    const { next } = getActionsButtons(container);
-    (
-      initParams.actions.next.onClick as jest.MockedFunction<typeof initParams.actions.next.onClick>
-    ).mockReturnValueOnce(false);
-
-    next && (await userEvent.click(next));
-    expect(initParams.actions.next.onClick).toHaveBeenCalledWith(0);
-    expect(dispatch).not.toBeCalled();
-  });
-});

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();
-  });
-});