@onewelcome/react-lib-components 6.0.0 → 6.1.0

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

@@ -1,200 +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, { useRef, useEffect } from "react";
-import { Toggle, Props } from "./Toggle";
-import { render } from "@testing-library/react";
-import { Checkbox } from "../Checkbox/Checkbox";
-
-const defaultParams: Props = {
-  children: "Helper text",
-  name: "example toggle",
-  label: "Label"
-};
-
-const createToggle = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<Toggle {...parameters} data-testid="toggle"></Toggle>);
-  const toggle = queries.getByTestId("toggle");
-  const toggleWrapper = toggle.closest(".toggle-wrapper");
-
-  if (!toggleWrapper) {
-    throw new Error("toggleWrapper is null");
-  }
-
-  return {
-    ...queries,
-    toggle,
-    toggleWrapper
-  };
-};
-
-describe("Toggle should render", () => {
-  it("renders without crashing", () => {
-    const { toggle } = createToggle();
-
-    expect(toggle).toBeDefined();
-  });
-});
-
-describe("Toggle attributes", () => {
-  it("should be checked", () => {
-    const { toggle } = createToggle(defaultParams => ({ ...defaultParams, checked: true }));
-
-    expect(toggle).toHaveAttribute("aria-checked", "true");
-  });
-});
-
-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 (
-        <Toggle {...defaultParams} data-ref="testing" ref={ref}>
-          test label
-        </Toggle>
-      );
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});
-
-describe("helperProps should be properly propagated down", () => {
-  it("renders an anchor tag as helper", () => {
-    const { getByTestId } = createToggle(defaultParams => ({
-      ...defaultParams,
-      helperProps: { children: <a data-testid="helpertextanchor">test</a> }
-    }));
-
-    const helperTextAnchor = getByTestId("helpertextanchor");
-
-    expect(helperTextAnchor).toBeTruthy();
-  });
-});
-
-describe("All the props", () => {
-  it("should have toggle-wrapper--left class", () => {
-    const { toggleWrapper } = createToggle(defaultParams => ({
-      ...defaultParams,
-      labelPosition: "left"
-    }));
-
-    expect(toggleWrapper).toHaveClass("toggle-wrapper--left");
-  });
-
-  it("should have toggle-wrapper--right class", () => {
-    const { toggleWrapper } = createToggle(defaultParams => ({
-      ...defaultParams,
-      labelPosition: "right"
-    }));
-
-    expect(toggleWrapper).toHaveClass("toggle-wrapper--right");
-  });
-
-  it("should have toggle-wrapper--hide-label class", () => {
-    const { toggleWrapper } = createToggle(defaultParams => ({
-      ...defaultParams,
-      hideLabel: true
-    }));
-
-    expect(toggleWrapper).toHaveClass("toggle-wrapper--hide-label");
-  });
-
-  it("should have toggle-wrapper--nowrap class", () => {
-    const { toggleWrapper } = createToggle(defaultParams => ({
-      ...defaultParams,
-      labelOverflow: "nowrap"
-    }));
-
-    expect(toggleWrapper).toHaveClass("toggle-wrapper--nowrap");
-  });
-
-  it("should have toggle-wrapper--wrap class", () => {
-    const { toggleWrapper } = createToggle(defaultParams => ({
-      ...defaultParams,
-      labelOverflow: "wrap"
-    }));
-
-    expect(toggleWrapper).toHaveClass("toggle-wrapper--wrap");
-  });
-
-  it("should have toggle-wrapper--emphasis class", () => {
-    const { toggleWrapper } = createToggle(defaultParams => ({
-      ...defaultParams,
-      version: "emphasis"
-    }));
-
-    expect(toggleWrapper).toHaveClass("toggle-wrapper--emphasis");
-  });
-
-  it("should have toggle-wrapper--neutral class", () => {
-    const { toggleWrapper } = createToggle(defaultParams => ({
-      ...defaultParams,
-      version: "neutral"
-    }));
-
-    expect(toggleWrapper).toHaveClass("toggle-wrapper--neutral");
-  });
-
-  it("should have toggle-wrapper--packed class", () => {
-    const { toggleWrapper } = createToggle(defaultParams => ({
-      ...defaultParams,
-      spacing: "packed"
-    }));
-
-    expect(toggleWrapper).toHaveClass("toggle-wrapper--packed");
-  });
-
-  it("should have toggle-wrapper--between class", () => {
-    const { toggleWrapper } = createToggle(defaultParams => ({
-      ...defaultParams,
-      spacing: "between"
-    }));
-
-    expect(toggleWrapper).toHaveClass("toggle-wrapper--between");
-  });
-
-  it("should have toggle-wrapper--disabled class", () => {
-    const { toggleWrapper } = createToggle(defaultParams => ({ ...defaultParams, disabled: true }));
-
-    expect(toggleWrapper).toHaveClass("toggle-wrapper--disabled");
-  });
-
-  it("should have a label", () => {
-    const { getByText } = createToggle();
-
-    expect(getByText("Label")).toBeTruthy();
-  });
-});

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

@@ -1,141 +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 { CheckboxWrapper, Props } from "./CheckboxWrapper";
-import { Checkbox, Props as CheckboxProps } from "../../Checkbox/Checkbox";
-import { render } from "@testing-library/react";
-
-const defaultParentParams: CheckboxProps = {
-  indeterminate: false,
-  name: "parentcheckbox",
-  label: "testlabel",
-  children: [
-    <Checkbox checked={true} name="checkbox2">
-      Checkbox 2
-    </Checkbox>,
-    <Checkbox name="checkbox3">Checkbox 3</Checkbox>
-  ]
-};
-
-const defaultParams: Props = {
-  onChange: jest.fn(),
-  errorMessage: "This is an error",
-  error: false,
-  helperText: "Helpertext",
-  name: "Checkboxwrapper",
-  fieldsetProps: { legend: "Example title" },
-  label: "Label",
-  children: []
-};
-
-const createCheckboxWrapper = (
-  params?: (defaultParams: Props) => Props,
-  parentCheckboxParams?: (defaultParentParams: CheckboxProps) => CheckboxProps
-) => {
-  let parameters: Props = defaultParams;
-  let parentCheckboxParameters: CheckboxProps = defaultParentParams;
-
-  if (params) {
-    parameters = params(defaultParams);
-  }
-
-  if (parentCheckboxParams) {
-    parentCheckboxParameters = parentCheckboxParams(defaultParentParams);
-  }
-
-  const queries = render(
-    <CheckboxWrapper {...parameters} data-testid="checkboxwrapper">
-      <Checkbox data-testid="parentcheckbox" {...parentCheckboxParameters} />
-    </CheckboxWrapper>
-  );
-  const checkboxwrapper = queries.getByTestId("checkboxwrapper");
-  const parentcheckbox = queries.getByTestId("parentcheckbox");
-
-  return {
-    ...queries,
-    checkboxwrapper,
-    parentcheckbox
-  };
-};
-
-describe("checkboxwrapper should render", () => {
-  it("renders without crashing", () => {
-    const { checkboxwrapper } = createCheckboxWrapper();
-    expect(checkboxwrapper).toBeTruthy();
-  });
-});
-
-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 <CheckboxWrapper {...defaultParams} name="test" data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});
-
-describe("CheckboxWrapper should have an error", () => {
-  it("should have an error and the children checkboxes should have aria-describedby of the error message of the group.", () => {
-    const { checkboxwrapper } = createCheckboxWrapper(defaultParams => ({
-      ...defaultParams,
-      error: true,
-      errorMessage: "This is an error"
-    }));
-
-    const checkboxes = checkboxwrapper?.querySelectorAll(".checkbox-container input");
-    const errorMessage = checkboxwrapper?.querySelector(".default-helper .error-message .message");
-
-    /** All of the children checkboxes should be described by the error message in the parent checkbox group. */
-    checkboxes?.forEach(box => {
-      expect(box.getAttribute("aria-describedby")).toBe(errorMessage?.getAttribute("id"));
-    });
-
-    expect(checkboxes?.length).toBe(3);
-    expect(errorMessage).toHaveTextContent("This is an error");
-  });
-});
-
-describe("Parent checkbox attributes", () => {
-  it("is indeterminate, label is set", () => {
-    const { parentcheckbox, container } = createCheckboxWrapper(undefined, defaultParams => ({
-      ...defaultParams,
-      indeterminate: true
-    }));
-
-    expect(parentcheckbox.getAttribute("aria-checked")).toBe("mixed");
-    expect(
-      container.querySelector(`label[for="${parentcheckbox.getAttribute("id")}"]`)
-    ).toHaveTextContent("testlabel");
-  });
-});

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

@@ -1,211 +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 { InputWrapper, Props } from "./InputWrapper";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-const defaultParams: Props = {
-  success: false,
-  label: "Example label",
-  type: "text",
-  name: "Example input",
-  helperText: "this is helpertext",
-  errorMessage: "This is an error",
-  error: false,
-  value: "value",
-  onChange: jest.fn()
-};
-
-const createInputWrapper = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<InputWrapper {...parameters} data-testid="inputwrapper" />);
-  const inputwrapper = queries.getByTestId("inputwrapper");
-
-  return {
-    ...queries,
-    inputwrapper
-  };
-};
-
-describe("InputWrapper should render", () => {
-  it("renders without crashing", () => {
-    const { inputwrapper } = createInputWrapper();
-
-    expect(inputwrapper).toBeTruthy();
-  });
-
-  it("has helpertext", () => {
-    const { getByTestId } = createInputWrapper(defaultParams => ({
-      ...defaultParams,
-      helperProps: { "data-testid": "helper_text" }
-    }));
-
-    const helperText = getByTestId("helper_text");
-
-    expect(helperText).toBeTruthy();
-  });
-
-  it("is described by the helpertext", () => {
-    const { getByTestId } = createInputWrapper(defaultParams => ({
-      ...defaultParams,
-      inputProps: { "data-testid": "input" },
-      helperProps: { "data-testid": "helper_text" }
-    }));
-
-    const input = getByTestId("input");
-    const helperId = getByTestId("helper_text").getAttribute("id");
-
-    expect(input).toHaveAttribute("aria-describedby", helperId);
-  });
-
-  it("disabled input", () => {
-    const { getByLabelText } = createInputWrapper(defaultParams => ({
-      ...defaultParams,
-      disabled: true
-    }));
-
-    const input = getByLabelText("Example label");
-
-    expect(input).toBeDisabled();
-  });
-
-  it("consume wrapper props classname", () => {
-    const { container } = createInputWrapper(defaultParams => ({
-      ...defaultParams,
-      inputProps: { wrapperProps: { className: "testClass" } }
-    }));
-
-    expect(container.querySelector(".testClass")).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 (
-        <InputWrapper
-          {...defaultParams}
-          inputProps={{ 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("InputWrapper should be interactive", () => {
-  it("executes the eventlisteners", async () => {
-    const onFocusHandler = jest.fn();
-    const onChangeHandler = jest.fn();
-    const onBlurHandler = jest.fn();
-
-    const { getByTestId } = createInputWrapper(defaultParams => ({
-      ...defaultParams,
-      inputProps: {
-        "data-testid": "input"
-      },
-      onChange: onChangeHandler,
-      onFocus: onFocusHandler,
-      onBlur: onBlurHandler,
-      value: ""
-    }));
-
-    const input = getByTestId("input");
-
-    await userEvent.tab();
-    await userEvent.keyboard("test");
-
-    expect(input).toHaveFocus();
-    expect(onChangeHandler).toHaveBeenCalled();
-    expect(onFocusHandler).toHaveBeenCalled();
-
-    await userEvent.tab();
-
-    expect(onBlurHandler).toHaveBeenCalled();
-  });
-});
-
-describe("InputWrapper should support prefix and suffix", () => {
-  const prefix = "prefix";
-  const suffix = "suffix";
-
-  const hasPrefixAndSuffixDefined = (container: HTMLElement) => {
-    expect(container.querySelector("[data-prefix]")).toHaveTextContent(prefix);
-    expect(container.querySelector("[data-suffix]")).toHaveTextContent(suffix);
-  };
-
-  it("renders prefix and sufix", () => {
-    const { container } = createInputWrapper(defaultParams => ({
-      ...defaultParams,
-      value: "",
-      inputProps: { "data-testid": "input", prefix, suffix }
-    }));
-
-    hasPrefixAndSuffixDefined(container);
-  });
-
-  it("renders prefix and sufix when input has value", async () => {
-    const { container, getByTestId } = createInputWrapper(defaultParams => ({
-      ...defaultParams,
-      inputProps: { "data-testid": "input", prefix, suffix }
-    }));
-
-    const input = getByTestId("input");
-
-    hasPrefixAndSuffixDefined(container);
-
-    await userEvent.tab();
-    expect(input).toHaveFocus();
-    hasPrefixAndSuffixDefined(container);
-
-    await userEvent.tab();
-    expect(input).not.toHaveFocus();
-    hasPrefixAndSuffixDefined(container);
-  });
-});

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

@@ -1,117 +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 { RadioWrapper, Props } from "./RadioWrapper";
-import { Radio } from "../../Radio/Radio";
-import { render } from "@testing-library/react";
-
-const onChangeHandler = jest.fn();
-const checkedOptionValue = "option1";
-
-const defaultParams: Props = {
-  label: "Label",
-  errorMessage: "Error message",
-  helperText: "Helper text",
-  error: false,
-  onChange: onChangeHandler,
-  fieldsetProps: { legend: "Example title" },
-  value: checkedOptionValue,
-  name: "my-group",
-  children: [
-    <Radio helperText="This is helpertext" value="option1">
-      Option 1
-    </Radio>,
-    <Radio value="option2">Option 2</Radio>,
-    <Radio value="option3">Option 3</Radio>
-  ]
-};
-
-const createRadioWrapper = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<RadioWrapper {...parameters} data-testid="radiowrapper" />);
-  const radiowrapper = queries.getByTestId("radiowrapper");
-
-  return {
-    ...queries,
-    radiowrapper
-  };
-};
-
-describe("RadioWrapper should render", () => {
-  it("renders without crashing", () => {
-    const { radiowrapper } = createRadioWrapper();
-
-    expect(radiowrapper).toBeTruthy();
-  });
-
-  it("has option 1 properly linked with aria-describedby to its helpertext", () => {
-    const { radiowrapper } = createRadioWrapper();
-
-    const option1RadioWrapper = radiowrapper
-      ?.querySelector('input[value="option1"]')
-      ?.closest(".radio-wrapper");
-    const option1 = radiowrapper?.querySelector('input[value="option1"]');
-    const option1helper = option1RadioWrapper?.querySelector(".helper-text");
-
-    if (option1helper && option1) {
-      expect(`${option1helper.getAttribute("id")}-radio`).toBe(`${option1.getAttribute("id")}`);
-      expect(option1).toHaveAccessibleDescription();
-      expect(option1).toHaveAttribute("aria-describedby", option1helper.getAttribute("id"));
-    }
-  });
-
-  it("has all option's aria-describedby linked with the error message ID", () => {
-    const { radiowrapper } = createRadioWrapper(defaultParams => ({
-      ...defaultParams,
-      error: true,
-      errorMessage: "This is an error message"
-    }));
-
-    const errorMessage = radiowrapper?.querySelector(".error-message .message");
-    const option1 = radiowrapper?.querySelector('input[value="option1"]');
-
-    expect(errorMessage).toBeTruthy();
-    if (errorMessage) {
-      expect(option1).toHaveAttribute("aria-describedby", errorMessage.id);
-    }
-  });
-});
-
-describe("RadioWrapper selection", () => {
-  it("has option 2 selected, the rest is unselected", () => {
-    const { radiowrapper } = createRadioWrapper(defaultParams => ({
-      ...defaultParams,
-      value: "option2"
-    }));
-
-    expect(radiowrapper?.querySelector('input[value="option1"]')).toHaveAttribute(
-      "aria-checked",
-      "false"
-    );
-    expect(radiowrapper?.querySelector('input[value="option2"]')).toHaveAttribute(
-      "aria-checked",
-      "true"
-    );
-    expect(radiowrapper?.querySelector('input[value="option3"]')).toHaveAttribute(
-      "aria-checked",
-      "false"
-    );
-  });
-});