Merge pull request #244 from vuejs/class-component

wip: class component support

Author: lmiller1990

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"
   },

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) {

tests/components/ClassComponent.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="hello">
+    <h1 data-computed>{{ computedMsg }}</h1>
+    <h2 data-props>{{ msg }}</h2>
+    <h3 data-methods>{{ dataText }}</h3>
+    <button @click="changeMessage('Hello')" />
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component'
+@Options({
+  props: {
+    msg: String
+  }
+})
+export default class ClassComponent extends Vue {
+  dataText: string = ''
+  get computedMsg(): string {
+    return `Message: ${(this.$props as any).msg}`
+  }
+
+  changeMessage(text: string): void {
+    this.dataText = 'Updated'
+  }
+}
+</script>

tests/features/classComponent.spec.ts

@@ -2,23 +2,107 @@ 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('<div>answer is 42</div>')
+  })
+
+  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('<div>answer is 42</div>')
+  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('<div>content</div>')
+    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, {
+      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('[data-methods]').text()).toBe('Updated')
+  })
 })

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"