Add baseStyle tests for component

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

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`createStyledAttrsMixin baseStyle should be overiden by props 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  background: var(--colors-blue-200);
+  color: var(--colors-gray-200);
+}
+
+<div
+    class="emotion-0"
+    data-chakra-component="FakeComponent"
+  >
+    Fake component
+  </div>
+</DocumentFragment>
+`;
+
+exports[`createStyledAttrsMixin baseStyle should use theme.baseStyle if given 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  background: var(--colors-red-400);
+  color: var(--colors-gray-200);
+}
+
+<div
+    class="emotion-0"
+    data-chakra-component="FakeComponent"
+  >
+    Fake component
+  </div>
+</DocumentFragment>
+`;

packages/chakra-ui-core/src/utils/component.test.js

@@ -0,0 +1,69 @@
+import defaultTheme from '@chakra-ui/theme-vue'
+import { toCSSVar } from '@chakra-ui/styled-system'
+import { createStyledAttrsMixin } from './components'
+import { render } from '@/tests/test-utils'
+
+describe('createStyledAttrsMixin', () => {
+  const FakeComponent = {
+    name: 'FakeComponent',
+    mixins: [createStyledAttrsMixin('FakeComponent', true)],
+    render (h) {
+      return h(
+        'div',
+        {
+          class: this.className,
+          attrs: this.computedAttrs
+        },
+        'Fake component'
+      )
+    }
+  }
+
+  describe('baseStyle', () => {
+    const renderFakeComponent = ({ theme, ...props }) => {
+      const inlineAttrs = (props && props.inlineAttrs) || ''
+      return render({
+        template: `<FakeComponent ${inlineAttrs} />`,
+        components: {
+          FakeComponent
+        },
+        provide: () => ({
+          $chakraTheme: () => toCSSVar(theme),
+          $chakraColorMode: () => 'light'
+        }),
+        ...props
+      })
+    }
+
+    it('should use theme.baseStyle if given', () => {
+      const { asFragment } = renderFakeComponent({
+        theme: {
+          ...defaultTheme,
+          baseStyle: {
+            FakeComponent: {
+              bg: 'red.400',
+              color: 'gray.200'
+            }
+          }
+        }
+      })
+      expect(asFragment()).toMatchSnapshot()
+    })
+
+    it('should be overiden by props', () => {
+      const { asFragment } = renderFakeComponent({
+        inlineAttrs: 'bg="blue.200"',
+        theme: {
+          ...defaultTheme,
+          baseStyle: {
+            FakeComponent: {
+              bg: 'red.400',
+              color: 'gray.200'
+            }
+          }
+        }
+      })
+      expect(asFragment()).toMatchSnapshot()
+    })
+  })
+})

packages/chakra-ui-core/src/utils/components.js

@@ -69,7 +69,7 @@ export const createStyledAttrsMixin = name => ({
       }
     },
     baseStyle () {
-      return __get(this.theme, `baseStyle.${name}`, {})
+      return __get(this.theme, `baseStyle.${name}`) || {}
     },
     className () {
       const { styleAttrs } = this.splitProps