Merge branch '194229-migrate-spec-javascripts-dirty_submit-to-jest' into 'master'

Migrate dirty_submit to Jest

Closes #194229

See merge request gitlab-org/gitlab!30294

spec/frontend/dirty_submit/dirty_submit_collection_spec.js

+import DirtySubmitCollection from '~/dirty_submit/dirty_submit_collection';
+import { setInputValue, createForm } from './helper';
+
+jest.mock('lodash/throttle', () => jest.fn(fn => fn));
+
+describe('DirtySubmitCollection', () => {
+  const testElementsCollection = [createForm(), createForm()];
+  const forms = testElementsCollection.map(testElements => testElements.form);
+
+  new DirtySubmitCollection(forms); // eslint-disable-line no-new
+
+  it.each(testElementsCollection)('disables submits until there are changes', testElements => {
+    const { input, submit } = testElements;
+    const originalValue = input.value;
+
+    expect(submit.disabled).toBe(true);
+    setInputValue(input, `${originalValue} changes`);
+    expect(submit.disabled).toBe(false);
+    setInputValue(input, originalValue);
+    expect(submit.disabled).toBe(true);
+  });
+});

spec/javascripts/dirty_submit/dirty_submit_form_spec.js → spec/frontend/dirty_submit/dirty_submit_form_spec.js

-import { range as rge } from 'lodash';
+import { range as rge, throttle } from 'lodash';
 import DirtySubmitForm from '~/dirty_submit/dirty_submit_form';
 import { getInputValue, setInputValue, createForm } from './helper';
 
+jest.mock('lodash/throttle', () => jest.fn(fn => fn));
+const lodash = jest.requireActual('lodash');
+
 function expectToToggleDisableOnDirtyUpdate(submit, input) {
   const originalValue = getInputValue(input);
 
   expect(submit.disabled).toBe(true);
 
-  return setInputValue(input, `${originalValue} changes`)
-    .then(() => expect(submit.disabled).toBe(false))
-    .then(() => setInputValue(input, originalValue))
-    .then(() => expect(submit.disabled).toBe(true));
+  setInputValue(input, `${originalValue} changes`);
+  expect(submit.disabled).toBe(false);
+  setInputValue(input, originalValue);
+  expect(submit.disabled).toBe(true);
 }
 
 describe('DirtySubmitForm', () => {
-  const originalThrottleDuration = DirtySubmitForm.THROTTLE_DURATION;
-
   describe('submit button tests', () => {
-    beforeEach(() => {
-      DirtySubmitForm.THROTTLE_DURATION = 0;
-    });
-
-    afterEach(() => {
-      DirtySubmitForm.THROTTLE_DURATION = originalThrottleDuration;
-    });
-
-    it('disables submit until there are changes', done => {
+    it('disables submit until there are changes', () => {
       const { form, input, submit } = createForm();
 
       new DirtySubmitForm(form); // eslint-disable-line no-new
 
-      return expectToToggleDisableOnDirtyUpdate(submit, input)
-        .then(done)
-        .catch(done.fail);
+      expectToToggleDisableOnDirtyUpdate(submit, input);
     });
 
-    it('disables submit until there are changes when initializing with a falsy value', done => {
+    it('disables submit until there are changes when initializing with a falsy value', () => {
       const { form, input, submit } = createForm();
       input.value = '';
 
       new DirtySubmitForm(form); // eslint-disable-line no-new
 
-      return expectToToggleDisableOnDirtyUpdate(submit, input)
-        .then(done)
-        .catch(done.fail);
+      expectToToggleDisableOnDirtyUpdate(submit, input);
     });
 
-    it('disables submit until there are changes for radio inputs', done => {
+    it('disables submit until there are changes for radio inputs', () => {
       const { form, input, submit } = createForm('radio');
 
       new DirtySubmitForm(form); // eslint-disable-line no-new
 
-      return expectToToggleDisableOnDirtyUpdate(submit, input)
-        .then(done)
-        .catch(done.fail);
+      expectToToggleDisableOnDirtyUpdate(submit, input);
     });
 
-    it('disables submit until there are changes for checkbox inputs', done => {
+    it('disables submit until there are changes for checkbox inputs', () => {
       const { form, input, submit } = createForm('checkbox');
 
       new DirtySubmitForm(form); // eslint-disable-line no-new
 
-      return expectToToggleDisableOnDirtyUpdate(submit, input)
-        .then(done)
-        .catch(done.fail);
+      expectToToggleDisableOnDirtyUpdate(submit, input);
     });
   });
 
   describe('throttling tests', () => {
     beforeEach(() => {
-      jasmine.clock().install();
-      jasmine.clock().mockDate();
-      DirtySubmitForm.THROTTLE_DURATION = 100;
+      throttle.mockImplementation(lodash.throttle);
+      jest.useFakeTimers();
     });
 
     afterEach(() => {
-      jasmine.clock().uninstall();
-      DirtySubmitForm.THROTTLE_DURATION = originalThrottleDuration;
+      throttle.mockReset();
     });
 
     it('throttles updates when rapid changes are made to a single form element', () => {
       const { form, input } = createForm();
-      const updateDirtyInputSpy = spyOn(new DirtySubmitForm(form), 'updateDirtyInput');
+      const updateDirtyInputSpy = jest.spyOn(new DirtySubmitForm(form), 'updateDirtyInput');
 
       rge(10).forEach(i => {
         setInputValue(input, `change ${i}`, false);
       });
 
-      jasmine.clock().tick(101);
+      jest.runOnlyPendingTimers();
 
-      expect(updateDirtyInputSpy).toHaveBeenCalledTimes(2);
+      expect(updateDirtyInputSpy).toHaveBeenCalledTimes(1);
     });
 
     it('does not throttle updates when rapid changes are made to different form elements', () => {
@@ -99,14 +82,14 @@ describe('DirtySubmitForm', () => {
         form.innerHTML += `<input type="text" name="input-${i}" class="js-input-${i}"/>`;
       });
 
-      const updateDirtyInputSpy = spyOn(new DirtySubmitForm(form), 'updateDirtyInput');
+      const updateDirtyInputSpy = jest.spyOn(new DirtySubmitForm(form), 'updateDirtyInput');
 
       range.forEach(i => {
         const input = form.querySelector(`.js-input-${i}`);
         setInputValue(input, `change`, false);
       });
 
-      jasmine.clock().tick(101);
+      jest.runOnlyPendingTimers();
 
       expect(updateDirtyInputSpy).toHaveBeenCalledTimes(range.length);
     });

spec/javascripts/dirty_submit/helper.js → spec/frontend/dirty_submit/helper.js

-import DirtySubmitForm from '~/dirty_submit/dirty_submit_form';
-import setTimeoutPromiseHelper from '../helpers/set_timeout_promise_helper';
-
 function isCheckableType(type) {
   return /^(radio|checkbox)$/.test(type);
 }
@@ -22,8 +19,6 @@ export function setInputValue(element, value) {
       bubbles: true,
     }),
   );
-
-  return setTimeoutPromiseHelper(DirtySubmitForm.THROTTLE_DURATION);
 }
 
 export function getInputValue(input) {

spec/javascripts/dirty_submit/dirty_submit_collection_spec.js

-import DirtySubmitCollection from '~/dirty_submit/dirty_submit_collection';
-import { setInputValue, createForm } from './helper';
-
-describe('DirtySubmitCollection', () => {
-  it('disables submits until there are changes', done => {
-    const testElementsCollection = [createForm(), createForm()];
-    const forms = testElementsCollection.map(testElements => testElements.form);
-
-    new DirtySubmitCollection(forms); // eslint-disable-line no-new
-
-    testElementsCollection.forEach(testElements => {
-      const { input, submit } = testElements;
-      const originalValue = input.value;
-
-      expect(submit.disabled).toBe(true);
-
-      return setInputValue(input, `${originalValue} changes`)
-        .then(() => {
-          expect(submit.disabled).toBe(false);
-        })
-        .then(() => setInputValue(input, originalValue))
-        .then(() => {
-          expect(submit.disabled).toBe(true);
-        })
-        .then(done)
-        .catch(done.fail);
-    });
-  });
-});