@onewelcome/react-lib-components 6.0.0 → 6.2.0

package/src/components/Typography/Typography.test.tsx

@@ -1,177 +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, { useEffect, useRef } from "react";
-import { Typography, Props } from "./Typography";
-import { render } from "@testing-library/react";
-import { Spacing } from "../../hooks/useSpacing";
-
-const renderTypography = (
-  typoVariant: Props["variant"],
-  wrapper?: Props["tag"],
-  spacing?: Spacing,
-  align?: Props["align"]
-) => {
-  const queries = render(
-    <Typography
-      variant={typoVariant}
-      tag={wrapper}
-      spacing={spacing}
-      align={align}
-      data-testid="component"
-    >
-      Test
-    </Typography>
-  );
-
-  const typography = queries.getByTestId("component");
-
-  return {
-    ...queries,
-    typography
-  };
-};
-
-const className = (variant: Props["variant"]) => `typography_style_${variant}`;
-
-describe("Typography should render", () => {
-  it("renders without crashing", () => {
-    const { typography } = renderTypography("h1");
-    expect(typography).toBeDefined();
-  });
-});
-
-describe("Should give the correct default tags and corresponding classnames", () => {
-  it("renders an h1", () => {
-    const variant = "h1";
-    const { typography } = renderTypography(variant);
-
-    expect(typography.nodeName).toBe("H1");
-    expect(typography).toHaveClass(className(variant));
-  });
-
-  it("renders an h2", () => {
-    const variant = "h2";
-    const { typography } = renderTypography(variant);
-
-    expect(typography.nodeName).toBe("H2");
-    expect(typography).toHaveClass(className(variant));
-  });
-
-  it("renders an h3", () => {
-    const variant = "h3";
-    const { typography } = renderTypography(variant);
-
-    expect(typography.nodeName).toBe("H3");
-    expect(typography).toHaveClass(className(variant));
-  });
-
-  it("renders an h4", () => {
-    const variant = "h4";
-    const { typography } = renderTypography(variant);
-
-    expect(typography.nodeName).toBe("H4");
-    expect(typography).toHaveClass(className(variant));
-  });
-
-  it("renders a p", () => {
-    const variant = "body";
-    const { typography } = renderTypography(variant);
-
-    expect(typography.nodeName).toBe("P");
-    expect(typography).toHaveClass(className(variant));
-  });
-
-  it("renders a p", () => {
-    const variant = "body-bold";
-    const { typography } = renderTypography(variant);
-
-    expect(typography.nodeName).toBe("P");
-    expect(typography).toHaveClass(className(variant));
-  });
-
-  it("renders a span", () => {
-    const variant = "sub-text";
-    const { typography } = renderTypography(variant);
-
-    expect(typography.nodeName).toBe("SPAN");
-    expect(typography).toHaveClass(className(variant));
-  });
-
-  it("renders a code", () => {
-    const variant = "code";
-    const { typography } = renderTypography(variant);
-
-    expect(typography.nodeName).toBe("CODE");
-    expect(typography).toHaveClass(className(variant));
-  });
-});
-
-describe("Should override tagname", () => {
-  it("has to be a DIV element", () => {
-    const { typography } = renderTypography("h1", "div");
-
-    expect(typography.nodeName).toBe("DIV");
-  });
-});
-
-describe("Should override styling", () => {
-  it("renders h1 with overwritten margin properties", () => {
-    const { typography } = renderTypography("h1", undefined, { margin: 4, marginBottom: 8 });
-
-    expect(typography.style).toHaveProperty("margin", "1rem 1rem 2rem 1rem");
-  });
-});
-
-describe("Should override align", () => {
-  it("renders h1 with overwritten align properties", () => {
-    const { typography } = renderTypography("h1", undefined, undefined, "center");
-
-    expect(typography.style).toHaveProperty("textAlign", "center");
-  });
-
-  it("renders h1 with overwritten align properties", () => {
-    const { typography } = renderTypography("h1", undefined, undefined, "right");
-
-    expect(typography.style).toHaveProperty("textAlign", "right");
-  });
-});
-
-describe("ref should work", () => {
-  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
-    const ExampleComponent = ({
-      propagateRef
-    }: {
-      propagateRef?: (ref: React.RefObject<HTMLElement>) => void;
-    }) => {
-      const ref = useRef(null);
-
-      useEffect(() => {
-        if (ref.current) {
-          propagateRef && propagateRef(ref);
-        }
-      }, [ref]);
-
-      return <Typography variant="body" data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});

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

@@ -1,90 +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 from "react";
-import { BaseWizardSteps, Props } from "./BaseWizardSteps";
-import { getAllByRole, getByText, queryByText, render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-const initParams: Props = {
-  steps: [
-    {
-      label: "Step 1"
-    },
-    {
-      label: "Step 2"
-    },
-    {
-      label: "Step 3",
-      disabled: true
-    },
-    {
-      label: "Step 4"
-    }
-  ],
-  currentStepNo: 1,
-  onClick: jest.fn()
-};
-
-const getStepButtons = (container: HTMLElement) => getAllByRole(container, "button");
-
-describe("BaseWizardSteps", () => {
-  it("renders without crashing", async () => {
-    const { container } = render(<BaseWizardSteps {...initParams} />);
-    const buttons = getStepButtons(container);
-    expect(initParams.onClick).toHaveBeenCalledTimes(0);
-
-    expect(buttons).toHaveLength(4);
-    expect(buttons[0]).not.toHaveAttribute("aria-current");
-    expect(buttons[0].querySelector(".checkmark")).toBeDefined();
-    expect(buttons[1]).toHaveAttribute("aria-current", "step");
-    expect(getByText(buttons[1], "2")).toBeDefined();
-    expect(buttons[2]).not.toHaveAttribute("aria-current");
-    expect(getByText(buttons[2], "3")).toBeDefined();
-    expect(buttons[3]).not.toHaveAttribute("aria-current");
-    expect(getByText(buttons[3], "4")).toBeDefined();
-
-    await userEvent.click(buttons[0]);
-    expect(initParams.onClick).toHaveBeenCalledTimes(1);
-
-    await userEvent.click(buttons[1]);
-    await userEvent.click(buttons[2]);
-    await userEvent.click(buttons[3]);
-    expect(initParams.onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("should allow to click on future and prev steps but not on current and disabled steps when futureStepsClickable is enabled", async () => {
-    const { container } = render(<BaseWizardSteps {...initParams} futureStepsClickable />);
-    const buttons = getStepButtons(container);
-    expect(initParams.onClick).toHaveBeenCalledTimes(0);
-
-    await userEvent.click(buttons[3]);
-    expect(initParams.onClick).toHaveBeenCalledTimes(1);
-    await userEvent.click(buttons[0]);
-    expect(initParams.onClick).toHaveBeenCalledTimes(2);
-
-    await userEvent.click(buttons[1]);
-    await userEvent.click(buttons[2]);
-    expect(initParams.onClick).toHaveBeenCalledTimes(2);
-  });
-
-  it("should not render checkmark or number when prev steps is disabled", () => {
-    const { container } = render(<BaseWizardSteps {...initParams} currentStepNo={3} />);
-    const buttons = getStepButtons(container);
-
-    expect(queryByText(buttons[2], "3")).toBeNull();
-  });
-});

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