@onewelcome/react-lib-components 5.2.0 → 6.1.0

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

@@ -1,84 +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 { Banner, Props } from "./Banner";
-import { render } from "@testing-library/react";
-
-const defaultParams: Props = {
-  children: "The service will not be available between 02:00 and 03:00.",
-  title: "Maintenance is scheduled for next weekend",
-  type: "info"
-};
-
-const createBanner = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(
-    <Banner {...parameters} data-testid="BannerTest">
-      {defaultParams.children}
-    </Banner>
-  );
-  const BannerComponent = queries.getByTestId("BannerTest");
-
-  return {
-    ...queries,
-    BannerComponent
-  };
-};
-
-describe("Banner should render", () => {
-  it("renders without crashing", () => {
-    const { BannerComponent } = createBanner();
-    expect(BannerComponent).toBeDefined();
-    const title = BannerComponent.querySelector(".headline");
-    const content = BannerComponent.querySelector(".content");
-    const icon = BannerComponent.querySelector(".icon");
-    expect(BannerComponent).toHaveClass("info");
-    expect(title).toBeDefined();
-    expect(title).toHaveTextContent(defaultParams.title);
-    expect(content).toBeDefined();
-    expect(content).toHaveTextContent(defaultParams.children);
-    expect(icon).toBeDefined();
-  });
-
-  it("renders ariaLabel correctly", () => {
-    const ariaLabel = "Information regarding your information";
-    const { BannerComponent } = createBanner(defaultParams => ({ ...defaultParams, ariaLabel }));
-    expect(BannerComponent).toBeDefined();
-    expect(BannerComponent).toHaveAttribute("aria-label", ariaLabel);
-  });
-
-  it("renders ariaLive correctly", () => {
-    const ariaLive = "polite";
-    const { BannerComponent } = createBanner(defaultParams => ({ ...defaultParams, ariaLive }));
-    expect(BannerComponent).toBeDefined();
-    expect(BannerComponent).toHaveAttribute("aria-live", ariaLive);
-  });
-
-  it("renders ariaRole correctly", () => {
-    const ariaRole = "alert";
-    const { BannerComponent } = createBanner(defaultParams => ({
-      ...defaultParams,
-      type: "error",
-      ariaRole
-    }));
-    expect(BannerComponent).toBeDefined();
-    expect(BannerComponent).toHaveAttribute("role", ariaRole);
-  });
-});

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

@@ -1,194 +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 { BaseModal, Props } from "./BaseModal";
-import { render, getByText, queryByText, fireEvent } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { act } from "react-dom/test-utils";
-
-const classNames = ["class11", "class12"];
-const containerClassNames = ["class21", "class22"];
-
-const defaultParams: Props = {
-  id: "modal",
-  open: true,
-  onClose: jest.fn(),
-  className: classNames.join(" "),
-  containerProps: { className: containerClassNames.join(" ") },
-  children: "This is example dialog content."
-};
-
-const createBaseModal = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(
-    <BaseModal {...parameters} data-testid="BaseModal">
-      <button>Button 1</button>
-      <button>Button 2</button>
-      <button>Button 3</button>
-      <span>{defaultParams.children}</span>
-      <button>Button 4</button>
-      <button>Button 5</button>
-      <button>Button 6</button>
-    </BaseModal>
-  );
-  const slideInModal = queries.getByTestId("BaseModal");
-
-  return {
-    ...queries,
-    slideInModal
-  };
-};
-
-describe("BaseModal", () => {
-  it("renders without crashing", () => {
-    const { getByRole } = createBaseModal();
-    const dialog = getByRole("dialog");
-
-    expect(dialog).toHaveAttribute("aria-modal", "true");
-    expect(dialog).toHaveAttribute("aria-labelledby", "modal-label");
-    expect(dialog).toHaveAttribute("aria-describedby", "modal-description");
-    expect(dialog).toHaveAttribute("data-hidden", "false");
-    expect(dialog).toHaveAttribute("aria-hidden", "false");
-    expect(getByText(dialog, defaultParams.children as string)).toBeDefined();
-    expect(document.body).toHaveStyle("overflow: hidden");
-  });
-
-  it("should render closed modal without content", () => {
-    const { queryByRole } = createBaseModal(params => ({ ...params, open: false }));
-
-    const dialogByRole = queryByRole("dialog");
-    const dialog = document.body.children[1] as HTMLElement;
-
-    expect(dialogByRole).toBeNull();
-    expect(dialog).toHaveAttribute("aria-hidden", "true");
-    expect(queryByText(dialog, defaultParams.children as string)).toBeNull();
-  });
-
-  it("should render closed modal with content when forceContainerOpen is provided", () => {
-    const { getByRole } = createBaseModal(params => ({
-      ...params,
-      open: false,
-      forceContainerOpen: true
-    }));
-
-    const modal = getByRole("dialog", { hidden: true });
-    const container = modal.querySelector(".container") as HTMLElement;
-
-    expect(container).toBeInTheDocument();
-    expect(container).toHaveAttribute("aria-hidden", "true");
-  });
-
-  it("propagates containerProps to container element", () => {
-    const { getByRole } = createBaseModal(params => ({
-      ...params,
-      open: true,
-      containerProps: {
-        id: "container"
-      }
-    }));
-
-    const modal = getByRole("dialog");
-    const container = modal.querySelector(".container") as HTMLElement;
-
-    expect(container).toBeInTheDocument();
-    expect(container).toHaveAttribute("id", "container");
-  });
-
-  it("propagates backdropProps to backdrop element", () => {
-    const { getByRole } = createBaseModal(params => ({
-      ...params,
-      open: true,
-      backdropProps: {
-        id: "backdrop"
-      }
-    }));
-
-    const modal = getByRole("dialog");
-    const backdrop = modal.querySelector(".backdrop") as HTMLElement;
-
-    expect(backdrop).toBeInTheDocument();
-    expect(backdrop).toHaveAttribute("id", "backdrop");
-  });
-
-  it("should handle clicking on backdrop & ESC key", async () => {
-    const { getByRole } = createBaseModal();
-
-    const modal = getByRole("dialog");
-
-    const backdrop = modal.querySelector(".backdrop")!;
-    expect(defaultParams.onClose).toHaveBeenCalledTimes(0);
-
-    await userEvent.click(backdrop);
-    expect(defaultParams.onClose).toHaveBeenCalledTimes(1);
-
-    fireEvent.keyDown(modal, { key: "Escape" });
-    expect(defaultParams.onClose).toHaveBeenCalledTimes(2);
-  });
-
-  it("should repeat focus back to the first button when tabbing through the modal", async () => {
-    const { getByText } = createBaseModal();
-
-    const firstButton = getByText("Button 1");
-    const lastButton = getByText("Button 6");
-
-    await act(() => {
-      firstButton.focus();
-    });
-
-    await userEvent.tab();
-    await userEvent.tab();
-    await userEvent.tab();
-    await userEvent.tab();
-    await userEvent.tab();
-    await userEvent.tab();
-
-    expect(firstButton).toHaveFocus();
-
-    await userEvent.tab({ shift: true });
-
-    expect(lastButton).toHaveFocus();
-  });
-});
-
-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 <BaseModal id="test" children="test" open={true} 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/BaseModal/BaseModalActions/BaseModalActions.test.tsx

@@ -1,74 +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 { BaseModalActions } from "./BaseModalActions";
-import { render } from "@testing-library/react";
-
-describe("BaseModalActions", () => {
-  it("renders without crashing", () => {
-    const children = "Content";
-    const classNames = ["class1", "class2"];
-    const { container } = render(
-      <BaseModalActions className={classNames.join(" ")}>{children}</BaseModalActions>
-    );
-
-    const dialogActionsContainer = container.children[0];
-    expect(dialogActionsContainer).toHaveClass("actions", classNames[0], classNames[1]);
-    expect(dialogActionsContainer).toHaveTextContent(children);
-  });
-
-  it("Shouldn't render cancel button if we don't pass label", () => {
-    const { container } = render(<BaseModalActions />);
-    const dialogActionsContainer = container.children[0];
-    expect(dialogActionsContainer).toHaveClass("actions");
-    expect(dialogActionsContainer).not.toHaveTextContent("Cancel");
-  });
-
-  it("Should render a cancel button with a `Close` label", () => {
-    const cancelAction = { label: "Close" };
-    const { container } = render(<BaseModalActions cancelAction={cancelAction} />);
-
-    const dialogActionsContainer = container.children[0];
-    expect(dialogActionsContainer).toHaveClass("actions");
-    expect(dialogActionsContainer).toHaveTextContent(cancelAction.label);
-  });
-});
-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 <BaseModalActions onClose={jest.fn()} 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/BaseModal/BaseModalContent/BaseModalContent.test.tsx

@@ -1,71 +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 { BaseModalContent, Props } from "./BaseModalContent";
-import { render } from "@testing-library/react";
-import { descriptionId } from "../BaseModalContext";
-
-const classNames = ["class1", "class2"];
-const initParams: Props = {
-  id: descriptionId("modal"),
-  className: classNames.join(" "),
-  children: "This is example dialog content."
-};
-
-describe("BaseModalContent", () => {
-  it("renders without crashing", () => {
-    const { container } = render(<BaseModalContent {...initParams} />);
-
-    const dialogContentContainer = container.children[0];
-    expect(dialogContentContainer).toHaveClass("content", classNames[0], classNames[1]);
-    expect(dialogContentContainer).toHaveTextContent(initParams.children as string);
-    expect(dialogContentContainer).toEqual(document.activeElement);
-  });
-
-  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 <BaseModalContent children="test" data-ref="testing" ref={ref} />;
-      };
-
-      const refCheck = (ref: React.RefObject<HTMLElement>) => {
-        expect(ref.current).toHaveAttribute("data-ref", "testing");
-      };
-
-      render(<ExampleComponent propagateRef={refCheck} />);
-    });
-  });
-
-  it("should renders not focused div", () => {
-    const { container } = render(<BaseModalContent {...initParams} disableAutoFocus />);
-
-    const dialogContentContainer = container.children[0];
-    expect(dialogContentContainer).not.toEqual(document.activeElement);
-  });
-});

package/src/components/Notifications/BaseModal/BaseModalHeader/BaseModalHeader.test.tsx

@@ -1,74 +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 { BaseModalHeader, Props } from "./BaseModalHeader";
-import { render, getByRole, getByTestId, getByText } from "@testing-library/react";
-import { labelId } from "../BaseModalContext";
-import userEvent from "@testing-library/user-event";
-
-const additionalContent = "Additional content";
-const initParams: Props = {
-  id: labelId("modal"),
-  title: "Example title",
-  onClose: jest.fn(),
-  children: <div data-testid="additional-content">{additionalContent}</div>
-};
-
-describe("BaseModalHeader", () => {
-  it("renders without crashing", async () => {
-    const { container } = render(<BaseModalHeader {...initParams} />);
-    const closeBtn = getByRole(container, "button");
-    expect(initParams.onClose).toBeCalledTimes(0);
-
-    await userEvent.click(closeBtn);
-
-    const dialogContentContainer = container.children[0];
-    const titleContainer = getByText(container, initParams.title);
-    expect(dialogContentContainer).toHaveClass("header");
-    expect(titleContainer).toHaveAttribute("id", "modal-label");
-    expect(getByTestId(container, "additional-content")).toHaveTextContent(additionalContent);
-    expect(initParams.onClose).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 (
-        <BaseModalHeader id="test" title="test" onClose={jest.fn()} 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/Dialog/Dialog.test.tsx

@@ -1,118 +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 { Dialog, Props } from "./Dialog";
-import { render, getAllByRole } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-const initParams: Props = {
-  id: "modal",
-  open: true,
-  onClose: jest.fn(),
-  title: "Example dialog",
-  primaryAction: {
-    label: "Save",
-    onClick: jest.fn()
-  },
-  cancelAction: {
-    label: "Cancel"
-  },
-  secondaryAction: {
-    label: "Cancel",
-    onClick: jest.fn()
-  },
-  children: "This is example dialog content."
-};
-
-const getButtons = (container: HTMLElement) => getAllByRole(container, "button");
-
-describe("Dialog", () => {
-  it("renders without crashing", () => {
-    const { getByText, debug } = render(<Dialog {...initParams} />);
-    const [_cancelButton, secondaryButton, primaryButton] = getButtons(document.body);
-
-    expect(getByText(initParams.title)).toBeDefined();
-    expect(getByText(initParams.children as string)).toBeDefined();
-    const actionsDiv = primaryButton.closest("div");
-    expect(actionsDiv?.children[1]).toEqual(primaryButton);
-    expect(actionsDiv?.children[0]).toEqual(secondaryButton);
-    expect(primaryButton).toHaveClass("fill");
-    expect(secondaryButton).toHaveClass("outline");
-  });
-
-  it("renders only one button", () => {
-    render(<Dialog {...initParams} secondaryAction={undefined} />);
-    const buttons = getButtons(document.body);
-
-    expect(buttons).toHaveLength(2);
-    expect(buttons[1]).toHaveClass("fill");
-  });
-
-  it("should handle clicking on buttons and ENTER press", async () => {
-    render(<Dialog {...initParams} />);
-    const [_cancelButton, secondaryButton, primaryButton] = getButtons(document.body);
-    expect(initParams.primaryAction.onClick).toHaveBeenCalledTimes(0);
-    expect(initParams.secondaryAction?.onClick).toHaveBeenCalledTimes(0);
-    expect(initParams.onClose).toHaveBeenCalledTimes(0);
-
-    const autoSummissionInput = document.body.querySelector("input") as HTMLElement;
-    await userEvent.type(autoSummissionInput, "{enter}");
-    expect(initParams.primaryAction.onClick).toHaveBeenCalledTimes(1);
-
-    await userEvent.click(primaryButton);
-    expect(initParams.primaryAction.onClick).toHaveBeenCalledTimes(2);
-    await userEvent.click(secondaryButton);
-    expect(initParams.secondaryAction?.onClick).toHaveBeenCalledTimes(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 (
-        <Dialog
-          children="test"
-          open={false}
-          onClose={jest.fn()}
-          primaryAction={{ label: "test", onClick: jest.fn() }}
-          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/Dialog/DialogActions/DialogActions.test.tsx

@@ -1,61 +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 { DialogActions, Props } from "./DialogActions";
-import { render } from "@testing-library/react";
-
-const initParams: Props = {
-  align: "right",
-  children: "Content",
-  onClose: jest.fn()
-};
-
-describe("DialogActions", () => {
-  it("renders without crashing", () => {
-    const { container } = render(<DialogActions {...initParams} />);
-
-    const dialogActionsContainer = container.children[0];
-    expect(dialogActionsContainer).toHaveClass("actions");
-    expect(dialogActionsContainer).toHaveTextContent(initParams.children as string);
-  });
-});
-
-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 <DialogActions id="test" children="test" open={true} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});