tests: add more thorough tests for class component

Author: lmiller1990

tests/components/ClassComponent.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="hello">
-    <h1>{{ computedMsg }}</h1>
+    <h1 data-computed>{{ computedMsg }}</h1>
+    <h2 data-props>{{ msg }}</h2>
+    <h3 data-methods>{{ dataText }}</h3>
     <button @click="changeMessage('Hello')" />
   </div>
 </template>
@@ -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'
   }
 }
 </script>

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')
   })
 })