@onewelcome/react-lib-components 5.2.0 → 6.1.0

package/src/components/Tag/Tag.test.tsx

@@ -1,89 +0,0 @@
-import React, { useRef, useEffect } from "react";
-import { Tag as TagComponent, Props } from "./Tag";
-import { render } from "@testing-library/react";
-import { Icons } from "../Icon/Icon";
-
-const defaultParams: Props = {};
-
-const createTag = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(
-    <TagComponent {...parameters} data-testid="Tag">
-      Tag content
-    </TagComponent>
-  );
-  const Tag = queries.getByTestId("Tag");
-
-  return {
-    ...queries,
-    Tag
-  };
-};
-
-describe("Tag should render", () => {
-  it("renders without crashing", () => {
-    const { Tag } = createTag();
-
-    expect(Tag).toBeDefined();
-  });
-
-  it("should render the enabled version", () => {
-    const { Tag } = createTag(defaultParams => ({ ...defaultParams, variant: "enabled" }));
-
-    expect(Tag).toHaveClass("tag-enabled");
-  });
-
-  it("should render the disabled version", () => {
-    const { Tag } = createTag(defaultParams => ({ ...defaultParams, variant: "disabled" }));
-
-    expect(Tag).toHaveClass("tag-disabled");
-  });
-
-  it("should render the custom version", () => {
-    const { Tag, debug } = createTag(defaultParams => ({
-      ...defaultParams,
-      backgroundColor: "blue",
-      color: "white",
-      icon: Icons.Calendar
-    }));
-
-    debug();
-
-    const icon = Tag.querySelector("[data-icon]");
-
-    expect(Tag).toHaveClass("tag");
-    expect(Tag).toHaveStyle("background-color: blue");
-    expect(Tag).toHaveStyle("color: white");
-    expect(Tag).toHaveTextContent("Tag content");
-    expect(icon).toHaveClass("icon-calendar");
-  });
-});
-
-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 <TagComponent {...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/TextEllipsis/TextEllipsis.test.tsx

@@ -1,96 +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 { render } from "@testing-library/react";
-import user from "@testing-library/user-event";
-import { Props, TextEllipsis } from "./TextEllipsis";
-
-const defaultParams: Props = {};
-
-const createTextEllipsis = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(
-    <TextEllipsis {...parameters} data-testid="TextEllipsis">
-      content
-    </TextEllipsis>
-  );
-  const textEllipsis = queries.getByTestId("TextEllipsis");
-
-  return {
-    ...queries,
-    textEllipsis
-  };
-};
-
-describe("TextEllipsis should render", () => {
-  it("renders without crashing", () => {
-    const { textEllipsis, getAllByText } = createTextEllipsis();
-
-    expect(textEllipsis).toBeDefined();
-    expect(getAllByText("content")).toHaveLength(2);
-  });
-
-  it("does not show popover when full text is visible", async () => {
-    const { textEllipsis, getByRole } = createTextEllipsis();
-
-    expect(getByRole("tooltip", { hidden: true })).toHaveAttribute("data-hidden", "true");
-    await user.hover(textEllipsis);
-    expect(getByRole("tooltip", { hidden: true })).toHaveAttribute("data-hidden", "true");
-  });
-
-  it("shows popover with full text when base text has ellipsis", async () => {
-    const { textEllipsis, getByRole } = createTextEllipsis();
-
-    Object.defineProperty(textEllipsis, "offsetWidth", { configurable: true, value: 1 });
-    Object.defineProperty(textEllipsis, "scrollWidth", { configurable: true, value: 2 });
-
-    expect(getByRole("tooltip", { hidden: true })).toHaveAttribute("data-hidden", "true");
-    await user.hover(textEllipsis);
-    expect(getByRole("tooltip", { hidden: true })).toHaveAttribute("data-hidden", "false");
-    await user.unhover(textEllipsis);
-    expect(getByRole("tooltip", { hidden: true })).toHaveAttribute("data-hidden", "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(() => {
-        if (ref.current) {
-          propagateRef && propagateRef(ref);
-        }
-      }, [ref]);
-
-      return <TextEllipsis 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/Tiles/Tile.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 { Tile, Props } from "./Tile";
-import { render } from "@testing-library/react";
-import { Icon, Icons } from "../Icon/Icon";
-import { ContextMenu } from "../ContextMenu/ContextMenu";
-import { IconButton } from "../Button/IconButton";
-import { ContextMenuItem } from "../ContextMenu/ContextMenuItem";
-import userEvent from "@testing-library/user-event";
-import { waitFor } from "@storybook/testing-library";
-
-const onShow = jest.fn();
-const onClose = jest.fn();
-const contextMenuItemOnClick = jest.fn();
-
-const contextMenu = (
-  <ContextMenu
-    id="context_menu"
-    data-testid="contextmenu"
-    onShow={onShow}
-    onClose={onClose}
-    trigger={
-      <IconButton data-testid="contextmenu-trigger" title="context menu">
-        <Icon icon={Icons.EllipsisAlt} />
-      </IconButton>
-    }
-  >
-    <ContextMenuItem data-testid="item1" onClick={contextMenuItemOnClick}>
-      Item 1
-    </ContextMenuItem>
-    <ContextMenuItem data-testid="item2" onClick={contextMenuItemOnClick}>
-      Item 2
-    </ContextMenuItem>
-    <ContextMenuItem data-testid="item3" onClick={contextMenuItemOnClick}>
-      Item 3
-    </ContextMenuItem>
-  </ContextMenu>
-);
-
-const defaultParams: Props = {
-  title: "tile",
-  enabled: true,
-  tileAction: contextMenu
-};
-
-const createTile = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(
-    <Tile {...parameters} data-testid="tile">
-      tile content
-    </Tile>
-  );
-  const tile = queries.getByTestId("tile");
-  const menutrigger = queries.getByTestId("contextmenu-trigger");
-
-  return {
-    ...queries,
-    tile,
-    menutrigger
-  };
-};
-
-describe("Tile should render", () => {
-  it("renders without crashing and enabled", () => {
-    const { tile } = createTile();
-
-    expect(tile.querySelector(".icon-checkmark")).toBeTruthy();
-    expect(tile.querySelector(".icon-forbidden")).toBeFalsy();
-    expect(tile).toBeDefined();
-  });
-
-  it("renders disabled", () => {
-    const { tile } = createTile(defaultParams => ({ ...defaultParams, enabled: false }));
-
-    expect(tile.querySelector(".icon-checkmark")).toBeFalsy();
-    expect(tile.querySelector(".icon-forbidden")).toBeTruthy();
-  });
-
-  it("renders no status", () => {
-    const { tile } = createTile(defaultParams => ({ ...defaultParams, enabled: undefined }));
-
-    expect(tile.querySelector(".icon-checkmark")).toBeFalsy();
-    expect(tile.querySelector(".icon-forbidden")).toBeFalsy();
-  });
-});
-
-describe("should throw errors since we don't pass props", () => {
-  it("throws because of missing id", () => {
-    // Prevent throwing an error in the console when this test is executed. We fix this and the end of this test.
-    const err = console.error;
-    console.error = jest.fn();
-
-    let actual;
-
-    try {
-      // @ts-ignore: mandatory props (test for non-typescript react projects)
-      render(<Tile imageProps={{ src: "test" }} />);
-    } catch (e: any) {
-      actual = e.message;
-    }
-
-    const expected = "Please make sure to pass a title prop to your Tile component.";
-
-    expect(actual).toEqual(expected);
-
-    console.error = err;
-  });
-});
-
-describe("contextmenu", () => {
-  it("should render everything correctly", async () => {
-    const { menutrigger, getByTestId } = createTile();
-
-    const contextMenu = getByTestId("contextmenu");
-    const menuitem1 = getByTestId("item1");
-    const menuitem2 = getByTestId("item2");
-    const menuitem3 = getByTestId("item3");
-    const popover = document.querySelector(".popover");
-
-    expect(popover).toHaveStyle({ opacity: "0;" });
-    expect(menutrigger).toBeTruthy();
-    expect(contextMenu).toBeTruthy();
-    expect(menuitem1).toBeTruthy();
-    expect(menuitem2).toBeTruthy();
-    expect(menuitem3).toBeTruthy();
-
-    await userEvent.click(menutrigger);
-
-    expect(onShow).toHaveBeenCalled();
-    await waitFor(() => expect(popover).toHaveClass("show"));
-    expect(popover).toHaveStyle({ opacity: "1;" });
-
-    await userEvent.click(menuitem1);
-    await userEvent.click(menuitem2);
-    await userEvent.click(menuitem3);
-
-    expect(contextMenuItemOnClick).toHaveBeenCalledTimes(3);
-  });
-});
-
-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 <Tile {...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/Tiles/Tiles.test.tsx

@@ -1,162 +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 { Tiles, Props } from "./Tiles";
-import { Tile } from "./Tile";
-import { render } from "@testing-library/react";
-import { Icon, Icons } from "../Icon/Icon";
-import { ContextMenu } from "../ContextMenu/ContextMenu";
-import { ContextMenuItem } from "../ContextMenu/ContextMenuItem";
-import { IconButton } from "../Button/IconButton";
-
-const onShow = jest.fn();
-const onClose = jest.fn();
-const contextMenuItemOnClick = jest.fn();
-
-const contextMenu = (
-  <ContextMenu
-    id="context_menu"
-    onShow={onShow}
-    onClose={onClose}
-    trigger={
-      <IconButton title="context menu">
-        <Icon icon={Icons.EllipsisAlt} />
-      </IconButton>
-    }
-  >
-    <ContextMenuItem data-testid="item1" onClick={contextMenuItemOnClick}>
-      Item 1
-    </ContextMenuItem>
-    <ContextMenuItem data-testid="item2" onClick={contextMenuItemOnClick}>
-      Item 2
-    </ContextMenuItem>
-    <ContextMenuItem data-testid="item3" onClick={contextMenuItemOnClick}>
-      Item 3
-    </ContextMenuItem>
-  </ContextMenu>
-);
-
-const addToFavoriteButton = (
-  <IconButton title="Add to favorite">
-    <Icon icon={Icons.Star} />
-  </IconButton>
-);
-
-const defaultParams: Props = {
-  children: [
-    <Tile
-      data-testid="tile"
-      key="tile1"
-      title="Tile1"
-      imageProps={{
-        src: "https://www.onegini.com/hubfs/OneWelcome_Beeldmerk.svg"
-      }}
-      enabled={true}
-      tileAction={contextMenu}
-    />,
-    <Tile
-      data-testid="tile"
-      key="tile2"
-      title="Tile2"
-      imageProps={{
-        src: "https://www.onegini.com/hubfs/OneWelcome_Beeldmerk.svg"
-      }}
-      enabled={false}
-      tileAction={addToFavoriteButton}
-    />,
-    <Tile
-      data-testid="tile"
-      key="tile3"
-      title="Tile3"
-      imageProps={{
-        src: "https://www.onegini.com/hubfs/OneWelcome_Beeldmerk.svg"
-      }}
-      tileAction={contextMenu}
-    />
-  ],
-  className: "example-classname"
-};
-
-const createTiles = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<Tiles {...parameters} data-testid="tiles" />);
-  const tiles = queries.getByTestId("tiles");
-
-  let individualTiles;
-
-  if (!parameters.loading) {
-    individualTiles = queries.getAllByTestId("tile");
-  }
-
-  return {
-    ...queries,
-    tiles,
-    individualTiles
-  };
-};
-
-describe("Tiles should render", () => {
-  it("renders without crashing", () => {
-    const { tiles, individualTiles } = createTiles();
-
-    individualTiles?.forEach((tile, index) => {
-      expect(tile.querySelector(".title")).toHaveTextContent("Tile" + (index + 1).toFixed(0));
-      expect(tile.querySelector("img")).toBeTruthy();
-    });
-
-    expect(tiles).toHaveClass("example-classname");
-    expect(tiles).toBeDefined();
-  });
-});
-
-describe("loading state should be handled properly", () => {
-  it("is loading", () => {
-    const { tiles } = createTiles(defaultParams => ({ ...defaultParams, loading: true }));
-
-    expect(tiles).toHaveAttribute("aria-busy", "true");
-    expect(tiles.querySelectorAll(".tile.loading").length).toBe(3);
-  });
-});
-
-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 <Tiles {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});