use computed property to enable/disable delete button

webapp/components/DeleteData/DeleteData.spec.js

@@ -81,7 +81,7 @@ describe('DeleteData.vue', () => {
     })
 
     it('does not call the delete user mutation if deleteEnabled is false', () => {
-      deleteAccountBtn = wrapper.find('.ds-button-danger')
+      deleteAccountBtn = wrapper.find('[data-test="delete-button"]')
       deleteAccountBtn.trigger('click')
       expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
     })
@@ -90,7 +90,7 @@ describe('DeleteData.vue', () => {
       beforeEach(() => {
         enableDeletionInput = wrapper.find('.enable-deletion-input input')
         enableDeletionInput.setValue(deleteAccountName)
-        deleteAccountBtn = wrapper.find('.ds-button-danger')
+        deleteAccountBtn = wrapper.find('[data-test="delete-button"]')
       })
 
       it('if deleteEnabled is true and only deletes user by default', () => {
@@ -168,7 +168,7 @@ describe('DeleteData.vue', () => {
       it('shows an error toaster when the mutation rejects', async () => {
         enableDeletionInput = wrapper.find('.enable-deletion-input input')
         enableDeletionInput.setValue(deleteAccountName)
-        deleteAccountBtn = wrapper.find('.ds-button-danger')
+        deleteAccountBtn = wrapper.find('[data-test="delete-button"]')
         await deleteAccountBtn.trigger('click')
         // second submission causes mutation to reject
         await deleteAccountBtn.trigger('click')

webapp/components/DeleteData/DeleteData.vue

@@ -57,14 +57,19 @@
             <ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: 1.75 }">
               <ds-input
                 v-model="enableDeletionValue"
-                @input="enableDeletion"
                 class="enable-deletion-input"
               />
             </ds-flex-item>
             <ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: 1 }">
-              <ds-button icon="trash" danger :disabled="!deleteEnabled" @click="handleSubmit">
+              <base-button
+                icon="trash"
+                danger
+                :disabled="!deleteEnabled"
+                data-test="delete-button"
+                @click="handleSubmit"
+              >
                 {{ $t('settings.deleteUserAccount.name') }}
-              </ds-button>
+              </base-button>
             </ds-flex-item>
           </ds-flex>
         </ds-container>
@@ -82,7 +87,6 @@ export default {
     return {
       deleteContributions: false,
       deleteComments: false,
-      deleteEnabled: false,
       enableDeletionValue: null,
     }
   },
@@ -90,16 +94,14 @@ export default {
     ...mapGetters({
       currentUser: 'auth/user',
     }),
+    deleteEnabled() {
+      return this.enableDeletionValue === this.currentUser.name
+    },
   },
   methods: {
     ...mapActions({
       logout: 'auth/logout',
     }),
-    enableDeletion() {
-      if (this.enableDeletionValue === this.currentUser.name) {
-        this.deleteEnabled = true
-      }
-    },
     handleSubmit() {
       const resourceArgs = []
       if (this.deleteContributions) {