@onewelcome/react-lib-components 6.0.0 → 6.2.0

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

@@ -1,374 +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 { FileType, FileUpload, Props } from "./FileUpload";
-import { createEvent, fireEvent, render, waitFor } from "@testing-library/react";
-
-import user from "@testing-library/user-event";
-import { act } from "react-dom/test-utils";
-
-const defaultParams: Props = {
-  accept: ".pdf, .jpg, .txt",
-  title: "File Upload test",
-  multiple: false,
-  fileList: []
-};
-
-const createComponent = (params?: (defaultParams: Props) => Props, dataTesId?: string) => {
-  let parameters: Props = defaultParams;
-  const id = dataTesId || "file-upload";
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<FileUpload {...parameters} data-testid={id} />);
-  const component = queries.getByTestId(id);
-  const container = queries.container;
-
-  return {
-    ...queries,
-    container,
-    component
-  };
-};
-
-describe("component should render", () => {
-  it("renders without crashing", () => {
-    const { component } = createComponent();
-
-    expect(component).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 <FileUpload {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});
-
-describe("File upload properties", () => {
-  it("is disabled", () => {
-    const { container } = createComponent(
-      defaultParams => ({
-        ...defaultParams,
-        disabled: true
-      }),
-      "file-upload-1"
-    );
-    const dropZone = container.querySelector(".file-dropzone");
-    expect(dropZone).toHaveClass("disabled");
-  });
-
-  it("shows success", () => {
-    const { container } = createComponent(
-      defaultParams => ({
-        ...defaultParams,
-        success: true
-      }),
-      "file-upload-2"
-    );
-
-    const dropZone = container.querySelector(".file-dropzone");
-    expect(dropZone).toHaveClass("success");
-    const icon = container.querySelector("[data-icon-status='success']");
-    expect(icon).toBeDefined();
-  });
-
-  it("shows error", () => {
-    const { container } = createComponent(
-      defaultParams => ({
-        ...defaultParams,
-        error: true
-      }),
-      "file-upload-3"
-    );
-
-    const dropZone = container.querySelector(".file-dropzone");
-    expect(dropZone).toHaveClass("error");
-    const icon = container.querySelector("[data-icon-status='error']");
-    expect(icon).toBeDefined();
-  });
-
-  it("has multiple attribute setup on the input", () => {
-    const { component } = createComponent(
-      defaultParams => ({
-        ...defaultParams,
-        multiple: true
-      }),
-      "file-upload-4"
-    );
-
-    expect(component).toHaveAttribute("multiple");
-  });
-
-  it("has the correct drag and drop label", () => {
-    const text = "test drag and drop text";
-    const { container } = createComponent(
-      defaultParams => ({
-        ...defaultParams,
-        dragAndDropText: text
-      }),
-      "file-upload-5"
-    );
-
-    expect(container.querySelector(".drag-and-drop-text")).toHaveTextContent(text);
-  });
-
-  it("has the correct button label", () => {
-    const text = "Test";
-    const { container } = createComponent(
-      defaultParams => ({
-        ...defaultParams,
-        selectButtonText: text
-      }),
-      "file-upload-6"
-    );
-
-    expect(container.querySelector("button")).toHaveTextContent(text);
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-});
-
-describe("File Upload should display items based on file list", () => {
-  it("should display the file list with each status", () => {
-    const file: FileType = {
-      name: "test",
-      size: 2,
-      type: "text",
-      status: "completed"
-    };
-    const { container } = createComponent(
-      defaultParams => ({
-        ...defaultParams,
-        fileList: [file]
-      }),
-      "file-upload-10"
-    );
-
-    const fileEl = container.querySelector(`#${file.name}`);
-    expect(fileEl).toBeDefined();
-    expect(fileEl).toHaveClass(file.status as string);
-  });
-});
-
-describe("file drag and drop properties", () => {
-  it("should call all the drag and drop callback provided", async () => {
-    const onDrop = jest.fn();
-    const onDragOver = jest.fn();
-    const onDragLeave = jest.fn();
-    const { container } = createComponent(
-      defaultParams => ({
-        ...defaultParams,
-        accept: ".png",
-        onDrop,
-        onDragOver,
-        onDragLeave,
-        fileList: []
-      }),
-      "file-upload-6"
-    );
-
-    const file = new File([""], "test.png", {
-      type: "image/png"
-    });
-
-    const eventData = {
-      dataTransfer: {
-        files: [file]
-      }
-    };
-
-    const dropZone = container.querySelector(".file-dropzone") as Element;
-    const dragEnterEvent = createEvent.dragEnter(dropZone, eventData);
-    const dragOverEvent = createEvent.dragOver(dropZone, eventData);
-    const dropEvent = createEvent.drop(dropZone, eventData);
-    const dragLeaveEvent = createEvent.dragLeave(dropZone, eventData);
-
-    await waitFor(() => {
-      fireEvent(dropZone, dragEnterEvent);
-    });
-
-    await waitFor(() => {
-      fireEvent(dropZone, dragLeaveEvent);
-    });
-
-    expect(onDragLeave).toHaveBeenCalled();
-
-    await waitFor(() => {
-      fireEvent(dropZone, dragOverEvent);
-    });
-
-    expect(dropZone).toHaveClass("drag-active");
-
-    expect(onDragOver).toHaveBeenCalled();
-
-    await waitFor(() => {
-      fireEvent(dropZone, dropEvent);
-    });
-
-    expect(onDrop).toHaveBeenCalled();
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-});
-
-describe("upload action", () => {
-  it("shows accepts only files that follow the type rules", async () => {
-    const onChange = jest.fn();
-    const { component } = createComponent(
-      defaultParams => ({
-        ...defaultParams,
-        onChange,
-        fileList: [],
-        accept: ".pdf"
-      }),
-      "file-upload-7"
-    );
-    const str = "test";
-    const blob = new Blob([str]);
-    const file = new File([blob], "test.pdf", {
-      type: "application/pdf"
-    });
-    File.prototype.text = jest.fn().mockResolvedValueOnce(str);
-    await act(async () => {
-      await waitFor(() => {
-        user.upload(component, file);
-      });
-    });
-
-    const file2 = new File([blob], "test.jpg", {
-      type: "application/jpg"
-    });
-
-    await act(async () => {
-      await waitFor(() => {
-        user.upload(component, file2);
-      });
-    });
-    expect(onChange).toHaveBeenCalledTimes(1);
-  });
-
-  it("doesn't upload a file two times", async () => {
-    const onChange = jest.fn();
-    const { component } = createComponent(
-      defaultParams => ({
-        ...defaultParams,
-        maxFileSize: 1024 * 1024,
-        onChange,
-        fileList: []
-      }),
-      "file-upload-9"
-    );
-    const value = "test";
-    const blob = new Blob([value]);
-    const file = new File([blob], "test.pdf", {
-      type: "application/pdf"
-    });
-    Object.defineProperty(file, "size", { value: 1024 * 1024 * 2 });
-    File.prototype.text = jest.fn().mockResolvedValueOnce(value);
-    await act(async () => {
-      await waitFor(() => {
-        user.upload(component, file);
-      });
-    });
-    await act(async () => {
-      await waitFor(() => {
-        user.upload(component, file);
-      });
-    });
-    expect(onChange).toHaveBeenCalledTimes(1);
-  });
-
-  it("doesn't allows files to be dropped according to the accepted file types", async () => {
-    const onDrop = jest.fn();
-    const { container } = createComponent(
-      defaultParams => ({
-        ...defaultParams,
-        accept: ".jpg",
-        onDrop,
-        fileList: []
-      }),
-      "file-upload-10"
-    );
-
-    const file = new File([""], "test.png", {
-      type: "image/png"
-    });
-
-    const eventData = {
-      dataTransfer: {
-        files: [file]
-      }
-    };
-    const dropZone = container.querySelector(".file-dropzone") as Element;
-    const dropEvent = createEvent.drop(dropZone, eventData);
-    await waitFor(() => {
-      fireEvent(dropZone, dropEvent);
-    });
-
-    expect(onDrop).toHaveBeenCalledTimes(0);
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-});
-
-describe("FileUpload should validate files on first render", () => {
-  const onChange = jest.fn();
-  const { component } = createComponent(
-    defaultParams => ({
-      ...defaultParams,
-      onChange,
-      fileList: [
-        {
-          name: "test",
-          type: "text/txt",
-          size: 1024 * 1024
-        }
-      ]
-    }),
-    "file-upload-8"
-  );
-
-  expect(component).toBeDefined();
-  expect(onChange).toHaveBeenCalled();
-});

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

@@ -1,63 +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 { Form } from "./Form";
-import { render } from "@testing-library/react";
-import { Button } from "../Button/Button";
-import userEvent from "@testing-library/user-event";
-
-describe("Form should render", () => {
-  it("renders without crashing", () => {
-    const { getByTestId } = render(<Form data-testid="component">Content</Form>);
-    const component = getByTestId("component");
-    expect(component).toBeDefined();
-  });
-});
-
-describe("Event should fire", () => {
-  it("should fire the onSubmitHandler function", async () => {
-    const onSubmitHandler = jest.fn();
-
-    onSubmitHandler.mockImplementation(event => {
-      event.preventDefault();
-    });
-
-    const { getByTestId } = render(
-      <Form onSubmit={onSubmitHandler}>
-        <Button data-testid="submit-button" type="submit"></Button>
-      </Form>
-    );
-
-    const button = getByTestId("submit-button");
-    await userEvent.click(button);
-    expect(onSubmitHandler).toHaveBeenCalled();
-  });
-});
-
-describe("Should be able to set some default form properties", () => {
-  const { getByTestId } = render(
-    <Form data-testid="form" method="POST" action="./test.php">
-      Test
-    </Form>
-  );
-
-  const form = getByTestId("form");
-
-  expect(form.getAttribute("method")).toBe("POST");
-  expect(form.getAttribute("action")).toBe("./test.php");
-  expect(form.innerHTML).toBe("Test");
-});

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

@@ -1,98 +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 { FormControl, Props } from "./FormControl";
-import { render } from "@testing-library/react";
-import { Input } from "../Input/Input";
-
-const defaultParams: Props = {
-  grid: 3,
-  align: "center",
-  children: [
-    <Input placeholder="This is a placeholder" name="example" data-testid="input" type="text" />,
-    <Input placeholder="This is a placeholder" name="example" data-testid="input" type="text" />,
-    <Input placeholder="This is a placeholder" name="example" data-testid="input" type="text" />
-  ]
-};
-
-const createFormControl = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<FormControl {...parameters} data-testid="formcontrol" />);
-  const formcontrol = queries.getByTestId("formcontrol");
-
-  return {
-    ...queries,
-    formcontrol
-  };
-};
-
-describe("FormControl should render", () => {
-  it("renders without crashing", () => {
-    const { formcontrol } = createFormControl();
-
-    expect(formcontrol).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 <FormControl {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});
-
-describe("FormControl attributes should be working correctly", () => {
-  it("has the right classes and attributes", () => {
-    const { formcontrol } = createFormControl();
-
-    expect(formcontrol).toHaveClass("grid");
-    expect(formcontrol.firstChild).toHaveClass("col-3");
-  });
-});
-
-describe("FormControl children should render properly", () => {
-  it("renders children", () => {
-    const { getAllByTestId } = createFormControl();
-
-    const inputs = getAllByTestId("input");
-
-    expect(inputs).toBeTruthy();
-    expect(inputs).toHaveLength(3);
-  });
-});

package/src/components/Form/FormGroup/FormGroup.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 { FormGroup, Props } from "./FormGroup";
-import { render } from "@testing-library/react";
-
-const defaultParams: Props = {
-  children: "Formcontent here",
-  helperId: "helper_id",
-  helperText: "example helper text",
-  errorMessage: "example error message",
-  errorId: "error_id"
-};
-
-const createFormGroup = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<FormGroup {...parameters} data-testid="formgroup"></FormGroup>);
-  const formgroup = queries.getByTestId("formgroup");
-
-  return {
-    ...queries,
-    formgroup
-  };
-};
-
-describe("FormSelectorGroup should render", () => {
-  it("renders without crashing", () => {
-    const { formgroup } = createFormGroup();
-
-    expect(formgroup).toBeDefined();
-  });
-
-  it("has the correct values and attributes", () => {
-    const { getByTestId } = createFormGroup(defaultParams => ({
-      ...defaultParams,
-      helperProps: { "data-testid": "helper_text" }
-    }));
-
-    const helperText = getByTestId("helper_text");
-
-    expect(helperText).toHaveAttribute("id", "helper_id");
-    expect(helperText).toHaveTextContent("example helper text");
-  });
-});
-
-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 <FormGroup {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});
-
-describe("Correct error state", () => {
-  it("has the correct state", () => {
-    const { formgroup } = createFormGroup(defaultParams => ({
-      ...defaultParams,
-      error: true,
-      errorMessage: "example error message",
-      errorId: "error_id"
-    }));
-    const errorMessage = formgroup.querySelector(".error-message");
-
-    expect(errorMessage).toBeTruthy();
-    expect(errorMessage?.querySelector("#error_id")).toBeTruthy();
-    expect(errorMessage?.querySelector("#error_id")).toHaveTextContent("example error message");
-  });
-});
-
-describe("no helpertext, but errorMessage is defined", () => {
-  it("doesn't show the div with 'default-helper' class when there's no error and no helpertext defined", () => {
-    const { formgroup } = createFormGroup(defaultParams => ({
-      ...defaultParams,
-      error: false,
-      helperText: undefined,
-      errorMessage: "example error message"
-    }));
-
-    expect(formgroup.querySelector(".default-helper")).toBeFalsy();
-  });
-
-  it("does show the div with 'default-helper' class when there's an error and no helpertext defined", () => {
-    const { formgroup } = createFormGroup(defaultParams => ({
-      ...defaultParams,
-      error: true,
-      helperText: undefined,
-      errorMessage: "example error message"
-    }));
-
-    expect(formgroup.querySelector(".default-helper")).toBeTruthy();
-  });
-});