ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Started to rewrite the tests of DeleteModal.vue

Browse Source
This commit is contained in:
Wolfgang Huß 2019-05-23 10:22:36 +02:00
parent 7e922fa0b0
commit 8bcb250951
15 changed files with 384 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/components/ContentMenu.vue
View File

@ -61,7 +61,7 @@ export default {
return value.match(/(contribution|comment|organization|user)/)
}
},
callbacks: { type: Object, default: () => {} }
callbacks: { type: Object, required: true }
},
computed: {
routes() {

5
webapp/components/Modal.vue
View File

@ -6,6 +6,7 @@
:id="data.resource.id"
:type="data.type"
:name="name"
:callbacks="data.callbacks"
@close="close"
/>
<report-modal
@ -13,15 +14,15 @@
:id="data.resource.id"
:type="data.type"
:name="name"
:callbacks="data.callbacks"
@close="close"
/>
<delete-modal
v-if="open === 'delete'"
:id="data.resource.id"
:type="data.type"
:confirm-callback="data.callbacks.confirm"
:cancel-callback="!!data.callbacks.cancel ? data.callbacks.cancel : null"
:name="name"
:callbacks="data.callbacks"
@close="close"
/>
</div>

31
webapp/components/Modal/DeleteModal.spec.js
View File

@ -1,4 +1,5 @@
import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
import PostMutationHelpers from '~/mixins/PostMutationHelpers'
import DeleteModal from './DeleteModal.vue'
import Vue from 'vue'
import Vuex from 'vuex'
@ -22,7 +23,11 @@ describe('DeleteModal.vue', () => {
beforeEach(() => {
propsData = {
type: 'contribution',
id: 'p23'
id: 'p23',
callbacks: {
confirm: () => Post.methods.deletePostCallback('list'),
cancel: null
}
}
mocks = {
$t: jest.fn(),
@ -59,7 +64,11 @@ describe('DeleteModal.vue', () => {
propsData = {
type: 'contribution',
id: 'p23',
name: 'It is a post'
name: 'It is a post',
callbacks: {
confirm: () => Post.methods.deletePostCallback('list'),
cancel: null
}
}
})
@ -78,7 +87,11 @@ describe('DeleteModal.vue', () => {
propsData = {
type: 'comment',
id: 'c3',
name: 'It is the user of the comment'
name: 'It is the user of the comment',
callbacks: {
confirm: () => Post.methods.deletePostCallback('list'),
cancel: null
}
}
})
@ -108,7 +121,11 @@ describe('DeleteModal.vue', () => {
beforeEach(() => {
propsData = {
type: 'contribution',
id: 'p23'
id: 'p23',
callbacks: {
confirm: () => Post.methods.deletePostCallback('list'),
cancel: null
}
}
wrapper = Wrapper()
})
@ -177,7 +194,11 @@ describe('DeleteModal.vue', () => {
beforeEach(() => {
propsData = {
type: 'comment',
id: 'c3'
id: 'c3',
callbacks: {
confirm: () => Post.methods.deletePostCallback('list'),
cancel: null
}
}
wrapper = Wrapper()
})

11
webapp/components/Modal/DeleteModal.vue
View File

@ -53,8 +53,7 @@ export default {
props: {
name: { type: String, default: '' },
type: { type: String, required: true },
confirmCallback: { type: Function, required: true },
cancelCallback: { type: Function, default: null },
callbacks: { type: Object, required: true },
id: { type: String, required: true }
},
data() {
@ -75,8 +74,8 @@ export default {
},
methods: {
async cancel() {
if (!!this.cancelCallback) {
await this.cancelCallback()
if (!!this.callbacks.cancel) {
await this.callbacks.cancel()
}
this.isOpen = false
setTimeout(() => {
@ -86,7 +85,9 @@ export default {
async confirm() {
this.loading = true
try {
await this.confirmCallback()
if (!!this.callbacks.confirm) {
await this.callbacks.confirm()
}
this.success = true
setTimeout(() => {
this.isOpen = false

1
webapp/components/Modal/DisableModal.spec.js
View File

@ -17,6 +17,7 @@ describe('DisableModal.vue', () => {
propsData = {
type: 'contribution',
name: 'blah',
callbacks: { confirm: null, cancel: null },
id: 'c42'
}
mocks = {

9
webapp/components/Modal/DisableModal.vue
View File

@ -34,6 +34,7 @@ export default {
props: {
name: { type: String, default: '' },
type: { type: String, required: true },
callbacks: { type: Object, required: true },
id: { type: String, required: true }
},
data() {
@ -53,7 +54,10 @@ export default {
}
},
methods: {
cancel() {
async cancel() {
if (!!this.callbacks.cancel) {
await this.callbacks.cancel()
}
this.isOpen = false
setTimeout(() => {
this.$emit('close')
@ -61,6 +65,9 @@ export default {
},
async confirm() {
try {
if (!!this.callbacks.confirm) {
await this.callbacks.confirm()
}
await this.$apollo.mutate({
mutation: gql`
mutation($id: ID!) {

12
webapp/components/Modal/ReportModal.spec.js
View File

@ -18,7 +18,8 @@ describe('ReportModal.vue', () => {
beforeEach(() => {
propsData = {
type: 'contribution',
id: 'c43'
id: 'c43',
callbacks: { confirm: null, cancel: null }
}
mocks = {
$t: jest.fn(),
@ -55,7 +56,8 @@ describe('ReportModal.vue', () => {
propsData = {
type: 'user',
id: 'u4',
name: 'Bob Ross'
name: 'Bob Ross',
callbacks: { confirm: null, cancel: null }
}
})
@ -72,7 +74,8 @@ describe('ReportModal.vue', () => {
propsData = {
id: 'p23',
type: 'post',
name: 'It is a post'
name: 'It is a post',
callbacks: { confirm: null, cancel: null }
}
})
@ -100,7 +103,8 @@ describe('ReportModal.vue', () => {
beforeEach(() => {
propsData = {
type: 'user',
id: 'u4711'
id: 'u4711',
callbacks: { confirm: null, cancel: null }
}
wrapper = Wrapper()
})

7
webapp/components/Modal/ReportModal.vue
View File

@ -53,6 +53,7 @@ export default {
props: {
name: { type: String, default: '' },
type: { type: String, required: true },
callbacks: { type: Object, required: true },
id: { type: String, required: true }
},
data() {
@ -73,6 +74,9 @@ export default {
},
methods: {
async cancel() {
if (!!this.callbacks.cancel) {
await this.callbacks.cancel()
}
this.isOpen = false
setTimeout(() => {
this.$emit('close')
@ -81,6 +85,9 @@ export default {
async confirm() {
this.loading = true
try {
if (!!this.callbacks.confirm) {
await this.callbacks.confirm()
}
await this.$apollo.mutate({
mutation: gql`
mutation($id: ID!) {

6
webapp/components/PostCard/index.vue
View File

@ -82,7 +82,7 @@ import HcUser from '~/components/User'
import ContentMenu from '~/components/ContentMenu'
import { randomBytes } from 'crypto'
import { mapGetters } from 'vuex'
import Post from '~/mixins/Post'
import PostMutationHelpers from '~/mixins/PostMutationHelpers'
export default {
name: 'HcPostCard',
@ -90,7 +90,7 @@ export default {
HcUser,
ContentMenu
},
mixins: [Post],
mixins: [PostMutationHelpers],
props: {
post: {
type: Object,
@ -98,7 +98,7 @@ export default {
},
width: {
type: Object,
required: true
default: () => {}
}
},
computed: {

3
webapp/mixins/Post.js → webapp/mixins/PostMutationHelpers.js
View File

@ -3,6 +3,7 @@ import gql from 'graphql-tag'
export default {
methods: {
async deletePostCallback(postDisplayType = 'list') {
console.log('inside "deletePostCallback" !!! ', this.post)
try {
var gqlMutation = gql`
mutation($id: ID!) {
@ -19,8 +20,10 @@ export default {
switch (postDisplayType) {
case 'list':
this.$emit('deletePost')
console.log('emitted "deletePost" !!!')
break
default:
// case 'page'
this.$router.history.push('/') // Single page type: Redirect to index
break
}

71
webapp/mixins/PostMutationHelpers.spec.js Normal file
View File

@ -0,0 +1,71 @@
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()
})
})
})
})

1
webapp/package.json
View File

@ -29,7 +29,6 @@
"!**/?(*.)+(spec|test).js?(x)"
],
"coverageReporters": [
"text",
"lcov"
],
"transform": {

4
webapp/pages/post/_id/_slug/index.vue
View File

@ -115,7 +115,7 @@ import HcUser from '~/components/User'
import HcShoutButton from '~/components/ShoutButton.vue'
import HcCommentForm from '~/components/comments/CommentForm'
import HcCommentList from '~/components/comments/CommentList'
import Post from '~/mixins/Post'
import PostMutationHelpers from '~/mixins/PostMutationHelpers'
export default {
transition: {
@ -131,7 +131,7 @@ export default {
HcCommentForm,
HcCommentList
},
mixins: [Post],
mixins: [PostMutationHelpers],
head() {
return {
title: this.title

243
webapp/pages/profile/_id/_slug.spec.js Normal file
View File

@ -0,0 +1,243 @@
import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
// import PostMutationHelpers from '~/mixins/PostMutationHelpers'
import PostSlug from './_slug.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 localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(Styleguide)
localVue.use(VueRouter)
describe('PostSlug', () => {
let wrapper
let Wrapper
let propsData
let mocks
beforeEach(() => {
propsData = {}
mocks = {
post: {
id: 'p23'
},
$t: jest.fn(),
// $filters: {
// truncate: a => a
// },
$toast: {
success: () => {},
error: () => {}
},
$apollo: {
mutate: jest.fn().mockResolvedValue()
}
}
})
// describe('shallowMount', () => {
// Wrapper = () => {
// 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
// // }
// }
// })
// it('mentions post title', () => {
// Wrapper()
// 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', () => {
Wrapper = () => {
return mount(PostSlug, { propsData, mocks, localVue, router })
}
beforeEach(jest.useFakeTimers)
it('renders', () => {
// console.log(Wrapper().vm)
expect(Wrapper().is('div')).toBe(true)
})
describe('given post id', () => {
beforeEach(() => {
// post = {
// id: 'p23'
// }
wrapper = Wrapper()
})
describe('confirm deletion of Post from List by invoking "deletePostCallback"', () => {
beforeEach(() => {
wrapper = Wrapper()
wrapper.vm.deletePostCallback('list')
})
describe('after timeout', () => {
beforeEach(jest.runAllTimers)
// it('fades away', () => {
// expect(wrapper.vm.isOpen).toBe(false)
// })
it('emits "deletePost"', () => {
expect(wrapper.emitted().deletePost).toBeTruthy()
})
it('does call mutation', () => {
expect(mocks.$apollo.mutate).toHaveBeenCalled()
})
})
})
// 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))
// })
// })
// })
})
})

4
webapp/pages/profile/_id/_slug.vue
View File

@ -328,7 +328,7 @@ import HcBadges from '~/components/Badges.vue'
import HcLoadMore from '~/components/LoadMore.vue'
import HcEmpty from '~/components/Empty.vue'
import ContentMenu from '~/components/ContentMenu'
import Post from '~/mixins/Post'
import PostMutationHelpers from '~/mixins/PostMutationHelpers'
export default {
components: {
@ -341,7 +341,7 @@ export default {
HcEmpty,
ContentMenu
},
mixins: [Post],
mixins: [PostMutationHelpers],
transition: {
name: 'slide-up',
mode: 'out-in'