[Unit test] 'IpaTextboxList' component

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(<IpaTextboxList {...defaultProps} />);
+    expect(screen.getByText("Add")).toBeInTheDocument();
+  });
+
+  it("should add an element to the list", () => {
+    render(<IpaTextboxList {...defaultProps} />);
+    fireEvent.click(screen.getByText("Add"));
+    expect(mockSetIpaObject).toHaveBeenCalledTimes(1);
+  });
+
+  it("should remove an element from the list", () => {
+    render(<IpaTextboxList {...defaultProps} />);
+    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(<IpaTextboxList {...defaultProps} />);
+    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(<IpaTextboxList {...props} />);
+    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");
+  });
+});

src/components/Form/IpaTextboxList.tsx → src/components/Form/IpaTextboxList/IpaTextboxList.tsx

@@ -7,11 +7,11 @@ import {
   ValidatedOptions,
 } from "@patternfly/react-core";
 // Components
-import SecondaryButton from "../layouts/SecondaryButton";
+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<string, any>;
   setIpaObject: (value: Record<string, unknown>) => void;

src/components/HostsSections/HostSettings.tsx

@@ -15,7 +15,7 @@ import IpaTextInput from "../Form/IpaTextInput/IpaTextInput";
 import IpaCheckbox from "../Form/IpaCheckbox/IpaCheckbox";
 import IpaCheckboxes from "../Form/IpaCheckboxes/IpaCheckboxes";
 import IpaSshPublicKeys from "../Form/IpaSshPublicKeys";
-import IpaTextboxList from "../Form/IpaTextboxList";
+import IpaTextboxList from "../Form/IpaTextboxList/IpaTextboxList";
 
 // Layouts
 import PopoverWithIconLayout from "../layouts/PopoverWithIconLayout";

src/components/UsersSections/UsersContactSettings.tsx

@@ -6,7 +6,7 @@ import { Metadata, User } from "src/utils/datatypes/globalDataTypes";
 // Utils
 import { asRecord } from "src/utils/userUtils";
 // Form
-import IpaTextboxList from "../Form/IpaTextboxList";
+import IpaTextboxList from "../Form/IpaTextboxList/IpaTextboxList";
 
 interface PropsToUsersContactSettings {
   user: Partial<User>;

src/components/UsersSections/UsersEmployeeInfo.tsx

@@ -6,7 +6,7 @@ import { Metadata, User } from "src/utils/datatypes/globalDataTypes";
 // Form
 import IpaTextInput from "../Form/IpaTextInput/IpaTextInput";
 import IpaSelect from "../Form/IpaSelect/IpaSelect";
-import IpaTextboxList from "../Form/IpaTextboxList";
+import IpaTextboxList from "../Form/IpaTextboxList/IpaTextboxList";
 // Utils
 import { asRecord } from "src/utils/userUtils";