test(list): add tests for List component

Author: koca

packages/chakra-ui-core/src/CList/tests/CList.test.js

@@ -0,0 +1,24 @@
+import { CList, CListItem, CListIcon } from '../..'
+import { render } from '@/tests/test-utils'
+
+const renderComponent = (props) => {
+  const base = {
+    components: { CList, CListItem, CListIcon },
+    template: `
+    <CList spacing="3">
+      <CListItem>
+        <CListIcon icon="check-circle" color="green.500" />Lorem ipsum dolor sit amet, consectetur adipisicing elit
+      </CListItem>
+      <CListItem>
+        <CListIcon icon="check-circle" color="green.500" />Assumenda, quia temporibus eveniet a libero incidunt suscipit
+      </CListItem>
+    </CList>`,
+    ...props
+  }
+  return render(base)
+}
+
+it('should render correctly', () => {
+  const { asFragment } = renderComponent()
+  expect(asFragment()).toMatchSnapshot()
+})

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

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<DocumentFragment>
+  <ul
+    class="css-kzncz7"
+    data-chakra-component="CList"
+  >
+    <li
+      class="css-fzcsno css-1u7dvmo"
+      data-chakra-component="CListItem"
+    >
+      <svg
+        class="css-4phyzl css-y3asau"
+        data-chakra-component="CListIcon"
+        role="presentation"
+        viewBox="0 0 24 24"
+      >
+        
+      
+        <path
+          d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"
+          fill="currentColor"
+        />
+      </svg>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit
+      
+    </li>
+    <li
+      class="css-fzcsno css-fzcsno"
+      data-chakra-component="CListItem"
+    >
+      <svg
+        class="css-4phyzl css-y3asau"
+        data-chakra-component="CListIcon"
+        role="presentation"
+        viewBox="0 0 24 24"
+      >
+        
+      
+        <path
+          d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"
+          fill="currentColor"
+        />
+      </svg>
+      Assumenda, quia temporibus eveniet a libero incidunt suscipit
+      
+    </li>
+  </ul>
+</DocumentFragment>
+`;