test delete user component

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()
+        })
+      })
+    })
+  })
 })

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)
         })
     },
   },