fix(keppel): fix input variable for TextInput

Author: VoigtS

plugins/keppel/app/javascript/widgets/app/components/componentHelpers/TextInput.jsx

@@ -1,12 +1,12 @@
 import React from "react"
 
 export const TextInput = ({ testid = "", value, isEditable, onChange }) => {
-  value = value || ""
+  const inputValue = value || ""
   if (!isEditable) {
-    if (value === "") {
+    if (inputValue === "") {
       return <em>Any</em>
     }
-    return <code>{value || ""}</code>
+    return <code>{inputValue || ""}</code>
   }
-  return <input data-testid={testid} type="text" className="form-control" onChange={(e) => onChange(e)} />
+  return <input data-testid={testid} type="text" value={inputValue} className="form-control" onChange={(e) => onChange(e)} />
 }

plugins/keppel/app/javascript/widgets/app/components/componentHelpers/TextInput.test.js

@@ -3,16 +3,41 @@ import { render, fireEvent, screen } from "@testing-library/react"
 import { TextInput } from "./TextInput" // Adjust the import according to your file structure
 
 describe("TextInput", () => {
-  it("renders input element when isEditable is true", () => {
+  it("renders input element when isEditable is true", async () => {
     const mockOnChange = jest.fn()
-    render(<TextInput testid="input" value="" isEditable={true} onChange={mockOnChange} />)
+    let value = ""
+
+    const { rerender } = render(
+      <TextInput
+        testid="input"
+        value={value}
+        isEditable={true}
+        onChange={(e) => {
+          value = e.target.value
+          mockOnChange(e)
+        }}
+      />
+    )
     const inputElement = screen.getByTestId("input")
     expect(inputElement).not.toBeNull()
+    
     fireEvent.change(inputElement, { target: { value: "New Value" } })
+    rerender(
+      <TextInput
+        testid="input"
+        value={value}
+        isEditable={true}
+        onChange={(e) => {
+          value = e.target.value
+          mockOnChange(e)
+        }}
+      />
+    )
     expect(mockOnChange).toHaveBeenCalledTimes(1)
+    expect(inputElement.value).toBe("New Value")
   })
 
-  it('renders input element when isEditable is false', () => {
+  it("renders input element when isEditable is false", () => {
     render(<TextInput value="" isEditable={false} onChange={() => {}} />)
     expect(screen.getByText("Any")).not.toBeNull()
   })