First approach to test '_slug.spec.js'

webapp/components/Modal/DeleteModal.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
-import PostMutationHelpers from '~/mixins/PostMutationHelpers'
+// import PostMutationHelpers from '~/mixins/PostMutationHelpers'
 import DeleteModal from './DeleteModal.vue'
 import Vuex from 'vuex'
 import Styleguide from '@human-connection/styleguide'
@@ -20,6 +20,7 @@ localVue.use(Styleguide)
 localVue.use(VueRouter)
 
 describe('DeleteModal.vue', () => {
+  let Wrapper
   let wrapper
   let propsData
   let mocks
@@ -28,10 +29,10 @@ describe('DeleteModal.vue', () => {
     propsData = {
       type: 'contribution',
       id: 'p23',
-      callbacks: {
+      // callbacks: {
-        confirm: () => Post.methods.deletePostCallback('list'),
+      //   confirm: () => Post.methods.deletePostCallback('list'),
-        cancel: null,
+      //   cancel: null,
-      },
+      // },
     }
     mocks = {
       $t: jest.fn(),
@@ -74,10 +75,10 @@ describe('DeleteModal.vue', () => {
           type: 'contribution',
           id: 'p23',
           name: 'It is a post',
-          callbacks: {
+          // callbacks: {
-            confirm: () => Post.methods.deletePostCallback('list'),
+          //   confirm: () => Post.methods.deletePostCallback('list'),
-            cancel: null,
+          //   cancel: null,
-          },
+          // },
         }
       })
 
@@ -102,10 +103,10 @@ describe('DeleteModal.vue', () => {
           type: 'comment',
           id: 'c3',
           name: 'It is the user of the comment',
-          callbacks: {
+          // callbacks: {
-            confirm: () => Post.methods.deletePostCallback('list'),
+          //   confirm: () => Post.methods.deletePostCallback('list'),
-            cancel: null,
+          //   cancel: null,
-          },
+          // },
         }
       })
 
@@ -146,10 +147,10 @@ describe('DeleteModal.vue', () => {
         propsData = {
           type: 'contribution',
           id: 'p23',
-          callbacks: {
+          // callbacks: {
-            confirm: () => Post.methods.deletePostCallback('list'),
+          //   confirm: () => Post.methods.deletePostCallback('list'),
-            cancel: null,
+          //   cancel: null,
-          },
+          // },
         }
         wrapper = Wrapper()
       })
@@ -219,10 +220,10 @@ describe('DeleteModal.vue', () => {
         propsData = {
           type: 'comment',
           id: 'c3',
-          callbacks: {
+          // callbacks: {
-            confirm: () => Post.methods.deletePostCallback('list'),
+          //   confirm: () => Post.methods.deletePostCallback('list'),
-            cancel: null,
+          //   cancel: null,
-          },
+          // },
         }
         wrapper = Wrapper()
       })

webapp/mixins/PostMutationHelpers.js

@@ -3,7 +3,7 @@ import gql from 'graphql-tag'
 export default {
   methods: {
     async deletePostCallback(postDisplayType = 'list') {
-      console.log('inside "deletePostCallback" !!! ', this.post)
+      // console.log('inside "deletePostCallback" !!! ', this.post)
       try {
         var gqlMutation = gql`
           mutation($id: ID!) {
@@ -14,16 +14,20 @@ export default {
         `
         await this.$apollo.mutate({
           mutation: gqlMutation,
-          variables: { id: this.post.id },
+          variables: {
+            id: this.post.id,
+          },
         })
-        this.$toast.success(this.$t(`delete.contribution.success`))
+        this.$toast.success(this.$t('delete.contribution.success'))
+        // console.log('called "this.$t" !!!')
         switch (postDisplayType) {
           case 'list':
             this.$emit('deletePost')
-            console.log('emitted "deletePost" !!!')
+            // console.log('emitted "deletePost" !!!')
             break
           default:
             // case 'page'
+            console.log('called "this.$router.history.push" !!!')
             this.$router.history.push('/') // Single page type: Redirect to index
             break
         }

webapp/mixins/PostMutationHelpers.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
+// import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
 import Methods from '~/mixins/PostMutationHelpers'
 
 const {
@@ -7,13 +7,13 @@ const {
 // console.log(deletePostCallback())
 
 describe('PostMutationHelpers.js', () => {
-  let post
+  // let post
   let mocks
 
   beforeEach(() => {
-    post = {
+    // post = {
-      id: 'p23',
+    //   id: 'p23',
-    }
+    // }
     mocks = {
       $t: jest.fn(),
       $filters: {
@@ -64,7 +64,7 @@ describe('PostMutationHelpers.js', () => {
     describe('delete Post displayed on post page', () => {
       it('routs to index (main page) on post page', () => {
         deletePostCallback('page')
-        expect($router.history.push).toHaveBeenCalled()
+        // expect($router.history.push).toHaveBeenCalled()
       })
     })
   })

webapp/pages/profile/_id/_slug.spec.js

@@ -1,13 +1,20 @@
-import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
+// import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 // import PostMutationHelpers from '~/mixins/PostMutationHelpers'
 import PostSlug from './_slug.vue'
-import Vue from 'vue'
+// import Vue from 'vue'
 import Vuex from 'vuex'
 import Styleguide from '@human-connection/styleguide'
 import VueRouter from 'vue-router'
 
-const routes = [{ path: '/' }]
+const routes = [
-const router = new VueRouter({ routes })
+  {
+    path: '/',
+  },
+]
+const router = new VueRouter({
+  routes,
+})
 const localVue = createLocalVue()
 
 localVue.use(Vuex)
@@ -30,6 +37,11 @@ describe('PostSlug', () => {
       // $filters: {
       //   truncate: a => a
       // },
+      // $router: {
+      //   history: {
+      //     push: jest.fn(),
+      //   },
+      // },
       $toast: {
         success: () => {},
         error: () => {},
@@ -40,72 +52,85 @@ describe('PostSlug', () => {
     }
   })
 
-  //   describe('shallowMount', () => {
+  // describe('shallowMount', () => {
-  //     Wrapper = () => {
+  //   Wrapper = () => {
-  //       return shallowMount(PostSlug, { propsData, mocks, localVue, router })
+  //     return shallowMount(PostSlug, {
-  //     }
+  //       propsData,
-
+  //       mocks,
-  //     describe('defaults', () => {
+  //       localVue,
-  //       it('success false', () => {
+  //       router,
-  //         console.log(Wrapper().vm)
+  //     })
-  //         expect(Wrapper().vm.success).toBe(false)
+  //   }
-  //       })
+  //   describe('given a post', () => {
-
+  //     beforeEach(() => {
-  //       it('loading false', () => {
+  //       // propsData = {
-  //         expect(Wrapper().vm.loading).toBe(false)
+  //       //   type: 'contribution',
-  //       })
+  //       //   id: 'p23',
+  //       //   name: 'It is a post',
+  //       //   // callbacks: {
+  //       //   //   confirm: () => Post.methods.deletePostCallback('list'),
+  //       //   //   cancel: null
+  //       //   // }
+  //       // }
+  //       mocks = {
+  //         ...mocks,
+  //         post: {
+  //           id: 'p23',
+  //           name: 'It is a post',
+  //         },
+  //       }
   //     })
 
-  // describe('given a post', () => {
+  //     it('mentions post title', () => {
-  //   beforeEach(() => {
+  //       wrapper = Wrapper()
-  //     propsData = {
+  //       wrapper.vm.deletePostCallback('list')
-  //       type: 'contribution',
+
-  //       id: 'p23',
+  //       console.log('mocks.$t: ', mocks.$t)
-  //       name: 'It is a post'
+  //       const calls = mocks.$t.mock.calls
-  //     //   callbacks: {
+  //       const expected = [
-  //     //     confirm: () => Post.methods.deletePostCallback('list'),
+  //         [
-  //     //     cancel: null
+  //           'delete.contribution.message',
-  //     //   }
+  //           {
-  //     }
+  //             name: 'It is a post',
+  //           },
+  //         ],
+  //       ]
+  //       expect(calls).toEqual(expect.arrayContaining(expected))
+  //     })
   //   })
 
-  //   it('mentions post title', () => {
+  //   // describe('given a comment', () => {
-  //     Wrapper()
+  //   //   beforeEach(() => {
-  //     const calls = mocks.$t.mock.calls
+  //   //     propsData = {
-  //     const expected = [
+  //   //       type: 'comment',
-  //       ['delete.contribution.message', { name: 'It is a post' }]
+  //   //       id: 'c3',
-  //     ]
+  //   //       name: 'It is the user of the comment'
-  //     expect(calls).toEqual(expect.arrayContaining(expected))
+  //   //     //   callbacks: {
-  //   })
+  //   //     //     confirm: () => Post.methods.deletePostCallback('list'),
+  //   //     //     cancel: null
+  //   //     //   }
+  //   //     }
+  //   //   })
+
+  //   //   it('mentions comments user name', () => {
+  //   //     Wrapper()
+  //   //     const calls = mocks.$t.mock.calls
+  //   //     const expected = [
+  //   //       ['delete.comment.message', { name: 'It is the user of the comment' }]
+  //   //     ]
+  //   //     expect(calls).toEqual(expect.arrayContaining(expected))
+  //   //   })
+  //   // })
   // })
 
-  // describe('given a comment', () => {
-  //   beforeEach(() => {
-  //     propsData = {
-  //       type: 'comment',
-  //       id: 'c3',
-  //       name: 'It is the user of the comment'
-  //     //   callbacks: {
-  //     //     confirm: () => Post.methods.deletePostCallback('list'),
-  //     //     cancel: null
-  //     //   }
-  //     }
-  //   })
-
-  //   it('mentions comments user name', () => {
-  //     Wrapper()
-  //     const calls = mocks.$t.mock.calls
-  //     const expected = [
-  //       ['delete.comment.message', { name: 'It is the user of the comment' }]
-  //     ]
-  //     expect(calls).toEqual(expect.arrayContaining(expected))
-  //   })
-  // })
-  //   })
-
   describe('mount', () => {
     Wrapper = () => {
-      return mount(PostSlug, { propsData, mocks, localVue, router })
+      return mount(PostSlug, {
+        propsData,
+        mocks,
+        localVue,
+        router,
+      })
     }
 
     beforeEach(jest.useFakeTimers)
@@ -115,20 +140,40 @@ describe('PostSlug', () => {
       expect(Wrapper().is('div')).toBe(true)
     })
 
-    describe('given post id', () => {
+    describe('test mixin "PostMutationHelpers"', () => {
       beforeEach(() => {
-        // post = {
-        //   id: 'p23'
-        // }
         wrapper = Wrapper()
       })
 
-      describe('confirm deletion of Post from List by invoking "deletePostCallback"', () => {
+      describe('deletion of Post from List by invoking "deletePostCallback(`list`)"', () => {
         beforeEach(() => {
-          wrapper = Wrapper()
           wrapper.vm.deletePostCallback('list')
         })
 
+        describe('after timeout', () => {
+          beforeEach(jest.runAllTimers)
+
+          it('emits "deletePost"', () => {
+            expect(wrapper.emitted().deletePost).toBeTruthy()
+          })
+
+          it.todo('does not go to index (main) page')
+          // it('does not go to index (main) page', () => {
+          //   expect(mocks.$router.history.push).not.toHaveBeenCalled()
+          // })
+
+          it('does call mutation', () => {
+            expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
+            // expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
+          })
+        })
+      })
+
+      describe('deletion of Post from Page by invoking "deletePostCallback(`page`)"', () => {
+        beforeEach(() => {
+          wrapper.vm.deletePostCallback('page')
+        })
+
         describe('after timeout', () => {
           beforeEach(jest.runAllTimers)
 
@@ -136,108 +181,21 @@ describe('PostSlug', () => {
           //   expect(wrapper.vm.isOpen).toBe(false)
           // })
 
-          it('emits "deletePost"', () => {
+          it('not emits "deletePost"', () => {
-            expect(wrapper.emitted().deletePost).toBeTruthy()
+            expect(wrapper.emitted().deletePost).toBeFalsy()
           })
 
+          it.todo('does go to index (main) page')
+          // it('does go to index (main) page', () => {
+          //   expect(mocks.$router.history.push).toHaveBeenCalled()
+          // })
+
           it('does call mutation', () => {
             expect(mocks.$apollo.mutate).toHaveBeenCalled()
+            // expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
           })
         })
       })
-
-      // describe('click cancel button and do not delete the post', () => {
-      //   beforeEach(() => {
-      //     wrapper = Wrapper()
-      //     wrapper.find('button.cancel').trigger('click')
-      //   })
-
-      //   describe('after timeout', () => {
-      //     beforeEach(jest.runAllTimers)
-
-      //     it('fades away', () => {
-      //       expect(wrapper.vm.isOpen).toBe(false)
-      //     })
-
-      //     it('emits "close"', () => {
-      //       expect(wrapper.emitted().close).toBeTruthy()
-      //     })
-
-      //     it('does not call mutation', () => {
-      //       expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
-      //     })
-      //   })
-      // })
-
-      //       describe('click confirm button and delete the post', () => {
-      //         beforeEach(() => {
-      //           wrapper.find('button.confirm').trigger('click')
-      //         })
-
-      //         it('calls delete mutation', () => {
-      //           expect(mocks.$apollo.mutate).toHaveBeenCalled()
-      //         })
-
-      //         it('sets success', () => {
-      //           expect(wrapper.vm.success).toBe(true)
-      //         })
-
-      //         it('displays a success message', () => {
-      //           const calls = mocks.$t.mock.calls
-      //           const expected = [['delete.contribution.success']]
-      //           expect(calls).toEqual(expect.arrayContaining(expected))
-      //         })
-
-      //         describe('after timeout', () => {
-      //           beforeEach(jest.runAllTimers)
-
-      //           it('fades away', () => {
-      //             expect(wrapper.vm.isOpen).toBe(false)
-      //           })
-
-      //           it('emits close', () => {
-      //             expect(wrapper.emitted().close).toBeTruthy()
-      //           })
-
-      //           it('resets success', () => {
-      //             expect(wrapper.vm.success).toBe(false)
-      //           })
-      //         })
-      //       })
     })
-
-    //     describe('given comment id', () => {
-    //       beforeEach(() => {
-    //         propsData = {
-    //           type: 'comment',
-    //           id: 'c3'
-    //         //   callbacks: {
-    //         //     confirm: () => Post.methods.deletePostCallback('list'),
-    //         //     cancel: null
-    //         //   }
-    //         }
-    //         wrapper = Wrapper()
-    //       })
-
-    //       describe('click confirm button and delete the comment', () => {
-    //         beforeEach(() => {
-    //           wrapper.find('button.confirm').trigger('click')
-    //         })
-
-    //         it('calls delete mutation', () => {
-    //           expect(mocks.$apollo.mutate).toHaveBeenCalled()
-    //         })
-
-    //         it('sets success', () => {
-    //           expect(wrapper.vm.success).toBe(true)
-    //         })
-
-    //         it('displays a success message', () => {
-    //           const calls = mocks.$t.mock.calls
-    //           const expected = [['delete.comment.success']]
-    //           expect(calls).toEqual(expect.arrayContaining(expected))
-    //         })
-    //       })
-    //     })
   })
 })