From 14a3a1ff53c37fb5bcea12851ae2979c5c1c3e24 Mon Sep 17 00:00:00 2001
From: Franz Heidl <franzheidl@sap.com>
Date: Fri, 3 Jul 2026 10:14:30 +0200
Subject: [PATCH 1/6] fix(ui): fix Radio test descriptions

Signed-off-by: Franz Heidl <franzheidl@sap.com>
---
 .../src/components/Radio/Radio.test.tsx       | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/ui-components/src/components/Radio/Radio.test.tsx b/packages/ui-components/src/components/Radio/Radio.test.tsx
index bde9371066..2e535fe733 100644
--- a/packages/ui-components/src/components/Radio/Radio.test.tsx
+++ b/packages/ui-components/src/components/Radio/Radio.test.tsx
@@ -8,32 +8,32 @@ import { render, screen, act } from "@testing-library/react"
 import { Radio } from "./index"
 
 describe("Radio", () => {
-  test("renders an html input type radio", () => {
+  test("renders an html input type Radio", () => {
     render(<Radio />)
     expect(screen.getByRole("radio")).toBeInTheDocument()
     expect(screen.getByRole("radio")).toHaveAttribute("type", "radio")
   })
 
-  test("renders a radio with a name as passed", () => {
+  test("renders a Radio with a name as passed", () => {
     render(<Radio name="My Radio" />)
     expect(screen.getByRole("radio")).toBeInTheDocument()
     expect(screen.getByRole("radio")).toHaveAttribute("name", "My Radio")
   })
 
-  test("renders a radio with a label", () => {
+  test("renders a Radio with a label", () => {
     render(<Radio label="My Radio" id="my-radio" />)
     expect(screen.getByLabelText("My Radio")).toBeInTheDocument()
     expect(document.querySelector(".juno-label")).toBeInTheDocument()
     expect(document.querySelector(".juno-label")).toHaveTextContent("My Radio")
   })
 
-  test("renders a radio with an id as passed", () => {
+  test("renders a Radio with an id as passed", () => {
     render(<Radio id="my-radio" />)
     expect(screen.getByRole("radio")).toBeInTheDocument()
     expect(screen.getByRole("radio")).toHaveAttribute("id", "my-radio")
   })
 
-  test("renders a Checkbox with an auto-generated id if no id was passed", () => {
+  test("renders a Radio with an auto-generated id if no id was passed", () => {
     render(<Radio />)
     expect(screen.getByRole("radio")).toBeInTheDocument()
     expect(screen.getByRole("radio")).toHaveAttribute("id")
@@ -75,7 +75,7 @@ describe("Radio", () => {
     expect(document.querySelector(".juno-required")).toBeInTheDocument()
   })
 
-  test("renders no checked attribute if false", () => {
+  test("renders a Radio with no checked attribute if false", () => {
     act(() => {
       render(<Radio checked={false} />)
     })
@@ -84,14 +84,14 @@ describe("Radio", () => {
     expect(radio).not.toBeChecked()
   })
 
-  test("renders a disabled radio as passed", () => {
+  test("renders a disabled Radio as passed", () => {
     render(<Radio disabled />)
     const radio = screen.getByRole("radio")
     expect(radio).toBeInTheDocument()
     expect(radio).toBeDisabled()
   })
 
-  test("renders an invalid radio as passed", () => {
+  test("renders an invalid Radio as passed", () => {
     render(<Radio invalid />)
     const radio = screen.getByRole("radio")
     expect(radio).toBeInTheDocument()
@@ -105,14 +105,14 @@ describe("Radio", () => {
     expect(radio).toHaveClass("juno-radio-valid")
   })
 
-  test("renders a helptext as passed", () => {
+  test("renders a Radio with helptext as passed", () => {
     render(<Radio helptext="this is a helptext" />)
     expect(document.querySelector(".juno-form-hint")).toBeInTheDocument()
     expect(document.querySelector(".juno-form-hint")).toHaveClass("juno-form-hint-help")
     expect(document.querySelector(".juno-form-hint")).toHaveTextContent("this is a helptext")
   })
 
-  test("renders a successtext as passed and validates the Radio", () => {
+  test("renders a Radio with successtext as passed and validates the Radio", () => {
     render(<Radio successtext="great success!" />)
     expect(document.querySelector(".juno-form-hint")).toBeInTheDocument()
     expect(document.querySelector(".juno-form-hint")).toHaveClass("juno-form-hint-success")
@@ -120,7 +120,7 @@ describe("Radio", () => {
     expect(screen.getByRole("radio")).toHaveClass("juno-radio-valid")
   })
 
-  test("renders an errortext as passed and invalidates the Radio", () => {
+  test("renders a Radio with errortext as passed and invalidates the Radio", () => {
     render(<Radio errortext="this is an error!" />)
     expect(document.querySelector(".juno-form-hint")).toBeInTheDocument()
     expect(document.querySelector(".juno-form-hint")).toHaveClass("juno-form-hint-error")

From e69539a83ec9d4e8090e38089a008e4334a8d7c5 Mon Sep 17 00:00:00 2001
From: Franz Heidl <franzheidl@sap.com>
Date: Fri, 3 Jul 2026 10:44:04 +0200
Subject: [PATCH 2/6] fix(ui): fix more typos and nonsensical test ids

Signed-off-by: Franz Heidl <franzheidl@sap.com>
---
 .../src/components/FormattedText/FormattedText.test.tsx   | 8 ++++----
 .../src/components/GridColumn/GridColumn.test.tsx         | 2 +-
 .../TopNavigationItem/TopNavigationItem.test.tsx          | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/ui-components/src/components/FormattedText/FormattedText.test.tsx b/packages/ui-components/src/components/FormattedText/FormattedText.test.tsx
index 0734976cbe..291cb1dfc9 100644
--- a/packages/ui-components/src/components/FormattedText/FormattedText.test.tsx
+++ b/packages/ui-components/src/components/FormattedText/FormattedText.test.tsx
@@ -10,15 +10,15 @@ import { FormattedText } from "./index"
 
 describe("FormattedText", () => {
   it("renders a custom className as passed", () => {
-    render(<FormattedText className="my-class" data-testid="my-pagination" />)
-    const element = screen.getByTestId("my-pagination")
+    render(<FormattedText className="my-class" data-testid="my-formatted-text" />)
+    const element = screen.getByTestId("my-formatted-text")
     expect(element).not.toBeNull() // Check if element exists
     expect(element.className).toContain("my-class") // Check class name contains "my-class"
   })
 
   it("renders all props as passed", () => {
-    render(<FormattedText data-testid="my-pagination" data-lolol="123-456" />)
-    const element = screen.getByTestId("my-pagination")
+    render(<FormattedText data-testid="my-formatted-text" data-lolol="123-456" />)
+    const element = screen.getByTestId("my-formatted-text")
     expect(element).not.toBeNull() // Check if element exists
     expect(element.getAttribute("data-lolol")).toBe("123-456") // Check attribute value
   })
diff --git a/packages/ui-components/src/components/GridColumn/GridColumn.test.tsx b/packages/ui-components/src/components/GridColumn/GridColumn.test.tsx
index 1d3e760fef..1a9dd054e9 100644
--- a/packages/ui-components/src/components/GridColumn/GridColumn.test.tsx
+++ b/packages/ui-components/src/components/GridColumn/GridColumn.test.tsx
@@ -11,7 +11,7 @@ import { GridColumn } from "./GridColumn.component"
 
 describe("GridColumn", () => {
   describe("Basic Rendering", () => {
-    test("renders a Grid row", () => {
+    test("renders a Grid column", () => {
       render(<GridColumn data-testid="my-grid-column" />)
       expect(screen.getByTestId("my-grid-column")).toBeInTheDocument()
     })
diff --git a/packages/ui-components/src/components/TopNavigationItem/TopNavigationItem.test.tsx b/packages/ui-components/src/components/TopNavigationItem/TopNavigationItem.test.tsx
index b30d9f05cb..cdb7593772 100644
--- a/packages/ui-components/src/components/TopNavigationItem/TopNavigationItem.test.tsx
+++ b/packages/ui-components/src/components/TopNavigationItem/TopNavigationItem.test.tsx
@@ -17,7 +17,7 @@ describe("TopNavigationItem", () => {
     vi.clearAllMocks()
   })
 
-  test("renders a ToppNavigationItem", async () => {
+  test("renders a TopNavigationItem", async () => {
     await waitFor(() => render(<TopNavigationItem data-testid="top-nav-item" />))
     expect(screen.getByTestId("top-nav-item")).toBeInTheDocument()
     expect(screen.getByTestId("top-nav-item")).toHaveClass("juno-topnavigation-item")
@@ -74,7 +74,7 @@ describe("TopNavigationItem", () => {
     expect(screen.getByRole("button")).toHaveClass("juno-topnavigation-item")
   })
 
-  test("renders an active ToppNavigationItem as passed", async () => {
+  test("renders an active TopNavigationItem as passed", async () => {
     await waitFor(() => render(<TopNavigationItem data-testid="top-nav-item" active />))
     expect(screen.getByTestId("top-nav-item")).toBeInTheDocument()
     expect(screen.getByTestId("top-nav-item")).toHaveClass("juno-topnavigation-item")

From 76735c7421b2232c7fb4aa7ccf55a3ab698e8e37 Mon Sep 17 00:00:00 2001
From: Franz Heidl <franzheidl@sap.com>
Date: Fri, 3 Jul 2026 11:35:05 +0200
Subject: [PATCH 3/6] fix(ui): fix more typos

Signed-off-by: Franz Heidl <franzheidl@sap.com>
---
 .../src/components/ModalFooter/ModalFooter.test.tsx             | 2 +-
 packages/ui-components/src/components/Select/Select.test.tsx    | 2 +-
 .../src/components/SelectDivider/SelectDivider.test.tsx         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui-components/src/components/ModalFooter/ModalFooter.test.tsx b/packages/ui-components/src/components/ModalFooter/ModalFooter.test.tsx
index 2e1c531760..35dfdb66df 100644
--- a/packages/ui-components/src/components/ModalFooter/ModalFooter.test.tsx
+++ b/packages/ui-components/src/components/ModalFooter/ModalFooter.test.tsx
@@ -26,7 +26,7 @@ describe("ModalFooter", () => {
     expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument()
   })
 
-  test("renders a ModalFooter with a 'Confirm' and a 'Cancel' button when an onComfirm handler is passed", () => {
+  test("renders a ModalFooter with a 'Confirm' and a 'Cancel' button when an onConfirm handler is passed", () => {
     const confirmHandler = () => {
       console.log("confirmed!")
     }
diff --git a/packages/ui-components/src/components/Select/Select.test.tsx b/packages/ui-components/src/components/Select/Select.test.tsx
index f2a64feb52..a75ef612c1 100644
--- a/packages/ui-components/src/components/Select/Select.test.tsx
+++ b/packages/ui-components/src/components/Select/Select.test.tsx
@@ -67,7 +67,7 @@ describe("Select", () => {
     expect(screen.getByRole("button")).toHaveClass("juno-select-toggle")
   })
 
-  test("renders a default variant select toggle by defgault", async () => {
+  test("renders a default variant select toggle by default", async () => {
     await waitFor(() =>
       render(
         <PortalProvider>
diff --git a/packages/ui-components/src/components/SelectDivider/SelectDivider.test.tsx b/packages/ui-components/src/components/SelectDivider/SelectDivider.test.tsx
index 36f8adbe51..6004063f25 100644
--- a/packages/ui-components/src/components/SelectDivider/SelectDivider.test.tsx
+++ b/packages/ui-components/src/components/SelectDivider/SelectDivider.test.tsx
@@ -19,7 +19,7 @@ describe("SelectDivider", () => {
     expect(screen.getByTestId("select-divider")).toHaveClass("my-class")
   })
 
-  test("renders all pops as passed", () => {
+  test("renders all props as passed", () => {
     render(<SelectDivider data-testid="select-divider" data-lolol="123" />)
     expect(screen.getByTestId("select-divider")).toBeInTheDocument()
     expect(screen.getByTestId("select-divider")).toHaveAttribute("data-lolol", "123")

From 3495ad691834c54b8543cc8416828718b4e3fe87 Mon Sep 17 00:00:00 2001
From: Franz Heidl <franzheidl@sap.com>
Date: Fri, 3 Jul 2026 12:13:29 +0200
Subject: [PATCH 4/6] fix(ui): swap and sanitize test files

Signed-off-by: Franz Heidl <franzheidl@sap.com>
---
 .../src/components/FormRow/FormRow.test.tsx   | 130 ++++++----------
 .../FormSection/FormSection.test.tsx          | 145 +++++++++++-------
 2 files changed, 136 insertions(+), 139 deletions(-)

diff --git a/packages/ui-components/src/components/FormRow/FormRow.test.tsx b/packages/ui-components/src/components/FormRow/FormRow.test.tsx
index 7869de4bf4..f98e8e8e6c 100644
--- a/packages/ui-components/src/components/FormRow/FormRow.test.tsx
+++ b/packages/ui-components/src/components/FormRow/FormRow.test.tsx
@@ -7,113 +7,83 @@ import React from "react"
 import { render, screen } from "@testing-library/react"
 import { describe, expect, test } from "vitest"
 
-import { FormSection } from "../FormSection/FormSection.component"
+import { FormRow } from "../FormRow/FormRow.component"
 
-describe("FormSection Component Tests", () => {
+describe("FormRow Component Tests", () => {
   describe("Basic Rendering", () => {
-    test("renders a FormSection", () => {
-      render(<FormSection data-testid="my-formsection" />)
-      expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
-    })
-
-    test("renders children as passed", () => {
-      render(
-        <FormSection data-testid="my-formsection">
-          <button></button>
-        </FormSection>
-      )
-      expect(screen.getByRole("button")).toBeInTheDocument()
+    test("renders a FormRow", () => {
+      render(<FormRow data-testid="my-form-row" />)
+      expect(screen.getByTestId("my-form-row")).toBeInTheDocument()
     })
 
     test("renders without any props", () => {
-      render(<FormSection data-testid="my-formsection" />)
-      expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
+      const { container } = render(<FormRow />)
+      expect(container.firstChild).toBeInTheDocument()
+      expect(container.firstChild).toHaveClass("juno-form-row")
     })
 
     test("renders with null children", () => {
-      render(<FormSection data-testid="my-formsection">{null}</FormSection>)
-      expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
+      render(<FormRow data-testid="my-form-row">{null}</FormRow>)
+      expect(screen.getByTestId("my-form-row")).toBeInTheDocument()
     })
 
     test("renders with undefined children", () => {
-      render(<FormSection data-testid="my-formsection">{undefined}</FormSection>)
-      expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
-    })
-
-    test("renders with mixed children types correctly", () => {
-      render(
-        <FormSection data-testid="my-formsection">
-          <div>Div Element</div>
-          {null}
-          <p>Paragraph Element</p>
-        </FormSection>
-      )
-      expect(screen.getByText("Div Element")).toBeInTheDocument()
-      expect(screen.queryByText("False Element")).not.toBeInTheDocument()
-      expect(screen.getByText("Paragraph Element")).toBeInTheDocument()
+      render(<FormRow data-testid="my-form-row">{undefined}</FormRow>)
+      expect(screen.getByTestId("my-form-row")).toBeInTheDocument()
     })
   })
 
-  describe("Title Handling", () => {
-    test("renders a title", () => {
-      render(<FormSection data-testid="my-form-section" title="My Form Section" />)
-      expect(screen.getByTestId("my-form-section")).toBeInTheDocument()
-      expect(screen.getByRole("heading")).toHaveClass("juno-formsection-heading")
-      expect(screen.getByRole("heading")).toHaveTextContent("My Form Section")
-    })
-
-    test("does not render a title when title prop is not provided", () => {
-      render(<FormSection data-testid="my-form-section" />)
-      const titleElement = screen.queryByRole("heading")
-      expect(titleElement).not.toBeInTheDocument()
-    })
-
-    test("renders with an empty string title", () => {
-      render(<FormSection data-testid="my-formsection" title="" />)
-      expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
-      const titleElement = screen.queryByRole("heading")
-      expect(titleElement).not.toBeInTheDocument()
+  describe("Props Handling", () => {
+    test("renders a custom className", () => {
+      render(<FormRow data-testid="my-form-row" className="my-custom-class" />)
+      expect(screen.getByTestId("my-form-row")).toBeInTheDocument()
+      expect(screen.getByTestId("my-form-row")).toHaveClass("my-custom-class")
     })
 
-    test("renders with a long string title", () => {
-      const longTitle = "A".repeat(1000)
-      render(<FormSection data-testid="my-formsection" title={longTitle} />)
-      const titleElement = screen.getByText(longTitle)
-      expect(titleElement).toBeInTheDocument()
+    test("renders all props as passed", () => {
+      render(<FormRow data-testid="23" data-lolol={true} />)
+      expect(screen.getByTestId("23")).toBeInTheDocument()
+      expect(screen.getByTestId("23")).toHaveAttribute("data-lolol")
     })
 
-    test("renders with special characters in title", () => {
-      const specialTitle = "!@#$%^&*()_+=-[]{}|;:'\",.<>?/"
-      render(<FormSection data-testid="my-formsection" title={specialTitle} />)
-      const titleElement = screen.getByText(specialTitle)
-      expect(titleElement).toBeInTheDocument()
+    test("adds and handles additional props", () => {
+      render(<FormRow data-testid="24" aria-label="form-row" />)
+      const sectionElement = screen.getByTestId("24")
+      expect(sectionElement).toHaveAttribute("aria-label", "form-row")
     })
 
-    test("renders h1 element only if title is provided", () => {
-      const { rerender } = render(<FormSection data-testid="my-formsection" title={undefined} />)
-      expect(screen.queryByRole("heading")).toBeNull()
-
-      rerender(<FormSection data-testid="my-formsection" title="Title" />)
-      expect(screen.getByRole("heading")).toBeInTheDocument()
+    test("applies default styles", () => {
+      const { container } = render(<FormRow data-testid="my-form-row-default-styles" />)
+      expect(container.firstChild).toHaveClass("juno-form-row")
+      expect(container.firstChild).toHaveClass("jn:mb-2")
     })
   })
 
-  describe("Props Handling", () => {
-    test("renders a custom className", () => {
-      render(<FormSection data-testid="my-formsection" className="my-custom-class" />)
-      expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
-      expect(screen.getByTestId("my-formsection")).toHaveClass("my-custom-class")
+  describe("Children Rendering", () => {
+    test("renders children as passed", () => {
+      render(
+        <FormRow>
+          <button></button>
+        </FormRow>
+      )
+      expect(screen.getByRole("button")).toBeInTheDocument()
     })
 
-    test("renders all props as passed", () => {
-      render(<FormSection data-testid="23" data-lolol={true} />)
-      expect(screen.getByTestId("23")).toBeInTheDocument()
-      expect(screen.getByTestId("23")).toHaveAttribute("data-lolol")
+    test("renders multiple children", () => {
+      render(
+        <FormRow data-testid="my-form-row">
+          <button>Button 1</button>
+          <button>Button 2</button>
+        </FormRow>
+      )
+      expect(screen.getByText("Button 1")).toBeInTheDocument()
+      expect(screen.getByText("Button 2")).toBeInTheDocument()
     })
 
-    test("renders section HTML element with classnames", () => {
-      const { container } = render(<FormSection data-testid="my-form-section" />)
-      expect(container.firstChild).toHaveClass("juno-form-section")
+    test("renders with no children", () => {
+      render(<FormRow data-testid="my-form-row" />)
+      expect(screen.getByTestId("my-form-row")).toBeInTheDocument()
+      expect(screen.getByTestId("my-form-row").childElementCount).toBe(0)
     })
   })
 })
diff --git a/packages/ui-components/src/components/FormSection/FormSection.test.tsx b/packages/ui-components/src/components/FormSection/FormSection.test.tsx
index da04437b3d..d3e004c0fd 100644
--- a/packages/ui-components/src/components/FormSection/FormSection.test.tsx
+++ b/packages/ui-components/src/components/FormSection/FormSection.test.tsx
@@ -7,93 +7,120 @@ import React from "react"
 import { render, screen } from "@testing-library/react"
 import { describe, expect, test } from "vitest"
 
-import { FormSection } from "./FormSection.component"
-import { FormRow } from "../FormRow/FormRow.component"
+import { FormSection } from "../FormSection/FormSection.component"
 
 describe("FormSection Component Tests", () => {
-  test("renders a title as h4", () => {
-    render(<FormSection title="My Section" />)
-    expect(screen.getByRole("heading", { level: 4 })).toBeInTheDocument()
-    expect(screen.getByRole("heading", { level: 4 })).toHaveClass("juno-formsection-heading")
-    expect(screen.getByRole("heading", { level: 4 })).toHaveTextContent("My Section")
-  })
-})
-
-describe("FormRow Component Tests", () => {
   describe("Basic Rendering", () => {
-    test("renders a FormRow", () => {
-      render(<FormRow data-testid="my-form-row" />)
-      expect(screen.getByTestId("my-form-row")).toBeInTheDocument()
+    test("renders a FormSection", () => {
+      render(<FormSection data-testid="my-formsection" />)
+      expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
+    })
+
+    test("renders children as passed", () => {
+      render(
+        <FormSection data-testid="my-formsection">
+          <button></button>
+        </FormSection>
+      )
+      expect(screen.getByRole("button")).toBeInTheDocument()
     })
 
     test("renders without any props", () => {
-      const { container } = render(<FormRow />)
-      expect(container.firstChild).toBeInTheDocument()
-      expect(container.firstChild).toHaveClass("juno-form-row")
+      render(<FormSection data-testid="my-formsection" />)
+      expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
     })
 
     test("renders with null children", () => {
-      render(<FormRow data-testid="my-form-row">{null}</FormRow>)
-      expect(screen.getByTestId("my-form-row")).toBeInTheDocument()
+      render(<FormSection data-testid="my-formsection">{null}</FormSection>)
+      expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
     })
 
     test("renders with undefined children", () => {
-      render(<FormRow data-testid="my-form-row">{undefined}</FormRow>)
-      expect(screen.getByTestId("my-form-row")).toBeInTheDocument()
+      render(<FormSection data-testid="my-formsection">{undefined}</FormSection>)
+      expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
+    })
+
+    test("renders with mixed children types correctly", () => {
+      render(
+        <FormSection data-testid="my-formsection">
+          <div>Div Element</div>
+          {null}
+          <p>Paragraph Element</p>
+        </FormSection>
+      )
+      expect(screen.getByText("Div Element")).toBeInTheDocument()
+      expect(screen.queryByText("False Element")).not.toBeInTheDocument()
+      expect(screen.getByText("Paragraph Element")).toBeInTheDocument()
     })
   })
 
-  describe("Props Handling", () => {
-    test("renders a custom className", () => {
-      render(<FormRow data-testid="my-form-row" className="my-custom-class" />)
-      expect(screen.getByTestId("my-form-row")).toBeInTheDocument()
-      expect(screen.getByTestId("my-form-row")).toHaveClass("my-custom-class")
+  describe("Title Handling", () => {
+    test("renders a title", () => {
+      render(<FormSection data-testid="my-form-section" title="My Form Section" />)
+      expect(screen.getByTestId("my-form-section")).toBeInTheDocument()
+      expect(screen.getByRole("heading")).toHaveClass("juno-formsection-heading")
+      expect(screen.getByRole("heading")).toHaveTextContent("My Form Section")
     })
 
-    test("renders all props as passed", () => {
-      render(<FormRow data-testid="23" data-lolol={true} />)
-      expect(screen.getByTestId("23")).toBeInTheDocument()
-      expect(screen.getByTestId("23")).toHaveAttribute("data-lolol")
+    test("renders a title as h4", () => {
+      render(<FormSection title="My Section" />)
+      expect(screen.getByRole("heading", { level: 4 })).toBeInTheDocument()
+      expect(screen.getByRole("heading", { level: 4 })).toHaveClass("juno-formsection-heading")
+      expect(screen.getByRole("heading", { level: 4 })).toHaveTextContent("My Section")
     })
 
-    test("adds and handles additional props", () => {
-      render(<FormRow data-testid="24" aria-label="form-row" />)
-      const sectionElement = screen.getByTestId("24")
-      expect(sectionElement).toHaveAttribute("aria-label", "form-row")
+    test("does not render a title when title prop is not provided", () => {
+      render(<FormSection data-testid="my-form-section" />)
+      const titleElement = screen.queryByRole("heading")
+      expect(titleElement).not.toBeInTheDocument()
     })
 
-    test("applies default styles", () => {
-      const { container } = render(<FormRow data-testid="my-form-row-default-styles" />)
-      expect(container.firstChild).toHaveClass("juno-form-row")
-      expect(container.firstChild).toHaveClass("jn:mb-2")
+    test("renders with an empty string title", () => {
+      render(<FormSection data-testid="my-formsection" title="" />)
+      expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
+      const titleElement = screen.queryByRole("heading")
+      expect(titleElement).not.toBeInTheDocument()
+    })
+
+    test("renders with a long string title", () => {
+      const longTitle = "A".repeat(1000)
+      render(<FormSection data-testid="my-formsection" title={longTitle} />)
+      const titleElement = screen.getByText(longTitle)
+      expect(titleElement).toBeInTheDocument()
+    })
+
+    test("renders with special characters in title", () => {
+      const specialTitle = "!@#$%^&*()_+=-[]{}|;:'\",.<>?/"
+      render(<FormSection data-testid="my-formsection" title={specialTitle} />)
+      const titleElement = screen.getByText(specialTitle)
+      expect(titleElement).toBeInTheDocument()
+    })
+
+    test("renders h1 element only if title is provided", () => {
+      const { rerender } = render(<FormSection data-testid="my-formsection" title={undefined} />)
+      expect(screen.queryByRole("heading")).toBeNull()
+
+      rerender(<FormSection data-testid="my-formsection" title="Title" />)
+      expect(screen.getByRole("heading")).toBeInTheDocument()
     })
   })
 
-  describe("Children Rendering", () => {
-    test("renders children as passed", () => {
-      render(
-        <FormRow>
-          <button></button>
-        </FormRow>
-      )
-      expect(screen.getByRole("button")).toBeInTheDocument()
+  describe("Props Handling", () => {
+    test("renders a custom className", () => {
+      render(<FormSection data-testid="my-formsection" className="my-custom-class" />)
+      expect(screen.getByTestId("my-formsection")).toBeInTheDocument()
+      expect(screen.getByTestId("my-formsection")).toHaveClass("my-custom-class")
     })
 
-    test("renders multiple children", () => {
-      render(
-        <FormRow data-testid="my-form-row">
-          <button>Button 1</button>
-          <button>Button 2</button>
-        </FormRow>
-      )
-      expect(screen.getByText("Button 1")).toBeInTheDocument()
-      expect(screen.getByText("Button 2")).toBeInTheDocument()
+    test("renders all props as passed", () => {
+      render(<FormSection data-testid="23" data-lolol={true} />)
+      expect(screen.getByTestId("23")).toBeInTheDocument()
+      expect(screen.getByTestId("23")).toHaveAttribute("data-lolol")
     })
 
-    test("renders with no children", () => {
-      render(<FormRow data-testid="my-form-row" />)
-      expect(screen.getByTestId("my-form-row")).toBeInTheDocument()
-      expect(screen.getByTestId("my-form-row").childElementCount).toBe(0)
+    test("renders section HTML element with classnames", () => {
+      const { container } = render(<FormSection data-testid="my-form-section" />)
+      expect(container.firstChild).toHaveClass("juno-form-section")
     })
   })
 })

From e43303705529e73e3b7ced05b5f3a97d7c8b4ecb Mon Sep 17 00:00:00 2001
From: Franz Heidl <franzheidl@sap.com>
Date: Fri, 3 Jul 2026 12:43:56 +0200
Subject: [PATCH 5/6] fix(ui): fix component import paths in tests

Signed-off-by: Franz Heidl <franzheidl@sap.com>
---
 packages/ui-components/src/components/FormRow/FormRow.test.tsx  | 2 +-
 .../src/components/FormSection/FormSection.test.tsx             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui-components/src/components/FormRow/FormRow.test.tsx b/packages/ui-components/src/components/FormRow/FormRow.test.tsx
index f98e8e8e6c..f11ee8d2d2 100644
--- a/packages/ui-components/src/components/FormRow/FormRow.test.tsx
+++ b/packages/ui-components/src/components/FormRow/FormRow.test.tsx
@@ -7,7 +7,7 @@ import React from "react"
 import { render, screen } from "@testing-library/react"
 import { describe, expect, test } from "vitest"
 
-import { FormRow } from "../FormRow/FormRow.component"
+import { FormRow } from "./index"
 
 describe("FormRow Component Tests", () => {
   describe("Basic Rendering", () => {
diff --git a/packages/ui-components/src/components/FormSection/FormSection.test.tsx b/packages/ui-components/src/components/FormSection/FormSection.test.tsx
index d3e004c0fd..3c0523cfd8 100644
--- a/packages/ui-components/src/components/FormSection/FormSection.test.tsx
+++ b/packages/ui-components/src/components/FormSection/FormSection.test.tsx
@@ -7,7 +7,7 @@ import React from "react"
 import { render, screen } from "@testing-library/react"
 import { describe, expect, test } from "vitest"
 
-import { FormSection } from "../FormSection/FormSection.component"
+import { FormSection } from "./index"
 
 describe("FormSection Component Tests", () => {
   describe("Basic Rendering", () => {

From 265a1a003f297ad8f8e2bdc104f882d343c92f87 Mon Sep 17 00:00:00 2001
From: Franz Heidl <franzheidl@sap.com>
Date: Fri, 3 Jul 2026 12:47:17 +0200
Subject: [PATCH 6/6] fix(ui): clarify description

Signed-off-by: Franz Heidl <franzheidl@sap.com>
---
 .../src/components/FormSection/FormSection.test.tsx           | 4 ++--
 packages/ui-components/src/components/Radio/Radio.test.tsx    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui-components/src/components/FormSection/FormSection.test.tsx b/packages/ui-components/src/components/FormSection/FormSection.test.tsx
index 3c0523cfd8..04f57ae2d1 100644
--- a/packages/ui-components/src/components/FormSection/FormSection.test.tsx
+++ b/packages/ui-components/src/components/FormSection/FormSection.test.tsx
@@ -96,9 +96,9 @@ describe("FormSection Component Tests", () => {
       expect(titleElement).toBeInTheDocument()
     })
 
-    test("renders h1 element only if title is provided", () => {
+    test("renders a heading element only if title is provided", () => {
       const { rerender } = render(<FormSection data-testid="my-formsection" title={undefined} />)
-      expect(screen.queryByRole("heading")).toBeNull()
+      expect(screen.queryByRole("heading")).not.toBeInTheDocument()
 
       rerender(<FormSection data-testid="my-formsection" title="Title" />)
       expect(screen.getByRole("heading")).toBeInTheDocument()
diff --git a/packages/ui-components/src/components/Radio/Radio.test.tsx b/packages/ui-components/src/components/Radio/Radio.test.tsx
index 2e535fe733..d2d10e9e4d 100644
--- a/packages/ui-components/src/components/Radio/Radio.test.tsx
+++ b/packages/ui-components/src/components/Radio/Radio.test.tsx
@@ -8,7 +8,7 @@ import { render, screen, act } from "@testing-library/react"
 import { Radio } from "./index"
 
 describe("Radio", () => {
-  test("renders an html input type Radio", () => {
+  test('renders an HTML input of type "radio"', () => {
     render(<Radio />)
     expect(screen.getByRole("radio")).toBeInTheDocument()
     expect(screen.getByRole("radio")).toHaveAttribute("type", "radio")