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

write tests and fix minor appearing and position problems with context menu

Browse Source
This commit is contained in:
Wolfgang Huß 2019-09-11 15:13:31 +02:00
parent 0e39f1de86
commit 7dc5856845
3 changed files with 202 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
webapp/components/Comment.spec.js
View File

@ -33,7 +33,11 @@ describe('Comment.vue', () => {
},
$apollo: {
mutate: jest.fn().mockResolvedValue({
data: { DeleteComment: { id: 'it-is-the-deleted-comment' } },
data: {
DeleteComment: {
id: 'it-is-the-deleted-comment',
},
},
}),
},
}
@ -125,7 +129,11 @@ describe('Comment.vue', () => {
it('emits "deleteComment"', () => {
expect(wrapper.emitted('deleteComment')).toEqual([
[{ id: 'it-is-the-deleted-comment' }],
[
{
id: 'it-is-the-deleted-comment',
},
],
])
})
@ -138,6 +146,30 @@ describe('Comment.vue', () => {
})
})
})
describe('test update comment', () => {
beforeEach(() => {
wrapper = Wrapper()
})
describe('with a given comment', () => {
beforeEach(async () => {
await wrapper.vm.updateComment({
id: 'it-is-the-updated-comment',
})
})
it('emits "updateComment"', () => {
expect(wrapper.emitted('updateComment')).toEqual([
[
{
id: 'it-is-the-updated-comment',
},
],
])
})
})
})
})
})
})

25
webapp/components/Comment.vue
View File

@ -13,19 +13,20 @@
<ds-card :id="`commentId-${comment.id}`">
<ds-space margin-bottom="small">
<hc-user :user="author" :date-time="comment.createdAt" />
<!-- Content Menu (can open Modals) -->
<client-only>
<content-menu
v-show="!openEditCommentMenu"
placement="bottom-end"
resource-type="comment"
:resource="comment"
:modalsData="menuModalsData"
style="float-right"
:is-owner="isAuthor(author.id)"
@showEditCommentMenu="editCommentMenu"
/>
</client-only>
</ds-space>
<!-- Content Menu (can open Modals) -->
<client-only>
<content-menu
placement="bottom-end"
resource-type="comment"
:resource="comment"
:modalsData="menuModalsData"
style="float-right"
:is-owner="isAuthor(author.id)"
@showEditCommentMenu="editCommentMenu"
/>
</client-only>
<ds-space margin-bottom="small" />
<div v-if="openEditCommentMenu">

212
webapp/components/CommentForm/CommentForm.spec.js
View File

@ -12,8 +12,8 @@ describe('CommentForm.vue', () => {
let mocks
let wrapper
let propsData
let cancelBtn
let cancelMethodSpy
let closeMethodSpy
beforeEach(() => {
mocks = {
@ -21,20 +21,6 @@ describe('CommentForm.vue', () => {
$i18n: {
locale: () => 'en',
},
$apollo: {
mutate: jest
.fn()
.mockResolvedValueOnce({
data: {
CreateComment: {
contentExcerpt: 'this is a comment',
},
},
})
.mockRejectedValue({
message: 'Ouch!',
}),
},
$toast: {
error: jest.fn(),
success: jest.fn(),
@ -43,60 +29,172 @@ describe('CommentForm.vue', () => {
removeHtml: a => a,
},
}
propsData = {
post: {
id: 1,
},
}
})
describe('mount', () => {
const Wrapper = () => {
return mount(CommentForm, {
mocks,
localVue,
propsData,
describe('create comment', () => {
beforeEach(() => {
mocks = {
...mocks,
$apollo: {
mutate: jest
.fn()
.mockResolvedValueOnce({
data: {
CreateComment: {
contentExcerpt: 'this is a comment',
},
},
})
.mockRejectedValue({
message: 'Ouch!',
}),
},
}
propsData = {
post: {
id: 'p001',
},
}
const Wrapper = () => {
return mount(CommentForm, {
mocks,
localVue,
propsData,
})
}
wrapper = Wrapper()
cancelMethodSpy = jest.spyOn(wrapper.vm, 'clear')
})
}
beforeEach(() => {
wrapper = Wrapper()
cancelMethodSpy = jest.spyOn(wrapper.vm, 'clear')
})
it('calls the apollo mutation when form is submitted', async () => {
wrapper.vm.updateEditorContent('this is a comment')
await wrapper.find('form').trigger('submit')
expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
})
it('calls clear method when the cancel button is clicked', () => {
wrapper.vm.updateEditorContent('ok')
cancelBtn = wrapper.find('.cancelBtn')
cancelBtn.trigger('click')
expect(cancelMethodSpy).toHaveBeenCalledTimes(1)
})
describe('mutation resolves', () => {
beforeEach(async () => {
it('calls the apollo mutation when form is submitted', async () => {
wrapper.vm.updateEditorContent('this is a comment')
wrapper.find('form').trigger('submit')
await wrapper.find('form').trigger('submit')
expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
})
it('shows a success toaster', async () => {
await mocks.$apollo.mutate
expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
})
it('clears the editor', () => {
it('calls `clear` method when the cancel button is clicked', async () => {
wrapper.vm.updateEditorContent('ok')
await wrapper.find('.cancelBtn').trigger('submit')
expect(cancelMethodSpy).toHaveBeenCalledTimes(1)
})
describe('mutation fails', () => {
it('shows the error toaster', async () => {
await wrapper.find('form').trigger('submit')
describe('mutation resolves', () => {
beforeEach(async () => {
wrapper.vm.updateEditorContent('this is a comment')
wrapper.find('form').trigger('submit')
})
it('shows a success toaster', async () => {
await mocks.$apollo.mutate
expect(mocks.$toast.error).toHaveBeenCalledTimes(1)
expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
})
it('clears the editor', () => {
expect(cancelMethodSpy).toHaveBeenCalledTimes(1)
})
describe('mutation fails', () => {
it('shows the error toaster', async () => {
await wrapper.find('form').trigger('submit')
await mocks.$apollo.mutate
expect(mocks.$toast.error).toHaveBeenCalledTimes(1)
})
})
})
})
describe('update comment', () => {
beforeEach(() => {
mocks = {
...mocks,
$apollo: {
mutate: jest
.fn()
.mockResolvedValueOnce({
data: {
UpdateComment: {
contentExcerpt: 'this is a comment',
},
},
})
.mockRejectedValue({
message: 'Ouch!',
}),
},
}
propsData = {
update: true,
comment: {
id: 'c001',
},
}
const Wrapper = () => {
return mount(CommentForm, {
mocks,
localVue,
propsData,
})
}
wrapper = Wrapper()
closeMethodSpy = jest.spyOn(wrapper.vm, 'closeEditWindow')
})
describe('form submitted', () => {
it('calls the apollo mutation', async () => {
wrapper.vm.updateEditorContent('this is a comment')
await wrapper.find('form').trigger('submit')
expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
})
it('calls `closeEditWindow` method', async () => {
wrapper.vm.updateEditorContent('ok')
await wrapper.find('form').trigger('submit')
expect(closeMethodSpy).toHaveBeenCalledTimes(1)
})
it('emits `showEditCommentMenu` event', async () => {
wrapper.vm.updateEditorContent('ok')
await wrapper.find('form').trigger('submit')
expect(wrapper.emitted('showEditCommentMenu')).toEqual([[false]])
})
})
describe('cancel button is clicked', () => {
it('calls `closeEditWindow` method', async () => {
wrapper.vm.updateEditorContent('ok')
await wrapper.find('.cancelBtn').trigger('submit')
expect(closeMethodSpy).toHaveBeenCalledTimes(1)
})
it('emits `showEditCommentMenu` event', async () => {
wrapper.vm.updateEditorContent('ok')
await wrapper.find('.cancelBtn').trigger('submit')
expect(wrapper.emitted('showEditCommentMenu')).toEqual([[false]])
})
})
describe('mutation resolves', () => {
beforeEach(async () => {
wrapper.vm.updateEditorContent('this is a comment')
wrapper.find('form').trigger('submit')
})
it('shows a success toaster', async () => {
await mocks.$apollo.mutate
expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
})
it('closes the editor', () => {
expect(closeMethodSpy).toHaveBeenCalledTimes(1)
})
describe('mutation fails', () => {
it('shows the error toaster', async () => {
await wrapper.find('form').trigger('submit')
await mocks.$apollo.mutate
expect(mocks.$toast.error).toHaveBeenCalledTimes(1)
})
})
})
})