@agilant/toga-blox 1.0.93 → 1.0.95

package/dist/components/BaseInput/BaseInput.test.js

@@ -0,0 +1,560 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import { FormProvider, useForm } from "react-hook-form";
+import BaseInput from "./BaseInput";
+// Mock Functions
+const mockOnChange = vi.fn();
+const mockOnBlur = vi.fn();
+// Correctly Mock `react-hook-form`
+vi.mock("react-hook-form", async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...(typeof actual === "object" ? actual : {}),
+        Controller: ({ render }) => {
+            return render({
+                field: {
+                    onChange: (value) => {
+                        console.log("Mocked onChange received:", value);
+                        mockOnChange(value);
+                    },
+                    value: "",
+                },
+            });
+        },
+        useForm: () => ({
+            control: {},
+            register: vi.fn(),
+            handleSubmit: vi.fn(),
+            setValue: vi.fn((name, value) => {
+                if (name === "testValue") {
+                    mockOnChange(value);
+                }
+            }),
+            formState: { errors: {}, dirtyFields: {} },
+            getValues: vi.fn(() => "mockValue"),
+            watch: vi.fn(),
+        }),
+        useFormContext: () => ({
+            control: {},
+            setValue: vi.fn((name, value) => {
+                if (name === "testValue") {
+                    mockOnChange(value);
+                }
+            }),
+            getValues: vi.fn(() => "mockValue"),
+            watch: vi.fn(),
+            formState: {
+                errors: {
+                    testValue: { message: "This field is required." },
+                },
+                dirtyFields: { testValue: true },
+            },
+        }),
+        FormProvider: actual.FormProvider,
+    };
+});
+// Helper function to wrap components in `FormProvider`
+const renderWithForm = (ui) => {
+    const Wrapper = ({ children }) => {
+        const methods = useForm();
+        return _jsx(FormProvider, { ...methods, children: children });
+    };
+    return render(ui, { wrapper: Wrapper });
+};
+// Common `defaultProps` for `BaseTextInput`
+const getDefaultProps = () => ({
+    uuid: "123",
+    defaultValue: "Default Value",
+    valueKey: "testValue",
+    control: {},
+    onBlur: mockOnBlur,
+    inputLabel: "Test Input",
+    placeholder: "Enter text",
+    isRequired: true,
+    showRequiredIndicator: true,
+    inputClasses: "border",
+    field: {
+        uuid: "123",
+        label: "Test Input",
+        valueKey: "testValue",
+        inputType: "text",
+        placeholder: "Enter text",
+        isRequired: true,
+        defaultValue: "Default Value",
+    },
+});
+// Test Suite for `BaseInput`
+describe("BaseInput Component", () => {
+    describe("BaseTextInput", () => {
+        test("renders text input field", () => {
+            renderWithForm(_jsx(BaseInput, { ...getDefaultProps(), inputType: "text" }));
+            expect(screen.getByPlaceholderText("Enter text")).toBeInTheDocument();
+        });
+        test("calls onChange when input value is changed", async () => {
+            renderWithForm(_jsx(BaseInput, { ...getDefaultProps(), inputType: "text" }));
+            const input = screen.getByPlaceholderText("Enter text");
+            fireEvent.change(input, { target: { value: "Test Input" } });
+            expect(mockOnChange).toHaveBeenCalled();
+            expect(mockOnChange).toHaveBeenCalledWith("Test Input");
+        });
+        test("triggers onBlur event when input loses focus", () => {
+            renderWithForm(_jsx(BaseInput, { ...getDefaultProps(), inputType: "text" }));
+            const input = screen.getByPlaceholderText("Enter text");
+            fireEvent.blur(input);
+            expect(mockOnBlur).toHaveBeenCalled();
+        });
+        test("displays required asterisk when field is required", () => {
+            renderWithForm(_jsx(BaseInput, { ...getDefaultProps(), inputType: "text" }));
+            expect(screen.getByText("*")).toBeInTheDocument();
+        });
+        test("shows error message when validation fails", async () => {
+            const errorProps = {
+                ...getDefaultProps(),
+                isRequired: true,
+            };
+            renderWithForm(_jsx(BaseInput, { ...errorProps, inputType: "text" }));
+            const input = screen.getByPlaceholderText("Enter text");
+            // Trigger validation by blurring the input field
+            fireEvent.blur(input);
+            // Wait for error message to appear
+            expect(await screen.findByText("This field is required.")).toBeInTheDocument();
+        });
+        test("applies error styles when field has an error", async () => {
+            const errorProps = {
+                ...getDefaultProps(),
+                isRequired: true,
+            };
+            renderWithForm(_jsx(BaseInput, { ...errorProps, inputType: "text" }));
+            const input = screen.getByPlaceholderText("Enter text");
+            // Trigger validation
+            fireEvent.blur(input);
+            // Check if error class is applied
+            await screen.findByText("This field is required.");
+            expect(input).toHaveClass("border-red-500");
+        });
+        test("applies dirty styles when field is modified", async () => {
+            const dirtyProps = {
+                ...getDefaultProps(),
+                isRequired: true,
+            };
+            renderWithForm(_jsx(BaseInput, { ...dirtyProps, inputType: "text" }));
+            const input = screen.getByPlaceholderText("Enter text");
+            // Modify input value
+            fireEvent.change(input, { target: { value: "New Value" } });
+            // Check if dirty class is applied
+            expect(input).toHaveClass("border-red-500");
+        });
+        test("does not show required asterisk when `showRequiredIndicator` is false", () => {
+            const propsWithoutIndicator = {
+                ...getDefaultProps(),
+                showRequiredIndicator: false,
+            };
+            renderWithForm(_jsx(BaseInput, { ...propsWithoutIndicator, inputType: "text" }));
+            expect(screen.queryByText("*")).not.toBeInTheDocument();
+        });
+        test("does not call onChange when non-numeric input is entered and hasTypeCheck is 'number'", async () => {
+            // Create props with `hasTypeCheck: "number"`
+            const numberProps = {
+                ...getDefaultProps(),
+                hasTypeCheck: "number",
+            };
+            renderWithForm(_jsx(BaseInput, { ...numberProps, inputType: "text" }));
+            const input = screen.getByPlaceholderText("Enter text");
+            // Clear previous mock calls
+            mockOnChange.mockClear();
+            // Try entering non-numeric characters
+            fireEvent.change(input, { target: { value: "abc" } });
+            // Ensure `onChange` was NOT called
+            expect(mockOnChange).not.toHaveBeenCalled();
+        });
+        test("formats phone number when valueType is 'phone'", () => {
+            const phoneProps = {
+                ...getDefaultProps(),
+                valueType: "phone",
+            };
+            renderWithForm(_jsx(BaseInput, { ...phoneProps, inputType: "text" }));
+            const input = screen.getByPlaceholderText("Enter text");
+            fireEvent.change(input, { target: { value: "1234567890" } });
+            expect(mockOnChange).toHaveBeenCalledWith("(123) 456-7890"); // Assuming formatPhoneNumber formats it this way
+        });
+    });
+    describe("BaseTextareaInput", () => {
+        const getTextareaProps = () => ({
+            ...getDefaultProps(),
+            inputType: "textArea",
+            textAreaHeight: "small",
+            characterLimit: 200,
+            field: {
+                uuid: "123",
+                label: "Test Input",
+                valueKey: "testValue",
+                inputType: "textArea",
+                placeholder: "Enter text",
+                isRequired: true,
+                defaultValue: "Default Value",
+            },
+        });
+        test("renders textarea field", () => {
+            renderWithForm(_jsx(BaseInput, { ...getTextareaProps() }));
+            expect(screen.getByPlaceholderText("Enter text")).toBeInTheDocument();
+        });
+        test("calls onChange when textarea value is changed", async () => {
+            renderWithForm(_jsx(BaseInput, { ...getTextareaProps() }));
+            const textarea = screen.getByPlaceholderText("Enter text");
+            fireEvent.change(textarea, { target: { value: "New Value" } });
+            expect(mockOnChange).toHaveBeenCalled();
+        });
+        // test("displays character limit message when input exceeds limit", async () => {
+        // 	const longText = "A".repeat(201); // Exceeding limit
+        // 	renderWithForm(
+        // 		<BaseInput {...getTextareaProps()} requireUuidField={true} />
+        // 	);
+        // 	const textarea = screen.getByPlaceholderText("Enter text");
+        // 	fireEvent.change(textarea, { target: { value: longText } });
+        // 	expect(await screen.findByText("200/200")).toBeInTheDocument();
+        // });
+        // test("triggers onBlur event when textarea loses focus", async () => {
+        // 	renderWithForm(<BaseInput {...getTextareaProps()} />);
+        // 	const textarea = await screen.findByPlaceholderText("Enter text");
+        // 	expect(textarea).toBeInTheDocument(); // Confirm it exists
+        // 	fireEvent.blur(textarea);
+        // 	expect(mockOnBlur).toHaveBeenCalled();
+        // });
+        test("shows error message when validation fails", async () => {
+            const errorProps = {
+                ...getTextareaProps(),
+                isRequired: true,
+            };
+            renderWithForm(_jsx(BaseInput, { ...errorProps }));
+            const textarea = screen.getByPlaceholderText("Enter text");
+            fireEvent.blur(textarea);
+            expect(await screen.findByText("This field is required.")).toBeInTheDocument();
+        });
+        test("applies error styles when textarea has an error", async () => {
+            const errorProps = {
+                ...getTextareaProps(),
+                isRequired: true,
+            };
+            renderWithForm(_jsx(BaseInput, { ...errorProps }));
+            const textarea = screen.getByPlaceholderText("Enter text");
+            fireEvent.blur(textarea);
+            await screen.findByText("This field is required.");
+            expect(textarea).toHaveClass("border-red-500");
+        });
+        test("does not show required asterisk when `showRequiredIndicator` is false", () => {
+            const propsWithoutIndicator = {
+                ...getTextareaProps(),
+                showRequiredIndicator: false,
+            };
+            renderWithForm(_jsx(BaseInput, { ...propsWithoutIndicator }));
+            expect(screen.queryByText("*")).not.toBeInTheDocument();
+        });
+    });
+    describe("BaseCheckboxInput", () => {
+        const getCheckboxProps = () => ({
+            ...getDefaultProps(),
+            inputType: "checkbox",
+            defaultValue: false,
+            checkboxBorderColorOnChecked: "border-green-500",
+            checkboxBackgroundColor: "bg-green-500",
+            field: {
+                uuid: "123",
+                label: "Test Checkbox",
+                valueKey: "testCheckbox",
+                inputType: "checkbox",
+                isRequired: true,
+                defaultValue: false,
+            },
+        });
+        test("renders checkbox field", () => {
+            renderWithForm(_jsx(BaseInput, { ...getCheckboxProps() }));
+            expect(screen.getByRole("checkbox")).toBeInTheDocument();
+        });
+        test("calls onChange when checkbox is checked", () => {
+            renderWithForm(_jsx(BaseInput, { ...getCheckboxProps() }));
+            const checkbox = screen.getByRole("checkbox");
+            fireEvent.click(checkbox);
+            expect(mockOnChange).toHaveBeenCalled();
+            expect(mockOnChange).toHaveBeenCalledWith(true); // Checkbox should be checked
+        });
+        test("calls onChange when checkbox is unchecked", () => {
+            renderWithForm(_jsx(BaseInput, { ...getCheckboxProps() }));
+            const checkbox = screen.getByRole("checkbox");
+            fireEvent.click(checkbox); // Check
+            fireEvent.click(checkbox); // Uncheck
+            expect(mockOnChange).toHaveBeenCalled();
+        });
+        test("applies correct styles when checkbox is checked", () => {
+            renderWithForm(_jsx(BaseInput, { ...getCheckboxProps() }));
+            const checkbox = screen.getByRole("checkbox");
+            fireEvent.click(checkbox);
+            expect(checkbox).toHaveClass("border-green-500");
+            expect(checkbox).toHaveClass("bg-green-500");
+        });
+        test("checkbox starts with default value (unchecked)", () => {
+            const props = { ...getCheckboxProps(), defaultValue: false };
+            renderWithForm(_jsx(BaseInput, { ...props }));
+            const checkbox = screen.getByRole("checkbox");
+            expect(checkbox).not.toBeChecked(); // Should start unchecked
+        });
+        test("does not show required asterisk when `showRequiredIndicator` is false", () => {
+            const propsWithoutIndicator = {
+                ...getCheckboxProps(),
+                showRequiredIndicator: false,
+            };
+            renderWithForm(_jsx(BaseInput, { ...propsWithoutIndicator }));
+            expect(screen.queryByText("*")).not.toBeInTheDocument();
+        });
+    });
+    describe("BaseToggleInput", () => {
+        const getToggleProps = () => ({
+            ...getDefaultProps(),
+            inputType: "toggle",
+            defaultValue: false,
+            toggleTextPosition: "right",
+            toggleTextSize: "sm",
+            toggleActiveColorBackground: "bg-blue-600",
+            toggleInactiveColorBackground: "bg-blue-300",
+            toggleActiveColorBorder: "border-blue-500",
+            toggleInactiveColorBorder: "border-blue-300",
+            toggleActiveTextColor: "text-blue-800",
+            toggleInactiveTextColor: "text-blue-600",
+            toggleAdditionalClasses: `w-1/4`,
+            toggleHasDivider: false,
+            toggleFontFamily: "font-omnes-regular",
+            toggleActiveLabel: "Yes",
+            toggleInactiveLabel: "No",
+            toggleSmallToggle: true,
+            toggleBorderStyle: true,
+            field: {
+                uuid: "123",
+                label: "Test Toggle",
+                valueKey: "testToggle",
+                inputType: "toggle",
+                isRequired: true,
+                defaultValue: false,
+            },
+        });
+        test("renders toggle field", () => {
+            renderWithForm(_jsx(BaseInput, { ...getToggleProps() }));
+            expect(screen.getByRole("checkbox")).toBeInTheDocument();
+        });
+        test("calls onChange when toggle is clicked", () => {
+            renderWithForm(_jsx(BaseInput, { ...getToggleProps() }));
+            const toggleCheckbox = screen.getByRole("checkbox");
+            fireEvent.click(toggleCheckbox);
+            expect(mockOnChange).toHaveBeenCalled();
+            expect(mockOnChange).toHaveBeenCalledWith(true); // ✅ Toggle should be switched ON
+        });
+        test("calls onChange when toggle is clicked again", () => {
+            renderWithForm(_jsx(BaseInput, { ...getToggleProps() }));
+            const toggleCheckbox = screen.getByRole("checkbox");
+            fireEvent.click(toggleCheckbox); // Switch ON
+            fireEvent.click(toggleCheckbox); // Switch OFF
+            expect(mockOnChange).toHaveBeenCalled();
+            expect(mockOnChange.mock.calls.length).toBeGreaterThan(1);
+        });
+        test("applies correct styles when toggle is inactive", () => {
+            renderWithForm(_jsx(BaseInput, { ...getToggleProps() }));
+            const toggleCheckbox = screen.getByRole("checkbox");
+            expect(toggleCheckbox).not.toBeChecked();
+        });
+        test("toggle starts with default value (OFF)", () => {
+            const props = { ...getToggleProps(), defaultValue: false };
+            renderWithForm(_jsx(BaseInput, { ...props }));
+            const toggleCheckbox = screen.getByRole("checkbox");
+            expect(toggleCheckbox).not.toBeChecked();
+        });
+        test("does not show required asterisk when `showRequiredIndicator` is false", () => {
+            const propsWithoutIndicator = {
+                ...getToggleProps(),
+                showRequiredIndicator: false,
+            };
+            renderWithForm(_jsx(BaseInput, { ...propsWithoutIndicator }));
+            expect(screen.queryByText("*")).not.toBeInTheDocument();
+        });
+    });
+    describe("DisabledSelect", () => {
+        const getDisabledSelectProps = () => ({
+            ...getDefaultProps(),
+            inputType: "disabledSelect",
+            disabledSelectText: "Disabled Option",
+            labelTextClasses: "text-gray-500",
+        });
+        test("renders DisabledSelect with correct text", () => {
+            renderWithForm(_jsx(BaseInput, { ...getDisabledSelectProps() }));
+            expect(screen.getByText("Disabled Option")).toBeInTheDocument();
+        });
+        test("applies provided text classes", () => {
+            renderWithForm(_jsx(BaseInput, { ...getDisabledSelectProps() }));
+            const container = screen
+                .getByText("Disabled Option")
+                .closest("div");
+            expect(container).toHaveClass("text-gray-500");
+        });
+        test("contains an SVG icon", () => {
+            renderWithForm(_jsx(BaseInput, { ...getDisabledSelectProps() }));
+            const icon = document.querySelector("svg");
+            expect(icon).toBeInTheDocument();
+        });
+        test("should not be clickable", () => {
+            renderWithForm(_jsx(BaseInput, { ...getDisabledSelectProps() }));
+            // Get the div containing the text
+            const textDiv = screen.getByText("Disabled Option");
+            const container = textDiv.closest("div")?.parentElement?.parentElement;
+            fireEvent.click(container);
+            // Ensure the parent div has the correct class
+            expect(container).toHaveClass("hover:cursor-not-allowed");
+        });
+    });
+    describe("BaseRadioInput", () => {
+        const getRadioProps = () => ({
+            valueKey: "testRadio",
+            defaultValue: "option1",
+            inputType: "radio",
+            control: {},
+            options: [
+                { value: "option1", label: "Option 1" },
+                { value: "option2", label: "Option 2" },
+                { value: "option3", label: "Option 3" },
+            ],
+            field: {
+                uuid: "123",
+                label: "Test Radio",
+                valueKey: "testRadio",
+                inputType: "radio",
+                isRequired: true,
+                defaultValue: false,
+            },
+        });
+        test("renders radio options", () => {
+            renderWithForm(_jsx(BaseInput, { ...getRadioProps() }));
+            screen.debug();
+            const radioButtons = screen.getAllByRole("radio");
+            expect(radioButtons).toHaveLength(3);
+            // Validate options
+            expect(screen.getByText("Option 1")).toBeInTheDocument();
+            expect(screen.getByText("Option 2")).toBeInTheDocument();
+            expect(screen.getByText("Option 3")).toBeInTheDocument();
+        });
+        test("sets default selected radio button", () => {
+            renderWithForm(_jsx(BaseInput, { ...getRadioProps() }));
+            const option1 = screen.getAllByRole("radio")[0];
+            // Check if the radio button has the expected checked styles
+            expect(option1).toHaveClass("checked:border-blue-600");
+            expect(option1).toHaveClass("checked:bg-blue-600");
+        });
+        test("changes selection when a different radio button is clicked", () => {
+            renderWithForm(_jsx(BaseInput, { ...getRadioProps() }));
+            const radioButtons = screen.getAllByRole("radio");
+            // Select option 2
+            fireEvent.click(radioButtons[1]);
+            expect(mockOnChange).toHaveBeenCalledWith("option2");
+        });
+        test("only one radio button remains selected at a time", () => {
+            renderWithForm(_jsx(BaseInput, { ...getRadioProps() }));
+            const radioButtons = screen.getAllByRole("radio");
+            // Initially, option 1 should have checked styles
+            expect(radioButtons[0]).toHaveClass("checked:border-blue-600");
+            expect(radioButtons[0]).toHaveClass("checked:bg-blue-600");
+            // Click option 2
+            fireEvent.click(radioButtons[1]);
+            // Now, option 2 should have checked styles
+            expect(radioButtons[1]).toHaveClass("checked:border-blue-600");
+            expect(radioButtons[1]).toHaveClass("checked:bg-blue-600");
+        });
+    });
+    describe("BaseSelect", () => {
+        const mockSetValue = vi.fn();
+        // Common Props for Select Input
+        const getSelectProps = () => ({
+            valueKey: "testSelect",
+            inputType: "select",
+            control: {},
+            options: [
+                { uuid: "1", name: "Option 1" },
+                { uuid: "2", name: "Option 2" },
+                { uuid: "3", name: "Option 3" },
+            ],
+            field: {
+                uuid: "123",
+                label: "Test Select",
+                valueKey: "testSelect",
+                inputType: "select",
+                isRequired: true,
+                defaultValue: false,
+            },
+            placeholder: "Select an option",
+            defaultValue: { uuid: "1", name: "Option 1" },
+            isSearchable: true,
+            setValue: mockSetValue,
+            getValues: () => null,
+        });
+        test("renders select input field", async () => {
+            renderWithForm(_jsx(BaseInput, { ...getSelectProps() }));
+            expect(screen.getByText("Select an option")).toBeInTheDocument();
+        });
+        test("displays available options when clicked", async () => {
+            renderWithForm(_jsx(BaseInput, { ...getSelectProps() }));
+            const selectInput = screen.getByText("Select an option");
+            // Open dropdown
+            fireEvent.mouseDown(selectInput);
+            // Wait for options to appear
+            expect(await screen.findByText("Option 1")).toBeInTheDocument();
+            expect(await screen.findByText("Option 2")).toBeInTheDocument();
+            expect(await screen.findByText("Option 3")).toBeInTheDocument();
+        });
+    });
+    describe("BaseMultiSelect", () => {
+        const getMultiSelectProps = () => ({
+            valueKey: "testMultiSelect",
+            inputType: "multiSelect",
+            control: {},
+            defaultValue: [],
+            options: [
+                { uuid: "1", name: "Option 1" },
+                { uuid: "2", name: "Option 2" },
+                { uuid: "3", name: "Option 3" },
+            ],
+            placeholder: "Select multiple options",
+            isRequired: true,
+            isSearchable: true,
+            field: {
+                uuid: "123",
+                label: "Test Multi-Select",
+                valueKey: "testMultiSelect",
+                inputType: "multiSelect",
+                placeholder: "Select multiple options",
+                isRequired: true,
+                defaultValue: [],
+            },
+        });
+        test("renders multi-select dropdown with label", () => {
+            renderWithForm(_jsx(BaseInput, { ...getMultiSelectProps() }));
+            expect(screen.getByText("Select multiple options")).toBeInTheDocument();
+        });
+        test("displays available options when clicked", async () => {
+            renderWithForm(_jsx(BaseInput, { ...getMultiSelectProps() }));
+            // Open dropdown
+            const selectInput = screen.getByText("Select multiple options");
+            fireEvent.mouseDown(selectInput);
+            // Wait for options to appear
+            const option1 = await screen.findByText("Option 1");
+            const option2 = await screen.findByText("Option 2");
+            expect(option1).toBeInTheDocument();
+            expect(option2).toBeInTheDocument();
+        });
+        test("allows searching for options", async () => {
+            renderWithForm(_jsx(BaseInput, { ...getMultiSelectProps() }));
+            // Open dropdown
+            fireEvent.mouseDown(screen.getByText("Select multiple options"));
+            // Type search query
+            const searchInput = screen.getByRole("combobox");
+            fireEvent.change(searchInput, { target: { value: "Option 2" } });
+            // Verify filtered result
+            expect(await screen.findByText("Option 2")).toBeInTheDocument();
+            expect(screen.queryByText("Option 1")).not.toBeInTheDocument();
+        });
+    });
+});