comment form

src/components/comments/CommentForm.vue

 <template>
   <q-card flat>
     <q-form
+    autofocus
       class="q-pb-md"
       ref="commentForm"
       @submit="handleSubmit"
+      @reset="handleReset"
     >
       <div class="text-caption">
         Leave your comment here:
@@ -21,10 +23,10 @@
         <q-btn
           ref="sendCommentBtn"
           label="Send"
+          type="submit"
           color="teal-3"
           text-color="white"
           icon="email"
-          type="submit"
         />
       </div>
     </q-form>
@@ -40,12 +42,13 @@ export default {
     };
   },
   methods: {
-    handleSubmit () {
+    handleSubmit (e) {
+      console.log('submit')
       this.$emit('comment', {
         body: this.commentBody
       })
     },
-    handleReset () {
+    handleReset (e) {
       this.commentBody = ''
     }
   }

test/jest/__tests__/components/comments/CommentForm.spec.js

@@ -47,15 +47,17 @@ describe('Mount CommentForm', () => {
     expect(wrapper.text()).toContain('Leave your comment here:');
   });
 
-  it('it allows to add a comment in the textfield', () => {
-    const mockfn = jest.fn();
-    wrapper.setMethods({ handleSubmit: mockfn });
+  it('it allows to add a comment in the textfield', async () => {
     wrapper
       .find({ ref: 'commentTextarea' })
       .find('textarea')
       .setValue('Some comment');
+    wrapper.find({ref: 'commentTextarea'}).trigger('change')
     expect(vm.commentBody).toEqual('Some comment');
-    // wrapper.find({ ref: 'sendCommentBtn' }).trigger('click');
-    // expect(mockfn).toBeCalled();
+    const formVm = wrapper.find({ ref: 'commentForm' }).vm;
+    const ret = await formVm.validate();
+    expect(ret).toBeTruthy();
+    formVm.submit();
+    // expect(wrapper.emitted().comment).toBeDefined();
   });
 });