@onewelcome/react-lib-components 6.0.0 → 6.1.0

package/src/components/Form/Wrapper/SelectWrapper/SelectWrapper.test.tsx

@@ -1,186 +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 { SelectWrapper, Props } from "./SelectWrapper";
-import { render } from "@testing-library/react";
-import { Option } from "../../Select/Option";
-import userEvent from "@testing-library/user-event";
-
-const onChangeHandler = jest.fn();
-
-const defaultParams: Props = {
-  success: false,
-  children: [
-    <Option key="1" value="option1">
-      Option 1
-    </Option>,
-    <Option key="2" value="option2">
-      Option 2
-    </Option>,
-    <Option key="3" value="option3">
-      Option 3
-    </Option>,
-    <Option key="4" value="option4">
-      Option 4
-    </Option>
-  ],
-  label: "select_label",
-  name: "select",
-  helperText: "helpertext",
-  helperProps: { "data-testid": "helpertext" },
-  errorMessage: "errormessage",
-  error: false,
-  value: "option1",
-  onChange: onChangeHandler
-};
-
-const createSelectWrapper = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<SelectWrapper {...parameters} data-testid="selectwrapper" />);
-  const selectwrapper = queries.getByTestId("selectwrapper");
-  const select = selectwrapper.querySelector("button");
-
-  return {
-    ...queries,
-    selectwrapper,
-    select
-  };
-};
-
-describe("SelectWrapper should render", () => {
-  it("renders without crashing", () => {
-    const { selectwrapper } = createSelectWrapper();
-
-    expect(selectwrapper).toBeDefined();
-  });
-});
-
-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>,
-        innerRef: React.RefObject<HTMLInputElement>
-      ) => void;
-    }) => {
-      const ref = useRef(null);
-      const innerRef = useRef(null);
-
-      useEffect(() => {
-        if (ref.current) {
-          propagateRef && propagateRef(ref, innerRef);
-        }
-      }, [ref]);
-
-      return (
-        <SelectWrapper
-          {...defaultParams}
-          selectProps={{ ref: innerRef, "data-ref": "inner-testing" }}
-          name="test"
-          data-ref="testing"
-          ref={ref}
-        />
-      );
-    };
-
-    const refCheck = (
-      ref: React.RefObject<HTMLElement>,
-      innerRef: React.RefObject<HTMLElement>
-    ) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-      expect(innerRef.current!.nodeName).toBe("SELECT");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});
-
-describe("SelectWrapper & Select have the right attributes", () => {
-  it("select has aria values", async () => {
-    const { select, getByTestId, findByText } = createSelectWrapper();
-
-    const helpertext = getByTestId("helpertext");
-    const label = await findByText("select_label");
-
-    expect(select).toHaveAttribute("aria-describedby", helpertext.id);
-    expect(select).toHaveAttribute("aria-labelledby", label.id);
-  });
-
-  it("SelectWrapper has the right helpertext", () => {
-    const { getByTestId } = createSelectWrapper();
-
-    const helpertext = getByTestId("helpertext");
-
-    expect(helpertext).toBeTruthy();
-    expect(helpertext).toHaveTextContent("helpertext");
-  });
-
-  it("Passes the proper helperProps class", () => {
-    const { getByTestId } = createSelectWrapper(defaultParams => ({
-      ...defaultParams,
-      helperProps: { ...defaultParams.helperProps, className: "example-helper-classname" }
-    }));
-
-    const helpertext = getByTestId("helpertext");
-
-    expect(helpertext.parentElement).toHaveClass("example-helper-classname");
-  });
-
-  it("Passes the proper selectProps class", () => {
-    const { getByTestId } = createSelectWrapper(defaultParams => ({
-      ...defaultParams,
-      selectProps: {
-        ...defaultParams.selectProps,
-        "data-testid": "select-element",
-        className: "example-select-classname"
-      }
-    }));
-
-    const select = getByTestId("select-element");
-
-    expect(select).toHaveClass("example-select-classname");
-  });
-
-  it("SelectWrapper has the right errormessage", async () => {
-    const { findByText, select } = createSelectWrapper(defaultParams => ({
-      ...defaultParams,
-      error: true
-    }));
-
-    const errorMessage = await findByText("errormessage");
-
-    expect(errorMessage).toBeTruthy();
-    expect(select).toHaveAttribute("aria-describedby", errorMessage.id);
-  });
-
-  it("Fires the onChange event", async () => {
-    const { select, findByText } = createSelectWrapper();
-
-    await userEvent.click(select as Element);
-
-    const option3 = await findByText("Option 3");
-
-    await userEvent.click(option3 as Element);
-
-    expect(onChangeHandler).toHaveBeenCalled();
-  });
-});

package/src/components/Form/Wrapper/TextareaWrapper/TextareaWrapper.test.tsx

@@ -1,173 +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 { TextareaWrapper, Props } from "./TextareaWrapper";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-const defaultParams: Props = {
-  success: false,
-  name: "textarea",
-  label: "textarea_label",
-  value: "value",
-  error: false,
-  helperText: "helpertext",
-  helperProps: { "data-testid": "helpertext" },
-  errorMessage: "errormessage",
-  textareaProps: { "data-testid": "textarea" },
-  onChange: jest.fn()
-};
-
-const createTextareaWrapper = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<TextareaWrapper {...parameters} data-testid="textareawrapper" />);
-  const textareawrapper = queries.getByTestId("textareawrapper");
-  const textarea = queries.getByTestId("textarea");
-
-  return {
-    ...queries,
-    textareawrapper,
-    textarea
-  };
-};
-
-describe("TextareaWrapper should render", () => {
-  it("renders without crashing", () => {
-    const { textareawrapper } = createTextareaWrapper();
-
-    expect(textareawrapper).toBeDefined();
-  });
-});
-
-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>,
-        innerRef: React.RefObject<HTMLInputElement>
-      ) => void;
-    }) => {
-      const ref = useRef(null);
-      const innerRef = useRef(null);
-
-      useEffect(() => {
-        if (ref.current) {
-          propagateRef && propagateRef(ref, innerRef);
-        }
-      }, [ref]);
-
-      return (
-        <TextareaWrapper
-          {...defaultParams}
-          textareaProps={{ ref: innerRef, "data-ref": "inner-testing" }}
-          name="test"
-          data-ref="testing"
-          ref={ref}
-        />
-      );
-    };
-
-    const refCheck = (
-      ref: React.RefObject<HTMLElement>,
-      innerRef: React.RefObject<HTMLElement>
-    ) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-      expect(innerRef.current).toHaveAttribute("data-ref", "inner-testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});
-
-describe("TextareaWrapper & Textarea have the right attributes", () => {
-  it("textarea has aria values", async () => {
-    const { textarea, getByTestId, findByText } = createTextareaWrapper();
-
-    const helpertext = getByTestId("helpertext");
-    const label = await findByText("textarea_label");
-
-    expect(textarea).toHaveAttribute("aria-describedby", helpertext.id);
-    expect(textarea).toHaveAttribute("aria-labelledby", label.id);
-  });
-
-  it("TextareaWrapper has the right helpertext", () => {
-    const { getByTestId } = createTextareaWrapper();
-
-    const helpertext = getByTestId("helpertext");
-
-    expect(helpertext).toBeTruthy();
-    expect(helpertext).toHaveTextContent("helpertext");
-  });
-
-  it("TextareaWrapper has the right errormessage", async () => {
-    const { findByText, textarea } = createTextareaWrapper(defaultParams => ({
-      ...defaultParams,
-      error: true
-    }));
-
-    const errorMessage = await findByText("errormessage");
-
-    expect(errorMessage).toBeTruthy();
-    expect(textarea).toHaveAttribute("aria-describedby", errorMessage.id);
-  });
-});
-
-describe("TextarenaWrapper should be interactive", () => {
-  it("Fires the onChange, onFocus & onBlur events", async () => {
-    const onFocusHandler = jest.fn();
-    const onChangeHandler = jest.fn();
-    const onBlurHandler = jest.fn();
-
-    const { textarea } = createTextareaWrapper(defaultParams => ({
-      ...defaultParams,
-      onChange: onChangeHandler,
-      onFocus: onFocusHandler,
-      onBlur: onBlurHandler
-    }));
-
-    await userEvent.tab();
-    expect(textarea).toHaveFocus();
-
-    await userEvent.keyboard("input");
-    await userEvent.tab();
-
-    expect(onChangeHandler).toHaveBeenCalledTimes(5);
-    expect(onFocusHandler).toHaveBeenCalled();
-    expect(onBlurHandler).toHaveBeenCalled();
-  });
-
-  it("Fires the onMouseEnter & onMouseLeave events", async () => {
-    const onMouseEnterHandler = jest.fn();
-    const onMouseLeaveHandler = jest.fn();
-
-    const { textarea } = createTextareaWrapper(defaultParams => ({
-      ...defaultParams,
-      onMouseEnter: onMouseEnterHandler,
-      onMouseLeave: onMouseLeaveHandler
-    }));
-
-    await userEvent.hover(textarea);
-    expect(onMouseEnterHandler).toHaveBeenCalled();
-    await userEvent.unhover(textarea);
-    expect(onMouseLeaveHandler).toHaveBeenCalled();
-  });
-});

package/src/components/Form/Wrapper/Wrapper/Wrapper.test.tsx

@@ -1,59 +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 { Wrapper } from "./Wrapper";
-import { render } from "@testing-library/react";
-import { Input } from "../../Input/Input";
-
-describe("Wrapper should render", () => {
-  it("renders without crashing", () => {
-    const { container } = render(
-      <Wrapper label="label" name="name" helperId="helperID">
-        <Input onChange={jest.fn()} name="test" type="text" value="test" />
-      </Wrapper>
-    );
-    const wrapper = container.querySelector(".wrapper");
-
-    expect(wrapper).toBeDefined();
-  });
-});
-
-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 <Wrapper name="wrapper" children={<div></div>} 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/Icon/Icon.test.tsx

@@ -1,83 +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 { Icon, Props, Icons } from "./Icon";
-import { render } from "@testing-library/react";
-
-interface PartialProps extends Omit<Props, "ref"> {}
-
-const initParams: PartialProps = {
-  icon: Icons.Calendar,
-  color: "rgb(26, 153, 60)"
-};
-
-const createIcon = (params = initParams) => {
-  const queries = render(
-    <Icon {...params} data-testid="icon-component" color={params.color} icon={params.icon} />
-  );
-  const icon = queries.getByTestId("icon-component");
-
-  return {
-    ...queries,
-    icon
-  };
-};
-
-describe("Icon", () => {
-  it("renders without crashing", () => {
-    const { icon } = createIcon();
-
-    expect(icon).toBeDefined();
-    expect(icon).toHaveClass("icon-calendar");
-    expect(icon.tagName.toLowerCase()).toBe("span");
-    expect(icon.getAttribute("style")).toBe("color: rgb(26, 153, 60);");
-  });
-
-  it("should render icon with within div tag", () => {
-    const tag = "div";
-    const { icon } = createIcon({ ...initParams, tag });
-
-    expect(icon).toBeDefined();
-    expect(icon.tagName.toLowerCase()).toBe(tag);
-  });
-});
-
-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 <Icon {...initParams} 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/Link/Link.test.tsx

@@ -1,203 +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 { Link, Props } from "./Link";
-import { render } from "@testing-library/react";
-import { BrowserRouter, Link as RouterLink } from "react-router-dom";
-
-const defaultParams: Props = {
-  type: "external",
-  to: "https://www.google.com"
-};
-
-const createLink = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(
-    <Link {...parameters} data-testid="link">
-      link content
-    </Link>
-  );
-  const link = queries.getByTestId("link");
-
-  return {
-    ...queries,
-    link
-  };
-};
-
-describe("Link should render", () => {
-  it("renders without crashing", () => {
-    const { link } = createLink();
-
-    expect(link).toBeTruthy();
-  });
-
-  it("is an external link with the right attributes", () => {
-    const { link } = createLink();
-
-    expect(link).toHaveAttribute("aria-disabled", "false");
-    expect(link).toHaveAttribute("rel", "noopener noreferer");
-    expect(link).toHaveAttribute("target", "_blank");
-  });
-
-  it("is an internal link with the right attributes", () => {
-    const { link } = createLink(defaultParams => ({
-      ...defaultParams,
-      type: "internal",
-      to: "/home"
-    }));
-
-    expect(link).toHaveAttribute("aria-disabled", "false");
-    expect(link).not.toHaveAttribute("rel", "noopener noreferer");
-    expect(link).not.toHaveAttribute("target", "_blank");
-  });
-
-  it("is a download link with the right attributes", () => {
-    const { link } = createLink(defaultParams => ({
-      ...defaultParams,
-      type: "download",
-      to: "/test.png"
-    }));
-
-    expect(link).toHaveAttribute("aria-disabled", "false");
-    expect(link).not.toHaveAttribute("rel", "noopener noreferer");
-    expect(link).not.toHaveAttribute("target", "_blank");
-    expect(link).toHaveAttribute("download");
-  });
-
-  it("should set the correct target", () => {
-    const { link } = createLink(defaultParams => ({ ...defaultParams, target: "_parent" }));
-
-    expect(link).toHaveAttribute("target", "_parent");
-  });
-
-  it("should accept this React Router Link prop and render as such", () => {
-    const queries = render(
-      <BrowserRouter>
-        <Link to="/contact" component={RouterLink} children="Routerlink" />
-      </BrowserRouter>
-    );
-
-    const routerLink = queries.getByText("Routerlink");
-
-    expect(routerLink).toBeTruthy();
-    expect(routerLink).toHaveClass("link");
-    expect(routerLink).toHaveAttribute("href", "/contact");
-  });
-
-  it("should be disabled", () => {
-    const { link } = createLink(defaultParams => ({ ...defaultParams, disabled: true }));
-
-    expect(link).not.toHaveAttribute("href");
-    expect(link).toHaveClass("disabled");
-    expect(link).toHaveStyle({ color: "var(--greyed-out)" });
-  });
-
-  it("should have a className added", () => {
-    const { link } = createLink(defaultParams => ({ ...defaultParams, className: "classname" }));
-
-    expect(link).toHaveClass("classname");
-  });
-
-  it("should render as a filled button ", () => {
-    const { link } = createLink(defaultParams => ({
-      ...defaultParams,
-      display: "button",
-      buttonVariant: "fill"
-    }));
-
-    expect(link).toHaveClass("button");
-    expect(link).toHaveClass("fill");
-  });
-
-  it("should render as a text button ", () => {
-    const { link } = createLink(defaultParams => ({
-      ...defaultParams,
-      display: "button",
-      buttonVariant: "text"
-    }));
-
-    expect(link).toHaveClass("button");
-    expect(link).toHaveClass("text");
-  });
-
-  it("should render as an outline button ", () => {
-    const { link } = createLink(defaultParams => ({
-      ...defaultParams,
-      display: "button",
-      buttonVariant: "outline"
-    }));
-
-    expect(link).toHaveClass("button");
-    expect(link).toHaveClass("outline");
-  });
-});
-
-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 <Link {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});
-
-describe("colors", () => {
-  it("should be color primary", () => {
-    const { link } = createLink(defaultParams => ({ ...defaultParams, color: "primary" }));
-
-    expect(link).toHaveStyle({ color: "var(--color-primary)" });
-  });
-
-  it("should be color secondary", () => {
-    const { link } = createLink(defaultParams => ({ ...defaultParams, color: "success" }));
-
-    expect(link).toHaveStyle({ color: "var(--color-success)" });
-  });
-
-  it("should be color danger", () => {
-    const { link } = createLink(defaultParams => ({ ...defaultParams, color: "danger" }));
-
-    expect(link).toHaveStyle({ color: "var(--color-danger)" });
-  });
-
-  it("should be color warning", () => {
-    const { link } = createLink(defaultParams => ({ ...defaultParams, color: "warning" }));
-
-    expect(link).toHaveStyle({ color: "var(--color-warning)" });
-  });
-});