@onewelcome/react-lib-components 6.0.0 → 6.1.0

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

@@ -1,308 +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 { Checkbox, Props } from "./Checkbox";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Toggle } from "../Toggle/Toggle";
-
-const onChangeHandler = jest.fn();
-
-const defaultParams: Props = {
-  name: "Testing",
-  children: "checkbox content",
-  helperText: "example helper",
-  onChange: onChangeHandler
-};
-
-const createCheckbox = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<Checkbox {...parameters} data-testid="checkbox" />);
-  const checkbox = queries.getByTestId("checkbox");
-
-  return {
-    ...queries,
-    checkbox
-  };
-};
-
-describe("Checkbox should render", () => {
-  it("renders without crashing", () => {
-    const { checkbox } = createCheckbox();
-    expect(checkbox).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 <Checkbox {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});
-
-describe("Checkbox should have proper attributes", () => {
-  it("should be unchecked", () => {
-    const { checkbox } = createCheckbox();
-
-    expect(checkbox).toHaveAttribute("aria-checked", "false");
-  });
-
-  it("should be checked", () => {
-    const { checkbox } = createCheckbox(defaultParams => ({ ...defaultParams, checked: true }));
-
-    expect(checkbox).toHaveAttribute("aria-checked", "true");
-  });
-
-  it("should call the onChange function", async () => {
-    const onChangeHandler = jest.fn();
-    const { checkbox } = createCheckbox(defaultParams => ({
-      ...defaultParams,
-      onChange: onChangeHandler
-    }));
-    await userEvent.click(checkbox);
-    expect(onChangeHandler).toHaveBeenCalled();
-  });
-
-  it("should be disabled", async () => {
-    const onChangeHandler = jest.fn();
-    const { checkbox } = createCheckbox(defaultParams => ({
-      ...defaultParams,
-      onChange: onChangeHandler,
-      disabled: true
-    }));
-
-    expect(checkbox).toBeDisabled();
-
-    await userEvent.click(checkbox);
-
-    expect(onChangeHandler).not.toHaveBeenCalled();
-  });
-
-  it("nested checkbox should be disabled", () => {
-    const { getByTestId } = createCheckbox(defaultParams => ({
-      ...defaultParams,
-      indeterminate: false,
-      label: "test",
-      children: (
-        <Checkbox data-testid="nested-checkbox" name="test" disabled={true}>
-          test
-        </Checkbox>
-      )
-    }));
-
-    const nestedCheckbox = getByTestId("nested-checkbox");
-
-    expect(nestedCheckbox).toBeDisabled();
-  });
-
-  it("should have helpertext rendered", () => {
-    const { getByText } = createCheckbox();
-
-    const helperText = getByText("example helper");
-
-    expect(helperText).toBeTruthy();
-  });
-
-  it("should have the error state enabled", () => {
-    const { checkbox, container, getByTestId } = createCheckbox(defaultParams => ({
-      ...defaultParams,
-      error: true,
-      errorMessage: "This is an error",
-      formSelectorWrapperProps: { "data-testid": "checkbox-wrapper" }
-    }));
-
-    expect(checkbox).toHaveAttribute(
-      "aria-describedby",
-      container.querySelector(".error-message")!.id
-    );
-
-    expect(checkbox).toHaveAttribute("aria-invalid", "true");
-    expect(getByTestId("checkbox-wrapper")).toHaveClass("error");
-  });
-
-  it("should have a correctly linked label element", () => {
-    const { checkbox, container } = createCheckbox(defaultParams => ({
-      ...defaultParams,
-      label: "Label"
-    }));
-
-    const id = checkbox.getAttribute("id");
-    const label = container.querySelector(`label[for=${id}]`);
-
-    expect(label).toBeTruthy();
-    expect(label).toHaveTextContent("Label");
-  });
-
-  it("should have a react element as label", () => {
-    const { checkbox, container } = createCheckbox(defaultParams => ({
-      ...defaultParams,
-      label: <span>Label element</span>
-    }));
-
-    const id = checkbox.getAttribute("id");
-    const label = container.querySelector(`label[for=${id}]`);
-
-    expect(label).toBeTruthy();
-    expect(label).toHaveTextContent("Label element");
-  });
-});
-
-describe("Checkbox should be interactive", () => {
-  it("should call onChange when clicked", async () => {
-    const { checkbox } = createCheckbox();
-
-    expect(onChangeHandler).not.toBeCalled();
-    await userEvent.click(checkbox);
-    expect(onChangeHandler).toBeCalledTimes(1);
-  });
-
-  it("should not call onChange when disabled", async () => {
-    const { checkbox } = createCheckbox(defaultParams => ({ ...defaultParams, disabled: true }));
-
-    await userEvent.click(checkbox);
-    expect(onChangeHandler).not.toBeCalled();
-  });
-});
-
-describe("toggle version", () => {
-  it("should turn into a toggle", () => {
-    const { container } = render(<Toggle name="toggle">Test</Toggle>);
-
-    expect(container.querySelector("[data-toggle]")).toBeInTheDocument();
-  });
-});
-
-describe("missing attributes gets us errors", () => {
-  it("throws an error for missing label prop", () => {
-    // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
-    const err = console.error;
-    console.error = jest.fn();
-
-    let actual;
-
-    try {
-      // @ts-ignore: mandatory props (test for non-typescript react projects)
-      createCheckbox(defaultParams => ({
-        ...defaultParams,
-        children: <Checkbox name="test">Test</Checkbox>
-      }));
-    } catch (e: any) {
-      actual = e.message;
-    }
-
-    const expected =
-      "If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop.";
-
-    expect(actual).toEqual(expected);
-
-    console.error = err;
-  });
-
-  it("throws an error for indeterminate prop", () => {
-    // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
-    const err = console.error;
-    console.error = jest.fn();
-
-    let actual;
-
-    try {
-      // @ts-ignore: mandatory props (test for non-typescript react projects)
-      createCheckbox(defaultParams => ({
-        ...defaultParams,
-        label: "testing",
-        children: <Checkbox name="test">Test</Checkbox>
-      }));
-    } catch (e: any) {
-      actual = e.message;
-    }
-
-    const expected =
-      "If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop.";
-
-    expect(actual).toEqual(expected);
-
-    console.error = err;
-  });
-
-  it("throws an error for incorrect children prop", () => {
-    // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
-    const err = console.error;
-    console.error = jest.fn();
-
-    let actual;
-
-    try {
-      // @ts-ignore: mandatory props (test for non-typescript react projects)
-      createCheckbox(defaultParams => ({
-        name: undefined
-      }));
-    } catch (e: any) {
-      actual = e.message;
-    }
-
-    const expected = "Please pass a 'name' prop to your <Checkbox> component.";
-
-    expect(actual).toEqual(expected);
-
-    console.error = err;
-  });
-
-  it("throws an error for missing name prop", () => {
-    // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
-    const err = console.error;
-    console.error = jest.fn();
-
-    let actual;
-
-    try {
-      // @ts-ignore: mandatory props (test for non-typescript react projects)
-      createCheckbox(defaultParams => ({
-        children: "test"
-      }));
-    } catch (e: any) {
-      actual = e.message;
-    }
-
-    const expected = "Please pass a 'name' prop to your <Checkbox> component.";
-
-    expect(actual).toEqual(expected);
-
-    console.error = err;
-  });
-});

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

@@ -1,127 +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 { Fieldset, Props } from "./Fieldset";
-import { render } from "@testing-library/react";
-import { FormControl } from "../FormControl/FormControl";
-import { Input } from "../Input/Input";
-import { Select } from "../Select/Select";
-import { Option } from "../Select/Option";
-
-const defaultParams: Props = {
-  legend: "Example",
-  legendStyle: "h2",
-  children: [
-    <FormControl data-testid="form-control">
-      <Input placeholder="This is a placeholder" name="example" type="text" />
-    </FormControl>,
-    <FormControl data-testid="form-control">
-      <Select name="Example select" value="placeholder" onChange={jest.fn}>
-        <Option value="option1">Option1</Option>
-        <Option value="option2">Option2</Option>
-        <Option value="option3">Option3</Option>
-      </Select>
-    </FormControl>
-  ]
-};
-
-const createFieldset = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<Fieldset {...parameters} data-testid="fieldset" />);
-  const fieldset = queries.getByTestId("fieldset");
-
-  return {
-    ...queries,
-    fieldset
-  };
-};
-
-describe("Fieldset should render", () => {
-  it("renders without crashing", () => {
-    const { fieldset } = createFieldset();
-
-    expect(fieldset).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 <Fieldset {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});
-
-describe("Fieldset should get proper attributes and classes", () => {
-  it("has no padding class", () => {
-    const { fieldset } = createFieldset(defaultParams => ({ ...defaultParams, noPadding: true }));
-
-    expect(fieldset).toHaveClass("no-padding");
-  });
-
-  it("has no background styling", () => {
-    const { fieldset } = createFieldset(defaultParams => ({
-      ...defaultParams,
-      noBackground: true
-    }));
-
-    expect(fieldset.style.backgroundColor).toBe("");
-  });
-
-  it("has a correct legend and title <span> element", () => {
-    const { getByText } = createFieldset();
-
-    const legend = getByText(/example/i, { selector: "legend" });
-    const title = getByText(/example/i, { selector: "span" });
-
-    expect(legend).toHaveTextContent("Example");
-    expect(legend).toBeTruthy();
-    expect(title).toHaveClass("typography_style_h2");
-    expect(title).toBeTruthy();
-    expect(title).toHaveTextContent("Example");
-  });
-
-  it("renders its children correctly", () => {
-    const { getAllByTestId } = createFieldset();
-
-    const formcontrols = getAllByTestId("form-control");
-
-    expect(formcontrols).toBeTruthy();
-    expect(formcontrols).toHaveLength(2);
-  });
-});

package/src/components/Form/FileUpload/FileItem/FileItem.test.tsx

@@ -1,103 +0,0 @@
-import React from "react";
-import { FILE_ACTION, FileItem, Props } from "./FileItem";
-import { render } from "@testing-library/react";
-import user from "@testing-library/user-event";
-
-const defaultParams: Props = {
-  name: "Test.txt"
-};
-
-const createFileItem = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<FileItem {...parameters} />);
-  const component = queries.getByLabelText(`${parameters.name}-wrapper`);
-  const title = component.querySelector(".file-name");
-  const fileIcon = component.querySelector(".file-icon");
-  const actionIcon = component.querySelector(".action-icon");
-  const errorSubtitle = component.querySelector(".file-subtitle");
-  const progressBar = component.querySelector(".progress-bar");
-
-  return {
-    ...queries,
-    component,
-    title,
-    fileIcon,
-    actionIcon,
-    errorSubtitle,
-    progressBar
-  };
-};
-
-describe("component should render", () => {
-  it("renders without crashing", () => {
-    const { component } = createFileItem();
-
-    expect(component).toBeDefined();
-  });
-});
-
-describe("component should change display the correct style and elements according to the status", () => {
-  it("should show the correct details for completed", () => {
-    const { actionIcon, title } = createFileItem(defaultParams => ({
-      ...defaultParams,
-      status: "completed"
-    }));
-    expect(title).toHaveClass("completed");
-    expect(actionIcon).toHaveAttribute("title", FILE_ACTION.DELETE);
-  });
-
-  it("should show the correct details for uploading", () => {
-    const { actionIcon, title, progressBar } = createFileItem(defaultParams => ({
-      ...defaultParams,
-      status: "uploading"
-    }));
-    expect(title).toHaveClass("uploading");
-    expect(actionIcon).toHaveAttribute("title", FILE_ACTION.ABORT);
-    expect(progressBar).toBeDefined();
-  });
-
-  it("should show the correct details for readonly", () => {
-    const { actionIcon, title } = createFileItem(defaultParams => ({
-      ...defaultParams,
-      status: "readonly"
-    }));
-    expect(title).toHaveClass("readonly");
-    expect(actionIcon).toBeNull();
-  });
-
-  it("should show the correct details for error", () => {
-    const { actionIcon, title, errorSubtitle } = createFileItem(defaultParams => ({
-      ...defaultParams,
-      status: "error"
-    }));
-    expect(title).toHaveClass("error");
-    expect(actionIcon).toHaveAttribute("title", FILE_ACTION.REMOVE);
-    expect(errorSubtitle).toBeDefined();
-  });
-
-  it("should show the correct details for retry", () => {
-    const { actionIcon, title } = createFileItem(defaultParams => ({
-      ...defaultParams,
-      status: "retry"
-    }));
-    expect(title).toHaveClass("retry");
-    expect(actionIcon).toHaveAttribute("title", FILE_ACTION.RETRY);
-  });
-});
-
-describe("component should transmit the correct message upwards when a file action icon is clicked", () => {
-  it("should call retry action", async () => {
-    const onRequestedFileAction = jest.fn();
-    const { actionIcon } = createFileItem(defaultParams => ({
-      ...defaultParams,
-      status: "retry",
-      onRequestedFileAction
-    }));
-
-    await user.click(actionIcon as Element);
-    expect(onRequestedFileAction).toHaveBeenNthCalledWith(1, FILE_ACTION.RETRY, defaultParams.name);
-  });
-});