Add tests

Author: IHIutch

packages/chakra-ui-core/src/CGrid/test/CGrid.test.js

@@ -1,10 +1,10 @@
-import { CGrid } from '..'
+import { CGrid, CGridItem } from '..'
 import { render } from '@/tests/test-utils'
 
 const renderComponent = (props) => {
   const inlineAttrs = (props && props.inlineAttrs) || ''
   const base = {
-    components: { CGrid },
+    components: { CGrid, CGridItem },
     template: `<CGrid ${inlineAttrs}>Grid Me</CGrid>`,
     ...props
   }
@@ -23,3 +23,25 @@ it('should change gap', () => {
 
   expect(asFragment()).toMatchSnapshot()
 })
+
+it('should offset columns', () => {
+  const inlineAttrs = 'col-start="4" col-end="6"'
+  const { asFragment } = renderComponent({
+    template: `
+      <CGrid w="600px" template-columns="repeat(5, 1fr)" gap="6">
+        <CGridItem ${inlineAttrs}>I'm in a grid item</CGridItem>
+      </CGrid>`
+  })
+  expect(asFragment()).toMatchSnapshot()
+})
+
+it('should span columns', () => {
+  const inlineAttrs = 'col-span="2"'
+  const { asFragment } = renderComponent({
+    template: `
+      <CGrid w="600px" template-columns="repeat(5, 1fr)" gap="6">
+        <CGridItem ${inlineAttrs}>I'm in a grid item</CGridItem>
+      </CGrid>`
+  })
+  expect(asFragment()).toMatchSnapshot()
+})

packages/chakra-ui-core/src/CGrid/test/__snapshots__/CGrid.test.js.snap

@@ -11,6 +11,22 @@ exports[`should change gap 1`] = `
 </DocumentFragment>
 `;
 
+exports[`should offset columns 1`] = `
+<DocumentFragment>
+  <div
+    class="css-12kxrxg"
+    data-chakra-component="CGrid"
+  >
+    <div
+      class="css-1i8ejg0"
+      data-chakra-component="CGridItem"
+    >
+      I'm in a grid item
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   <div
@@ -21,3 +37,19 @@ exports[`should render correctly 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`should span columns 1`] = `
+<DocumentFragment>
+  <div
+    class="css-12kxrxg"
+    data-chakra-component="CGrid"
+  >
+    <div
+      class="css-tuh9u2"
+      data-chakra-component="CGridItem"
+    >
+      I'm in a grid item
+    </div>
+  </div>
+</DocumentFragment>
+`;