tests: reviews works

webapp/components/DeleteData/DeleteData.spec.js

@@ -6,180 +6,172 @@ import Vuex from 'vuex'
 const localVue = global.localVue
 
 describe('DeleteData.vue', () => {
-  let mocks
+    let mocks
-  let wrapper
+    let wrapper
-  let getters
+    let getters
-  let actions
+    let actions
-  let deleteAccountBtn
+    let deleteAccountBtn
-  let enableDeletionInput
+    let enableDeletionInput
-  let enableContributionDeletionCheckbox
+    let enableContributionDeletionCheckbox
-  let enableCommentDeletionCheckbox
+    let enableCommentDeletionCheckbox
-  const deleteAccountName = 'Delete MyAccount'
+    const deleteAccountName = 'Delete MyAccount'
-  const deleteContributionsMessage = 'Delete my 2 posts'
+    const deleteContributionsMessage = 'Delete my 2 posts'
-  const deleteCommentsMessage = 'Delete my 3 comments'
+    const deleteCommentsMessage = 'Delete my 3 comments'
-
-  beforeEach(() => {
-    mocks = {
-      $t: jest.fn(),
-      $apollo: {
-        mutate: jest
-          .fn()
-          .mockResolvedValueOnce({
-            data: {
-              DeleteData: {
-                id: 'u343',
-              },
-            },
-          })
-          .mockRejectedValue({ message: 'Not authorised!' }),
-      },
-      $toast: {
-        error: jest.fn(),
-        success: jest.fn(),
-      },
-      $router: {
-        history: {
-          push: jest.fn(),
-        },
-      },
-    }
-    getters = {
-      'auth/user': () => {
-        return { id: 'u343', name: deleteAccountName }
-      },
-    }
-    actions = { 'auth/logout': jest.fn() }
-  })
-
-  describe('mount', () => {
-    const Wrapper = () => {
-      const store = new Vuex.Store({
-        getters,
-        actions,
-      })
-      return mount(DeleteData, { mocks, localVue, store })
-    }
 
     beforeEach(() => {
-      wrapper = Wrapper()
+        mocks = {
-    })
+            $t: jest.fn((a) => a),
-
+            $apollo: {
-    afterEach(() => {
+                mutate: jest
-      jest.clearAllMocks()
+                    .fn()
-    })
+                    .mockResolvedValueOnce({
-
+                        data: {
-    it('defaults to deleteContributions to true', () => {
+                            DeleteData: {
-      expect(wrapper.vm.deleteContributions).toEqual(false)
+                                id: 'u343',
-    })
+                            },
-
+                        },
-    it('defaults to deleteComments to true', () => {
+                    })
-      expect(wrapper.vm.deleteComments).toEqual(false)
+                    .mockRejectedValue({ message: 'Not authorised!' }),
-    })
-
-    it('defaults to deleteEnabled to false', () => {
-      expect(wrapper.vm.deleteEnabled).toEqual(false)
-    })
-
-    it('does not call the delete user mutation if deleteEnabled is false', () => {
-      deleteAccountBtn = wrapper.find('[data-test="delete-button"]')
-      deleteAccountBtn.trigger('click')
-      expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
-    })
-
-    describe('calls the delete user mutation', () => {
-      beforeEach(() => {
-        enableDeletionInput = wrapper.find('.ds-input')
-        enableDeletionInput.setValue(deleteAccountName)
-        deleteAccountBtn = wrapper.find('[data-test="delete-button"]')
-      })
-
-      it('if deleteEnabled is true and only deletes user ', () => {
-        mocks.$t.mockImplementation(() => deleteContributionsMessage)
-        enableContributionDeletionCheckbox = wrapper.findAll('input[type="checkbox"]').at(0)
-        mocks.$t.mockImplementation(() => deleteCommentsMessage)
-        enableCommentDeletionCheckbox = wrapper.findAll('input[type="checkbox"]').at(1)
-        deleteAccountBtn.trigger('click')
-        expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
-          expect.objectContaining({
-            variables: {
-              id: 'u343',
-              resource: [],
             },
-          }),
+            $toast: {
-        )
+                error: jest.fn(),
-      })
+                success: jest.fn(),
-
-      it("deletes user's posts and comments if requested by default ", () => {
-        mocks.$t.mockImplementation(() => deleteContributionsMessage)
-        enableContributionDeletionCheckbox = wrapper.findAll('input[type="checkbox"]').at(0)
-        enableContributionDeletionCheckbox.trigger('click')
-        mocks.$t.mockImplementation(() => deleteCommentsMessage)
-        enableCommentDeletionCheckbox = wrapper.findAll('input[type="checkbox"]').at(1)
-        enableCommentDeletionCheckbox.trigger('click')
-        deleteAccountBtn.trigger('click')
-        expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
-          expect.objectContaining({
-            variables: {
-              id: 'u343',
-              resource: ['Post', 'Comment'],
             },
-          }),
+            $router: {
-        )
+                history: {
-      })
+                    push: jest.fn(),
-
+                },
-      it("deletes a user's posts if requested", () => {
-        mocks.$t.mockImplementation(() => deleteContributionsMessage)
-        enableContributionDeletionCheckbox = wrapper.findAll('input[type="checkbox"]').at(0)
-        enableContributionDeletionCheckbox.trigger('click')
-        deleteAccountBtn.trigger('click')
-        expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
-          expect.objectContaining({
-            variables: {
-              id: 'u343',
-              resource: ['Post'],
             },
-          }),
+        }
-        )
+        getters = {
-      })
+            'auth/user': () => {
-
+                return { id: 'u343', name: deleteAccountName }
-      it("deletes a user's comments if requested", () => {
-        mocks.$t.mockImplementation(() => deleteCommentsMessage)
-        enableCommentDeletionCheckbox = wrapper.findAll('input[type="checkbox"]').at(1)
-        enableCommentDeletionCheckbox.trigger('click')
-        deleteAccountBtn.trigger('click')
-        expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
-          expect.objectContaining({
-            variables: {
-              id: 'u343',
-              resource: ['Comment'],
             },
-          }),
+        }
-        )
+        actions = { 'auth/logout': jest.fn() }
-      })
-
-      it('shows a success toaster after successful mutation', async () => {
-        await deleteAccountBtn.trigger('click')
-        expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
-      })
-
-      it('redirect the user to the homepage', async () => {
-        await deleteAccountBtn.trigger('click')
-        expect(mocks.$router.history.push).toHaveBeenCalledWith('/')
-      })
     })
 
-    describe('error handling', () => {
+    describe('mount', () => {
-      it('shows an error toaster when the mutation rejects', async () => {
+        const Wrapper = () => {
-        enableDeletionInput = wrapper.find('.ds-input')
+            const store = new Vuex.Store({
-        enableDeletionInput.setValue(deleteAccountName)
+                getters,
-        await Vue.nextTick()
+                actions,
-        deleteAccountBtn = wrapper.find('[data-test="delete-button"]')
+            })
-        await deleteAccountBtn.trigger('click')
+            return mount(DeleteData, { mocks, localVue, store })
-        // second submission causes mutation to reject
+        }
-        await deleteAccountBtn.trigger('click')
+
-        await mocks.$apollo.mutate
+        beforeEach(() => {
-        expect(mocks.$toast.error).toHaveBeenCalledWith('Not authorised!')
+            wrapper = Wrapper()
-      })
+        })
+
+        afterEach(() => {
+            jest.clearAllMocks()
+        })
+
+        it('checkbox deleteContributions defaults be false', () => {
+            expect(wrapper.vm.deleteContributions).toEqual(false)
+        })
+
+        it('checkbox deleteComments defaults be false', () => {
+            expect(wrapper.vm.deleteComments).toEqual(false)
+        })
+
+        it('deleteButton defaults be false', () => {
+            expect(wrapper.vm.deleteEnabled).toEqual(false)
+        })
+
+        it('does not call the delete user mutation if deleteEnabled is false', () => {
+            deleteAccountBtn = wrapper.find('[data-test="delete-button"]')
+            deleteAccountBtn.trigger('click')
+            expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
+        })
+
+        describe('calls the delete user mutation', () => {
+            beforeEach(() => {
+                enableDeletionInput = wrapper.find('.ds-input')
+                enableDeletionInput.setValue(deleteAccountName)
+                deleteAccountBtn = wrapper.find('[data-test="delete-button"]')
+            })
+
+            it('if deleteEnabled is true and only deletes user ', () => {
+                deleteAccountBtn.trigger('click')
+                expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        variables: {
+                            id: 'u343',
+                            resource: [],
+                        },
+                    }),
+                )
+            })
+
+            it("deletes user's posts and comments if requested by default ", () => {
+                enableContributionDeletionCheckbox = wrapper.find('[data-test="contributions-deletion-checkbox"]')
+                enableContributionDeletionCheckbox.trigger('click')
+                enableCommentDeletionCheckbox = wrapper.find('[data-test="comments-deletion-checkbox"]')
+                enableCommentDeletionCheckbox.trigger('click')
+                deleteAccountBtn.trigger('click')
+                expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        variables: {
+                            id: 'u343',
+                            resource: ['Post', 'Comment'],
+                        },
+                    }),
+                )
+            })
+
+            it("deletes a user's posts if requested", () => {
+                enableContributionDeletionCheckbox = wrapper.find('[data-test="contributions-deletion-checkbox"]')
+                enableContributionDeletionCheckbox.trigger('click')
+                deleteAccountBtn.trigger('click')
+                expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        variables: {
+                            id: 'u343',
+                            resource: ['Post'],
+                        },
+                    }),
+                )
+            })
+
+            it("deletes a user's comments if requested", () => {
+                enableCommentDeletionCheckbox = wrapper.find('[data-test="comments-deletion-checkbox"]')
+                enableCommentDeletionCheckbox.trigger('click')
+                deleteAccountBtn.trigger('click')
+                expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        variables: {
+                            id: 'u343',
+                            resource: ['Comment'],
+                        },
+                    }),
+                )
+            })
+
+            it('shows a success toaster after successful mutation', async() => {
+                await deleteAccountBtn.trigger('click')
+                expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
+            })
+
+            it('redirect the user to the homepage', async() => {
+                await deleteAccountBtn.trigger('click')
+                expect(mocks.$router.history.push).toHaveBeenCalledWith('/')
+            })
+        })
+
+        describe('error handling', () => {
+            it('shows an error toaster when the mutation rejects', async() => {
+                enableDeletionInput = wrapper.find('.ds-input')
+                enableDeletionInput.setValue(deleteAccountName)
+                await Vue.nextTick()
+                deleteAccountBtn = wrapper.find('[data-test="delete-button"]')
+                await deleteAccountBtn.trigger('click')
+                    // second submission causes mutation to reject
+                await deleteAccountBtn.trigger('click')
+                await mocks.$apollo.mutate
+                expect(mocks.$toast.error).toHaveBeenCalledWith('Not authorised!')
+            })
+        })
     })
-  })
+})
-})

webapp/components/DeleteData/DeleteData.vue

@@ -10,7 +10,7 @@
     <ds-input v-model="enableDeletionValue" />
     <p class="notice">{{ $t('settings.deleteUserAccount.accountDescription') }}</p>
     <label class="checkbox">
-      <input type="checkbox" v-model="deleteContributions" />
+      <input type="checkbox" v-model="deleteContributions" data-test="contributions-deletion-checkbox"/>
       {{
         $t(
           'settings.deleteUserAccount.contributionsCount',
@@ -22,7 +22,7 @@
       }}
     </label>
     <label class="checkbox">
-      <input type="checkbox" v-model="deleteComments" />
+      <input type="checkbox" v-model="deleteComments" data-test="comments-deletion-checkbox" />
       {{
         $t(
           'settings.deleteUserAccount.commentedCount',