From 81c974d33939521ca1900b4c9b97cf1da41d3feb Mon Sep 17 00:00:00 2001 From: fanyer Date: Tue, 22 Oct 2019 04:15:39 +0800 Subject: [PATCH 1/3] ADD: coverage for VueWrapper --- .../VueSingleFileComponentChanged.vue | 24 ++++++++ tests/wrappers/VueWrapper-test.js | 57 ++++++++++++------- 2 files changed, 61 insertions(+), 20 deletions(-) create mode 100644 tests/fixtures/VueSingleFileComponentChanged.vue diff --git a/tests/fixtures/VueSingleFileComponentChanged.vue b/tests/fixtures/VueSingleFileComponentChanged.vue new file mode 100644 index 0000000..3291b0a --- /dev/null +++ b/tests/fixtures/VueSingleFileComponentChanged.vue @@ -0,0 +1,24 @@ + + + diff --git a/tests/wrappers/VueWrapper-test.js b/tests/wrappers/VueWrapper-test.js index b0886c7..e0abc9e 100644 --- a/tests/wrappers/VueWrapper-test.js +++ b/tests/wrappers/VueWrapper-test.js @@ -4,14 +4,18 @@ import { VueWrapper } from '../../src' import VueComponent from '../fixtures/VueComponent' import VueRegisteredComponent from '../fixtures/VueRegisteredComponent' import VueSingleFileComponent from '../fixtures/VueSingleFileComponent.vue' +import VueSingleFileComponentChanged from '../fixtures/VueSingleFileComponentChanged.vue' -const mockReset = () => { return jest.fn() } +const mockReset = () => { + return jest.fn() +} const makeReactInstanceWithVueComponent = (passedComponent, events) => { class ReactApp extends React.Component { constructor (props) { super(props) this.state = { message: props.message, + component: passedComponent, } this.mockReset = mockReset() } @@ -23,14 +27,10 @@ const makeReactInstanceWithVueComponent = (passedComponent, events) => { render () { return (
- + (this.vueWrapperRef = ref)} - component={passedComponent} + component={this.state.component} on={events} message={this.state.message} reset={this.mockReset} @@ -109,6 +109,32 @@ describe('VueInReact', () => { ) }) + /** + * NOTE: this case only occurs when using a wrapper component + * because the component filed is passed in curly braces of JSX, + * and it can be changed in `setSate` operation. + * However it won't occur in HOC mode or babel plugin mode. + * this test will fail. I'm trying to fixed it. + */ + it('dynamic change component while using a wrapper component', () => { + const reactAppInstance = makeReactInstanceWithVueComponent(VueSingleFileComponent) + expect(document.body.innerHTML).toBe( + normalizeHTMLString( + `
+
+ +
+ Message for Vue +
+
+
` + ) + ) + reactAppInstance.setState({ component: VueSingleFileComponentChanged }, () => { + expect(document.body.innerHTML).toContain('VueSingleFileComponentChanged') + }) + }) + it('wires up events correctly', () => { let eventRaised = false const hndlr = () => (eventRaised = true) @@ -157,30 +183,21 @@ describe('VueInReact', () => { document.querySelectorAll('[data-reactroot]').forEach(el => { el.removeAttribute('data-reactroot') }) - document.body.innerHTML = document.body.innerHTML.replace( - //g, - '' - ) + document.body.innerHTML = document.body.innerHTML.replace(//g, '') } it('works with a string', () => { render('Hello') - expect(document.querySelector('#root div div').innerHTML).toBe( - '
Hello
' - ) + expect(document.querySelector('#root div div').innerHTML).toBe('
Hello
') }) it('works with a React component', () => { render(
Hello
) - expect(document.querySelector('#root div div').innerHTML).toBe( - '
Hello
' - ) + expect(document.querySelector('#root div div').innerHTML).toBe('
Hello
') }) it('works with a React component', () => { - render( - wow so nested - ) + render(wow so nested) expect(document.querySelector('#root div div').innerHTML).toBe( '
wow so nested
' ) From 1ca8b0bc86e31e92cce7cda7ba14b2335739f34d Mon Sep 17 00:00:00 2001 From: fanyer Date: Sun, 27 Oct 2019 22:19:08 +0800 Subject: [PATCH 2/3] update: test assert into vue lifecyle --- dist/vuera.cjs.js | 3 +++ dist/vuera.es.js | 3 +++ dist/vuera.iife.js | 3 +++ src/wrappers/Vue.js | 3 +++ tests/fixtures/VueSingleFileComponentChanged.vue | 1 - tests/wrappers/VueWrapper-test.js | 11 +++++++---- 6 files changed, 19 insertions(+), 5 deletions(-) diff --git a/dist/vuera.cjs.js b/dist/vuera.cjs.js index 619ba59..283f365 100644 --- a/dist/vuera.cjs.js +++ b/dist/vuera.cjs.js @@ -258,6 +258,9 @@ var VueContainer = function (_React$Component) { reactThisBinding.vueInstance = new Vue({ el: targetElement, data: props, + updated: function updated() { + Vue.nextTick(props.fn); + }, render: function render(createElement) { return createElement(VUE_COMPONENT_NAME, { props: this.$data, diff --git a/dist/vuera.es.js b/dist/vuera.es.js index f729f41..734228d 100644 --- a/dist/vuera.es.js +++ b/dist/vuera.es.js @@ -252,6 +252,9 @@ var VueContainer = function (_React$Component) { reactThisBinding.vueInstance = new Vue({ el: targetElement, data: props, + updated: function updated() { + Vue.nextTick(props.fn); + }, render: function render(createElement) { return createElement(VUE_COMPONENT_NAME, { props: this.$data, diff --git a/dist/vuera.iife.js b/dist/vuera.iife.js index 64c86bc..c3c7520 100644 --- a/dist/vuera.iife.js +++ b/dist/vuera.iife.js @@ -255,6 +255,9 @@ var VueContainer = function (_React$Component) { reactThisBinding.vueInstance = new Vue({ el: targetElement, data: props, + updated: function updated() { + Vue.nextTick(props.fn); + }, render: function render(createElement) { return createElement(VUE_COMPONENT_NAME, { props: this.$data, diff --git a/src/wrappers/Vue.js b/src/wrappers/Vue.js index f309bc9..55da71c 100644 --- a/src/wrappers/Vue.js +++ b/src/wrappers/Vue.js @@ -65,6 +65,9 @@ export default class VueContainer extends React.Component { reactThisBinding.vueInstance = new Vue({ el: targetElement, data: props, + updated () { + Vue.nextTick(props.fn) + }, render (createElement) { return createElement( VUE_COMPONENT_NAME, diff --git a/tests/fixtures/VueSingleFileComponentChanged.vue b/tests/fixtures/VueSingleFileComponentChanged.vue index 3291b0a..84bf141 100644 --- a/tests/fixtures/VueSingleFileComponentChanged.vue +++ b/tests/fixtures/VueSingleFileComponentChanged.vue @@ -13,7 +13,6 @@ } }, mounted(){ - console.log(this.message); }, methods: { mayLog(e) { diff --git a/tests/wrappers/VueWrapper-test.js b/tests/wrappers/VueWrapper-test.js index e0abc9e..f43840f 100644 --- a/tests/wrappers/VueWrapper-test.js +++ b/tests/wrappers/VueWrapper-test.js @@ -9,7 +9,7 @@ import VueSingleFileComponentChanged from '../fixtures/VueSingleFileComponentCha const mockReset = () => { return jest.fn() } -const makeReactInstanceWithVueComponent = (passedComponent, events) => { +const makeReactInstanceWithVueComponent = (passedComponent, events, fn) => { class ReactApp extends React.Component { constructor (props) { super(props) @@ -32,6 +32,7 @@ const makeReactInstanceWithVueComponent = (passedComponent, events) => { ref={ref => (this.vueWrapperRef = ref)} component={this.state.component} on={events} + fn={fn} message={this.state.message} reset={this.mockReset} /> @@ -117,7 +118,7 @@ describe('VueInReact', () => { * this test will fail. I'm trying to fixed it. */ it('dynamic change component while using a wrapper component', () => { - const reactAppInstance = makeReactInstanceWithVueComponent(VueSingleFileComponent) + const reactAppInstance = makeReactInstanceWithVueComponent(VueSingleFileComponent, null, fn) expect(document.body.innerHTML).toBe( normalizeHTMLString( `
@@ -130,9 +131,11 @@ describe('VueInReact', () => {
` ) ) - reactAppInstance.setState({ component: VueSingleFileComponentChanged }, () => { + reactAppInstance.setState({ component: VueSingleFileComponentChanged }) + + function fn () { expect(document.body.innerHTML).toContain('VueSingleFileComponentChanged') - }) + } }) it('wires up events correctly', () => { From 8810c32d12782a7d8bb4d5cadbc82e144757645f Mon Sep 17 00:00:00 2001 From: fanyer Date: Mon, 28 Oct 2019 01:35:09 +0800 Subject: [PATCH 3/3] update: exec when exists --- dist/vuera.cjs.js | 4 +++- dist/vuera.es.js | 4 +++- dist/vuera.iife.js | 4 +++- src/wrappers/Vue.js | 4 +++- 4 files changed, 12 insertions(+), 4 deletions(-) diff --git a/dist/vuera.cjs.js b/dist/vuera.cjs.js index 283f365..eaee83c 100644 --- a/dist/vuera.cjs.js +++ b/dist/vuera.cjs.js @@ -259,7 +259,9 @@ var VueContainer = function (_React$Component) { el: targetElement, data: props, updated: function updated() { - Vue.nextTick(props.fn); + if (props.fn) { + Vue.nextTick(props.fn); + } }, render: function render(createElement) { return createElement(VUE_COMPONENT_NAME, { diff --git a/dist/vuera.es.js b/dist/vuera.es.js index 734228d..da4358b 100644 --- a/dist/vuera.es.js +++ b/dist/vuera.es.js @@ -253,7 +253,9 @@ var VueContainer = function (_React$Component) { el: targetElement, data: props, updated: function updated() { - Vue.nextTick(props.fn); + if (props.fn) { + Vue.nextTick(props.fn); + } }, render: function render(createElement) { return createElement(VUE_COMPONENT_NAME, { diff --git a/dist/vuera.iife.js b/dist/vuera.iife.js index c3c7520..818745e 100644 --- a/dist/vuera.iife.js +++ b/dist/vuera.iife.js @@ -256,7 +256,9 @@ var VueContainer = function (_React$Component) { el: targetElement, data: props, updated: function updated() { - Vue.nextTick(props.fn); + if (props.fn) { + Vue.nextTick(props.fn); + } }, render: function render(createElement) { return createElement(VUE_COMPONENT_NAME, { diff --git a/src/wrappers/Vue.js b/src/wrappers/Vue.js index 55da71c..41418e7 100644 --- a/src/wrappers/Vue.js +++ b/src/wrappers/Vue.js @@ -66,7 +66,9 @@ export default class VueContainer extends React.Component { el: targetElement, data: props, updated () { - Vue.nextTick(props.fn) + if (props.fn) { + Vue.nextTick(props.fn) + } }, render (createElement) { return createElement(