@onewelcome/react-lib-components 6.0.0 → 6.2.0

package/src/components/Notifications/Dialog/DialogTitle/DialogTitle.test.tsx

@@ -1,87 +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 { DialogTitle, Props } from "./DialogTitle";
-import { render, getByText } from "@testing-library/react";
-
-const initParams: Props = {
-  id: "dialog-label",
-  title: "Example title"
-};
-
-describe("DialogTitle", () => {
-  it("renders without crashing", () => {
-    const { container } = render(<DialogTitle {...initParams} />);
-
-    const dialogTitleContainer = container.children[0];
-    expect(dialogTitleContainer).toHaveClass("header");
-    expect(getByText(container, initParams.title));
-  });
-
-  it("should render a title icon", () => {
-    const { container } = render(<DialogTitle {...initParams} titleIcon={true} />);
-
-    const dialogTitleContainer = container.children[0];
-    expect(dialogTitleContainer).toHaveClass("header");
-    expect(getByText(container, initParams.title));
-  });
-
-  it("should render a custom title icon", () => {
-    const { container } = render(
-      <DialogTitle {...initParams} titleIcon={<div>Custom Icon</div>} />
-    );
-
-    const dialogTitleContainer = container.children[0];
-    expect(dialogTitleContainer).toHaveClass("header");
-    expect(getByText(container, initParams.title));
-  });
-
-  it("should render a caption", () => {
-    const { container } = render(<DialogTitle {...initParams} caption="Example caption" />);
-
-    const dialogTitleContainer = container.children[0];
-    expect(dialogTitleContainer).toHaveClass("header");
-    expect(getByText(container, initParams.title));
-    expect(getByText(container, "Example 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(() => {
-        if (ref.current) {
-          propagateRef && propagateRef(ref);
-        }
-      }, [ref]);
-
-      return <DialogTitle title="test" id="test" 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/Notifications/DiscardChangesModal/DiscardChangesDialog/DiscardChangesDialog.test.tsx

@@ -1,111 +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 { DiscardChangesDialog, Props } from "./DiscardChangesDialog";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-const defaultParams: Props = {
-  open: true,
-  onKeepEditing: jest.fn(),
-  onDiscardChanges: jest.fn(),
-  discardChangesButtonLabel: "Discard Changes",
-  keepEditingButtonLabel: "Keep Editing",
-  contentLabel: "Content",
-  titleLabel: "Unsaved changes"
-};
-
-const createDiscardChangesDialog = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(
-    <DiscardChangesDialog {...parameters} data-testid="DiscardChangesDialog"></DiscardChangesDialog>
-  );
-  const discardChangesDialog = queries.getByTestId("DiscardChangesDialog");
-  const discardChangesBtn = queries.getByRole("button", {
-    name: defaultParams.discardChangesButtonLabel
-  });
-  const keepEditingBtn = queries.getByRole("button", {
-    name: defaultParams.keepEditingButtonLabel
-  });
-
-  return {
-    ...queries,
-    discardChangesDialog,
-    discardChangesBtn,
-    keepEditingBtn
-  };
-};
-
-describe("DiscardChangesDialog should render", () => {
-  it("renders without crashing", async () => {
-    const { discardChangesDialog, discardChangesBtn, keepEditingBtn } =
-      createDiscardChangesDialog();
-
-    expect(discardChangesDialog).toBeDefined();
-    expect(discardChangesDialog).toHaveTextContent(defaultParams.contentLabel);
-    expect(discardChangesDialog).toHaveTextContent(defaultParams.titleLabel);
-
-    await userEvent.click(discardChangesBtn);
-    expect(defaultParams.onDiscardChanges).toBeCalledTimes(1);
-
-    await userEvent.click(keepEditingBtn);
-    expect(defaultParams.onKeepEditing).toBeCalledTimes(1);
-  });
-});
-
-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 (
-        <DiscardChangesDialog
-          open={false}
-          onKeepEditing={jest.fn()}
-          onDiscardChanges={jest.fn()}
-          discardChangesButtonLabel="test"
-          keepEditingButtonLabel="test"
-          contentLabel="test"
-          titleLabel="test"
-          title="test"
-          id="test"
-          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/Notifications/DiscardChangesModal/DiscardChangesModal.test.tsx

@@ -1,175 +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 { DiscardChangesModal, Props } from "./DiscardChangesModal";
-import { findByTestId, getAllByRole, render, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-const defaultParams: Props = {
-  id: "modal",
-  open: true,
-  hasUnsavedChanges: jest.fn(),
-  onClose: jest.fn(),
-  headerProps: {
-    title: "Header"
-  },
-  discardChangedDialogProps: {
-    "data-testid": "discardChangesDialog",
-    discardChangesButtonLabel: "Discard",
-    keepEditingButtonLabel: "Keep editing",
-    contentLabel: "Unsaved changes",
-    titleLabel: "Dialog"
-  },
-  children: <span>children</span>
-};
-
-const createDiscardChangesModal = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<DiscardChangesModal {...parameters} data-testid="discardChangesModal" />);
-  const discardChangesModal = queries.getByTestId("discardChangesModal");
-  const closeBtn = queries.getByRole("button", { name: "close modal" });
-
-  return {
-    ...queries,
-    discardChangesModal,
-    closeBtn
-  };
-};
-
-const getDiscardChangesButtons = (container: HTMLElement) =>
-  getAllByRole(container, "button", {
-    name: new RegExp(
-      `(${defaultParams.discardChangedDialogProps.discardChangesButtonLabel}|${defaultParams.discardChangedDialogProps.keepEditingButtonLabel})`
-    )
-  });
-
-const findDiscardChangesDialog = (container: HTMLElement) =>
-  findByTestId(container, "discardChangesDialog");
-
-describe("DiscardChangesModal should render", () => {
-  it("renders without crashing", () => {
-    const { discardChangesModal, container } = createDiscardChangesModal();
-
-    expect(discardChangesModal).toBeDefined();
-    expect(discardChangesModal).toHaveTextContent("children");
-    expect(discardChangesModal).toHaveTextContent(defaultParams.headerProps.title);
-    expect(container).not.toHaveTextContent(defaultParams.discardChangedDialogProps.titleLabel);
-  });
-
-  it("clicking on close button without making any changes close the modal", async () => {
-    (
-      defaultParams.hasUnsavedChanges as jest.MockedFunction<typeof defaultParams.hasUnsavedChanges>
-    ).mockReturnValue(false);
-    const { closeBtn } = createDiscardChangesModal();
-
-    await userEvent.click(closeBtn);
-    expect(defaultParams.onClose).toBeCalledTimes(1);
-  });
-});
-
-describe("DiscardChangesModal should show DiscardChangesDialog", () => {
-  it("showing DiscardChangesDialog and clicking on `keep editing` button", async () => {
-    (
-      defaultParams.hasUnsavedChanges as jest.MockedFunction<typeof defaultParams.hasUnsavedChanges>
-    ).mockReturnValue(true);
-    const { closeBtn } = createDiscardChangesModal();
-    const container = document.body;
-    expect(defaultParams.onClose).not.toBeCalled();
-
-    await userEvent.click(closeBtn);
-
-    expect(defaultParams.onClose).not.toBeCalled();
-    await findDiscardChangesDialog(container);
-    const [_cancelButton, _discardButton, keepEditingBtn] = getDiscardChangesButtons(container);
-    expect(container).toHaveTextContent(defaultParams.discardChangedDialogProps.titleLabel);
-    expect(container).toHaveTextContent(defaultParams.discardChangedDialogProps.contentLabel);
-
-    await userEvent.click(keepEditingBtn);
-    expect(defaultParams.onClose).not.toBeCalled();
-  });
-
-  it("showing DiscardChangesDialog and clicking on `discard` button", async () => {
-    (
-      defaultParams.hasUnsavedChanges as jest.MockedFunction<typeof defaultParams.hasUnsavedChanges>
-    ).mockReturnValue(true);
-    const { closeBtn } = createDiscardChangesModal();
-    const container = document.body;
-
-    await userEvent.click(closeBtn);
-
-    await findDiscardChangesDialog(container);
-    const [_cancelButton, discardBtn] = getDiscardChangesButtons(container);
-    expect(container).toHaveTextContent(defaultParams.discardChangedDialogProps.titleLabel);
-
-    await userEvent.click(discardBtn);
-    expect(defaultParams.onClose).toBeCalled();
-  });
-});
-
-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?: (
-        ref1: React.RefObject<HTMLElement>,
-        ref2: React.RefObject<HTMLElement>
-      ) => void;
-    }) => {
-      const modalRef = useRef(null);
-      const dialogRef = useRef(null);
-
-      useEffect(() => {
-        if (dialogRef.current && modalRef.current) {
-          propagateRef && propagateRef(modalRef, dialogRef);
-        }
-      }, [modalRef, dialogRef]);
-
-      return (
-        <DiscardChangesModal
-          modalRef={modalRef}
-          dialogRef={dialogRef}
-          data-ref="testing"
-          hasUnsavedChanges={jest.fn()}
-          onClose={jest.fn()}
-          headerProps={{ title: "test" }}
-          open={false}
-          children="test"
-          discardChangedDialogProps={{
-            contentLabel: "test",
-            discardChangesButtonLabel: "test",
-            keepEditingButtonLabel: "test",
-            titleLabel: "test",
-            "data-ref": "testing"
-          }}
-          title="test"
-          id="test"
-        />
-      );
-    };
-
-    const refCheck = (ref1: React.RefObject<HTMLElement>, ref2: React.RefObject<HTMLElement>) => {
-      expect(ref1.current).toHaveAttribute("data-ref", "testing");
-      expect(ref2.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});

package/src/components/Notifications/Modal/Modal.test.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import { createRoot } from "react-dom/client";
-import { Modal } from "./Modal";
-
-describe("Modal", () => {
-  it("renders without crashing", () => {
-    const div = document.createElement("div");
-    const root = createRoot(div);
-
-    root.render(
-      <Modal id="modal" open={true} onClose={() => {}}>
-        test
-      </Modal>
-    );
-
-    root.unmount();
-  });
-});