First approach to test '_slug.spec.js'

This commit is contained in:
Wolfgang Huß 2019-05-29 12:19:51 +02:00
parent 7807831e0e
commit 19771a342e
4 changed files with 157 additions and 194 deletions

View File

@ -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: {
confirm: () => Post.methods.deletePostCallback('list'),
cancel: null,
},
// callbacks: {
// confirm: () => Post.methods.deletePostCallback('list'),
// cancel: null,
// },
}
mocks = {
$t: jest.fn(),
@ -74,10 +75,10 @@ describe('DeleteModal.vue', () => {
type: 'contribution',
id: 'p23',
name: 'It is a post',
callbacks: {
confirm: () => Post.methods.deletePostCallback('list'),
cancel: null,
},
// callbacks: {
// confirm: () => Post.methods.deletePostCallback('list'),
// cancel: null,
// },
}
})
@ -102,10 +103,10 @@ describe('DeleteModal.vue', () => {
type: 'comment',
id: 'c3',
name: 'It is the user of the comment',
callbacks: {
confirm: () => Post.methods.deletePostCallback('list'),
cancel: null,
},
// callbacks: {
// confirm: () => Post.methods.deletePostCallback('list'),
// cancel: null,
// },
}
})
@ -146,10 +147,10 @@ describe('DeleteModal.vue', () => {
propsData = {
type: 'contribution',
id: 'p23',
callbacks: {
confirm: () => Post.methods.deletePostCallback('list'),
cancel: null,
},
// callbacks: {
// confirm: () => Post.methods.deletePostCallback('list'),
// cancel: null,
// },
}
wrapper = Wrapper()
})
@ -219,10 +220,10 @@ describe('DeleteModal.vue', () => {
propsData = {
type: 'comment',
id: 'c3',
callbacks: {
confirm: () => Post.methods.deletePostCallback('list'),
cancel: null,
},
// callbacks: {
// confirm: () => Post.methods.deletePostCallback('list'),
// cancel: null,
// },
}
wrapper = Wrapper()
})

View File

@ -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
}

View File

@ -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 = {
id: 'p23',
}
// post = {
// 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()
})
})
})

View File

@ -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 router = new VueRouter({ routes })
const 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: () => {},
@ -42,70 +54,83 @@ describe('PostSlug', () => {
// describe('shallowMount', () => {
// Wrapper = () => {
// return shallowMount(PostSlug, { propsData, mocks, localVue, router })
// return shallowMount(PostSlug, {
// propsData,
// mocks,
// localVue,
// router,
// })
// }
// describe('defaults', () => {
// it('success false', () => {
// console.log(Wrapper().vm)
// expect(Wrapper().vm.success).toBe(false)
// })
// it('loading false', () => {
// expect(Wrapper().vm.loading).toBe(false)
// })
// })
// describe('given a post', () => {
// beforeEach(() => {
// propsData = {
// type: 'contribution',
// id: 'p23',
// name: 'It is a post'
// // callbacks: {
// // confirm: () => Post.methods.deletePostCallback('list'),
// // cancel: null
// // propsData = {
// // 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',
// },
// }
// })
// it('mentions post title', () => {
// Wrapper()
// wrapper = Wrapper()
// wrapper.vm.deletePostCallback('list')
// console.log('mocks.$t: ', mocks.$t)
// const calls = mocks.$t.mock.calls
// const expected = [
// ['delete.contribution.message', { name: 'It is a post' }]
// [
// 'delete.contribution.message',
// {
// name: 'It is a post',
// },
// ],
// ]
// 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
// // 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))
// })
// })
// // 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"', () => {
expect(wrapper.emitted().deletePost).toBeTruthy()
it('not emits "deletePost"', () => {
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))
// })
// })
// })
})
})