@onewelcome/react-lib-components 6.0.0 → 6.1.0

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

@@ -1,219 +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({ title: successProps.title + index, ...successProps.options });
-            setIndex(index + 1);
-          }}
-        >
-          Success
-        </button>
-        <button
-          data-testid="show-error"
-          onClick={() => {
-            enqueueErrorSnackbar({ title: errorProps.title + index });
-            setIndex(index + 1);
-          }}
-        >
-          Error
-        </button>
-        <button
-          data-testid="show-info"
-          onClick={() => {
-            enqueueSnackbar({
-              title: infoProps.title + index,
-              content: infoProps.content,
-              ...infoProps.options
-            });
-            setIndex(index + 1);
-          }}
-        >
-          Info
-        </button>
-        <button
-          data-testid="show-warning"
-          onClick={() => {
-            enqueueWarningSnackbar({ title: warningProps.title + index, ...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("should render 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/Notifications/Snackbar/useSnackbar.test.tsx

@@ -1,136 +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 { act, renderHook } from "@testing-library/react";
-import { useSnackbar } from "./useSnackbar";
-import { SnackbarProvider } from "./SnackbarProvider/SnackbarProvider";
-
-describe("useNotificationContext", () => {
-  it("should return the correct context", () => {
-    const { result } = renderHook(() => useSnackbar(), {
-      wrapper: ({ children }) => (
-        <SnackbarProvider closeButtonTitle="close">{children}</SnackbarProvider>
-      )
-    });
-
-    expect(result.current).toEqual({
-      enqueueWarningSnackbar: expect.any(Function),
-      enqueueErrorSnackbar: expect.any(Function),
-      enqueueSuccessSnackbar: expect.any(Function),
-      enqueueSnackbar: expect.any(Function)
-    });
-  });
-
-  it("should call new API", () => {
-    const { result } = renderHook(() => useSnackbar(), {
-      wrapper: ({ children }) => (
-        <SnackbarProvider closeButtonTitle="close">{children}</SnackbarProvider>
-      )
-    });
-
-    act(() => {
-      result.current.enqueueSnackbar({ title: "title" });
-      result.current.enqueueSnackbar({ title: "title", content: "content" });
-      result.current.enqueueSnackbar({
-        title: "title",
-        content: "content",
-        onClose: () => {},
-        actions: []
-      });
-      result.current.enqueueSnackbar({ content: "content" });
-      result.current.enqueueSnackbar({ content: "content", className: "123" });
-      result.current.enqueueSnackbar({ title: "title", variant: "error", duration: 123 });
-
-      result.current.enqueueErrorSnackbar({ title: "title" });
-      result.current.enqueueErrorSnackbar({ title: "title", content: "content" });
-      result.current.enqueueErrorSnackbar({
-        title: "title",
-        content: "content",
-        onClose: () => {},
-        actions: []
-      });
-      result.current.enqueueErrorSnackbar({ content: "content" });
-      result.current.enqueueErrorSnackbar({ content: "content", className: "123" });
-      result.current.enqueueErrorSnackbar({ title: "title", duration: 123 });
-
-      result.current.enqueueSuccessSnackbar({ title: "title" });
-      result.current.enqueueSuccessSnackbar({ title: "title", content: "content" });
-      result.current.enqueueSuccessSnackbar({
-        title: "title",
-        content: "content",
-        onClose: () => {},
-        actions: []
-      });
-      result.current.enqueueSuccessSnackbar({ content: "content" });
-      result.current.enqueueSuccessSnackbar({ content: "content", className: "123" });
-      result.current.enqueueSuccessSnackbar({ title: "title", duration: 123 });
-
-      result.current.enqueueWarningSnackbar({ title: "title" });
-      result.current.enqueueWarningSnackbar({ title: "title", content: "content" });
-      result.current.enqueueWarningSnackbar({
-        title: "title",
-        content: "content",
-        onClose: () => {},
-        actions: []
-      });
-      result.current.enqueueWarningSnackbar({ content: "content" });
-      result.current.enqueueWarningSnackbar({ content: "content", className: "123" });
-      result.current.enqueueWarningSnackbar({ title: "title", duration: 123 });
-    });
-  });
-
-  it("should call deprecated API", () => {
-    const { result } = renderHook(() => useSnackbar(), {
-      wrapper: ({ children }) => (
-        <SnackbarProvider closeButtonTitle="close">{children}</SnackbarProvider>
-      )
-    });
-
-    act(() => {
-      result.current.enqueueSnackbar("title");
-      result.current.enqueueSnackbar("title", "content");
-      result.current.enqueueSnackbar("title", "content", { onClose: () => {}, actions: [] });
-      result.current.enqueueSnackbar(undefined, "content");
-      result.current.enqueueSnackbar(undefined, "content", { className: "123" });
-      result.current.enqueueSnackbar("title", undefined, { variant: "error", duration: 123 });
-
-      result.current.enqueueErrorSnackbar("title");
-      result.current.enqueueErrorSnackbar("title", "content");
-      result.current.enqueueErrorSnackbar("title", "content", { onClose: () => {}, actions: [] });
-      result.current.enqueueErrorSnackbar(undefined, "content");
-      result.current.enqueueErrorSnackbar(undefined, "content", { className: "123" });
-      result.current.enqueueErrorSnackbar("title", undefined, { duration: 123 });
-
-      result.current.enqueueSuccessSnackbar("title");
-      result.current.enqueueSuccessSnackbar("title", "content");
-      result.current.enqueueSuccessSnackbar("title", "content", { onClose: () => {}, actions: [] });
-      result.current.enqueueSuccessSnackbar(undefined, "content");
-      result.current.enqueueSuccessSnackbar(undefined, "content", { className: "123" });
-      result.current.enqueueSuccessSnackbar("title", undefined, {
-        duration: 123
-      });
-
-      result.current.enqueueWarningSnackbar("title");
-      result.current.enqueueWarningSnackbar("title", "content");
-      result.current.enqueueWarningSnackbar("title", "content", { onClose: () => {}, actions: [] });
-      result.current.enqueueWarningSnackbar(undefined, "content");
-      result.current.enqueueWarningSnackbar(undefined, "content", { className: "123" });
-      result.current.enqueueWarningSnackbar("title", undefined, {
-        duration: 123
-      });
-    });
-  });
-});

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();
-  });
-});