@onewelcome/react-lib-components 6.0.0 → 6.2.0

package/src/components/Tabs/Tabs.test.tsx

@@ -1,291 +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 { Tabs, Props } from "./Tabs";
-import { render } from "@testing-library/react";
-import { TabButton as Tab } from "./TabButton";
-import userEvent from "@testing-library/user-event";
-import { act } from "react-dom/test-utils";
-
-const defaultParams: Props = {
-  children: [
-    <Tab key="tab1" title="Tab1">
-      Tabpanel1 content
-    </Tab>,
-    <Tab key="tab2" title="Tab2">
-      Tabpanel2 content
-    </Tab>,
-    <Tab key="tab3" title="Tab3">
-      Tabpanel3 content
-    </Tab>
-  ]
-};
-
-const createTabs = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<Tabs {...parameters} data-testid="tabs"></Tabs>);
-  const tabs = queries.getByTestId("tabs");
-
-  return {
-    ...queries,
-    tabs
-  };
-};
-
-describe("Tabs should render", () => {
-  it("renders without crashing", () => {
-    const { tabs } = createTabs();
-
-    expect(tabs).toBeDefined();
-  });
-
-  it("renders with properties passed", () => {
-    const { tabs } = createTabs(defaultParams => ({
-      ...defaultParams,
-      className: "testclass"
-    }));
-
-    expect(tabs).toHaveClass("testclass");
-  });
-
-  it("switches to tab and tabpanel when selected property is changed", () => {
-    const { tabs } = createTabs(defaultParams => ({
-      ...defaultParams,
-      selected: 2
-    }));
-
-    const tablist = tabs.firstChild as HTMLDivElement;
-    const tabpanels = tabs.lastChild as HTMLDivElement;
-    const tabButtons = tablist.querySelectorAll(".tabbutton");
-
-    const tab1 = tabButtons[0] as HTMLButtonElement;
-    const tab3 = tabButtons[2] as HTMLButtonElement;
-
-    const tabpanel1 = tabpanels.firstChild as HTMLDivElement;
-    const tabpanel3 = tabpanels.lastChild as HTMLDivElement;
-
-    expect(tab1).not.toHaveClass("selected");
-    expect(tab3).toHaveClass("selected");
-
-    expect(tabpanel1).not.toHaveClass("selected");
-    expect(tabpanel3).toHaveClass("selected");
-  });
-
-  it("switches to tab and tabpanel when tab is clicked", async () => {
-    const { tabs } = createTabs(defaultParams => ({
-      ...defaultParams
-    }));
-
-    const tablist = tabs.firstChild as HTMLDivElement;
-    const tabpanels = tabs.lastChild as HTMLDivElement;
-    let tabButtons = tablist.querySelectorAll(".tabbutton");
-
-    let tab1 = tabButtons[0] as HTMLButtonElement;
-    let tab3 = tabButtons[2] as HTMLButtonElement;
-
-    let tabpanel1 = tabpanels.firstChild as HTMLDivElement;
-    let tabpanel3 = tabpanels.lastChild as HTMLDivElement;
-
-    expect(tab1).toHaveClass("selected");
-    expect(tab3).not.toHaveClass("selected");
-
-    expect(tabpanel1).toHaveClass("selected");
-    expect(tabpanel3).not.toHaveClass("selected");
-
-    await userEvent.click(tab3);
-
-    tabButtons = tablist.querySelectorAll(".tabbutton");
-
-    tab1 = tabButtons[0] as HTMLButtonElement;
-    tab3 = tabButtons[2] as HTMLButtonElement;
-
-    tabpanel1 = tabpanels.firstChild as HTMLDivElement;
-    tabpanel3 = tabpanels.lastChild as HTMLDivElement;
-
-    expect(tab1).not.toHaveClass("selected");
-    expect(tab3).toHaveClass("selected");
-
-    expect(tabpanel1).not.toHaveClass("selected");
-    expect(tabpanel3).toHaveClass("selected");
-  });
-
-  it("triggers the onTabChange when switching tabs", async () => {
-    const onTabChangeHandler = jest.fn();
-
-    const { tabs } = createTabs(defaultParams => ({
-      ...defaultParams,
-      onTabChange: onTabChangeHandler
-    }));
-
-    const tablist = tabs.firstChild as HTMLDivElement;
-    const tabButtons = tablist.querySelectorAll(".tabbutton");
-
-    let tab3 = tabButtons[2] as HTMLButtonElement;
-
-    await userEvent.click(tab3);
-
-    expect(onTabChangeHandler).toHaveBeenCalled();
-  });
-});
-
-describe("Tabs should not render other children then tab components", () => {
-  it("renders no tabs", () => {
-    const queries = render(
-      <Tabs data-testid="tabs">
-        <div>wrong component 1</div>
-        <div>wrong component 2</div>
-      </Tabs>
-    );
-
-    const tabs = queries.getByTestId("tabs");
-    expect(tabs).toBeDefined();
-    expect(tabs).toBeEmptyDOMElement;
-  });
-});
-
-describe("Tabs should comply with accessibility rules", () => {
-  it("traverse through tabs with keyboard", async () => {
-    const { tabs } = createTabs();
-
-    const tablist = tabs.firstChild as HTMLDivElement;
-    const tabpanels = tabs.lastChild as HTMLDivElement;
-    let tabButtons = tablist.querySelectorAll(".tabbutton");
-
-    let tab1 = tabButtons[0] as HTMLButtonElement;
-    let tab3 = tabButtons[2] as HTMLButtonElement;
-
-    let tabpanel1 = tabpanels.firstChild as HTMLDivElement;
-    let tabpanel3 = tabpanels.lastChild as HTMLDivElement;
-
-    act(() => {
-      tab1.focus();
-    });
-
-    tabButtons = tablist.querySelectorAll(".tabbutton");
-    tab1 = tabButtons[0] as HTMLButtonElement;
-    tab3 = tabButtons[2] as HTMLButtonElement;
-    tabpanel1 = tabpanels.firstChild as HTMLDivElement;
-    tabpanel3 = tabpanels.lastChild as HTMLDivElement;
-
-    expect(tab1).toHaveFocus();
-    expect(tab1).toHaveClass("selected");
-    expect(tab3).not.toHaveClass("selected");
-    expect(tab3).not.toHaveFocus();
-    expect(tabpanel1).toHaveClass("selected");
-    expect(tabpanel3).not.toHaveClass("selected");
-
-    await userEvent.keyboard("[ArrowLeft]");
-    await userEvent.keyboard("[Space]");
-
-    tabButtons = tablist.querySelectorAll(".tabbutton");
-    tab1 = tabButtons[0] as HTMLButtonElement;
-    tab3 = tabButtons[2] as HTMLButtonElement;
-    tabpanel1 = tabpanels.firstChild as HTMLDivElement;
-    tabpanel3 = tabpanels.lastChild as HTMLDivElement;
-
-    expect(tab3).toHaveFocus();
-    expect(tab3).toHaveClass("selected");
-    expect(tab1).not.toHaveClass("selected");
-    expect(tab1).not.toHaveFocus();
-    expect(tabpanel3).toHaveClass("selected");
-    expect(tabpanel1).not.toHaveClass("selected");
-
-    await userEvent.keyboard("[ArrowRight]");
-    await userEvent.keyboard("[Enter]");
-
-    tabButtons = tablist.querySelectorAll(".tabbutton");
-    tab1 = tabButtons[0] as HTMLButtonElement;
-    tab3 = tabButtons[2] as HTMLButtonElement;
-    tabpanel1 = tabpanels.firstChild as HTMLDivElement;
-    tabpanel3 = tabpanels.lastChild as HTMLDivElement;
-
-    expect(tab1).toHaveFocus();
-    expect(tab1).toHaveClass("selected");
-    expect(tab3).not.toHaveClass("selected");
-    expect(tab3).not.toHaveFocus();
-    expect(tabpanel1).toHaveClass("selected");
-    expect(tabpanel3).not.toHaveClass("selected");
-
-    await userEvent.keyboard("[End]");
-
-    tabButtons = tablist.querySelectorAll(".tabbutton");
-    tab1 = tabButtons[0] as HTMLButtonElement;
-    tab3 = tabButtons[2] as HTMLButtonElement;
-
-    expect(tab3).toHaveFocus();
-    expect(tab3).toHaveFocus();
-    expect(tab1).not.toHaveFocus();
-
-    await userEvent.keyboard("[Home]");
-
-    tabButtons = tablist.querySelectorAll(".tabbutton");
-    tab1 = tabButtons[0] as HTMLButtonElement;
-    tab3 = tabButtons[2] as HTMLButtonElement;
-
-    expect(tab1).toHaveFocus();
-    expect(tab1).toHaveClass("selected");
-    expect(tab3).not.toHaveFocus();
-
-    // should have no effect
-    await userEvent.keyboard("a");
-
-    tabButtons = tablist.querySelectorAll(".tabbutton");
-    tab1 = tabButtons[0] as HTMLButtonElement;
-    tab3 = tabButtons[2] as HTMLButtonElement;
-
-    expect(tab1).toHaveFocus();
-    expect(tab1).toHaveClass("selected");
-    expect(tab3).not.toHaveFocus();
-
-    await userEvent.keyboard("[ArrowRight]");
-
-    tabButtons = tablist.querySelectorAll(".tabbutton");
-    tab1 = tabButtons[0] as HTMLButtonElement;
-    tab3 = tabButtons[2] as HTMLButtonElement;
-
-    expect(tab1).not.toHaveFocus();
-    expect(tab3).not.toHaveFocus();
-    expect(tab1).not.toHaveFocus();
-    expect(tab3).not.toHaveFocus();
-
-    await userEvent.keyboard("[ArrowLeft]");
-
-    tabButtons = tablist.querySelectorAll(".tabbutton");
-    tab1 = tabButtons[0] as HTMLButtonElement;
-    tab3 = tabButtons[2] as HTMLButtonElement;
-
-    expect(tab1).toHaveFocus();
-    expect(tab1).toHaveClass("selected");
-    expect(tab3).not.toHaveFocus();
-
-    await userEvent.keyboard("[ArrowLeft]");
-
-    tabButtons = tablist.querySelectorAll(".tabbutton");
-    tab1 = tabButtons[0] as HTMLButtonElement;
-    tab3 = tabButtons[2] as HTMLButtonElement;
-
-    act(() => {
-      tab3.blur();
-    });
-
-    expect(tab1).not.toHaveFocus();
-    expect(tab3).not.toHaveFocus();
-  });
-});

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