@onewelcome/react-lib-components 2.0.0-alpha → 2.0.0-alpha.1

package/src/Form/Select/Select.test.tsx

@@ -1,486 +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 { Select as SelectComponent, Props } from "./Select";
-import { render, waitFor } from "@testing-library/react";
-import { Option } from "./Option";
-import userEvent from "@testing-library/user-event";
-import { act } from "react-dom/test-utils";
-
-const defaultParams: Props = {
-  name: "Example select",
-  children: [
-    <Option value="option1">Test</Option>,
-    <Option value="option2">Test2</Option>,
-    <Option value="option3">Test3</Option>,
-    <Option value="option4">Test4</Option>,
-    <Option value="option5">Test5</Option>,
-    <Option value="option6">Test6</Option>,
-    <Option value="option7">Test7</Option>,
-    <Option value="option8">Test8</Option>,
-    <Option value="option9">Test9</Option>,
-    <Option value="option10">Test10</Option>,
-    <Option value="option11">Test11</Option>,
-    <Option value="option12">Test12</Option>,
-    <Option value="option13">Test13</Option>,
-    <Option value="option14">Test14</Option>,
-    <Option value="option15">Test15</Option>,
-    <Option value="option16">Test16</Option>,
-    <Option value="option17">Test17</Option>
-  ],
-  value: "option1",
-  searchInputProps: { "data-testid": "search-input" },
-  // @ts-ignore it does exist Typescript, pls.
-  selectButtonProps: { "data-testid": "select-button" }
-};
-
-const createSelect = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<SelectComponent {...parameters} data-testid="select" />);
-  const select = queries.getByTestId("select");
-  const button = queries.getByTestId("select-button");
-  const list = select.querySelector('ul[role="listbox"]');
-  const dropdownWrapper = select.querySelector(".list-wrapper");
-
-  return {
-    ...queries,
-    select,
-    button,
-    list,
-    dropdownWrapper
-  };
-};
-
-describe("Select should render", () => {
-  it("renders with 5 options and proper attributes", () => {
-    const { select, button, list, dropdownWrapper } = createSelect(defaultParams => ({
-      ...defaultParams,
-      children: [
-        <Option value="option1">Test</Option>,
-        <Option value="option2">Test2</Option>,
-        <Option value="option3">Test3</Option>,
-        <Option value="option4">Test4</Option>,
-        <Option value="option5">Test5</Option>
-      ],
-      placeholder: "Placeholder",
-      value: ""
-    }));
-
-    expect(dropdownWrapper).toHaveStyle({ "pointer-events": "none" });
-
-    if (button) {
-      act(() => {
-        userEvent.click(button);
-      });
-    }
-
-    expect(select).toBeDefined();
-    expect(select.querySelector(".placeholder")).toBeInTheDocument();
-    expect(button?.getAttribute("aria-expanded")).toBe("true");
-    expect(button?.getAttribute("aria-disabled")).toBe("false");
-    expect(list).toBeDefined();
-    expect(list?.querySelectorAll("li[role='option']").length).toBe(5);
-    expect(dropdownWrapper).toHaveStyle({ "pointer-events": "auto" });
-  });
-
-  it("should be disabled", () => {
-    const { select, button } = createSelect(defaultParams => ({
-      ...defaultParams,
-      disabled: true
-    }));
-
-    expect(select).toHaveClass("disabled");
-    expect(button).toHaveAttribute("aria-disabled", "true");
-    expect(button).toHaveAttribute("disabled");
-  });
-
-  it("should have an error", () => {
-    const { select, button } = createSelect(defaultParams => ({
-      ...defaultParams,
-      error: true,
-      value: "option4"
-    }));
-
-    expect(select).toHaveClass("error");
-    expect(button).toHaveAttribute("aria-invalid", "true");
-    expect(select.querySelector("[data-clear]")).not.toBeInTheDocument();
-  });
-
-  it("should have a success icon when success state", () => {
-    const { button } = createSelect(defaultParams => ({
-      ...defaultParams,
-      success: true
-    }));
-
-    const icon = button.querySelector("[class*='icon-checkmark-circle-breakout']");
-    expect(button).toHaveClass("success");
-    expect(icon).toBeDefined();
-  });
-});
-
-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 <SelectComponent {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current!.nodeName).toBe("SELECT");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});
-
-describe("Select should render with search", () => {
-  it("shows the search and filtering works", () => {
-    const { select, list, button, getByTestId } = createSelect();
-
-    const searchInput = getByTestId("search-input");
-
-    if (button) {
-      act(() => {
-        userEvent.click(button);
-      });
-    }
-
-    expect(select).toBeTruthy();
-    expect(searchInput).toBeTruthy();
-    expect(list?.querySelectorAll("li[role='option']").length).toBe(17);
-
-    if (searchInput) {
-      userEvent.type(searchInput, "17");
-    }
-
-    expect(list?.querySelectorAll("li[role='option']").length).toBe(1);
-    expect(list?.querySelector("li[role='option']")?.innerHTML).toBe("Test17");
-  });
-});
-
-describe("Selecting options using keyboard", () => {
-  it("should focus through list items and select on enterpress", async () => {
-    const onChangeHandler = jest.fn();
-    const { select, button } = createSelect(defaultParams => ({
-      ...defaultParams,
-      onChange: onChangeHandler
-    }));
-
-    act(() => {
-      userEvent.click(button);
-    });
-
-    expect(button).toHaveAttribute("aria-expanded", "true");
-
-    userEvent.keyboard("{arrowdown}");
-    userEvent.keyboard("{arrowdown}");
-    userEvent.keyboard("{enter}");
-
-    expect(button).toHaveAttribute("aria-expanded", "false");
-
-    expect(onChangeHandler).toHaveBeenCalled();
-
-    userEvent.keyboard("{enter}");
-
-    expect(button).toHaveAttribute("aria-expanded", "true");
-
-    userEvent.keyboard("{arrowdown}");
-
-    expect(select.querySelector('li[data-value="option3"]')).toHaveFocus();
-
-    userEvent.keyboard("{arrowup}");
-    userEvent.keyboard("{arrowup}");
-    userEvent.keyboard("{arrowup}");
-    userEvent.keyboard("{arrowup}");
-
-    expect(select.querySelector('li[data-value="option16"]')).toHaveFocus();
-    userEvent.keyboard("{arrowup}");
-    expect(select.querySelector('li[data-value="option15"]')).toHaveFocus();
-
-    userEvent.keyboard("{arrowdown}");
-    userEvent.keyboard("{arrowdown}");
-    userEvent.keyboard("{arrowdown}");
-
-    expect(select.querySelector('li[data-value="option1"]')).toHaveFocus();
-
-    userEvent.keyboard("{escape}");
-
-    expect(button).toHaveAttribute("aria-expanded", "false");
-  });
-});
-
-describe("Expanded should be false whenever we click the body", () => {
-  it("closes select on body click", () => {
-    const { button } = createSelect();
-
-    if (button) {
-      act(() => {
-        userEvent.click(button);
-      });
-    }
-
-    expect(button).toHaveAttribute("aria-expanded", "true");
-    act(() => {
-      userEvent.click(document.body);
-    });
-    expect(button).toHaveAttribute("aria-expanded", "false");
-  });
-});
-
-describe("List expansion", () => {
-  it("should expand upwards", () => {
-    const { select, button, dropdownWrapper } = createSelect();
-
-    Object.defineProperty(window, "innerHeight", { value: 500, writable: true });
-
-    select.getBoundingClientRect = () => ({
-      x: 50,
-      y: 50,
-      width: 500,
-      height: 50,
-      top: 250,
-      left: 250,
-      right: 750,
-      bottom: 750,
-      toJSON: () => jest.fn()
-    });
-
-    if (button) {
-      act(() => {
-        userEvent.click(button);
-      });
-    }
-
-    expect(dropdownWrapper).toHaveStyle({ bottom: "0px" });
-  });
-
-  it("should expand downwards with a max height set", () => {
-    const { select, getByRole, dropdownWrapper } = createSelect();
-
-    dropdownWrapper!.getBoundingClientRect = () => ({
-      x: 50,
-      y: 50,
-      width: 500,
-      height: 600,
-      top: 10,
-      left: 250,
-      right: 750,
-      bottom: 50,
-      toJSON: () => jest.fn()
-    });
-
-    Object.defineProperty(window, "innerHeight", { value: 500, writable: true });
-
-    select.getBoundingClientRect = () => ({
-      x: 50,
-      y: 50,
-      width: 500,
-      height: 40,
-      top: 10,
-      left: 250,
-      right: 750,
-      bottom: 50,
-      toJSON: () => jest.fn()
-    });
-
-    act(() => {
-      userEvent.click(document.body);
-    });
-
-    const button = getByRole("button");
-    act(() => {
-      userEvent.click(button);
-    });
-
-    expect(dropdownWrapper).toHaveStyle({ maxHeight: "474px" });
-    expect(dropdownWrapper).toHaveStyle({ top: "0px" });
-  });
-});
-
-describe("previously selected item", () => {
-  it("should have focus", async () => {
-    const { select, button } = createSelect(defaultParams => ({
-      ...defaultParams,
-      value: "option4"
-    }));
-
-    await act(async () => {
-      button.focus();
-    });
-
-    const option2 = select.querySelector('li[data-value="option2"]')!;
-
-    userEvent.keyboard("{enter}");
-
-    expect(button).toHaveAttribute("aria-expanded", "true");
-    userEvent.keyboard("{arrowdown}");
-    userEvent.keyboard("{arrowdown}");
-    userEvent.keyboard("{space}");
-
-    act(() => {
-      userEvent.click(button);
-    });
-
-    expect(document.activeElement).toBe(option2);
-  });
-});
-
-describe("search input", () => {
-  it("listens to different keyboard inputs", () => {
-    const { button, select } = createSelect();
-
-    const searchInput = document.querySelector(".select-search")!;
-
-    act(() => {
-      userEvent.click(button);
-    });
-
-    (searchInput as HTMLElement).focus();
-
-    userEvent.keyboard("{arrowup}");
-    expect(select.querySelector('li[data-value="option17"]')).toHaveFocus();
-  });
-
-  it("move focus with arrowdown", () => {
-    const { button, select } = createSelect();
-
-    const searchInput = document.querySelector(".select-search")!;
-
-    act(() => {
-      userEvent.click(button);
-    });
-
-    (searchInput as HTMLElement).focus();
-
-    userEvent.keyboard("{arrowdown}");
-    expect(select.querySelector('li[data-value="option1"]')).toHaveFocus();
-  });
-
-  it("select with enter", () => {
-    const { button, select } = createSelect();
-
-    const searchInput = document.querySelector(".select-search")!;
-
-    act(() => {
-      userEvent.click(button);
-    });
-
-    (searchInput as HTMLElement).focus();
-
-    userEvent.keyboard("{enter}");
-    expect(select.querySelector('li[data-value="option1"]')).toHaveFocus();
-  });
-
-  it("expand list with arrowdown", async () => {
-    const { button } = createSelect();
-
-    button.focus();
-    userEvent.keyboard("{arrowdown}");
-
-    expect(button).toHaveAttribute("aria-expanded", "true");
-  });
-
-  it("expand list with space", async () => {
-    const { button } = createSelect();
-
-    button.focus();
-    userEvent.keyboard("{space}");
-
-    expect(button).toHaveAttribute("aria-expanded", "true");
-  });
-
-  it("closes on escape", async () => {
-    const { button } = createSelect();
-
-    const searchInput = document.querySelector(".select-search")!;
-
-    act(() => {
-      userEvent.click(button);
-    });
-
-    userEvent.tab();
-
-    await waitFor(() => expect(searchInput).toHaveFocus());
-
-    userEvent.keyboard("{escape}");
-
-    expect(button).toHaveAttribute("aria-expanded", "false");
-  });
-
-  it("closes on tab", async () => {
-    const { button } = createSelect();
-
-    const searchInput = document.querySelector(".select-search")!;
-
-    act(() => {
-      userEvent.click(button);
-    });
-
-    userEvent.tab();
-
-    expect(searchInput).toHaveFocus();
-
-    act(() => {
-      userEvent.tab();
-    });
-  });
-});
-
-describe("home and end keys work", () => {
-  it("goes to home and end", () => {
-    const { button } = createSelect();
-
-    act(() => {
-      userEvent.click(button);
-    });
-
-    const firstOption = document.querySelector('li[data-value="option1"]');
-    const lastOption = document.querySelector('li[data-value="option17"]');
-    userEvent.keyboard("{end}");
-
-    expect(lastOption).toHaveFocus();
-
-    userEvent.keyboard("{home}");
-
-    expect(firstOption).toHaveFocus();
-  });
-});
-
-describe("search input props work", () => {
-  it("adds a classname", () => {
-    createSelect(defaultParams => ({
-      ...defaultParams,
-      searchInputProps: { wrapperProps: { className: "test-wrapper-classname" } }
-    }));
-
-    expect(document.querySelector(".test-wrapper-classname")).toBeInTheDocument();
-  });
-});