Merge pull request #5079 from Abhishek-Punhani/Issue5062

 Migrate 'Failed to delete account' alert from Vuetify to Kolibri Des…

Author: MisRob

contentcuration/contentcuration/frontend/settings/pages/Account/DeleteAccountForm.vue

@@ -20,11 +20,15 @@
         @input="deletionEmailInvalidMessage = ''"
       />
     </KModal>
-    <Alert
-      v-model="deletionFailed"
-      :header="$tr('deletionFailed')"
-      :text="$tr('deletionFailedText')"
-    />
+
+    <KModal
+      v-if="deletionFailed"
+      :title="$tr('deletionFailed')"
+      :submitText="$tr('ok')"
+      @submit="deletionFailed = false"
+    >
+      <p>{{ $tr('deletionFailedText') }}</p>
+    </KModal>
   </div>
 
 </template>
@@ -33,13 +37,9 @@
 <script>
 
   import { mapActions, mapState } from 'vuex';
-  import Alert from 'shared/views/Alert';
 
   export default {
     name: 'DeleteAccountForm',
-    components: {
-      Alert,
-    },
     props: {
       value: {
         type: Boolean,
@@ -98,6 +98,7 @@
       deletionFailed: 'Failed to delete account',
       deletionFailedText:
         'Failed to delete your account. Please contact us here: https://community.learningequality.org.',
+      ok: 'OK',
     },
   };
 

contentcuration/contentcuration/frontend/settings/pages/__tests__/deleteAccountForm.spec.js

@@ -42,11 +42,20 @@ describe('deleteAccountForm', () => {
     wrapper.vm.deleteUserAccount();
     expect(deleteAccount).toHaveBeenCalled();
   });
-  it('should show alert if account deletion fails', async () => {
+  it('should show KModal if account deletion fails', async () => {
     await wrapper.setData({ accountDeletionEmail: email });
     deleteAccount.mockImplementation(() => Promise.reject('error'));
-    wrapper.vm.deleteUserAccount().catch(() => {
-      expect(wrapper.vm.deletionFailed).toBe(true);
-    });
+    try {
+      await wrapper.vm.deleteUserAccount();
+    } catch (e) {
+      throw new Error(e);
+    }
+    await wrapper.vm.$nextTick();
+    const modals = wrapper.findAllComponents({ name: 'KModal' });
+    const errorModal = modals.at(1);
+    expect(errorModal.exists()).toBe(true);
+    expect(errorModal.text()).toContain(
+      'Failed to delete your account. Please contact us here: https://community.learningequality.org.',
+    );
   });
 });