From 042f93574a9cfee72a11459d01ab572edd18d047 Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Thu, 12 Nov 2020 23:40:53 +1000 Subject: [PATCH 1/4] wip: class component support --- src/utils.ts | 8 +- tests/components/ClassComponent.vue | 25 +++++++ tests/features/classComponent.spec.ts | 103 +++++++++++++++++++++++--- 3 files changed, 123 insertions(+), 13 deletions(-) create mode 100644 tests/components/ClassComponent.vue diff --git a/src/utils.ts b/src/utils.ts index 6a7673c00..52d32f287 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -66,7 +66,13 @@ export const mergeDeep = ( } export function isClassComponent(component: any) { - return '__vccBase' in component + // TypeScript + return ( + component.toString().includes('_super.apply(this, arguments) || this') || + // native ES6 + (typeof component === 'function' && + /^\s*class\s+/.test(component.toString())) + ) } export function isFunctionalComponent(component: any) { diff --git a/tests/components/ClassComponent.vue b/tests/components/ClassComponent.vue new file mode 100644 index 000000000..ad36d197a --- /dev/null +++ b/tests/components/ClassComponent.vue @@ -0,0 +1,25 @@ + + + \ No newline at end of file diff --git a/tests/features/classComponent.spec.ts b/tests/features/classComponent.spec.ts index 3b4fdb436..c8449b7be 100644 --- a/tests/features/classComponent.spec.ts +++ b/tests/features/classComponent.spec.ts @@ -2,23 +2,102 @@ import 'reflect-metadata' import { h } from 'vue' import { Options, Vue } from 'vue-class-component' import { mount } from '../../src' +import ClassComponent from '../components/ClassComponent.vue' -test('data: $props should be available', () => { - @Options({ - props: ['foo'] +describe('class component', () => { + it('minimal class component', () => { + class Foo extends Vue { + render() { + return h('span') + } + } + const wrapper = mount(Foo) + expect(wrapper.find('span').exists()).toBe(true) }) - class MyComp extends Vue { - message = 'answer is ' + (this.$props as any).foo - render() { - return h('div', this.message) + + it('data: $props should be available', () => { + @Options({ + props: ['foo'] + }) + class MyComp extends Vue { + message = 'answer is ' + (this.$props as any).foo + render() { + return h('div', this.message) + } } - } - const wrapper = mount(MyComp, { - props: { - foo: 42 + const wrapper = mount(MyComp, { + props: { + foo: 42 + } + }) + + expect(wrapper.html()).toBe('
answer is 42
') + }) + + it('hooks', () => { + let created = false + class MyComp extends Vue { + created() { + created = true + } + render() { + return h('div') + } } + mount(MyComp) + expect(created).toBe(true) }) - expect(wrapper.html()).toBe('
answer is 42
') + it('methods', () => { + let msg: string = '' + + class MyComp extends Vue { + hello() { + msg = 'hi' + } + content() { + return 'content' + } + render() { + return h('div', this.content()) + } + } + + const wrapper = mount(MyComp) + wrapper.vm.hello() + expect(wrapper.html()).toBe('
content
') + expect(msg).toBe('hi') + }) + + it('computed', () => { + class MyComp extends Vue { + a!: number + data() { + return { + a: 1 + } + } + get b() { + return this.a + 1 + } + render() { + return h('div') + } + } + + const wrapper = mount(MyComp) + expect(wrapper.vm.a).toBe(1) + expect(wrapper.vm.b).toBe(2) + wrapper.vm.a = 2 + expect(wrapper.vm.b).toBe(3) + }) + + it('works with shallow mount and SFC', async () => { + const wrapper = mount(ClassComponent, { + shallow: true + }) + await wrapper.get('button').trigger('click') + expect(wrapper.get('h1').text()).toMatch('Hello') + }) }) From 953307475db89b7050d9b9e25c40594f4981c417 Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Mon, 16 Nov 2020 20:54:03 +1000 Subject: [PATCH 2/4] tests: add more thorough tests for class component --- tests/components/ClassComponent.vue | 8 +++++--- tests/features/classComponent.spec.ts | 9 +++++++-- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/tests/components/ClassComponent.vue b/tests/components/ClassComponent.vue index ad36d197a..d0a2183b0 100644 --- a/tests/components/ClassComponent.vue +++ b/tests/components/ClassComponent.vue @@ -1,6 +1,8 @@ @@ -13,13 +15,13 @@ import { Options, Vue } from 'vue-class-component' } }) export default class ClassComponent extends Vue { - dataText: string + dataText: string = '' get computedMsg(): string { return `Message: ${(this.$props as any).msg}` } changeMessage(text: string): void { - this.dataText = text + this.dataText = 'Updated' } } \ No newline at end of file diff --git a/tests/features/classComponent.spec.ts b/tests/features/classComponent.spec.ts index c8449b7be..1e2327591 100644 --- a/tests/features/classComponent.spec.ts +++ b/tests/features/classComponent.spec.ts @@ -93,11 +93,16 @@ describe('class component', () => { expect(wrapper.vm.b).toBe(3) }) - it('works with shallow mount and SFC', async () => { + it.only('works with shallow mount and SFC', async () => { const wrapper = mount(ClassComponent, { + props: { + msg: 'Props Message' + }, shallow: true }) + expect(wrapper.get('[data-computed]').text()).toBe('Message: Props Message') + expect(wrapper.get('[data-props]').text()).toBe('Props Message') await wrapper.get('button').trigger('click') - expect(wrapper.get('h1').text()).toMatch('Hello') + expect(wrapper.get('[data-methods]').text()).toBe('Updated') }) }) From 6b703564ca9099acb50847c28fa526785e1cb3f0 Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Mon, 16 Nov 2020 20:59:29 +1000 Subject: [PATCH 3/4] tests: remove only --- tests/features/classComponent.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/features/classComponent.spec.ts b/tests/features/classComponent.spec.ts index 1e2327591..0dd834a7a 100644 --- a/tests/features/classComponent.spec.ts +++ b/tests/features/classComponent.spec.ts @@ -93,7 +93,7 @@ describe('class component', () => { expect(wrapper.vm.b).toBe(3) }) - it.only('works with shallow mount and SFC', async () => { + it('works with shallow mount and SFC', async () => { const wrapper = mount(ClassComponent, { props: { msg: 'Props Message' From e589a4429228d36ab18cd347e0da090d0d1628d2 Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Tue, 17 Nov 2020 19:34:55 +1000 Subject: [PATCH 4/4] deps: bump vue-jest --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index ced0ad8a9..0ef6aa16f 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "typescript": "^3.7.5", "vue": "^3.0.2", "vue-class-component": "^8.0.0-beta.4", - "vue-jest": "^5.0.0-alpha.5", + "vue-jest": "^5.0.0-alpha.6", "vue-router": "^4.0.0-rc.1", "vuex": "^4.0.0-beta.4" }, diff --git a/yarn.lock b/yarn.lock index bd98d84da..ca65ab0cd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6164,10 +6164,10 @@ vue-class-component@^8.0.0-beta.4: resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-8.0.0-beta.4.tgz#bff95cdd44eb450a4a4e54b69da22099613d8071" integrity sha512-+QXBhVH/Mz8dEC+IU7e8XXM54Tn0Aj9/saybeuK8XmhQiJlcijCB8kB7CYpBEMpHWaA+DoLr6LvHMbclYRCwZQ== -vue-jest@^5.0.0-alpha.5: - version "5.0.0-alpha.5" - resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-5.0.0-alpha.5.tgz#a24b7569ba2078836a316033f283e151afc4906b" - integrity sha512-/ddNgiJYEtStK4kfTgIRSpBrkkrFepsCyu6qhIi2ph8rJk8OaI6HJANMjzD2tz2mnGqQOf0mTyZICVfDnLLZHA== +vue-jest@^5.0.0-alpha.6: + version "5.0.0-alpha.6" + resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-5.0.0-alpha.6.tgz#76615809ba84278e7cd3b7d6d3cc7f18caa2e893" + integrity sha512-B0GtGnAZhdS51hoLMqAQimO0574sPBHAyev8YNFNioKk1TbAMCUfDoUDxkPvVKXxeKdWBnXA+kgR9+KP1FizXA== dependencies: "@babel/plugin-transform-modules-commonjs" "^7.2.0" chalk "^2.1.0"