From 980d3cf96a5215466551f2f1e8d805ed8090bcb6 Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Wed, 23 Feb 2022 17:24:24 +0100 Subject: [PATCH] test delete user component --- .../components/DeletedUserFormular.spec.js | 212 +++++++++++++++++- admin/src/components/DeletedUserFormular.vue | 4 +- 2 files changed, 211 insertions(+), 5 deletions(-) diff --git a/admin/src/components/DeletedUserFormular.spec.js b/admin/src/components/DeletedUserFormular.spec.js index de824f6d5..bad97c1d7 100644 --- a/admin/src/components/DeletedUserFormular.spec.js +++ b/admin/src/components/DeletedUserFormular.spec.js @@ -5,17 +5,19 @@ import { unDeleteUser } from '../graphql/unDeleteUser' const localVue = global.localVue +const date = new Date() + const apolloMutateMock = jest.fn().mockResolvedValue({ data: { - deleteUser: { userId: 1, deletedAt: new Date() }, - unDeleteUser: { userId: 1, deletedAt: null }, + deleteUser: date, }, }) + const toastedErrorMock = jest.fn() const toastedSuccessMock = jest.fn() const mocks = { - $t: jest.fn(), + $t: jest.fn((t) => t), $apollo: { mutate: apolloMutateMock, }, @@ -46,6 +48,7 @@ describe('DeletedUserFormular', () => { describe('mount', () => { beforeEach(() => { + jest.clearAllMocks() wrapper = Wrapper() }) @@ -53,4 +56,207 @@ describe('DeletedUserFormular', () => { expect(wrapper.find('.deleted-user-formular').exists()).toBeTruthy() }) }) + + describe('delete self', () => { + beforeEach(() => { + wrapper.setProps({ + item: { + userId: 0, + }, + }) + }) + + it('shows a text that you cannot delete yourself', () => { + expect(wrapper.text()).toBe('removeNotSelf') + }) + }) + + describe('delete other user', () => { + beforeEach(() => { + wrapper.setProps({ + item: { + userId: 1, + deletedAt: null, + }, + }) + }) + + it('has a checkbox', () => { + expect(wrapper.find('input[type="checkbox"]').exists()).toBeTruthy() + }) + + it('shows the text "delete_user"', () => { + expect(wrapper.text()).toBe('delete_user') + }) + + describe('click on checkbox', () => { + beforeEach(async () => { + await wrapper.find('input[type="checkbox"]').setChecked() + }) + + it('has a confirmation button', () => { + expect(wrapper.find('button').exists()).toBeTruthy() + }) + + it('has the button text "delete_user"', () => { + expect(wrapper.find('button').text()).toBe('delete_user') + }) + + describe('confirm delete with success', () => { + beforeEach(async () => { + await wrapper.find('button').trigger('click') + }) + + it('calls the API', () => { + expect(apolloMutateMock).toBeCalledWith( + expect.objectContaining({ + mutation: deleteUser, + variables: { + userId: 1, + }, + }), + ) + }) + + it('toasts a success message', () => { + expect(toastedSuccessMock).toBeCalledWith('user_deleted') + }) + + it('emits update deleted At', () => { + expect(wrapper.emitted('updateDeletedAt')).toEqual( + expect.arrayContaining([ + expect.arrayContaining([ + { + userId: 1, + deletedAt: date, + }, + ]), + ]), + ) + }) + + it('unchecks the checkbox', () => { + expect(wrapper.find('input').attributes('checked')).toBe(undefined) + }) + }) + + describe('confirm delete with error', () => { + beforeEach(async () => { + apolloMutateMock.mockRejectedValue({ message: 'Oh no!' }) + await wrapper.find('button').trigger('click') + }) + + it('toasts an error message', () => { + expect(toastedErrorMock).toBeCalledWith('Oh no!') + }) + }) + + describe('click on checkbox again', () => { + beforeEach(async () => { + await wrapper.find('input[type="checkbox"]').setChecked(false) + }) + + it('has no confirmation button anymore', () => { + expect(wrapper.find('button').exists()).toBeFalsy() + }) + }) + }) + }) + + describe('recover user', () => { + beforeEach(() => { + wrapper.setProps({ + item: { + userId: 1, + deletedAt: date, + }, + }) + }) + + it('has a checkbox', () => { + expect(wrapper.find('input[type="checkbox"]').exists()).toBeTruthy() + }) + + it('shows the text "undelete_user"', () => { + expect(wrapper.text()).toBe('undelete_user') + }) + + describe('click on checkbox', () => { + beforeEach(async () => { + apolloMutateMock.mockResolvedValue({ + data: { + unDeleteUser: null, + }, + }) + await wrapper.find('input[type="checkbox"]').setChecked() + }) + + it('has a confirmation button', () => { + expect(wrapper.find('button').exists()).toBeTruthy() + }) + + it('has the button text "undelete_user"', () => { + expect(wrapper.find('button').text()).toBe('undelete_user') + }) + + describe('confirm recover with success', () => { + beforeEach(async () => { + await wrapper.find('button').trigger('click') + }) + + it('calls the API', () => { + expect(apolloMutateMock).toBeCalledWith( + expect.objectContaining({ + mutation: unDeleteUser, + variables: { + userId: 1, + }, + }), + ) + }) + + it('toasts a success message', () => { + expect(toastedSuccessMock).toBeCalledWith('user_recovered') + }) + + it('emits update deleted At', () => { + expect(wrapper.emitted('updateDeletedAt')).toEqual( + expect.arrayContaining([ + expect.arrayContaining([ + { + userId: 1, + deletedAt: null, + }, + ]), + ]), + ) + }) + + it('unchecks the checkbox', () => { + expect(wrapper.find('input').attributes('checked')).toBe(undefined) + }) + }) + + describe('confirm recover with error', () => { + beforeEach(async () => { + apolloMutateMock.mockRejectedValue({ message: 'Oh no!' }) + await wrapper.find('button').trigger('click') + }) + + it('toasts an error message', () => { + expect(toastedErrorMock).toBeCalledWith('Oh no!') + }) + }) + + describe('click on checkbox again', () => { + beforeEach(async () => { + await wrapper.find('input[type="checkbox"]').setChecked(false) + }) + + it('has no confirmation button anymore', () => { + expect(wrapper.find('button').exists()).toBeFalsy() + }) + }) + }) + }) }) diff --git a/admin/src/components/DeletedUserFormular.vue b/admin/src/components/DeletedUserFormular.vue index 52c63fe57..b840fdb23 100644 --- a/admin/src/components/DeletedUserFormular.vue +++ b/admin/src/components/DeletedUserFormular.vue @@ -53,7 +53,7 @@ export default { this.checked = false }) .catch((error) => { - this.$toasted.error('error', error) + this.$toasted.error(error.message) }) }, unDeleteUser() { @@ -73,7 +73,7 @@ export default { this.checked = false }) .catch((error) => { - this.$toasted.error('error', error) + this.$toasted.error(error.message) }) }, },