@bigbinary/neetoui 3.2.71 → 3.2.74

package/tests/Radio.test.js

@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+import { Radio } from "../lib/components";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const ControlledRadio = () => {
+  const [value, setValue] = useState("");
+
+  return (
+    <Radio
+      label="Radio"
+      onChange={(e) => setValue(e.target.value)}
+      value={value}
+    >
+      <Radio.Item label="option1" name="options" value="option1" />
+      <Radio.Item label="option2" name="options" value="option2" />
+    </Radio>
+  );
+};
+
+describe("Radio", () => {
+  it("should render without error", () => {
+    const { getByText } = render(
+      <Radio label="Radio">
+        <Radio.Item label="option1" name="options" value="option1" />
+      </Radio>
+    );
+    expect(getByText("Radio")).toBeInTheDocument();
+  });
+
+  it("should call onChange when radio value is changed", () => {
+    const onChange = jest.fn((event) => {
+      expect(event.target.value).toBe("option1");
+    });
+    const { getByText } = render(
+      <Radio label="Radio" onChange={onChange}>
+        <Radio.Item label="option1" name="options" value="option1" />
+      </Radio>
+    );
+    userEvent.click(getByText("option1"));
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("should display error message", () => {
+    const { getByText } = render(
+      <Radio label="Radio" error="Error message">
+        <Radio.Item label="option1" name="options" value="option1" />
+      </Radio>
+    );
+    expect(getByText("Error message")).toBeInTheDocument();
+  });
+
+  it("should be unchecked by default", () => {
+    const { getByRole } = render(
+      <Radio label="Radio">
+        <Radio.Item label="option1" name="options" value="option1" />
+      </Radio>
+    );
+    expect(getByRole("radio")).not.toBeChecked();
+  });
+
+  it("should show controlled behaviour", () => {
+    const { getAllByRole } = render(<ControlledRadio />);
+    const radio = getAllByRole("radio");
+    userEvent.click(radio[0]);
+    expect(radio[0]).toBeChecked();
+    expect(radio[1]).not.toBeChecked();
+    userEvent.click(radio[1]);
+    expect(radio[0]).not.toBeChecked();
+    expect(radio[1]).toBeChecked();
+  });
+
+  it("should be checked on clicking the radio item", () => {
+    const { getByRole } = render(
+      <Radio label="Radio">
+        <Radio.Item label="option1" name="options" value="option1" />
+      </Radio>
+    );
+    const radio = getByRole("radio");
+    userEvent.click(radio);
+    expect(radio).toBeChecked();
+  });
+});

package/tests/Select.test.js

@@ -0,0 +1,85 @@
+import React from "react";
+import { Select } from "../lib/components";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const options = [
+  {
+    label: "Option 1",
+    value: "option-1",
+  },
+  {
+    label: "Option 2",
+    value: "option-2",
+  },
+];
+
+describe("Select", () => {
+  it("should render without error", () => {
+    const { getByText } = render(<Select label="Select" options={options} />);
+    expect(getByText("Select")).toBeInTheDocument();
+  });
+
+  it("should show option list on clicking", () => {
+    const { getByRole, getByText } = render(
+      <Select label="Select" options={options} />
+    );
+    const select = getByRole("combobox");
+    userEvent.click(select);
+    expect(getByText("Option 1")).toBeInTheDocument();
+    expect(getByText("Option 2")).toBeInTheDocument();
+  });
+
+  it("should call onChange on select option", () => {
+    const onChange = jest.fn();
+    const { getByRole, getByText } = render(
+      <Select label="Select" options={options} onChange={onChange} />
+    );
+    const select = getByRole("combobox");
+    userEvent.click(select);
+    userEvent.click(getByText("Option 2"));
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("should change selected option value when an option is selected", async () => {
+    const { getByRole, getByText } = render(
+      <Select label="Select" options={options} />
+    );
+    const select = getByRole("combobox");
+    userEvent.click(select);
+    userEvent.click(getByText("Option 2"));
+    expect(getByText("Option 2")).toBeInTheDocument();
+  });
+
+  it("should not render label if label is not provided", () => {
+    const { queryByTestId } = render(<Select options={options} />);
+    expect(queryByTestId("select-label")).not.toBeInTheDocument();
+  });
+
+  it("should show error message if provided", () => {
+    const { getByText, getByTestId } = render(
+      <Select label="Select" options={options} error="Error message" />
+    );
+    expect(getByTestId("select-error")).toBeInTheDocument();
+    expect(getByText("Error message")).toBeInTheDocument();
+  });
+
+  it("should show help text if provided", () => {
+    const { getByText, getByTestId } = render(
+      <Select label="Select" options={options} helpText="Help text" />
+    );
+    expect(getByTestId("select-help-text")).toBeInTheDocument();
+    expect(getByText("Help text")).toBeInTheDocument();
+  });
+
+  test("creatable Select should create new element", () => {
+    const { getByRole, getByTestId } = render(<Select isCreateable />);
+    const select = getByRole("combobox");
+    const selectBox = getByTestId("select");
+    userEvent.click(select);
+    expect(selectBox).toHaveTextContent("No options", { exact: false });
+    userEvent.type(select, "hello");
+    userEvent.type(select, "{enter}");
+    expect(selectBox).toHaveTextContent("hello", { exact: false });
+  });
+});