@onewelcome/react-lib-components 5.2.0 → 6.1.0

package/src/components/Notifications/Snackbar/SnackbarProvider/SnackbarProvider.test.tsx

@@ -1,215 +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, useState } from "react";
-import {
-  render,
-  getByTestId,
-  getAllByText,
-  waitFor,
-  getAllByRole,
-  getByText,
-  fireEvent
-} from "@testing-library/react";
-import { SnackbarProvider, Props } from "./SnackbarProvider";
-import { useSnackbar } from "../useSnackbar";
-import userEvent from "@testing-library/user-event";
-
-const successProps = {
-  title: "success title",
-  options: {
-    duration: 10,
-    onClose: jest.fn()
-  }
-};
-
-const errorProps = {
-  title: "error title",
-  options: {
-    duration: 10,
-    onClose: jest.fn()
-  }
-};
-
-const infoProps = {
-  title: "info title",
-  content: "test content",
-  options: {
-    actions: [
-      { label: "Contact support", onClick: jest.fn() },
-      { label: "Contact Onewelcome", onClick: jest.fn() }
-    ]
-  }
-};
-
-const warningProps = {
-  title: "warning title",
-  options: {
-    duration: 10,
-    onClose: jest.fn()
-  }
-};
-
-const renderSnackbarProvider = (props?: Partial<Props>) => {
-  const AppComponent = () => {
-    const {
-      enqueueSuccessSnackbar,
-      enqueueErrorSnackbar,
-      enqueueSnackbar,
-      enqueueWarningSnackbar
-    } = useSnackbar();
-    const [index, setIndex] = useState(0);
-    return (
-      <div>
-        content
-        <button
-          data-testid="show-success"
-          onClick={() => {
-            enqueueSuccessSnackbar(successProps.title + index, undefined, successProps.options);
-            setIndex(index + 1);
-          }}
-        >
-          Success
-        </button>
-        <button
-          data-testid="show-error"
-          onClick={() => {
-            enqueueErrorSnackbar(errorProps.title + index);
-            setIndex(index + 1);
-          }}
-        >
-          Error
-        </button>
-        <button
-          data-testid="show-info"
-          onClick={() => {
-            enqueueSnackbar(infoProps.title + index, infoProps.content, infoProps.options);
-            setIndex(index + 1);
-          }}
-        >
-          Info
-        </button>
-        <button
-          data-testid="show-warning"
-          onClick={() => {
-            enqueueWarningSnackbar(warningProps.title + index, undefined, warningProps.options);
-            setIndex(index + 1);
-          }}
-        >
-          Warning
-        </button>
-      </div>
-    );
-  };
-
-  const queries = render(
-    <SnackbarProvider {...props} closeButtonTitle="close">
-      <AppComponent />
-    </SnackbarProvider>
-  );
-
-  const showSuccessSnackbarBtn = getByTestId(queries.container, "show-success");
-  const showErrorSnackbarBtn = getByTestId(queries.container, "show-error");
-  const showInfoSnackbarBtn = getByTestId(queries.container, "show-info");
-  const showWarningSnackbarBtn = getByTestId(queries.container, "show-warning");
-
-  return {
-    ...queries,
-    showSuccessSnackbarBtn,
-    showErrorSnackbarBtn,
-    showInfoSnackbarBtn,
-    showWarningSnackbarBtn
-  };
-};
-
-describe("SnackbarProvider", () => {
-  it("renders without crashing", () => {
-    const { container } = renderSnackbarProvider();
-
-    expect(container).toHaveTextContent("content");
-  });
-
-  it("should stack 3 snackbars at one time", async () => {
-    const { showSuccessSnackbarBtn, showWarningSnackbarBtn } = renderSnackbarProvider();
-
-    await userEvent.click(showSuccessSnackbarBtn);
-    await userEvent.click(showWarningSnackbarBtn);
-    await userEvent.click(showSuccessSnackbarBtn);
-    await userEvent.click(showSuccessSnackbarBtn);
-
-    await waitFor(() => {
-      expect(getAllByText(document.body, new RegExp(successProps.title))).toHaveLength(2);
-      expect(getAllByText(document.body, new RegExp(warningProps.title))).toHaveLength(1);
-    });
-  });
-
-  it("should render 3 variants of snackbars", async () => {
-    const { showSuccessSnackbarBtn, showErrorSnackbarBtn, showInfoSnackbarBtn } =
-      renderSnackbarProvider();
-
-    await userEvent.click(showSuccessSnackbarBtn);
-    await userEvent.click(showErrorSnackbarBtn);
-    await userEvent.click(showInfoSnackbarBtn);
-
-    expect(getByText(document.body, new RegExp(successProps.title))).toBeDefined();
-    expect(getByText(document.body, new RegExp(errorProps.title))).toBeDefined();
-    expect(getByText(document.body, new RegExp(infoProps.title))).toBeDefined();
-    expect(getByText(document.body, infoProps.content)).toBeDefined();
-    const infoSnackbarActions = getAllByRole(document.body, "button", { name: /Contact/i });
-    expect(infoSnackbarActions).toHaveLength(2);
-
-    await userEvent.click(infoSnackbarActions[0]);
-    await userEvent.click(infoSnackbarActions[1]);
-
-    expect(infoProps.options.actions[0].onClick).toBeCalledTimes(1);
-  });
-});
-
-describe("handlers", () => {
-  it("should fire onClose", async () => {
-    const onCloseHandler = jest.fn();
-    const ExampleComponent = () => {
-      const { enqueueErrorSnackbar, enqueueSuccessSnackbar } = useSnackbar();
-
-      useEffect(() => {
-        enqueueErrorSnackbar("error", undefined, { onClose: onCloseHandler, duration: 1 });
-        enqueueSuccessSnackbar("success", undefined, { onClose: onCloseHandler, duration: 1 });
-      }, []);
-
-      return <div></div>;
-    };
-
-    const queries = render(
-      <SnackbarProvider closeButtonTitle="close">
-        <ExampleComponent />
-      </SnackbarProvider>
-    );
-
-    const errorSnackbar = await queries.findByText(/error/i);
-    const successSnackbar = await queries.findByText(/success/i);
-
-    expect(errorSnackbar).toBeTruthy();
-    expect(successSnackbar).toBeTruthy();
-
-    const parentErrorSnackbar = errorSnackbar.closest(".snackbar")!;
-    const parentSuccessSnackbar = successSnackbar.closest(".snackbar")!;
-
-    fireEvent.animationEnd(parentErrorSnackbar);
-    fireEvent.animationEnd(parentSuccessSnackbar);
-
-    await waitFor(() => expect(onCloseHandler).toHaveBeenCalledTimes(2));
-  });
-});

package/src/components/Pagination/Pagination.test.tsx

@@ -1,183 +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 { Pagination, Props } from "./Pagination";
-import { render, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-const defaultParams: Props = {
-  currentPage: 1,
-  totalElements: 500,
-  onPageChange: jest.fn(),
-  onPageSizeChange: jest.fn()
-};
-
-const createPagination = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-
-  if (params) {
-    parameters = params(defaultParams);
-  }
-
-  const queries = render(<Pagination data-testid="pagination" {...parameters} />);
-
-  const pagination = queries.getByTestId("pagination");
-
-  return {
-    ...queries,
-    pagination
-  };
-};
-
-describe("Pagination should render", () => {
-  it("renders without crashing", () => {
-    const { pagination } = createPagination();
-
-    expect(pagination).toBeTruthy();
-  });
-});
-
-describe("Pagination events", () => {
-  it("should correctly translate user input to pagination component", async () => {
-    const onPageChange = jest.fn();
-
-    const onPageSizeChange = jest.fn();
-
-    const { pagination } = createPagination(defaultParams => ({
-      ...defaultParams,
-      currentPage: 10,
-      onPageChange,
-      onPageSizeChange
-    }));
-
-    const next = pagination.querySelector('[data-paginate="next"]')!;
-    const previous = pagination.querySelector('[data-paginate="previous"]')!;
-    const first = pagination.querySelector('[data-paginate="first"]')!;
-    const last = pagination.querySelector('[data-paginate="last"]')!;
-    const pageSizeSelect = pagination.querySelector(".page-size-select")!;
-    const currentPageInput = pagination.querySelector("#current-value-input")!;
-
-    await userEvent.click(next);
-
-    await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(11));
-
-    await userEvent.click(previous);
-    await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(9));
-
-    await userEvent.click(first);
-    await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(1));
-
-    await userEvent.click(last);
-    await waitFor(() => expect(onPageChange).toHaveBeenCalledWith(50));
-
-    await userEvent.click(pageSizeSelect.querySelector("button")!);
-
-    const option25 = pageSizeSelect.querySelector('[data-value="25"]')!;
-
-    await userEvent.click(option25);
-
-    await waitFor(() => expect(onPageSizeChange).toHaveBeenCalledWith(25));
-  });
-});
-
-describe("different current pages and their effect on what renders", () => {
-  it("is on the first page and does not render previous and first", () => {
-    const { pagination } = createPagination();
-
-    expect(pagination.querySelector('[data-paginate="next"]')).toBeTruthy();
-    expect(pagination.querySelector('[data-paginate="previous"]')).toHaveAttribute("disabled");
-  });
-
-  it("is on the second page and does render first", async () => {
-    const { pagination } = createPagination(defaultParams => ({
-      ...defaultParams,
-      currentPage: 2
-    }));
-
-    expect(pagination.querySelector('[data-paginate="first"]')).not.toHaveAttribute("disabled");
-  });
-
-  it("is on the second to last page and does render last", () => {
-    const { pagination } = createPagination(defaultParams => ({
-      ...defaultParams,
-      currentPage: 49
-    }));
-
-    expect(pagination.querySelector('[data-paginate="last"]')).not.toHaveAttribute("disabled");
-  });
-
-  it("is on the last page and does not render next & last", () => {
-    const { pagination } = createPagination(defaultParams => ({
-      ...defaultParams,
-      currentPage: 50
-    }));
-
-    expect(pagination.querySelector('[data-paginate="last"]')).toHaveAttribute("disabled");
-    expect(pagination.querySelector('[data-paginate="next"]')).toHaveAttribute("disabled");
-  });
-});
-
-describe("omitted attributes still renders correctly", () => {
-  it("still renders next if totalItems prop isn't given and we're on the first page", () => {
-    const { pagination } = createPagination(defaultParams => ({
-      ...defaultParams,
-      totalElements: undefined
-    }));
-
-    expect(pagination.querySelector(".page")).toBeFalsy();
-    expect(pagination.querySelector('[data-paginate="next"]')).toBeTruthy();
-    expect(pagination.querySelector('[data-paginate="previous"]')).toHaveAttribute("disabled");
-  });
-
-  it("still renders next if totalItems prop isn't given and we're on the first page", () => {
-    const { pagination } = createPagination(defaultParams => ({
-      ...defaultParams,
-      currentPage: 4,
-      totalElements: undefined
-    }));
-
-    expect(pagination.querySelector(".page")).toBeFalsy();
-    expect(pagination.querySelector('[data-paginate="next"]')).toBeTruthy();
-    expect(pagination.querySelector('[data-paginate="previous"]')).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 <Pagination {...defaultParams} 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/Popover/Popover.test.tsx

@@ -1,103 +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, { Fragment, useRef } from "react";
-import { Popover, Props } from "./Popover";
-import { render } from "@testing-library/react";
-import { usePosition } from "../../hooks/usePosition";
-
-const createPopover = (params?: (defaultParams: Props) => Props) => {
-  const Component = () => {
-    const relativeElement = useRef<HTMLButtonElement>(null);
-    const elementToBePositioned = useRef<HTMLDivElement>(null);
-
-    const defaultParams: Props = {
-      children: (
-        <ul>
-          <li>Test</li>
-          <li>Test</li>
-          <li>Test</li>
-        </ul>
-      ),
-      show: true,
-      placement: { vertical: "top", horizontal: "left" }
-    };
-    let parameters: Props = defaultParams;
-
-    if (params) {
-      parameters = params(defaultParams);
-    }
-
-    const { top, left, bottom, right, calculatePosition } = usePosition({
-      elementToBePositioned: elementToBePositioned,
-      relativeElement: relativeElement,
-      ...parameters
-    });
-
-    return (
-      <Fragment>
-        <button data-testid="button" onClick={calculatePosition} ref={relativeElement}>
-          Test
-        </button>
-        <Popover
-          {...defaultParams}
-          data-testid="popover"
-          style={{ top: top, left: left, bottom: bottom, right: right }}
-          ref={elementToBePositioned}
-        >
-          Test
-        </Popover>
-      </Fragment>
-    );
-  };
-
-  const queries = render(<Component />);
-  const button = queries.getByTestId("button");
-  const popover = queries.getByTestId("popover");
-
-  /** Let the hacking begin */
-  Object.defineProperty(button, "offsetHeight", { configurable: true, value: 500 });
-  Object.defineProperty(button, "offsetWidth", { configurable: true, value: 500 });
-
-  Object.defineProperty(window, "innerHeight", {
-    configurable: true,
-    value: 1000
-  });
-  Object.defineProperty(window, "innerWidth", {
-    configurable: true,
-    value: 1000
-  });
-
-  Object.defineProperty(popover, "offsetHeight", { configurable: true, value: 100 });
-  Object.defineProperty(popover, "offsetWidth", { configurable: true, value: 100 });
-
-  return {
-    ...queries,
-    popover,
-    button
-  };
-};
-
-describe("Popover should render", () => {
-  it("renders without crashing and has default left and top attributes", () => {
-    const { popover } = createPopover();
-
-    window.dispatchEvent(new Event("resize"));
-    window.dispatchEvent(new Event("scroll"));
-
-    expect(popover).toBeTruthy();
-  });
-});

package/src/components/ProgressBar/ProgressBar.test.tsx

@@ -1,91 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { ProgressBar, Props } from "./ProgressBar";
-import { render } from "@testing-library/react";
-
-const defaultParams: Props = {
-  label: "Loading...",
-  percentage: 0,
-  accessibilityTitle: "Progress bar",
-  caption: "One moment please..."
-};
-
-const createProgressBar = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<ProgressBar {...parameters} data-testid="ProgressBar" />);
-  const ProgressBarComponent = queries.getByTestId("ProgressBar");
-
-  return {
-    ...queries,
-    ProgressBarComponent
-  };
-};
-
-describe("ProgressBar should render", () => {
-  it("renders without crashing", () => {
-    const { ProgressBarComponent, getByText } = createProgressBar(defaultParams => ({
-      ...defaultParams,
-      className: "test"
-    }));
-
-    expect(ProgressBarComponent).toBeDefined();
-    expect(ProgressBarComponent).toHaveClass(`test`, { exact: true });
-    expect(ProgressBarComponent).toHaveAttribute("role", "progressbar");
-    expect(ProgressBarComponent).toHaveAttribute("aria-valuemin", "0");
-    expect(ProgressBarComponent).toHaveAttribute("aria-valuemax", "100");
-    expect(ProgressBarComponent).toHaveAttribute("aria-valuenow", "0");
-    expect(ProgressBarComponent).toHaveAttribute("title", "Progress bar");
-    expect(getByText("Loading...")).toBeDefined();
-    expect(getByText("Loading...")).toHaveClass("label");
-    expect(getByText("One moment please...")).toBeDefined();
-    expect(getByText("One moment please...")).toHaveClass("caption");
-  });
-});
-
-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(() => {
-        propagateRef(ref);
-      }, [ref]);
-
-      return <ProgressBar {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    const container = document.createElement("div");
-    render(<ExampleComponent propagateRef={refCheck} />, { container });
-  });
-});
-
-describe("ProgressBar should change styles depending on props", () => {
-  it("should show a progress when 'completed' prop is provided", () => {
-    const { ProgressBarComponent } = createProgressBar(defaultParams => ({
-      ...defaultParams,
-      completed: 40
-    }));
-
-    const bar = ProgressBarComponent.querySelector(".bar");
-    expect(bar).toHaveStyle("width: 40%");
-  });
-
-  it("should show a loading effect when 'completed' prop is not provided", () => {
-    const { ProgressBarComponent } = createProgressBar(defaultParams => ({
-      ...defaultParams
-    }));
-
-    const bar = ProgressBarComponent.querySelector(".bar");
-    expect(bar).toHaveClass("loading-state");
-  });
-});

package/src/components/Skeleton/Skeleton.test.tsx

@@ -1,112 +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 { Skeleton, Props } from "./Skeleton";
-import { render } from "@testing-library/react";
-
-const defaultParams: Props = {};
-
-const createSkeleton = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<Skeleton {...parameters} data-testid="skeleton" />);
-  const skeleton = queries.getByTestId("skeleton");
-
-  return {
-    ...queries,
-    skeleton
-  };
-};
-
-describe("Skeleton should render", () => {
-  it("renders without crashing", () => {
-    const { skeleton } = createSkeleton();
-
-    expect(skeleton).toHaveClass("skeleton text no-height", { exact: true });
-
-    expect(skeleton).toBeDefined();
-  });
-
-  it("renders with properties passed", () => {
-    const testClass = "testclass";
-    const { skeleton } = createSkeleton(defaultParams => ({
-      ...defaultParams,
-      className: testClass
-    }));
-
-    expect(skeleton).toHaveClass(`skeleton text no-height ${testClass}`, { exact: true });
-  });
-
-  it("renders text variant with width and height", () => {
-    const width = "10rem";
-    const height = 10;
-    const { skeleton } = createSkeleton(defaultParams => ({
-      ...defaultParams,
-      variant: "text",
-      width,
-      height
-    }));
-
-    expect(skeleton).toHaveClass(`skeleton text`, { exact: true });
-    expect(skeleton).toHaveStyle({ width, height: "10px" });
-  });
-
-  it("renders rectangle variant", () => {
-    const { skeleton } = createSkeleton(defaultParams => ({
-      ...defaultParams,
-      variant: "rectangle"
-    }));
-
-    expect(skeleton).toHaveClass(`skeleton no-height`, { exact: true });
-  });
-
-  it("renders circular variant", () => {
-    const { skeleton } = createSkeleton(defaultParams => ({
-      ...defaultParams,
-      variant: "circular"
-    }));
-
-    expect(skeleton).toHaveClass(`skeleton no-height circular`, { exact: 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(() => {
-        propagateRef(ref);
-      }, [ref]);
-
-      return <Skeleton {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    const container = document.createElement("div");
-    render(<ExampleComponent propagateRef={refCheck} />, { container });
-  });
-});