From 82a69bd22c737f6f219078f994a30e41780718fc Mon Sep 17 00:00:00 2001
From: sowmya-AS <76809502+sowmya-AS@users.noreply.github.com>
Date: Tue, 31 Oct 2023 20:19:09 +0530
Subject: [PATCH] test : Adds test for GridMain component (#128)

Co-authored-by: sowmya198 <sowmya.ayilam.s@gmail.com>
---
 .../GridMain/__snapshots__/test.tsx.snap      | 101 ++++++++++++++++++
 src/packages/GridMain/test.tsx                |  44 ++++++++
 2 files changed, 145 insertions(+)
 create mode 100644 src/packages/GridMain/__snapshots__/test.tsx.snap
 create mode 100644 src/packages/GridMain/test.tsx

diff --git a/src/packages/GridMain/__snapshots__/test.tsx.snap b/src/packages/GridMain/__snapshots__/test.tsx.snap
new file mode 100644
index 0000000..dc00173
--- /dev/null
+++ b/src/packages/GridMain/__snapshots__/test.tsx.snap
@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<GridMain /> should render GridMain correctly with default props 1`] = `
+.c0 {
+  display: grid;
+  grid-template-columns: 1fr min( 130rem, calc(100% - calc(3.2rem * 2)) ) 1fr;
+  grid-column-gap: 3.2rem;
+  min-height: unset;
+}
+
+.c0 > * {
+  grid-column: 2;
+}
+
+<div>
+  <main
+    class="c0"
+  >
+    <div>
+      GridMain
+    </div>
+  </main>
+</div>
+`;
+
+exports[`<GridMain /> should render GridMain with different minHeight 1`] = `
+.c0 {
+  display: grid;
+  grid-template-columns: 1fr min( 130rem, calc(100% - calc(3.2rem * 2)) ) 1fr;
+  grid-column-gap: 3.2rem;
+  min-height: unset;
+}
+
+.c0 > * {
+  grid-column: 2;
+}
+
+.c1 {
+  display: grid;
+  grid-template-columns: 1fr min( 130rem, calc(100% - calc(3.2rem * 2)) ) 1fr;
+  grid-column-gap: 3.2rem;
+  min-height: 70vh;
+}
+
+.c1 > * {
+  grid-column: 2;
+}
+
+.c2 {
+  display: grid;
+  grid-template-columns: 1fr min( 130rem, calc(100% - calc(3.2rem * 2)) ) 1fr;
+  grid-column-gap: 3.2rem;
+  min-height: 100vh;
+}
+
+.c2 > * {
+  grid-column: 2;
+}
+
+.c3 {
+  display: grid;
+  grid-template-columns: 1fr min( 130rem, calc(100% - calc(3.2rem * 2)) ) 1fr;
+  grid-column-gap: 3.2rem;
+  min-height: 100%;
+}
+
+.c3 > * {
+  grid-column: 2;
+}
+
+<div>
+  <main
+    class="c0"
+  >
+    <div>
+      GridMain
+    </div>
+  </main>
+  <main
+    class="c1"
+  >
+    <div>
+      GridMain
+    </div>
+  </main>
+  <main
+    class="c2"
+  >
+    <div>
+      GridMain
+    </div>
+  </main>
+  <main
+    class="c3"
+  >
+    <div>
+      GridMain
+    </div>
+  </main>
+</div>
+`;
diff --git a/src/packages/GridMain/test.tsx b/src/packages/GridMain/test.tsx
new file mode 100644
index 0000000..0fe4b37
--- /dev/null
+++ b/src/packages/GridMain/test.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import { render } from '../../utils/testUtils'
+
+import GridMain from '.'
+
+describe('<GridMain />', () => {
+  it('should render GridMain correctly with default props', () => {
+    const { container } = render(
+      <GridMain>
+        <div>GridMain</div>
+      </GridMain>
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+  it('should render GridMain with different minHeight', () => {
+    const { container } = render(
+      <>
+        <GridMain minHeight="unset">
+          <div>GridMain</div>
+        </GridMain>
+        <GridMain minHeight="70vh">
+          <div>GridMain</div>
+        </GridMain>
+        <GridMain minHeight="100vh">
+          <div>GridMain</div>
+        </GridMain>
+        <GridMain minHeight="100%">
+          <div>GridMain</div>
+        </GridMain>
+      </>
+    )
+    expect(container).toMatchSnapshot()
+  })
+  it('should render GridMain by handling the custom props correctly', () => {
+    const { getByTestId } = render(
+      <GridMain data-testid="custom-grid-main" title="Custom Title">
+        Custom
+      </GridMain>
+    )
+    const box = getByTestId('custom-grid-main')
+    expect(box).toHaveAttribute('title', 'Custom Title')
+  })
+})