Show confirmation modal before deleting account

1 files changed, 129 insertions, 0 deletions

diff --git a/spec/javascripts/profile/account/components/delete_account_modal_spec.js b/spec/javascripts/profile/account/components/delete_account_modal_spec.js
new file mode 100644
index 00000000000..2e94948cfb2
--- /dev/null
+++ b/spec/javascripts/profile/account/components/delete_account_modal_spec.js
@@ -0,0 +1,129 @@
+import Vue from 'vue';
+
+import deleteAccountModal from '~/profile/account/components/delete_account_modal.vue';
+
+import mountComponent from '../../../helpers/vue_mount_component_helper';
+
+describe('DeleteAccountModal component', () => {
+  const actionUrl = `${gl.TEST_HOST}/delete/user`;
+  const username = 'hasnoname';
+  let Component;
+  let vm;
+
+  beforeEach(() => {
+    Component = Vue.extend(deleteAccountModal);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  const findElements = () => {
+    const confirmation = vm.confirmWithPassword ? 'password' : 'username';
+    return {
+      form: vm.$refs.form,
+      input: vm.$el.querySelector(`[name="${confirmation}"]`),
+      submitButton: vm.$el.querySelector('.btn-danger'),
+    };
+  };
+
+  describe('with password confirmation', () => {
+    beforeEach((done) => {
+      vm = mountComponent(Component, {
+        actionUrl,
+        confirmWithPassword: true,
+        username,
+      });
+
+      vm.isOpen = true;
+
+      Vue.nextTick()
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('does not accept empty password', (done) => {
+      const { form, input, submitButton } = findElements();
+      spyOn(form, 'submit');
+      input.value = '';
+      input.dispatchEvent(new Event('input'));
+
+      Vue.nextTick()
+        .then(() => {
+          expect(vm.enteredPassword).toBe(input.value);
+          expect(submitButton).toHaveClass('disabled');
+          submitButton.click();
+          expect(form.submit).not.toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('submits form with password', (done) => {
+      const { form, input, submitButton } = findElements();
+      spyOn(form, 'submit');
+      input.value = 'anything';
+      input.dispatchEvent(new Event('input'));
+
+      Vue.nextTick()
+        .then(() => {
+          expect(vm.enteredPassword).toBe(input.value);
+          expect(submitButton).not.toHaveClass('disabled');
+          submitButton.click();
+          expect(form.submit).toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+
+  describe('with username confirmation', () => {
+    beforeEach((done) => {
+      vm = mountComponent(Component, {
+        actionUrl,
+        confirmWithPassword: false,
+        username,
+      });
+
+      vm.isOpen = true;
+
+      Vue.nextTick()
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('does not accept wrong username', (done) => {
+      const { form, input, submitButton } = findElements();
+      spyOn(form, 'submit');
+      input.value = 'this is wrong';
+      input.dispatchEvent(new Event('input'));
+
+      Vue.nextTick()
+        .then(() => {
+          expect(vm.enteredUsername).toBe(input.value);
+          expect(submitButton).toHaveClass('disabled');
+          submitButton.click();
+          expect(form.submit).not.toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('submits form with correct username', (done) => {
+      const { form, input, submitButton } = findElements();
+      spyOn(form, 'submit');
+      input.value = username;
+      input.dispatchEvent(new Event('input'));
+
+      Vue.nextTick()
+        .then(() => {
+          expect(vm.enteredUsername).toBe(input.value);
+          expect(submitButton).not.toHaveClass('disabled');
+          submitButton.click();
+          expect(form.submit).toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+});