@onewelcome/react-lib-components 5.2.0 → 6.1.0

package/src/components/Tooltip/Tooltip.test.tsx

@@ -1,390 +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 { Tooltip, Props } from "./Tooltip";
-import { render, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-const defaultParams: Props = {
-  children: "This is a test message",
-  label: "Label",
-  title: "Title",
-  position: "start",
-  location: "left"
-};
-
-const createTooltip = async (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-
-  const queries = render(<Tooltip {...parameters} data-testid="tooltip" />);
-  const tooltip = queries.getByTestId("tooltip");
-  const icon = tooltip.querySelector(".icon")!;
-  const tooltipHoverDiv = document.querySelector(".tooltip");
-
-  if (tooltip) {
-    icon.getBoundingClientRect = () => ({
-      x: 500,
-      y: 500,
-      width: 10,
-      height: 10,
-      top: 500,
-      left: 500,
-      right: 510,
-      bottom: 510,
-      toJSON: () => jest.fn()
-    });
-  }
-
-  Object.defineProperty(tooltipHoverDiv, "offsetHeight", { configurable: true, value: 50 });
-  Object.defineProperty(tooltipHoverDiv, "offsetWidth", { configurable: true, value: 200 });
-
-  const hoverIcon = async () => {
-    await userEvent.hover(icon);
-  };
-
-  return {
-    ...queries,
-    tooltip,
-    tooltipHoverDiv,
-    hoverIcon
-  };
-};
-
-describe("Tooltip", () => {
-  describe("Rendering", () => {
-    beforeEach(() => {
-      Object.defineProperty(window, "innerHeight", {
-        configurable: true,
-        value: 1000
-      });
-      Object.defineProperty(window, "innerWidth", {
-        configurable: true,
-        value: 1000
-      });
-    });
-
-    it("should render the tooltip with the default parameters", async () => {
-      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(defaultParams => ({
-        ...defaultParams,
-        location: undefined,
-        position: undefined
-      }));
-
-      await hoverIcon();
-
-      expect(tooltip).toBeInTheDocument();
-      await waitFor(() =>
-        expect(tooltipHoverDiv).toHaveStyle({
-          left: "522px",
-          top: "480px"
-        })
-      );
-    });
-
-    it("should render the tooltip with a custom location to the right and position end", async () => {
-      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
-        ...p,
-        location: "right",
-        position: "end"
-      }));
-
-      await hoverIcon();
-
-      expect(tooltip).toBeInTheDocument();
-      await waitFor(() =>
-        expect(tooltipHoverDiv).toHaveStyle({
-          top: "488px",
-          left: "522px"
-        })
-      );
-    });
-
-    it("should render the tooltip with a custom location to the right and position start", async () => {
-      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
-        ...p,
-        location: "right",
-        position: "start"
-      }));
-
-      await hoverIcon();
-
-      expect(tooltip).toBeInTheDocument();
-      await waitFor(() =>
-        expect(tooltipHoverDiv).toHaveStyle({
-          left: "522px",
-          bottom: "478px"
-        })
-      );
-    });
-
-    it("should render the tooltip with a custom location to the right and position center", async () => {
-      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
-        ...p,
-        location: "right",
-        position: "center"
-      }));
-
-      await hoverIcon();
-
-      expect(tooltip).toBeInTheDocument();
-      await waitFor(() =>
-        expect(tooltipHoverDiv).toHaveStyle({
-          left: "522px",
-          top: "480px"
-        })
-      );
-    });
-
-    it("should render the tooltip with a custom location to the left and position end", async () => {
-      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
-        ...p,
-        location: "left",
-        position: "end"
-      }));
-
-      await hoverIcon();
-
-      expect(tooltip).toBeInTheDocument();
-      await waitFor(() =>
-        expect(tooltipHoverDiv).toHaveStyle({
-          right: "512px",
-          top: "488px"
-        })
-      );
-    });
-
-    it("should render the tooltip with a custom location to the left and position start", async () => {
-      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
-        ...p,
-        location: "left",
-        position: "start"
-      }));
-
-      await hoverIcon();
-
-      expect(tooltip).toBeInTheDocument();
-      await waitFor(() =>
-        expect(tooltipHoverDiv).toHaveStyle({
-          right: "512px",
-          bottom: "478px"
-        })
-      );
-    });
-
-    it("should render the tooltip with a custom location to the left and position center", async () => {
-      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
-        ...p,
-        location: "left",
-        position: "center"
-      }));
-
-      await hoverIcon();
-
-      expect(tooltip).toBeInTheDocument();
-      await waitFor(() =>
-        expect(tooltipHoverDiv).toHaveStyle({
-          right: "512px",
-          top: "480px"
-        })
-      );
-    });
-
-    it("should render the tooltip with a custom location to the top and position end", async () => {
-      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
-        ...p,
-        location: "top",
-        position: "end"
-      }));
-
-      await hoverIcon();
-
-      expect(tooltip).toBeInTheDocument();
-      await waitFor(() =>
-        expect(tooltipHoverDiv).toHaveStyle({
-          left: "488px",
-          bottom: "512px"
-        })
-      );
-    });
-
-    it("should render the tooltip with a custom location to the top and position start", async () => {
-      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
-        ...p,
-        location: "top",
-        position: "start"
-      }));
-
-      await hoverIcon();
-
-      expect(tooltip).toBeInTheDocument();
-      await waitFor(() =>
-        expect(tooltipHoverDiv).toHaveStyle({
-          right: "478px",
-          bottom: "512px"
-        })
-      );
-    });
-
-    it("should render the tooltip with a custom location to the top and position center", async () => {
-      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
-        ...p,
-        location: "top",
-        position: "center"
-      }));
-
-      await hoverIcon();
-
-      expect(tooltip).toBeInTheDocument();
-      await waitFor(() =>
-        expect(tooltipHoverDiv).toHaveStyle({
-          left: "405px",
-          bottom: "512px"
-        })
-      );
-    });
-
-    it("should render the tooltip with a custom location to the bottom and position end", async () => {
-      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
-        ...p,
-        location: "bottom",
-        position: "end"
-      }));
-
-      await hoverIcon();
-
-      expect(tooltip).toBeInTheDocument();
-      await waitFor(() =>
-        expect(tooltipHoverDiv).toHaveStyle({
-          left: "488px",
-          top: "522px"
-        })
-      );
-    });
-
-    it("should render the tooltip with a custom location to the bottom and position start", async () => {
-      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
-        ...p,
-        location: "bottom",
-        position: "start"
-      }));
-
-      await hoverIcon();
-
-      expect(tooltip).toBeInTheDocument();
-      await waitFor(() =>
-        expect(tooltipHoverDiv).toHaveStyle({
-          right: "478px",
-          top: "522px"
-        })
-      );
-    });
-
-    it("should render the tooltip with a custom location to the bottom and position center", async () => {
-      const { tooltip, tooltipHoverDiv, hoverIcon } = await createTooltip(p => ({
-        ...p,
-        location: "bottom",
-        position: "center"
-      }));
-
-      await hoverIcon();
-
-      expect(tooltip).toBeInTheDocument();
-      await waitFor(() =>
-        expect(tooltipHoverDiv).toHaveStyle({
-          left: "405px",
-          top: "522px"
-        })
-      );
-    });
-  });
-
-  describe("Colors", () => {
-    it("renders black color by default", async () => {
-      const { tooltipHoverDiv } = await createTooltip();
-      expect(tooltipHoverDiv).toHaveClass("black");
-    });
-
-    it("renders blue color", async () => {
-      const { tooltipHoverDiv } = await createTooltip(p => ({
-        ...p,
-        color: "blue"
-      }));
-
-      expect(tooltipHoverDiv).toHaveClass("blue");
-    });
-  });
-
-  describe("Label", () => {
-    it("can also be an element", async () => {
-      const { tooltip } = await createTooltip(p => ({ ...p, label: <span>Label</span> }));
-
-      expect(tooltip).toBeInTheDocument();
-
-      const label = tooltip.querySelector(".label");
-      expect(label).toBeInTheDocument();
-      expect(label).toHaveTextContent("Label");
-      expect((label as HTMLElement).tagName.toLowerCase()).toBe("span");
-    });
-  });
-
-  it("Triggers visibility of the tooltip on focus and blur using keyboard", async () => {
-    const { tooltip, tooltipHoverDiv } = await createTooltip();
-
-    if (!tooltipHoverDiv) {
-      throw new Error("Tooltip hover div not found");
-    }
-
-    const label = tooltip.querySelector(".label");
-
-    expect(label).toBeInTheDocument();
-
-    await userEvent.tab();
-
-    (label as HTMLElement).focus();
-
-    expect(tooltipHoverDiv).toHaveClass("visible");
-
-    await userEvent.tab();
-
-    expect(tooltipHoverDiv).not.toHaveClass("visible");
-  });
-
-  it("Sets visible to false on escape", async () => {
-    const { tooltip, tooltipHoverDiv } = await createTooltip();
-
-    if (!tooltipHoverDiv) {
-      throw new Error("Tooltip hover div not found");
-    }
-
-    const label = tooltip.querySelector(".label");
-
-    expect(label).toBeInTheDocument();
-
-    await userEvent.tab();
-
-    (label as HTMLElement).focus();
-
-    expect(tooltipHoverDiv).toHaveClass("visible");
-
-    await userEvent.keyboard("{Escape}");
-
-    expect(tooltipHoverDiv).not.toHaveClass("visible");
-  });
-});

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