Add some tests

.babelrc

@@ -10,9 +10,14 @@
     ],
     "react"
   ],
-  "plugins": [
-    "external-helpers",
-    "transform-object-rest-spread",
-    "transform-class-properties"
-  ]
+  "plugins": ["transform-object-rest-spread", "transform-class-properties"],
+  "env": {
+    "rollup": {
+      "plugins": ["external-helpers"]
+    },
+    "test": {
+      "presets": ["es2015"],
+      "plugins": ["transform-class-properties"]
+    }
+  }
 }

.eslintrc.json

@@ -6,5 +6,6 @@
     "jsx-quotes": ["error", "prefer-single"],
     "new-cap": "off",
     "no-param-reassign": "off"
-  }
+  },
+  "plugins": ["vue"]
 }

dist/vuera.cjs.js

@@ -375,16 +375,16 @@ var VueContainer = function (_React$Component) {
   return VueContainer;
 }(React.Component);
 
-/* eslint-disable prefer-object-spread/prefer-object-spread, dot-notation */
+/* eslint-disable prefer-object-spread/prefer-object-spread */
 /**
  * This function gets imported by the babel plugin. It wraps a suspected React element and, if it
  * isn't a valid React element, wraps it into a Vue container.
  */
 function wrapReactElement(el, props) {
-  if ((typeof el === 'undefined' ? 'undefined' : _typeof(el)) === 'object' && !el['$$typeof']) {
-    return React['createElement'](VueContainer, Object.assign({ component: el }, props));
+  if ((typeof el === 'undefined' ? 'undefined' : _typeof(el)) === 'object' && !el.$$typeof) {
+    return React.createElement(VueContainer, Object.assign({ component: el }, props));
   } else {
-    return React['createElement'](el, props);
+    return React.createElement(el, props);
   }
 }
 

dist/vuera.es.js

@@ -369,16 +369,16 @@ var VueContainer = function (_React$Component) {
   return VueContainer;
 }(React.Component);
 
-/* eslint-disable prefer-object-spread/prefer-object-spread, dot-notation */
+/* eslint-disable prefer-object-spread/prefer-object-spread */
 /**
  * This function gets imported by the babel plugin. It wraps a suspected React element and, if it
  * isn't a valid React element, wraps it into a Vue container.
  */
 function wrapReactElement(el, props) {
-  if ((typeof el === 'undefined' ? 'undefined' : _typeof(el)) === 'object' && !el['$$typeof']) {
-    return React['createElement'](VueContainer, Object.assign({ component: el }, props));
+  if ((typeof el === 'undefined' ? 'undefined' : _typeof(el)) === 'object' && !el.$$typeof) {
+    return React.createElement(VueContainer, Object.assign({ component: el }, props));
   } else {
-    return React['createElement'](el, props);
+    return React.createElement(el, props);
   }
 }
 

jest.config.js

@@ -0,0 +1,15 @@
+/* eslint-env node */
+module.exports = {
+  browser: true,
+  collectCoverageFrom: ['src/**/*.js', 'dist/babel.js'],
+  setupFiles: ['./tests/__setup__.js'],
+  testMatch: ['<rootDir>/tests/**/*-test.js'],
+  moduleNameMapper: {
+    vue: 'vue/dist/vue.js',
+  },
+  moduleFileExtensions: ['js', 'vue'],
+  transform: {
+    '\\.js$': 'babel-jest',
+    '\\.vue$': 'jest-vue-preprocessor',
+  },
+}

package.json

@@ -4,7 +4,14 @@
   "main": "dist/vuera.cjs.js",
   "modules": "dist/vuera.es.js",
   "license": "MIT",
-  "keywords": ["vue", "react", "interop", "adapter"],
+  "keywords": [
+    "vue",
+    "react",
+    "interop",
+    "adapter",
+    "migrate",
+    "seamless-integration"
+  ],
   "peerDependencies": {
     "react": ">= 15",
     "react-dom": ">= 15",
@@ -13,6 +20,7 @@
   "devDependencies": {
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.0.1",
+    "babel-jest": "^21.2.0",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
@@ -26,12 +34,22 @@
     "eslint-plugin-prefer-object-spread": "^1.2.1",
     "eslint-plugin-promise": "^3.5.0",
     "eslint-plugin-react": "^7.4.0",
+    "eslint-plugin-vue": "^2.1.0",
+    "jest": "^21.2.1",
+    "jest-vue-preprocessor": "1.2.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "rollup": "^0.50.0",
     "rollup-plugin-babel": "^3.0.2",
-    "rollup-plugin-node-resolve": "^3.0.0"
+    "rollup-plugin-node-resolve": "^3.0.0",
+    "vue": "^2.4.4",
+    "vue-template-compiler": "^2.4.4",
+    "vue-template-es2015-compiler": "^1.5.3"
   },
   "scripts": {
-    "build": "rollup -c",
-    "lint": "eslint ."
+    "build": "BABEL_ENV=rollup rollup -c",
+    "lint": "eslint .",
+    "test": "BABEL_ENV=test jest",
+    "test:watch": "yarn run test -- --watch"
   }
 }

src/wrapReactElement.js

@@ -1,4 +1,4 @@
-/* eslint-disable prefer-object-spread/prefer-object-spread, dot-notation */
+/* eslint-disable prefer-object-spread/prefer-object-spread */
 import React from 'react'
 import Vue from './VueInReact'
 
@@ -7,9 +7,9 @@ import Vue from './VueInReact'
  * isn't a valid React element, wraps it into a Vue container.
  */
 export default function wrapReactElement (el, props) {
-  if (typeof el === 'object' && !el['$$typeof']) {
-    return React['createElement'](Vue, Object.assign({ component: el }, props))
+  if (typeof el === 'object' && !el.$$typeof) {
+    return React.createElement(Vue, Object.assign({ component: el }, props))
   } else {
-    return React['createElement'](el, props)
+    return React.createElement(el, props)
   }
 }

tests/.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "env": {
+    "jest": true,
+    "browser": true
+  },
+  "rules": {
+    "react/prop-types": "off",
+    "react/prefer-stateless-function": "off"
+  }
+}

tests/ReactInVue-test.js

@@ -0,0 +1,70 @@
+import Vue from 'vue'
+import { React } from '../src'
+import PureFunctionalComponent from './fixtures/ReactPureFunctionalComponent'
+import Component from './fixtures/ReactComponent'
+
+const mockReset = jest.fn()
+const makeVueInstanceWithReactComponent = passedComponent =>
+  new Vue({
+    el: '#app',
+    data: {
+      component: passedComponent,
+      message: 'Message for React',
+    },
+    computed: {
+      passedProps () {
+        return {
+          message: this.message,
+          reset: this.reset,
+        }
+      },
+    },
+    methods: {
+      reset: mockReset,
+    },
+    template: `
+      <div>
+        <input v-model="message" />
+        <react :component="component" :passedProps="passedProps"></react>
+      </div>
+    `,
+    components: { React },
+  })
+
+describe('ReactInVue', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>'
+  })
+
+  it('mounts the React component correctly', () => {
+    makeVueInstanceWithReactComponent(Component)
+    expect(document.body.innerHTML).toBe(
+      '<div><input> <div><div><span>Message for React</span><button></button></div></div></div>'
+    )
+  })
+
+  it('mounts the pure React component correctly', () => {
+    makeVueInstanceWithReactComponent(PureFunctionalComponent)
+    expect(document.body.innerHTML).toBe(
+      '<div><input> <div><div><span>Message for React</span><button></button></div></div></div>'
+    )
+  })
+
+  it('synchronises props', () => {
+    const vm = makeVueInstanceWithReactComponent(Component)
+    vm.message = 'New message!'
+    return Vue.nextTick().then(() => {
+      expect(vm.$data.message).toBe('New message!')
+      expect(document.body.innerHTML).toContain('New message!')
+    })
+  })
+
+  test('functions work', () => {
+    makeVueInstanceWithReactComponent(Component)
+    const button = document.querySelector('button')
+
+    expect(mockReset.mock.calls.length).toBe(0)
+    button.click()
+    expect(mockReset.mock.calls.length).toBe(1)
+  })
+})

tests/VueInReact-test.js

@@ -0,0 +1,73 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Vue } from '../src'
+import VueComponent from './fixtures/VueComponent'
+import VueSingleFileComponent from './fixtures/VueSingleFileComponent.vue'
+import normalizeHTMLString from './utils/normalizeHTML'
+
+const mockReset = jest.fn()
+const makeReactInstanceWithVueComponent = passedComponent => {
+  class ReactApp extends React.Component {
+    constructor (props) {
+      super(props)
+      this.state = {
+        message: props.message,
+      }
+    }
+
+    onChange = e => {
+      this.setState({ message: e.currentTarget.value })
+    }
+
+    render () {
+      return (
+        <div>
+          <input type='text' value={this.state.message} onChange={this.onChange} />
+          <Vue component={passedComponent} message={this.state.message} reset={mockReset} />
+        </div>
+      )
+    }
+  }
+  ReactDOM.render(<ReactApp message='Message for Vue' />, document.getElementById('root'))
+}
+
+describe('VueInReact', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  it('mounts the Vue component correctly', () => {
+    makeReactInstanceWithVueComponent(VueComponent)
+    expect(document.body.innerHTML).toBe(
+      normalizeHTMLString(
+        `<div id="root">
+          <div>
+            <input type="text" value="Message for Vue">
+            <div>
+              <span>Message for Vue</span> <button></button>
+            </div>
+          </div>
+        </div>`
+      )
+    )
+  })
+
+  /**
+   * SKIPPING: having trouble with jest-vue-preprocessor
+   */
+  it('mounts the Vue single file component correctly', () => {
+    makeReactInstanceWithVueComponent(VueSingleFileComponent)
+    expect(document.body.innerHTML).toBe(
+      normalizeHTMLString(
+        `<div id="root">
+          <div>
+            <input type="text" value="Message for Vue">
+            <div>
+              <span>Message for Vue</span> <button></button>
+            </div>
+          </div>
+        </div>`
+      )
+    )
+  })
+})

tests/__setup__.js

@@ -0,0 +1 @@
+import './polyfills/raf'

tests/fixtures/ReactComponent.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default class Component extends React.Component {
+  render () {
+    return (
+      <div>
+        <span>{this.props.message}</span>
+        <button onClick={this.props.reset} />
+      </div>
+    )
+  }
+}

tests/fixtures/ReactPureFunctionalComponent.js

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default function PureFunctionalComponent (props) {
+  return (
+    <div>
+      <span>{props.message}</span>
+      <button onClick={props.reset} />
+    </div>
+  )
+}

tests/fixtures/VueComponent.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+
+export default Vue.component('vue-component', {
+  props: ['message', 'reset'],
+  template: `
+    <div>
+      <span>{{ message }}</span>
+      <button @click="reset"></button>
+    </div>
+  `,
+})

tests/fixtures/VueSingleFileComponent.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <span>{{ message }}</span>
+    <button @click="reset"></button>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'what',
+    props: ['message', 'reset'],
+  }
+</script>
+
+<style>
+</style>

tests/polyfills/raf.js

@@ -0,0 +1,28 @@
+/* eslint-disable */
+// https://gist.github.com/paulirish/1579671
+;(function() {
+  var lastTime = 0
+  var vendors = ['ms', 'moz', 'webkit', 'o']
+  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']
+    window.cancelAnimationFrame =
+      window[vendors[x] + 'CancelAnimationFrame'] ||
+      window[vendors[x] + 'CancelRequestAnimationFrame']
+  }
+
+  if (!window.requestAnimationFrame)
+    window.requestAnimationFrame = function(callback, element) {
+      var currTime = new Date().getTime()
+      var timeToCall = Math.max(0, 16 - (currTime - lastTime))
+      var id = window.setTimeout(function() {
+        callback(currTime + timeToCall)
+      }, timeToCall)
+      lastTime = currTime + timeToCall
+      return id
+    }
+
+  if (!window.cancelAnimationFrame)
+    window.cancelAnimationFrame = function(id) {
+      clearTimeout(id)
+    }
+})()

tests/utils/normalizeHTML.js

@@ -0,0 +1,3 @@
+export default function normalizeHTMLString (string) {
+  return string.replace(/\n\s*/g, '')
+}