fix: tests for theme provider

Author: codebender828

babel.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/app',
+    '@babel/preset-env'
   ]
 }

jest.config.js

@@ -8,7 +8,7 @@ module.exports = {
   transform: {
     '^.+\\.vue$': 'vue-jest',
     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
-    '^.+\\.jsx?$': 'babel-jest'
+    '^.+\\.(js|jsx)?$': 'babel-jest'
   },
   transformIgnorePatterns: [
     '/node_modules/'

package.json

@@ -12,6 +12,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
+    "@babel/preset-env": "^7.6.3",
     "core-js": "^2.6.5",
     "css-loader": "^3.2.0",
     "esm": "^3.2.25",

src/App.vue

@@ -1,17 +1,17 @@
 <template>
   <div>
     {{ greeting }}
-    <k-button>Simple text</k-button>
+    <Button>Simple text</Button>
   </div>
 </template>
 
 <script>
-import KButton from './components/Button/index'
+import Button from './components/Button/index'
 
 export default {
   name: 'App',
   components: {
-    KButton
+    Button
   },
   data () {
     return {

src/components/Button/index.vue

@@ -21,7 +21,6 @@
 <script>
 export default {
   name: 'Button',
-  inject: ['KiwiTheme'],
   props: {
     as: {
       type: String,

src/components/ThemeContext/index.js src/components/ThemeProvider/index.jssrc/components/ThemeContext/index.js renamed to src/components/ThemeProvider/index.js

@@ -0,0 +1,29 @@
+import { shallowMount } from '@vue/test-utils'
+import ThemeProvider from '../ThemeProvider'
+import Theme from '../../../kiwi.config'
+
+describe('===== ThemeProvider Component =====', () => {
+  let themeProvider
+  const ChildComponent = {
+    inject: ['KiwiTheme'],
+    render: h => h('div', {})
+  }
+
+  it('should be a Vue component', () => {
+    themeProvider = shallowMount(ThemeProvider, {
+      slots: {
+        default: [ChildComponent]
+      }
+    })
+    expect(themeProvider.isVueInstance()).toBeTruthy()
+  })
+
+  it('should provide theme to child components', () => {
+    themeProvider = shallowMount(ThemeProvider, {
+      slots: {
+        default: [ChildComponent]
+      }
+    })
+    expect(themeProvider.find(ChildComponent).vm.KiwiTheme).toBe(Theme)
+  })
+})

src/components/ThemeProvider/index.test.js

@@ -1,5 +1,7 @@
 import Logger from './logger'
+import { provideTheme } from './provide-theme'
 
 export {
-  Logger
+  Logger,
+  provideTheme
 }

src/lib/plugin/index.js

@@ -0,0 +1,10 @@
+import ThemeProvider from '../../components/ThemeProvider'
+
+/**
+ * @description Provides Kiwi theme to component
+ * @param {Function} h Vue render function
+ * @param {Vue.Component} Component - Vue component
+ */
+export const provideTheme = (h, Component) => {
+  return h(ThemeProvider, {}, [h(Component)])
+}