diff --git a/src/components/Form/IpaTextboxList/IpaTextboxList.test.tsx b/src/components/Form/IpaTextboxList/IpaTextboxList.test.tsx new file mode 100644 index 00000000..e4c71f6f --- /dev/null +++ b/src/components/Form/IpaTextboxList/IpaTextboxList.test.tsx @@ -0,0 +1,83 @@ +import React from "react"; +import { render, screen, fireEvent } from "@testing-library/react"; +import "@testing-library/jest-dom"; +// Component +import IpaTextboxList, { PropsToIpaTextboxList } from "./IpaTextboxList"; + +describe("IpaTextboxList Component", () => { + const mockSetIpaObject = jest.fn(); + + const defaultProps: PropsToIpaTextboxList = { + ipaObject: {}, + setIpaObject: mockSetIpaObject, + name: "customipatextboxlist", + ariaLabel: "customipatextboxlist", + }; + + it("should render the component", () => { + // Initially, the component contains just an 'Add' button + render(); + expect(screen.getByText("Add")).toBeInTheDocument(); + }); + + it("should add an element to the list", () => { + render(); + fireEvent.click(screen.getByText("Add")); + expect(mockSetIpaObject).toHaveBeenCalledTimes(1); + }); + + it("should remove an element from the list", () => { + render(); + fireEvent.click(screen.getByText("Add")); + fireEvent.click(screen.getByText("Delete")); + expect(mockSetIpaObject).toHaveBeenCalledTimes(2); + }); + + it("should change the value of an element in the list", () => { + render(); + fireEvent.click(screen.getByText("Add")); + fireEvent.change(screen.getByRole("textbox"), { + target: { value: "test" }, + }); + expect(mockSetIpaObject).toHaveBeenCalledTimes(2); + expect(screen.getByRole("textbox")).toHaveValue("test"); + }); + + it("should validate there are no duplicated elements", () => { + // Mock validatior function should check if entries contain a MAC address + const mockValidator = jest.fn((value: string) => { + const mac_regex = /^([a-fA-F0-9]{2}[:|\\-]?){5}[a-fA-F0-9]{2}$/; + return value.match(mac_regex) !== null ? true : false; + }); + + const props: PropsToIpaTextboxList = { + ...defaultProps, + validator: mockValidator, + }; + render(); + expect(screen.getByText("Add")).toBeInTheDocument(); + const AddButton = screen.getByText("Add"); + + // Add a valid MAC address + fireEvent.click(AddButton); + fireEvent.change(screen.getByRole("textbox"), { + target: { value: "00:00:00:00:00:00" }, + }); + + // Add an invalid MAC address + fireEvent.click(AddButton); + // Get second textbox + const secondTextbox = screen.getAllByRole("textbox")[1]; + fireEvent.change(secondTextbox, { + target: { value: "invalid" }, + }); + + // The valid address should not be highlighted in red + const textboxes = screen.getAllByRole("textbox"); + screen.debug(textboxes); + + // Expect first textbox to be valid and second to be invalid + expect(textboxes[0]).toHaveAttribute("aria-invalid", "false"); + expect(textboxes[1]).toHaveAttribute("aria-invalid", "true"); + }); +}); diff --git a/src/components/Form/IpaTextboxList/IpaTextboxList.tsx b/src/components/Form/IpaTextboxList/IpaTextboxList.tsx index 3d324018..40a1275e 100644 --- a/src/components/Form/IpaTextboxList/IpaTextboxList.tsx +++ b/src/components/Form/IpaTextboxList/IpaTextboxList.tsx @@ -11,7 +11,7 @@ import SecondaryButton from "../../layouts/SecondaryButton"; // Utils import { updateIpaObject } from "src/utils/ipaObjectUtils"; -interface PropsToIpaTextboxList { +export interface PropsToIpaTextboxList { // eslint-disable-next-line @typescript-eslint/no-explicit-any ipaObject: Record; setIpaObject: (value: Record) => void;