fix(VerticalLayout): remove div element causing flex issues (#101)

* fix(VerticalLayout): remove div element causing flex issues

* fix(VerticalLayout): remove unused group label conditional

* fix(LayoutRenderers): add tests to assert no unexpected layout element

Author: ashmortar

src/layouts/HorizontalLayout.test.tsx

@@ -1,16 +1,21 @@
-import { test } from "vitest"
+import { test, expect } from "vitest"
 import { screen } from "@testing-library/react"
 import { render } from "../common/test-render"
 
 import {
   numericMagnitudeSchema,
   numericHorizontalUISchema,
 } from "../testSchemas/numericSchema"
+import { HORIZONTAL_LAYOUT_FORM_TEST_ID } from "./HorizontalLayout"
 
 test("Horizontal layout renders", async () => {
   render({
     schema: numericMagnitudeSchema,
     uischema: numericHorizontalUISchema,
   })
   await screen.findByRole("spinbutton")
+  // since we are wrapped in a form no wrapper element should be introduced
+  expect(
+    screen.queryByTestId(HORIZONTAL_LAYOUT_FORM_TEST_ID),
+  ).not.toBeInTheDocument()
 })

src/layouts/HorizontalLayout.tsx

@@ -5,6 +5,8 @@ import { HorizontalLayoutUISchema } from "../ui-schema"
 import { Form, Row } from "antd"
 import { withJsonFormsLayoutProps } from "@jsonforms/react"
 
+export const HORIZONTAL_LAYOUT_FORM_TEST_ID = "horizontal-layout-form"
+
 export function HorizontalLayout({
   uischema,
   schema,
@@ -25,7 +27,11 @@ export function HorizontalLayout({
   }
   const form = Form.useFormInstance()
   return (
-    <Form component={form ? false : "form"} form={form}>
+    <Form
+      data-testid={HORIZONTAL_LAYOUT_FORM_TEST_ID}
+      component={form ? false : "form"}
+      form={form}
+    >
       {!isEmpty(groupLayout.label) && groupLayout.label}
       <Row justify="space-between" gutter={12} align="middle">
         <AntDLayout

src/layouts/VerticalLayout.test.tsx

@@ -1,16 +1,22 @@
-import { test } from "vitest"
+import { test, expect } from "vitest"
 import { screen } from "@testing-library/react"
 import { render } from "../common/test-render"
 
 import {
   numericMagnitudeSchema,
   numericVerticalUISchema,
 } from "../testSchemas/numericSchema"
+import { VERTICAL_LAYOUT_FORM_TEST_ID } from "./VerticalLayout"
 
 test("Vertical layout renders", async () => {
   render({
     schema: numericMagnitudeSchema,
     uischema: numericVerticalUISchema,
   })
   await screen.findByRole("spinbutton")
+
+  // since we are wrapped in a form no wrapper element should be introduced
+  expect(
+    screen.queryByTestId(VERTICAL_LAYOUT_FORM_TEST_ID),
+  ).not.toBeInTheDocument()
 })

src/layouts/VerticalLayout.tsx

@@ -1,9 +1,11 @@
-import { LayoutProps, GroupLayout } from "@jsonforms/core"
+import { LayoutProps } from "@jsonforms/core"
 import { AntDLayout, AntDLayoutProps } from "./LayoutRenderer"
-import { Form, FormInstance, FormProps } from "antd"
+import { Form } from "antd"
 import { VerticalLayoutUISchema } from "../ui-schema"
 import { withJsonFormsLayoutProps } from "@jsonforms/react"
 
+export const VERTICAL_LAYOUT_FORM_TEST_ID = "vertical-layout-form"
+
 export function VerticalLayout({
   uischema,
   schema,
@@ -13,31 +15,25 @@ export function VerticalLayout({
   renderers,
   cells,
 }: LayoutProps) {
-  const verticalLayout = uischema as VerticalLayoutUISchema<unknown>
-  const groupLayout = uischema as GroupLayout
+  const { elements } = uischema as VerticalLayoutUISchema<unknown>
   const childProps: AntDLayoutProps = {
-    elements: verticalLayout.elements,
+    elements,
     schema,
     path,
     enabled,
     visible,
   }
   const form = Form.useFormInstance()
   return (
-    <Form {...getFormLayoutOptions(form)} form={form}>
-      {!groupLayout.label && (
-        <div>{groupLayout.label}</div> // this was SubtitleSemiBold
-      )}
+    <Form
+      data-testid={VERTICAL_LAYOUT_FORM_TEST_ID}
+      component={form ? false : "form"}
+      scrollToFirstError
+      form={form}
+    >
       <AntDLayout {...childProps} renderers={renderers} cells={cells} />
     </Form>
   )
 }
 
-function getFormLayoutOptions(form: FormInstance): Partial<FormProps> {
-  return {
-    scrollToFirstError: true,
-    component: form ? "div" : "form",
-  }
-}
-
 export const VerticalLayoutRenderer = withJsonFormsLayoutProps(VerticalLayout)