@onewelcome/react-lib-components 5.2.0 → 6.1.0

package/src/components/StatusIndicator/StatusIndicator.test.tsx

@@ -1,143 +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 { StatusIndicator, Props } from "./StatusIndicator";
-import { render } from "@testing-library/react";
-
-const defaultParams: Props = {
-  status: "active"
-};
-
-const createStatusIndicator = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(
-    <StatusIndicator {...parameters} data-testid="StatusIndicator">
-      content
-    </StatusIndicator>
-  );
-  const statusIndicator = queries.getByTestId("StatusIndicator");
-
-  return {
-    ...queries,
-    statusIndicator
-  };
-};
-
-describe("StatusIndicator should render", () => {
-  it("renders without crashing", () => {
-    const { statusIndicator, getByText } = createStatusIndicator();
-
-    expect(statusIndicator).toBeDefined();
-    expect(getByText("content")).toBeInTheDocument();
-  });
-
-  it("passes through custom typography props", () => {
-    const { statusIndicator, getByText } = createStatusIndicator(params => ({
-      ...params,
-      typographyProps: {
-        variant: "body",
-        children: <strong>custom children</strong>
-      }
-    }));
-
-    expect(statusIndicator).toBeDefined();
-    expect(getByText("custom children")).toBeInTheDocument();
-  });
-
-  it("passes through custom props", () => {
-    const { statusIndicator } = createStatusIndicator(params => ({
-      ...params,
-      "aria-label": "status indicator"
-    }));
-
-    expect(statusIndicator).toBeDefined();
-    expect(statusIndicator).toHaveAttribute("aria-label", "status indicator");
-  });
-
-  it('should set "active" class on status badge', () => {
-    const { statusIndicator } = createStatusIndicator(params => ({
-      ...params,
-      status: "active"
-    }));
-
-    expect(statusIndicator.firstChild).toHaveClass("active");
-  });
-
-  it('should set "error" class on status badge', () => {
-    const { statusIndicator } = createStatusIndicator(params => ({ ...params, status: "error" }));
-
-    expect(statusIndicator.firstChild).toHaveClass("error");
-  });
-
-  it('should set "neutral" class on status badge', () => {
-    const { statusIndicator } = createStatusIndicator(params => ({
-      ...params,
-      status: "neutral"
-    }));
-
-    expect(statusIndicator.firstChild).toHaveClass("neutral");
-  });
-
-  it('should pass "warning" class to status badge', () => {
-    const { statusIndicator } = createStatusIndicator(params => ({
-      ...params,
-      status: "warning"
-    }));
-
-    expect(statusIndicator.firstChild).toHaveClass("warning");
-  });
-
-  it("should pass custom class to status badge", () => {
-    const { statusIndicator } = createStatusIndicator(params => ({
-      ...params,
-      badgeProps: { className: "custom" }
-    }));
-
-    expect(statusIndicator.firstChild).toHaveClass("custom");
-  });
-});
-
-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 (
-        <StatusIndicator id="test" children="test" data-ref="testing" ref={ref} status="active" />
-      );
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});

package/src/components/Stepper/Stepper.test.tsx

@@ -1,83 +0,0 @@
-import React from "react";
-import { Stepper, Props } from "./Stepper";
-import { render } from "@testing-library/react";
-
-const defaultParams: Props = {
-  steps: [],
-  direction: "horizontal"
-};
-
-const createStepper = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<Stepper {...parameters} data-testid="Stepper" />);
-  const StepperComponent = queries.getByTestId("Stepper");
-
-  return {
-    ...queries,
-    StepperComponent
-  };
-};
-
-describe("<Stepper/> should render", () => {
-  it("should render without crashing", () => {
-    const { StepperComponent } = createStepper();
-
-    expect(StepperComponent).toBeDefined();
-  });
-
-  it("should render given steps", () => {
-    const { StepperComponent, getAllByText } = createStepper(params => ({
-      ...params,
-      steps: [
-        {
-          label: "Step 1",
-          status: "waiting",
-          caption: "Caption"
-        },
-        {
-          label: "Step 2",
-          status: "current",
-          caption: "Caption"
-        },
-        {
-          label: "Step 3",
-          status: "done",
-          caption: "Caption"
-        },
-        {
-          label: "Step 4",
-          status: "error",
-          caption: "Caption"
-        }
-      ]
-    }));
-
-    expect(StepperComponent).toBeDefined();
-
-    expect(getAllByText(/Step/i)).toHaveLength(4);
-    expect(getAllByText(/Caption/i)).toHaveLength(4);
-  });
-
-  it("should render the horizontal stepper", () => {
-    const { StepperComponent } = createStepper(params => ({
-      ...params,
-      direction: "horizontal"
-    }));
-
-    expect(StepperComponent).toBeDefined();
-    expect(StepperComponent.classList).toContain("horizontal");
-  });
-
-  it("should render the vertical stepper", () => {
-    const { StepperComponent } = createStepper(params => ({
-      ...params,
-      direction: "vertical"
-    }));
-
-    expect(StepperComponent).toBeDefined();
-    expect(StepperComponent.classList).not.toContain("horizontal");
-  });
-});

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

@@ -1,49 +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 { Tab, Props } from "./Tab";
-import { render } from "@testing-library/react";
-
-const defaultParams: Props = {
-  title: "Title of tab"
-};
-
-const createTab = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(
-    <Tab {...parameters} data-testid="tab">
-      tab content
-    </Tab>
-  );
-  const tab = queries.getByTestId("tab");
-
-  return {
-    ...queries,
-    tab
-  };
-};
-
-describe("Tab should render", () => {
-  it("renders without crashing", () => {
-    const { tab } = createTab();
-
-    expect(tab).toBeTruthy();
-  });
-});

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

@@ -1,65 +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 { Props, TabButton } from "./TabButton";
-import { render } from "@testing-library/react";
-
-const defaultParams: Props = {};
-
-const createTabButton = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(
-    <TabButton {...parameters} data-testid="tabbutton">
-      tab content
-    </TabButton>
-  );
-  const tabButton = queries.getByTestId("tabbutton");
-
-  return {
-    ...queries,
-    tabButton
-  };
-};
-
-describe("Tab should render", () => {
-  it("renders without crashing", () => {
-    const { tabButton } = createTabButton();
-
-    expect(tabButton).toBeTruthy();
-  });
-
-  it("should be focussed when prop focused is passed", () => {
-    const { tabButton } = createTabButton(defaultParams => ({
-      ...defaultParams,
-      focused: true
-    }));
-
-    expect(tabButton).toHaveFocus();
-  });
-
-  it("should set class when prop className is passed", () => {
-    const { tabButton } = createTabButton(defaultParams => ({
-      ...defaultParams,
-      className: "customclass"
-    }));
-
-    expect(tabButton).toHaveClass("customclass");
-  });
-});

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