Refactored three quater of the tests

This commit is contained in:
Wolfgang Huß 2019-05-29 17:59:07 +02:00
parent 19771a342e
commit 3e3e447bc5
7 changed files with 149 additions and 321 deletions

View File

@ -1,25 +1,14 @@
import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
// import PostMutationHelpers from '~/mixins/PostMutationHelpers'
import DeleteModal from './DeleteModal.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 localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(Styleguide)
localVue.use(VueRouter)
describe('DeleteModal.vue', () => {
describe('DeleteModal', () => {
let Wrapper
let wrapper
let propsData
@ -29,23 +18,17 @@ describe('DeleteModal.vue', () => {
propsData = {
type: 'contribution',
id: 'p23',
// callbacks: {
// confirm: () => Post.methods.deletePostCallback('list'),
// cancel: null,
// },
name: 'It is a post',
callbacks: {
confirm: jest.fn(),
cancel: jest.fn(),
},
}
mocks = {
$t: jest.fn(),
$filters: {
truncate: a => a,
},
$toast: {
success: () => {},
error: () => {},
},
$apollo: {
mutate: jest.fn().mockResolvedValue(),
},
}
})
@ -55,35 +38,35 @@ describe('DeleteModal.vue', () => {
propsData,
mocks,
localVue,
router,
})
}
describe('defaults', () => {
beforeEach(() => {
wrapper = Wrapper()
})
it('success false', () => {
expect(Wrapper().vm.success).toBe(false)
expect(wrapper.vm.success).toBe(false)
})
it('loading false', () => {
expect(Wrapper().vm.loading).toBe(false)
expect(wrapper.vm.loading).toBe(false)
})
})
describe('given a post', () => {
beforeEach(() => {
propsData = {
...propsData,
type: 'contribution',
id: 'p23',
name: 'It is a post',
// callbacks: {
// confirm: () => Post.methods.deletePostCallback('list'),
// cancel: null,
// },
}
wrapper = Wrapper()
})
it('mentions post title', () => {
Wrapper()
const calls = mocks.$t.mock.calls
const expected = [
[
@ -100,18 +83,15 @@ describe('DeleteModal.vue', () => {
describe('given a comment', () => {
beforeEach(() => {
propsData = {
...propsData,
type: 'comment',
id: 'c3',
id: 'c4',
name: 'It is the user of the comment',
// callbacks: {
// confirm: () => Post.methods.deletePostCallback('list'),
// cancel: null,
// },
}
wrapper = Wrapper()
})
it('mentions comments user name', () => {
Wrapper()
const calls = mocks.$t.mock.calls
const expected = [
[
@ -132,32 +112,18 @@ describe('DeleteModal.vue', () => {
propsData,
mocks,
localVue,
router,
})
}
beforeEach(jest.useFakeTimers)
it('renders', () => {
expect(Wrapper().is('div')).toBe(true)
})
describe('given post id', () => {
beforeEach(() => {
propsData = {
type: 'contribution',
id: 'p23',
// callbacks: {
// confirm: () => Post.methods.deletePostCallback('list'),
// cancel: null,
// },
}
wrapper = Wrapper()
})
describe('click cancel button and do not delete the post', () => {
describe('click cancel button', () => {
beforeEach(() => {
wrapper = Wrapper()
wrapper.find('button.cancel').trigger('click')
})
@ -168,35 +134,25 @@ describe('DeleteModal.vue', () => {
expect(wrapper.vm.isOpen).toBe(false)
})
it('emits "close"', () => {
expect(wrapper.emitted().close).toBeTruthy()
it('does call the cancel callback', () => {
expect(propsData.callbacks.cancel).toHaveBeenCalledTimes(1)
})
it('does not call mutation', () => {
expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
it('emits "close"', () => {
expect(wrapper.emitted().close).toBeTruthy()
})
})
})
describe('click confirm button and delete the post', () => {
describe('click confirm button', () => {
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)
@ -204,6 +160,9 @@ describe('DeleteModal.vue', () => {
expect(wrapper.vm.isOpen).toBe(false)
})
it('does call the confirm callback', () => {
expect(propsData.callbacks.confirm).toHaveBeenCalledTimes(1)
})
it('emits close', () => {
expect(wrapper.emitted().close).toBeTruthy()
})
@ -214,39 +173,5 @@ describe('DeleteModal.vue', () => {
})
})
})
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))
})
})
})
})
})

View File

@ -24,13 +24,6 @@
:comment="comment"
@deleteComment="deleteComment(index)"
/>
<!-- <comment
is="comment-item"
v-for="(comment, index) in comments"
:key="comment.id"
:comment="comment"
v-on:remove="comments.splice(index, 1)"
/> -->
</div>
<hc-empty
v-else

View File

@ -27,8 +27,8 @@ export default {
break
default:
// case 'page'
console.log('called "this.$router.history.push" !!!')
this.$router.history.push('/') // Single page type: Redirect to index
// console.log('called "this.$router.history.push" !!!')
this.$router.history.push('/') // Single page type: Redirect to index (main) page
break
}
} catch (err) {

View File

@ -1,71 +0,0 @@
// import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
import Methods from '~/mixins/PostMutationHelpers'
const {
methods: { deletePostCallback },
} = Methods
// console.log(deletePostCallback())
describe('PostMutationHelpers.js', () => {
// let post
let mocks
beforeEach(() => {
// post = {
// id: 'p23',
// }
mocks = {
$t: jest.fn(),
$filters: {
truncate: a => a,
},
$emit: jest.fn(),
$router: {
history: {
push: jest.fn(),
},
},
$toast: {
success: () => {},
error: () => {},
},
$apollo: {
mutate: jest.fn().mockResolvedValue(),
},
}
})
describe('given post id', () => {
describe('delete post in general', () => {
beforeEach(() => {
deletePostCallback()
})
it('calls delete mutation', () => {
expect(mocks.$apollo.mutate).toHaveBeenCalled()
})
it('displays a success message', () => {
const calls = mocks.$t.mock.calls
const expected = [['delete.contribution.success']]
expect(calls).toEqual(expect.arrayContaining(expected))
})
it.todo('displays an error message')
})
describe('delete Post from list', () => {
it('calls delete in list', () => {
deletePostCallback('list')
expect(mocks.$emit).toHaveBeenCalled()
})
})
describe('delete Post displayed on post page', () => {
it('routs to index (main page) on post page', () => {
deletePostCallback('page')
// expect($router.history.push).toHaveBeenCalled()
})
})
})
})

View File

@ -0,0 +1,100 @@
import { config, shallowMount, createLocalVue } from '@vue/test-utils'
import PostSlug from './index.vue'
import Vuex from 'vuex'
import Styleguide from '@human-connection/styleguide'
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(Styleguide)
config.stubs['no-ssr'] = '<span><slot /></span>'
describe('PostSlug', () => {
let wrapper
let Wrapper
let store
let mocks
beforeEach(() => {
store = new Vuex.Store({
getters: {
'auth/user': () => {
return {}
},
},
})
mocks = {
$t: jest.fn(),
$filters: {
truncate: a => a,
},
// If you mocking router, than don't use VueRouter with lacalVue: https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html
$router: {
history: {
push: jest.fn(),
},
},
$toast: {
success: jest.fn(),
error: jest.fn(),
},
$apollo: {
mutate: jest.fn().mockResolvedValue(),
},
}
})
describe('shallowMount', () => {
Wrapper = () => {
return shallowMount(PostSlug, {
store,
mocks,
localVue,
})
}
beforeEach(jest.useFakeTimers)
describe('test mixin "PostMutationHelpers"', () => {
beforeEach(() => {
wrapper = Wrapper()
wrapper.setData({
post: {
id: 'p23',
name: 'It is a post',
author: {
id: 'u1',
},
},
})
})
describe('deletion of Post from Page by invoking "deletePostCallback(`page`)"', () => {
beforeEach(() => {
wrapper.vm.deletePostCallback('page')
})
describe('after timeout', () => {
beforeEach(jest.runAllTimers)
it('not emits "deletePost"', () => {
expect(wrapper.emitted().deletePost).toBeFalsy()
})
it('does go to index (main) page', () => {
expect(mocks.$router.history.push).toHaveBeenCalledTimes(1)
})
it('does call mutation', () => {
expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
})
it('mutation is successful', () => {
expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
})
})
})
})
})
})

View File

@ -94,6 +94,7 @@ import HcCommentList from '~/components/comments/CommentList'
import PostMutationHelpers from '~/mixins/PostMutationHelpers'
export default {
name: 'PostSlug',
transition: {
name: 'slide-up',
mode: 'out-in',

View File

@ -1,50 +1,34 @@
// 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 { shallowMount, createLocalVue } from '@vue/test-utils'
import ProfileSlug from './_slug.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 localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(Styleguide)
localVue.use(VueRouter)
describe('PostSlug', () => {
describe('ProfileSlug', () => {
let wrapper
let Wrapper
let propsData
let mocks
beforeEach(() => {
propsData = {}
mocks = {
post: {
id: 'p23',
name: 'It is a post',
},
$t: jest.fn(),
// $filters: {
// truncate: a => a
// },
// $router: {
// history: {
// push: jest.fn(),
// },
// },
// If you mocking router, than don't use VueRouter with lacalVue: https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html
$router: {
history: {
push: jest.fn(),
},
},
$toast: {
success: () => {},
error: () => {},
success: jest.fn(),
error: jest.fn(),
},
$apollo: {
mutate: jest.fn().mockResolvedValue(),
@ -52,94 +36,16 @@ describe('PostSlug', () => {
}
})
// describe('shallowMount', () => {
// Wrapper = () => {
// return shallowMount(PostSlug, {
// propsData,
// mocks,
// localVue,
// router,
// })
// }
// describe('given a post', () => {
// beforeEach(() => {
// // 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.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',
// },
// ],
// ]
// 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', () => {
describe('shallowMount', () => {
Wrapper = () => {
return mount(PostSlug, {
propsData,
return shallowMount(ProfileSlug, {
mocks,
localVue,
router,
})
}
beforeEach(jest.useFakeTimers)
it('renders', () => {
// console.log(Wrapper().vm)
expect(Wrapper().is('div')).toBe(true)
})
describe('test mixin "PostMutationHelpers"', () => {
beforeEach(() => {
wrapper = Wrapper()
@ -154,45 +60,19 @@ describe('PostSlug', () => {
beforeEach(jest.runAllTimers)
it('emits "deletePost"', () => {
expect(wrapper.emitted().deletePost).toBeTruthy()
expect(wrapper.emitted().deletePost.length).toBe(1)
})
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 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)
// it('fades away', () => {
// expect(wrapper.vm.isOpen).toBe(false)
// })
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)
it('mutation is successful', () => {
expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
})
})
})