fix(ui): fix and improve some test descriptions

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 "./index"
 
-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)
     })
   })
 })

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 "./index"
 
 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 a heading element only if title is provided", () => {
+      const { rerender } = render(<FormSection data-testid="my-formsection" title={undefined} />)
+      expect(screen.queryByRole("heading")).not.toBeInTheDocument()
+
+      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")
     })
   })
 })

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
   })

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()
     })

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!")
     }