Resolve "No feedback when checking on checklist if potential spam was detected"

2 files changed, 79 insertions, 0 deletions

diff --git a/spec/javascripts/issue_show/components/app_spec.js b/spec/javascripts/issue_show/components/app_spec.js
index b47a8bf705f..53b8a368d28 100644
--- a/spec/javascripts/issue_show/components/app_spec.js
+++ b/spec/javascripts/issue_show/components/app_spec.js
@@ -4,6 +4,7 @@ import '~/render_gfm';
 import issuableApp from '~/issue_show/components/app.vue';
 import eventHub from '~/issue_show/event_hub';
 import issueShowData from '../mock_data';
+import setTimeoutPromise from '../../helpers/set_timeout_promise_helper';
 
 function formatText(text) {
   return text.trim().replace(/\s\s+/g, ' ');
@@ -55,6 +56,8 @@ describe('Issuable output', () => {
     Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
 
     vm.poll.stop();
+
+    vm.$destroy();
   });
 
   it('should render a title/description/edited and update title/description/edited on update', (done) => {
@@ -268,6 +271,52 @@ describe('Issuable output', () => {
     });
   });
 
+  it('opens recaptcha dialog if update rejected as spam', (done) => {
+    function mockScriptSrc() {
+      const recaptchaChild = vm.$children
+        .find(child => child.$options._componentTag === 'recaptcha-dialog'); // eslint-disable-line no-underscore-dangle
+
+      recaptchaChild.scriptSrc = '//scriptsrc';
+    }
+
+    let modal;
+    const promise = new Promise((resolve) => {
+      resolve({
+        json() {
+          return {
+            recaptcha_html: '<div class="g-recaptcha">recaptcha_html</div>',
+          };
+        },
+      });
+    });
+
+    spyOn(vm.service, 'updateIssuable').and.returnValue(promise);
+
+    vm.canUpdate = true;
+    vm.showForm = true;
+
+    vm.$nextTick()
+      .then(() => mockScriptSrc())
+      .then(() => vm.updateIssuable())
+      .then(promise)
+      .then(() => setTimeoutPromise())
+      .then(() => {
+        modal = vm.$el.querySelector('.js-recaptcha-dialog');
+
+        expect(modal.style.display).not.toEqual('none');
+        expect(modal.querySelector('.g-recaptcha').textContent).toEqual('recaptcha_html');
+        expect(document.body.querySelector('.js-recaptcha-script').src).toMatch('//scriptsrc');
+      })
+      .then(() => modal.querySelector('.close').click())
+      .then(() => vm.$nextTick())
+      .then(() => {
+        expect(modal.style.display).toEqual('none');
+        expect(document.body.querySelector('.js-recaptcha-script')).toBeNull();
+      })
+      .then(done)
+      .catch(done.fail);
+  });
+
   describe('deleteIssuable', () => {
     it('changes URL when deleted', (done) => {
       spyOn(gl.utils, 'visitUrl');
diff --git a/spec/javascripts/issue_show/components/description_spec.js b/spec/javascripts/issue_show/components/description_spec.js
index 163e5cdd062..2e000a1063f 100644
--- a/spec/javascripts/issue_show/components/description_spec.js
+++ b/spec/javascripts/issue_show/components/description_spec.js
@@ -51,6 +51,35 @@ describe('Description component', () => {
     });
   });
 
+  it('opens recaptcha dialog if update rejected as spam', (done) => {
+    let modal;
+    const recaptchaChild = vm.$children
+      .find(child => child.$options._componentTag === 'recaptcha-dialog'); // eslint-disable-line no-underscore-dangle
+
+    recaptchaChild.scriptSrc = '//scriptsrc';
+
+    vm.taskListUpdateSuccess({
+      recaptcha_html: '<div class="g-recaptcha">recaptcha_html</div>',
+    });
+
+    vm.$nextTick()
+      .then(() => {
+        modal = vm.$el.querySelector('.js-recaptcha-dialog');
+
+        expect(modal.style.display).not.toEqual('none');
+        expect(modal.querySelector('.g-recaptcha').textContent).toEqual('recaptcha_html');
+        expect(document.body.querySelector('.js-recaptcha-script').src).toMatch('//scriptsrc');
+      })
+      .then(() => modal.querySelector('.close').click())
+      .then(() => vm.$nextTick())
+      .then(() => {
+        expect(modal.style.display).toEqual('none');
+        expect(document.body.querySelector('.js-recaptcha-script')).toBeNull();
+      })
+      .then(done)
+      .catch(done.fail);
+  });
+
   describe('TaskList', () => {
     beforeEach(() => {
       vm = mountComponent(DescriptionComponent, Object.assign({}, props, {
@@ -86,6 +115,7 @@ describe('Description component', () => {
           dataType: 'issuableType',
           fieldName: 'description',
           selector: '.detail-page-description',
+          onSuccess: jasmine.any(Function),
         });
         done();
       });