Skip to content
This repository has been archived by the owner on Sep 19, 2023. It is now read-only.

Update dependencies & test for React hooks #123

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
fix lint errors
  • Loading branch information
akxcv committed Aug 11, 2020
commit ca53693673209bd82d44446345290522bd337150
12 changes: 6 additions & 6 deletions src/VuePlugin.js
Original file line number Diff line number Diff line change
@@ -15,12 +15,12 @@ export default {
const mergedValue = originalComponentsMergeStrategy(parent, ...args)
const wrappedComponents = mergedValue
? Object.entries(mergedValue).reduce(
(acc, [k, v]) => ({
...acc,
[k]: isReactComponent(v) ? VueResolver(v) : v,
}),
{}
)
(acc, [k, v]) => ({
...acc,
[k]: isReactComponent(v) ? VueResolver(v) : v,
}),
{}
)
: mergedValue
return Object.assign(mergedValue, wrappedComponents)
}
4 changes: 1 addition & 3 deletions src/wrappers/React.js
Original file line number Diff line number Diff line change
@@ -35,9 +35,7 @@ const makeReactContainer = Component => {
const wrappedChildren = this.wrapVueChildren(children)

return (
<Component {...rest}>
{children && <VueWrapper component={wrappedChildren} />}
</Component>
<Component {...rest}>{children && <VueWrapper component={wrappedChildren} />}</Component>
)
}
}
4 changes: 2 additions & 2 deletions tests/VuePlugin-test.js
Original file line number Diff line number Diff line change
@@ -27,7 +27,7 @@ describe('VuePlugin', () => {
'vue-component': VueComponent,
'vue-single-file-component': VueSingleFileComponent,
},
render(createElement) {
render (createElement) {
const elements = [
createElement('vue-component', {
props: {
@@ -81,7 +81,7 @@ describe('VuePlugin', () => {
})
return Vue.nextTick().then(() => {
// React 15 compat
document.querySelectorAll('[data-reactroot]').forEach((el) => {
document.querySelectorAll('[data-reactroot]').forEach(el => {
el.removeAttribute('data-reactroot')
})
expect(document.body.innerHTML).toBe(
1 change: 0 additions & 1 deletion tests/babel-test.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import fs from 'fs'
import path from 'path'
import * as babel from '@babel/core'
import prettier from 'prettier'
4 changes: 1 addition & 3 deletions tests/fixtures/ReactComponentWithHooks.js
Original file line number Diff line number Diff line change
@@ -3,7 +3,5 @@ import React from 'react'
export default () => {
const [value, setValue] = React.useState('')

return (
<input type="text" value={value} onChange={e => setValue(e.currentTarget.value)} />
)
return <input type='text' value={value} onChange={e => setValue(e.currentTarget.value)} />
}
8 changes: 4 additions & 4 deletions tests/polyfills/raf.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint-disable */
// https://gist.github.com/paulirish/1579671
;(function() {
;(function () {
var lastTime = 0
var vendors = ['ms', 'moz', 'webkit', 'o']
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
@@ -11,18 +11,18 @@
}

if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime()
var timeToCall = Math.max(0, 16 - (currTime - lastTime))
var id = window.setTimeout(function() {
var id = window.setTimeout(function () {
callback(currTime + timeToCall)
}, timeToCall)
lastTime = currTime + timeToCall
return id
}

if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
window.cancelAnimationFrame = function (id) {
clearTimeout(id)
}
})()
19 changes: 4 additions & 15 deletions tests/resolvers/ReactResolver-test.js
Original file line number Diff line number Diff line change
@@ -21,39 +21,28 @@ describe('VueInReact', () => {
})

it('returns given component when a React functional component is given', () => {
expect(VueInReact(ReactPureFunctionalComponent)).toBe(
ReactPureFunctionalComponent
)
expect(VueInReact(ReactPureFunctionalComponent)).toBe(ReactPureFunctionalComponent)
})

it('wraps Vue component', () => {
const Component = VueInReact(VueComponent)
ReactDOM.render(
<Component message='hi' reset={jest.fn()} />,
document.getElementById('root')
)
ReactDOM.render(<Component message='hi' reset={jest.fn()} />, document.getElementById('root'))
expect(document.getElementById('root').innerHTML).toBe(
'<div><span>hi</span><button></button></div>'
)
})

it('wraps Vue registered component', () => {
const Component = VueInReact(VueRegisteredComponent)
ReactDOM.render(
<Component message='hi' reset={jest.fn()} />,
document.getElementById('root')
)
ReactDOM.render(<Component message='hi' reset={jest.fn()} />, document.getElementById('root'))
expect(document.getElementById('root').innerHTML).toBe(
'<div><span>hi</span><button></button></div>'
)
})

it('wraps Vue single file component', () => {
const Component = VueInReact(VueSingleFileComponent)
ReactDOM.render(
<Component message='hi' reset={jest.fn()} />,
document.getElementById('root')
)
ReactDOM.render(<Component message='hi' reset={jest.fn()} />, document.getElementById('root'))
expect(document.getElementById('root').innerHTML).toBe(
'<div><span>hi</span> <button></button></div>'
)
12 changes: 3 additions & 9 deletions tests/resolvers/babelReactResolver-test.js
Original file line number Diff line number Diff line change
@@ -20,9 +20,7 @@ describe('__vueraReactResolver', () => {
})

it('behaves like React.createElement when a React functional component is given', () => {
expect(
__vueraReactResolver(ReactPureFunctionalComponent, { message: 'hi' })
).toEqual(
expect(__vueraReactResolver(ReactPureFunctionalComponent, { message: 'hi' })).toEqual(
React.createElement(ReactPureFunctionalComponent, { message: 'hi' })
)
})
@@ -37,9 +35,7 @@ describe('__vueraReactResolver', () => {
})

it('wraps Vue registered component', () => {
expect(
__vueraReactResolver(VueRegisteredComponent, { message: 'hi' })
).toEqual(
expect(__vueraReactResolver(VueRegisteredComponent, { message: 'hi' })).toEqual(
React.createElement(VueWrapper, {
component: VueRegisteredComponent,
message: 'hi',
@@ -48,9 +44,7 @@ describe('__vueraReactResolver', () => {
})

it('wraps Vue single file component', () => {
expect(
__vueraReactResolver(VueSingleFileComponent, { message: 'hi' })
).toEqual(
expect(__vueraReactResolver(VueSingleFileComponent, { message: 'hi' })).toEqual(
React.createElement(VueWrapper, {
component: VueSingleFileComponent,
message: 'hi',
2 changes: 1 addition & 1 deletion tests/wrappers/ReactWrapper-test.js
Original file line number Diff line number Diff line change
@@ -46,7 +46,7 @@ const makeVueInstanceWithReactComponent = (passedComponent, optionalRenderFn) =>
components: { react: ReactWrapper },
})
// React 15 compat
document.querySelectorAll('[data-reactroot]').forEach((el) => {
document.querySelectorAll('[data-reactroot]').forEach(el => {
el.removeAttribute('data-reactroot')
})
return vm
27 changes: 8 additions & 19 deletions tests/wrappers/VueWrapper-test.js
Original file line number Diff line number Diff line change
@@ -7,7 +7,9 @@ import VueInstanceOptionsComponent, { Plugin } from '../fixtures/VueInstanceOpti
import VueRegisteredComponent from '../fixtures/VueRegisteredComponent'
import VueSingleFileComponent from '../fixtures/VueSingleFileComponent.vue'

const mockReset = () => { return jest.fn() }
const mockReset = () => {
return jest.fn()
}
const makeReactInstanceWithVueComponent = (passedComponent, events) => {
class ReactApp extends React.Component {
constructor (props) {
@@ -25,11 +27,7 @@ const makeReactInstanceWithVueComponent = (passedComponent, events) => {
render () {
return (
<div>
<input
type='text'
value={this.state.message}
onChange={this.onChange}
/>
<input type='text' value={this.state.message} onChange={this.onChange} />
<VueWrapper
ref={ref => (this.vueWrapperRef = ref)}
component={passedComponent}
@@ -159,30 +157,21 @@ describe('VueInReact', () => {
document.querySelectorAll('[data-reactroot]').forEach(el => {
el.removeAttribute('data-reactroot')
})
document.body.innerHTML = document.body.innerHTML.replace(
/<!--[\s\S]*?-->/g,
''
)
document.body.innerHTML = document.body.innerHTML.replace(/<!--[\s\S]*?-->/g, '')
}

it('works with a string', () => {
render('Hello')
expect(document.querySelector('#root div div').innerHTML).toBe(
'<div>Hello</div>'
)
expect(document.querySelector('#root div div').innerHTML).toBe('<div>Hello</div>')
})

it('works with a React component', () => {
render(<div>Hello</div>)
expect(document.querySelector('#root div div').innerHTML).toBe(
'<div><div>Hello</div></div>'
)
expect(document.querySelector('#root div div').innerHTML).toBe('<div><div>Hello</div></div>')
})

it('works with a React component', () => {
render(
<VueWrapper component={componentWithChildren}>wow so nested</VueWrapper>
)
render(<VueWrapper component={componentWithChildren}>wow so nested</VueWrapper>)
expect(document.querySelector('#root div div').innerHTML).toBe(
'<div><div><div><div>wow so nested</div></div></div></div>'
)