test : Adds test for GridMain component (#128)

Co-authored-by: sowmya198 <sowmya.ayilam.s@gmail.com>

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>
+`;

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