@onewelcome/react-lib-components 6.0.0 → 6.1.0

package/src/components/DataGrid/DataGridActions/DataGridColumnsToggle.test.tsx

@@ -1,99 +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 { DataGridColumnsToggle, Props } from "./DataGridColumnsToggle";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-const defaultParams: Props = {
-  open: true,
-  headers: [
-    { headline: "Name", name: "name" },
-    { headline: "Date", name: "date", hidden: true }
-  ],
-  onClose: jest.fn(),
-  onToggleClicked: jest.fn()
-};
-
-const createDataGridColumnsToggle = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(
-    <DataGridColumnsToggle {...parameters} data-testid="dataGridColumnsToggle" />
-  );
-  const dataGridColumnsToggle = queries.getByTestId("dataGridColumnsToggle");
-
-  return {
-    ...queries,
-    dataGridColumnsToggle
-  };
-};
-
-describe("DataGridColumnsToggle should render", () => {
-  it("renders without crashing", () => {
-    const { dataGridColumnsToggle, getByLabelText, getByText } = createDataGridColumnsToggle();
-
-    expect(dataGridColumnsToggle).toBeDefined();
-    expect(getByText("Show columns")).toBeDefined();
-    expect(getByLabelText(defaultParams.headers[0].headline)).toBeChecked();
-    expect(getByLabelText(defaultParams.headers[1].headline)).not.toBeChecked();
-  });
-});
-
-describe("DataGridColumnsToggle should be interactive", () => {
-  it("clicking on close calls onClose callback", async () => {
-    const { getByRole } = createDataGridColumnsToggle();
-
-    await userEvent.click(getByRole("button"));
-
-    expect(defaultParams.onClose).toBeCalledTimes(1);
-  });
-
-  it("clicking outside of container (on backdrop layer) calls onClose callback", async () => {
-    createDataGridColumnsToggle();
-
-    await userEvent.click(document.querySelector(".backdrop")!);
-
-    expect(defaultParams.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(() => {
-        propagateRef(ref);
-      }, [ref]);
-
-      return <DataGridColumnsToggle {...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/DataGrid/DataGridBody/DataGridBody.test.tsx

@@ -1,140 +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 { DataGridBody, Props } from "./DataGridBody";
-import { render, getAllByRole } from "@testing-library/react";
-import { DataGridRow } from "./DataGridRow";
-import { DataGridCell } from "./DataGridCell";
-import { ContextMenu } from "../../ContextMenu/ContextMenu";
-import { IconButton } from "../../Button/IconButton";
-import { Icon, Icons } from "../../Icon/Icon";
-import { ContextMenuItem } from "../../ContextMenu/ContextMenuItem";
-
-type DataType = { firstName: string; lastName: string; date: string };
-
-const defaultParams: Props<DataType> = {
-  children: ({ item }) => (
-    <DataGridRow key={item.firstName}>
-      <DataGridCell>{item.firstName}</DataGridCell>
-      <DataGridCell>{item.lastName}</DataGridCell>
-      <DataGridCell>{item.date}</DataGridCell>
-      <DataGridCell>
-        <ContextMenu
-          id={`consent_menu_${item.firstName}`}
-          trigger={
-            <IconButton title={`Actions for ${item.firstName}`} color="default">
-              <Icon icon={Icons.EllipsisAlt} />
-            </IconButton>
-          }
-        >
-          <ContextMenuItem>Item 1</ContextMenuItem>
-        </ContextMenu>
-      </DataGridCell>
-    </DataGridRow>
-  ),
-  headers: [
-    { name: "firstName", headline: "First name" },
-    { name: "lastName", headline: "Last name" },
-    { name: "date", headline: "Date" }
-  ],
-  data: [
-    { firstName: "Paweł", lastName: "Napieracz", date: "12.12.1990" },
-    { firstName: "Michał", lastName: "Górski", date: "12.12.1994" },
-    { firstName: "Daniel", lastName: "Velden", date: "12.12.199x" },
-    { firstName: "Jasha", lastName: "Joachimsthal", date: "12.12.198x" }
-  ]
-};
-
-const createDataGridBody = (params?: (defaultParams: Props<DataType>) => Props<DataType>) => {
-  let parameters = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const container = document.createElement("table");
-  const queries = render(<DataGridBody {...parameters} data-testid="dataGridBody" />, {
-    container
-  });
-  const dataGridBody = queries.getByTestId("dataGridBody");
-
-  return {
-    ...queries,
-    dataGridBody
-  };
-};
-
-describe("DataGridBody should render", () => {
-  it("renders without crashing", () => {
-    const { dataGridBody } = createDataGridBody();
-
-    expect(dataGridBody).toBeDefined();
-    const rows = getAllByRole(dataGridBody, "row");
-
-    expect(rows).toMatchSnapshot();
-  });
-
-  it("renders loading state with only visible columns", () => {
-    const headers = [...defaultParams.headers];
-    headers[0] = { ...headers[0], hidden: true };
-    const { dataGridBody } = createDataGridBody(params => ({ ...params, headers }));
-
-    expect(dataGridBody).toBeDefined();
-    const rows = getAllByRole(dataGridBody, "row");
-    const firstRowCells = getAllByRole(rows[0], "cell");
-    expect(firstRowCells).toHaveLength(3);
-    expect(firstRowCells[0]).toHaveTextContent(defaultParams.data?.[0].lastName!);
-  });
-
-  it("renders empty state", () => {
-    const emptyLabel = "emptyLabel";
-    const { dataGridBody } = createDataGridBody(params => ({
-      ...params,
-      emptyLabel,
-      data: undefined
-    }));
-
-    const rows = getAllByRole(dataGridBody, "row");
-    const firstRowCells = getAllByRole(rows[0], "cell");
-    expect(firstRowCells).toHaveLength(1);
-    expect(firstRowCells[0]).toHaveAttribute("colspan", `${defaultParams.headers.length + 1}`);
-    expect(firstRowCells[0]).toHaveTextContent(emptyLabel);
-  });
-});
-
-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 <DataGridBody {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    const container = document.createElement("table");
-    render(<ExampleComponent propagateRef={refCheck} />, { container });
-  });
-});

package/src/components/DataGrid/DataGridBody/DataGridCell.test.tsx

@@ -1,90 +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 { DataGridCell, Props } from "./DataGridCell";
-import { render } from "@testing-library/react";
-
-const defaultParams: Props = {
-  children: "cell"
-};
-
-const createDataGridCell = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const container = document.createElement("tr");
-  const queries = render(<DataGridCell {...parameters} data-testid="dataGridCell" />, {
-    container
-  });
-  const dataGridCell = queries.getByTestId("dataGridCell");
-
-  return {
-    ...queries,
-    dataGridCell
-  };
-};
-
-describe("DataGridCell should render", () => {
-  it("renders without crashing", () => {
-    const { dataGridCell } = createDataGridCell();
-
-    expect(dataGridCell).toBeDefined();
-    expect(dataGridCell).toHaveClass("cell");
-    expect(dataGridCell).toHaveTextContent(defaultParams.children as string);
-  });
-
-  it("renders with additional class", () => {
-    const { dataGridCell } = createDataGridCell(params => ({ ...params, className: "test" }));
-
-    expect(dataGridCell).toHaveClass("cell", "test");
-  });
-
-  it("renders loading state", () => {
-    const { dataGridCell } = createDataGridCell(params => ({ ...params, isLoading: true }));
-
-    const skeletonLoadingEl = dataGridCell.querySelector("div");
-    expect(skeletonLoadingEl).toHaveClass("loading");
-    expect(skeletonLoadingEl).toHaveAttribute("aria-busy", "true");
-    expect(skeletonLoadingEl).toHaveAttribute("aria-live", "polite");
-  });
-});
-
-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 <DataGridCell {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    const container = document.createElement("tr");
-    render(<ExampleComponent propagateRef={refCheck} />, { container });
-  });
-});

package/src/components/DataGrid/DataGridBody/DataGridRow.test.tsx

@@ -1,117 +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 { DataGridRow, Props } from "./DataGridRow";
-import { render } from "@testing-library/react";
-import { DataGridCell } from "./DataGridCell";
-
-const defaultParams: Props = {
-  children: [<DataGridCell>1</DataGridCell>, <DataGridCell>2</DataGridCell>],
-  headers: [
-    { name: "firstName", headline: "first name" },
-    { name: "lastName", headline: "last name" }
-  ]
-};
-
-const createDataGridRow = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const container = document.createElement("tbody");
-  const queries = render(<DataGridRow {...parameters} data-testid="dataGridRow" />, { container });
-  const dataGridRow = queries.getByTestId("dataGridRow");
-
-  return {
-    ...queries,
-    dataGridRow
-  };
-};
-
-describe("DataGridRow should render", () => {
-  it("renders without crashing", () => {
-    const { dataGridRow, getAllByRole } = createDataGridRow();
-
-    expect(dataGridRow).toBeDefined();
-    expect(dataGridRow).toHaveClass("row", { exact: true });
-    const cells = getAllByRole("cell");
-    expect(cells).toHaveLength(2);
-    expect(cells[0]).toHaveTextContent("1");
-    expect(cells[1]).toHaveTextContent("2");
-  });
-
-  it("renders with additional class", () => {
-    const { dataGridRow } = createDataGridRow(params => ({ ...params, className: "test" }));
-
-    expect(dataGridRow).toHaveClass("row test", { exact: true });
-  });
-
-  it("renders loading state", () => {
-    const { dataGridRow } = createDataGridRow(params => ({ ...params, isLoading: true }));
-
-    expect(dataGridRow).toHaveClass("row loading", { exact: true });
-  });
-
-  it("renders only visible columns", () => {
-    const { dataGridRow, getAllByRole } = createDataGridRow(params => ({
-      ...params,
-      headers: [
-        { name: "firstName", headline: "first name", hidden: true },
-        { name: "lastName", headline: "last name", hidden: true },
-        { name: "date", headline: "date" },
-        { name: "status", headline: "status" }
-      ],
-      children: [
-        <DataGridCell>1</DataGridCell>,
-        <DataGridCell>2</DataGridCell>,
-        <DataGridCell>3</DataGridCell>,
-        <DataGridCell>4</DataGridCell>
-      ]
-    }));
-
-    expect(dataGridRow).toBeDefined();
-    const cells = getAllByRole("cell");
-    expect(cells).toHaveLength(2);
-    expect(cells[0]).toHaveTextContent("3");
-    expect(cells[1]).toHaveTextContent("4");
-  });
-});
-
-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 <DataGridRow {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    const container = document.createElement("tbody");
-    render(<ExampleComponent propagateRef={refCheck} />, { container });
-  });
-});