chore(ui): add edge case tests

cloudoperators · Nov 6, 2024 · 28dc6be · 28dc6be
1 parent 6f4ca88
commit 28dc6be
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 1 deletion.
diff --git a/packages/ui-components/src/components/Grid/Grid.test.tsx b/packages/ui-components/src/components/Grid/Grid.test.tsx
@@ -15,13 +15,30 @@ describe("Grid Component", () => {
       render(<Grid data-testid="my-grid" />)
       expect(screen.getByTestId("my-grid")).toBeInTheDocument()
     })
+
+    test("renders children elements correctly", () => {
+      render(
+        <Grid data-testid="my-grid">
+          <div data-testid="child1">Child 1</div>
+          <div data-testid="child2">Child 2</div>
+        </Grid>
+      )
+
+      expect(screen.getByTestId("child1")).toBeInTheDocument()
+      expect(screen.getByTestId("child2")).toBeInTheDocument()
+    })
   })
 
   describe("Class Names", () => {
     test("renders a custom className", () => {
       render(<Grid data-testid="my-grid" className="my-grid-class" />)
       expect(screen.getByTestId("my-grid")).toHaveClass("my-grid-class")
     })
+
+    test("applies default className when no custom className is provided", () => {
+      render(<Grid data-testid="my-default-grid" />)
+      expect(screen.getByTestId("my-default-grid")).toHaveClass("juno-grid")
+    })
   })
 
   describe("Inline Styles and Auto Prop", () => {
@@ -32,12 +49,42 @@ describe("Grid Component", () => {
       // Ensure element is in the document before accessing style
       expect(gridElement).toBeInTheDocument()
 
-      // Cast elem style as CSSStyleDeclaration to ensure type safety
+      // Cast element style as CSSStyleDeclaration to ensure type safety
       const style = gridElement.style
 
       expect(style.getPropertyValue("--grid-column-flex-grow")).toBe("1")
       expect(style.getPropertyValue("--grid-column-flex-shrink")).toBe("0")
       expect(style.getPropertyValue("--grid-column-flex-basis")).toBe("0")
     })
+
+    test("does not apply auto styles when 'auto' prop is false", () => {
+      render(<Grid data-testid="my-standard-grid" />)
+      const gridElement = screen.getByTestId("my-standard-grid")
+
+      const style = gridElement.style
+
+      // Ensure auto grid styles are not applied
+      expect(style.getPropertyValue("--grid-column-flex-grow")).toBe("")
+      expect(style.getPropertyValue("--grid-column-flex-shrink")).toBe("")
+      expect(style.getPropertyValue("--grid-column-flex-basis")).toBe("")
+    })
+
+    test("applies custom styles", () => {
+      render(<Grid data-testid="my-grid" style={{ backgroundColor: "red" }} />)
+      const gridElement = screen.getByTestId("my-grid")
+      const style = gridElement.style
+
+      expect(style.backgroundColor).toBe("red")
+    })
+
+    test("applies no styles when neither auto nor style prop is provided", () => {
+      render(<Grid data-testid="my-no-styles-grid" />)
+      const gridElement = screen.getByTestId("my-no-styles-grid")
+      const style = gridElement.style
+
+      expect(style.flexGrow).toBe("")
+      expect(style.flexShrink).toBe("")
+      expect(style.flexBasis).toBe("")
+    })
   })
 })
diff --git a/packages/ui-components/src/components/GridColumn/GridColumn.test.tsx b/packages/ui-components/src/components/GridColumn/GridColumn.test.tsx
@@ -15,13 +15,40 @@ describe("GridColumn", () => {
       render(<GridColumn data-testid="my-grid-column" />)
       expect(screen.getByTestId("my-grid-column")).toBeInTheDocument()
     })
+
+    test("renders children elements correctly", () => {
+      render(
+        <GridColumn data-testid="my-grid-column">
+          <div data-testid="child1">Child 1</div>
+          <div data-testid="child2">Child 2</div>
+        </GridColumn>
+      )
+
+      expect(screen.getByTestId("child1")).toBeInTheDocument()
+      expect(screen.getByTestId("child2")).toBeInTheDocument()
+    })
+
+    test("applies default className when no custom className is provided", () => {
+      render(<GridColumn data-testid="my-default-grid-column" />)
+      expect(screen.getByTestId("my-default-grid-column")).toHaveClass("juno-grid-column")
+    })
   })
 
   describe("Class Names", () => {
     test("renders a custom className", () => {
       render(<GridColumn data-testid="my-grid-column" className="my-grid-column-class" />)
       expect(screen.getByTestId("my-grid-column")).toHaveClass("my-grid-column-class")
     })
+
+    test("applies column width class based on 'cols' prop", () => {
+      render(<GridColumn data-testid="my-grid-column" cols={6} />)
+      expect(screen.getByTestId("my-grid-column")).toHaveClass("jn-w-grid-col-6")
+    })
+
+    test("handles invalid 'cols' values gracefully", () => {
+      render(<GridColumn data-testid="my-invalid-cols-grid-column" cols={15} />)
+      expect(screen.getByTestId("my-invalid-cols-grid-column")).toHaveClass("jn-w-grid-column-default")
+    })
   })
 
   describe("Inline Styles and Auto Prop", () => {
@@ -46,5 +73,16 @@ describe("GridColumn", () => {
       expect(styles.flexShrink).toBe("0")
       expect(styles.flexBasis).toBe("73%")
     })
+
+    test("renders no additional styles when neither 'width' nor 'auto' props are provided", () => {
+      render(<GridColumn data-testid="my-default-styles-grid-column" />)
+      const defaultColumn = screen.getByTestId("my-default-styles-grid-column")
+      const styles = window.getComputedStyle(defaultColumn)
+
+      expect(styles.flexGrow).toBe("")
+      expect(styles.flexShrink).toBe("")
+      expect(styles.flexBasis).toBe("")
+      expect(styles.width).toBe("")
+    })
   })
 })
diff --git a/packages/ui-components/src/components/GridRow/GridRow.test.tsx b/packages/ui-components/src/components/GridRow/GridRow.test.tsx
@@ -15,12 +15,29 @@ describe("GridRow", () => {
       render(<GridRow data-testid="my-grid-row" />)
       expect(screen.getByTestId("my-grid-row")).toBeInTheDocument()
     })
+
+    test("renders children elements correctly", () => {
+      render(
+        <GridRow data-testid="my-grid-row">
+          <div data-testid="child1">Child 1</div>
+          <div data-testid="child2">Child 2</div>
+        </GridRow>
+      )
+
+      expect(screen.getByTestId("child1")).toBeInTheDocument()
+      expect(screen.getByTestId("child2")).toBeInTheDocument()
+    })
   })
 
   describe("Class Names", () => {
     test("renders a custom className", () => {
       render(<GridRow data-testid="my-grid-row" className="my-grid-row-class" />)
       expect(screen.getByTestId("my-grid-row")).toHaveClass("my-grid-row-class")
     })
+
+    test("applies default className when no custom className is provided", () => {
+      render(<GridRow data-testid="my-default-grid-row" />)
+      expect(screen.getByTestId("my-default-grid-row")).toHaveClass("juno-grid-row")
+    })
   })
 })