diff --git a/webapp/components/Modal/DeleteModal.spec.js b/webapp/components/Modal/DeleteModal.spec.js index 704c3d832..008acdada 100644 --- a/webapp/components/Modal/DeleteModal.spec.js +++ b/webapp/components/Modal/DeleteModal.spec.js @@ -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)) - }) - }) - }) }) }) diff --git a/webapp/components/comments/CommentList/index.vue b/webapp/components/comments/CommentList/index.vue index 3c7566dce..eb9cac088 100644 --- a/webapp/components/comments/CommentList/index.vue +++ b/webapp/components/comments/CommentList/index.vue @@ -24,13 +24,6 @@ :comment="comment" @deleteComment="deleteComment(index)" /> - { - // 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() - }) - }) - }) -}) diff --git a/webapp/pages/post/_id/_slug/index.spec.js b/webapp/pages/post/_id/_slug/index.spec.js new file mode 100644 index 000000000..5bf4ea168 --- /dev/null +++ b/webapp/pages/post/_id/_slug/index.spec.js @@ -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'] = '' + +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) + }) + }) + }) + }) + }) +}) diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue index 55f12f534..0761b1de8 100644 --- a/webapp/pages/post/_id/_slug/index.vue +++ b/webapp/pages/post/_id/_slug/index.vue @@ -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', diff --git a/webapp/pages/profile/_id/_slug.spec.js b/webapp/pages/profile/_id/_slug.spec.js index b7109d3f3..d79f9b885 100644 --- a/webapp/pages/profile/_id/_slug.spec.js +++ b/webapp/pages/profile/_id/_slug.spec.js @@ -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) }) }) })