@onewelcome/react-lib-components 6.0.0 → 6.1.0

package/src/components/ProgressBar/ProgressBar.test.tsx

@@ -1,91 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { ProgressBar, Props } from "./ProgressBar";
-import { render } from "@testing-library/react";
-
-const defaultParams: Props = {
-  label: "Loading...",
-  percentage: 0,
-  accessibilityTitle: "Progress bar",
-  caption: "One moment please..."
-};
-
-const createProgressBar = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<ProgressBar {...parameters} data-testid="ProgressBar" />);
-  const ProgressBarComponent = queries.getByTestId("ProgressBar");
-
-  return {
-    ...queries,
-    ProgressBarComponent
-  };
-};
-
-describe("ProgressBar should render", () => {
-  it("renders without crashing", () => {
-    const { ProgressBarComponent, getByText } = createProgressBar(defaultParams => ({
-      ...defaultParams,
-      className: "test"
-    }));
-
-    expect(ProgressBarComponent).toBeDefined();
-    expect(ProgressBarComponent).toHaveClass(`test`, { exact: true });
-    expect(ProgressBarComponent).toHaveAttribute("role", "progressbar");
-    expect(ProgressBarComponent).toHaveAttribute("aria-valuemin", "0");
-    expect(ProgressBarComponent).toHaveAttribute("aria-valuemax", "100");
-    expect(ProgressBarComponent).toHaveAttribute("aria-valuenow", "0");
-    expect(ProgressBarComponent).toHaveAttribute("title", "Progress bar");
-    expect(getByText("Loading...")).toBeDefined();
-    expect(getByText("Loading...")).toHaveClass("label");
-    expect(getByText("One moment please...")).toBeDefined();
-    expect(getByText("One moment please...")).toHaveClass("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(() => {
-        propagateRef(ref);
-      }, [ref]);
-
-      return <ProgressBar {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    const container = document.createElement("div");
-    render(<ExampleComponent propagateRef={refCheck} />, { container });
-  });
-});
-
-describe("ProgressBar should change styles depending on props", () => {
-  it("should show a progress when 'completed' prop is provided", () => {
-    const { ProgressBarComponent } = createProgressBar(defaultParams => ({
-      ...defaultParams,
-      completed: 40
-    }));
-
-    const bar = ProgressBarComponent.querySelector(".bar");
-    expect(bar).toHaveStyle("width: 40%");
-  });
-
-  it("should show a loading effect when 'completed' prop is not provided", () => {
-    const { ProgressBarComponent } = createProgressBar(defaultParams => ({
-      ...defaultParams
-    }));
-
-    const bar = ProgressBarComponent.querySelector(".bar");
-    expect(bar).toHaveClass("loading-state");
-  });
-});

package/src/components/Skeleton/Skeleton.test.tsx

@@ -1,112 +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 { Skeleton, Props } from "./Skeleton";
-import { render } from "@testing-library/react";
-
-const defaultParams: Props = {};
-
-const createSkeleton = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<Skeleton {...parameters} data-testid="skeleton" />);
-  const skeleton = queries.getByTestId("skeleton");
-
-  return {
-    ...queries,
-    skeleton
-  };
-};
-
-describe("Skeleton should render", () => {
-  it("renders without crashing", () => {
-    const { skeleton } = createSkeleton();
-
-    expect(skeleton).toHaveClass("skeleton text no-height", { exact: true });
-
-    expect(skeleton).toBeDefined();
-  });
-
-  it("renders with properties passed", () => {
-    const testClass = "testclass";
-    const { skeleton } = createSkeleton(defaultParams => ({
-      ...defaultParams,
-      className: testClass
-    }));
-
-    expect(skeleton).toHaveClass(`skeleton text no-height ${testClass}`, { exact: true });
-  });
-
-  it("renders text variant with width and height", () => {
-    const width = "10rem";
-    const height = 10;
-    const { skeleton } = createSkeleton(defaultParams => ({
-      ...defaultParams,
-      variant: "text",
-      width,
-      height
-    }));
-
-    expect(skeleton).toHaveClass(`skeleton text`, { exact: true });
-    expect(skeleton).toHaveStyle({ width, height: "10px" });
-  });
-
-  it("renders rectangle variant", () => {
-    const { skeleton } = createSkeleton(defaultParams => ({
-      ...defaultParams,
-      variant: "rectangle"
-    }));
-
-    expect(skeleton).toHaveClass(`skeleton no-height`, { exact: true });
-  });
-
-  it("renders circular variant", () => {
-    const { skeleton } = createSkeleton(defaultParams => ({
-      ...defaultParams,
-      variant: "circular"
-    }));
-
-    expect(skeleton).toHaveClass(`skeleton no-height circular`, { exact: 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(() => {
-        propagateRef(ref);
-      }, [ref]);
-
-      return <Skeleton {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    const container = document.createElement("div");
-    render(<ExampleComponent propagateRef={refCheck} />, { container });
-  });
-});

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