@bigbinary/neetoui 3.2.73 → 3.2.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui",
-  "version": "3.2.73",
+  "version": "3.2.74",
   "main": "./index.js",
   "author": "BigBinary",
   "license": "MIT",

package/tests/DatePicker.test.js

@@ -0,0 +1,111 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import dayjs from "dayjs";
+import DatePicker from "../lib/components/DatePicker";
+
+const today = dayjs();
+const tomorrow = dayjs().add(1, "day");
+
+describe("DatePicker", () => {
+  it("should render without error", () => {
+    render(<DatePicker defaultValue={today} />);
+    expect(screen.getByRole("textbox")).toHaveValue(today.format("DD/MM/YYYY"));
+  });
+
+  it("should show label if label is provided", () => {
+    render(<DatePicker label="DatePicker Label" />);
+    expect(screen.getByText("DatePicker Label")).toBeInTheDocument();
+  });
+
+  it("should show error if error is provided", () => {
+    render(<DatePicker error="DatePicker Error" />);
+    expect(screen.getByText("DatePicker Error")).toBeInTheDocument();
+  });
+
+  it("should render time if showTime is true", async () => {
+    render(<DatePicker defaultValue={today} showTime open />);
+    expect(await screen.findAllByText("00")).toHaveLength(3);
+  });
+
+  it("should show only hours if format is HH", async () => {
+    render(<DatePicker defaultValue={today} timeFormat="HH" showTime open />);
+    expect(await screen.findAllByText("00")).toHaveLength(1);
+  });
+
+  it("should show only hours and minutes if format is MM", async () => {
+    render(
+      <DatePicker defaultValue={today} timeFormat="HH:mm" showTime open />
+    );
+    expect(await screen.findAllByText("00")).toHaveLength(2);
+  });
+
+  it("should return date in the given format", async () => {
+    render(
+      <DatePicker
+        defaultValue={dayjs("2022-05-24", "YYYY-MM-DD")}
+        format="DD/MM/YYYY"
+      />
+    );
+    expect(screen.getByRole("textbox")).toHaveValue("24/05/2022");
+  });
+
+  it("should return date time in the given format", async () => {
+    render(
+      <DatePicker
+        defaultValue={dayjs("2022-05-24", "YYYY-MM-DD")
+          .hour(12)
+          .minute(30)
+          .second(0)}
+        format="DD/MM/YYYY HH:mm"
+        showTime
+      />
+    );
+    expect(screen.getByRole("textbox")).toHaveValue("24/05/2022 12:30");
+  });
+
+  it("should trigger onChange on selecting a date", () => {
+    const onChange = jest.fn();
+    render(<DatePicker defaultValue={today} onChange={onChange} open />);
+    fireEvent.click(screen.getByText(tomorrow.get("D")));
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("should trigger onOk method on clicking on ok button", () => {
+    const onOk = jest.fn();
+    render(<DatePicker open showTime defaultValue={today} onOk={onOk} />);
+    fireEvent.click(screen.getByText("Ok"));
+    expect(onOk).toHaveBeenCalled();
+  });
+
+  it("should show 12 hour format if timeFormat is in 12 hr format", () => {
+    render(
+      <DatePicker
+        defaultValue={dayjs("12/04/2022", "DD/MM/YYYY").hour(14).minute(30)}
+        dateFormat="DD/MM/YYYY"
+        showTime
+        timeFormat="h:mm A"
+        open
+      />
+    );
+    expect(screen.getByRole("textbox")).toHaveValue("12/04/2022 2:30 PM");
+  });
+
+  it("should be able to select date in a range", () => {
+    render(
+      <DatePicker
+        defaultValue={[
+          dayjs("12/04/2022", "DD/MM/YYYY"),
+          dayjs("14/04/2022", "DD/MM/YYYY"),
+        ]}
+        type="range"
+        open
+      />
+    );
+    fireEvent.click(screen.getAllByText("11")[0]);
+    fireEvent.click(screen.getAllByText("16")[1]);
+    const dateInputBox = screen.getAllByRole("textbox");
+    expect(dateInputBox[0]).toHaveValue("11/04/2022");
+    expect(dateInputBox[1]).toHaveValue("16/05/2022");
+  });
+});

package/tests/Label.test.js

@@ -0,0 +1,61 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import Label from "../lib/components/Label";
+import userEvent from "@testing-library/user-event";
+
+describe("Label", () => {
+  it("should render without error", () => {
+    const { getByText } = render(<Label>Content</Label>);
+    expect(getByText("Content")).toBeInTheDocument();
+  });
+
+  it("should show * when required prop is provided", () => {
+    const { getByText } = render(
+      <Label required>
+        <p>Content</p>
+      </Label>
+    );
+    expect(getByText("Content")).toBeInTheDocument();
+    expect(getByText("*")).toBeInTheDocument();
+  });
+
+  it("should show info icon by default when helpIconProps is provided", () => {
+    const { getByTestId } = render(
+      <Label helpIconProps={{ "data-testid": "icon" }}>
+        <p>Content</p>
+      </Label>
+    );
+    expect(getByTestId("icon")).toBeInTheDocument();
+  });
+
+  it("should show tooltip when provided in helpIconProps", () => {
+    const { getByText, getByTestId } = render(
+      <Label
+        helpIconProps={{
+          tooltipProps: { content: "Tooltip" },
+          "data-testid": "icon"
+        }}
+      >
+        <p>Content</p>
+      </Label>
+    );
+    userEvent.hover(getByTestId("icon"));
+    expect(getByText("Tooltip")).toBeInTheDocument();
+  });
+
+  it("should trigger onClick when provided in helpIconProps", () => {
+    const onClick = jest.fn();
+    const { getByTestId } = render(
+      <Label
+        helpIconProps={{
+          onClick,
+          "data-testid": "icon"
+        }}
+      >
+        <p>Content</p>
+      </Label>
+    );
+    userEvent.click(getByTestId("icon"));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});

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