Merge branch '194220-migrate-spec-javascripts-ci_variable_list-to-jest' into 'master'

Migrate ci_variable_list to Jest

Closes #194220

See merge request gitlab-org/gitlab!30049

spec/javascripts/ci_variable_list/ajax_variable_list_spec.js → spec/frontend/ci_variable_list/ci_variable_list/ajax_variable_list_spec.js

@@ -35,8 +35,8 @@ describe('AjaxFormVariableList', () => {
       maskableRegex: container.dataset.maskableRegex,
     });
 
-    spyOn(ajaxVariableList, 'updateRowsWithPersistedVariables').and.callThrough();
-    spyOn(ajaxVariableList.variableList, 'toggleEnableRow').and.callThrough();
+    jest.spyOn(ajaxVariableList, 'updateRowsWithPersistedVariables');
+    jest.spyOn(ajaxVariableList.variableList, 'toggleEnableRow');
   });
 
   afterEach(() => {
@@ -44,7 +44,7 @@ describe('AjaxFormVariableList', () => {
   });
 
   describe('onSaveClicked', () => {
-    it('shows loading spinner while waiting for the request', done => {
+    it('shows loading spinner while waiting for the request', () => {
       const loadingIcon = saveButton.querySelector('.js-ci-variables-save-loading-icon');
 
       mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(() => {
@@ -55,63 +55,47 @@ describe('AjaxFormVariableList', () => {
 
       expect(loadingIcon.classList.contains(HIDE_CLASS)).toEqual(true);
 
-      ajaxVariableList
-        .onSaveClicked()
-        .then(() => {
-          expect(loadingIcon.classList.contains(HIDE_CLASS)).toEqual(true);
-        })
-        .then(done)
-        .catch(done.fail);
+      return ajaxVariableList.onSaveClicked().then(() => {
+        expect(loadingIcon.classList.contains(HIDE_CLASS)).toEqual(true);
+      });
     });
 
-    it('calls `updateRowsWithPersistedVariables` with the persisted variables', done => {
+    it('calls `updateRowsWithPersistedVariables` with the persisted variables', () => {
       const variablesResponse = [{ id: 1, key: 'foo', value: 'bar' }];
       mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(200, {
         variables: variablesResponse,
       });
 
-      ajaxVariableList
-        .onSaveClicked()
-        .then(() => {
-          expect(ajaxVariableList.updateRowsWithPersistedVariables).toHaveBeenCalledWith(
-            variablesResponse,
-          );
-        })
-        .then(done)
-        .catch(done.fail);
+      return ajaxVariableList.onSaveClicked().then(() => {
+        expect(ajaxVariableList.updateRowsWithPersistedVariables).toHaveBeenCalledWith(
+          variablesResponse,
+        );
+      });
     });
 
-    it('hides any previous error box', done => {
+    it('hides any previous error box', () => {
       mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(200);
 
       expect(errorBox.classList.contains(HIDE_CLASS)).toEqual(true);
 
-      ajaxVariableList
-        .onSaveClicked()
-        .then(() => {
-          expect(errorBox.classList.contains(HIDE_CLASS)).toEqual(true);
-        })
-        .then(done)
-        .catch(done.fail);
+      return ajaxVariableList.onSaveClicked().then(() => {
+        expect(errorBox.classList.contains(HIDE_CLASS)).toEqual(true);
+      });
     });
 
-    it('disables remove buttons while waiting for the request', done => {
+    it('disables remove buttons while waiting for the request', () => {
       mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(() => {
         expect(ajaxVariableList.variableList.toggleEnableRow).toHaveBeenCalledWith(false);
 
         return [200, {}];
       });
 
-      ajaxVariableList
-        .onSaveClicked()
-        .then(() => {
-          expect(ajaxVariableList.variableList.toggleEnableRow).toHaveBeenCalledWith(true);
-        })
-        .then(done)
-        .catch(done.fail);
+      return ajaxVariableList.onSaveClicked().then(() => {
+        expect(ajaxVariableList.variableList.toggleEnableRow).toHaveBeenCalledWith(true);
+      });
     });
 
-    it('hides secret values', done => {
+    it('hides secret values', () => {
       mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(200, {});
 
       const row = container.querySelector('.js-row');
@@ -124,46 +108,34 @@ describe('AjaxFormVariableList', () => {
       expect(valuePlaceholder.classList.contains(HIDE_CLASS)).toBe(true);
       expect(valueInput.classList.contains(HIDE_CLASS)).toBe(false);
 
-      ajaxVariableList
-        .onSaveClicked()
-        .then(() => {
-          expect(valuePlaceholder.classList.contains(HIDE_CLASS)).toBe(false);
-          expect(valueInput.classList.contains(HIDE_CLASS)).toBe(true);
-        })
-        .then(done)
-        .catch(done.fail);
+      return ajaxVariableList.onSaveClicked().then(() => {
+        expect(valuePlaceholder.classList.contains(HIDE_CLASS)).toBe(false);
+        expect(valueInput.classList.contains(HIDE_CLASS)).toBe(true);
+      });
     });
 
-    it('shows error box with validation errors', done => {
+    it('shows error box with validation errors', () => {
       const validationError = 'some validation error';
       mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(400, [validationError]);
 
       expect(errorBox.classList.contains(HIDE_CLASS)).toEqual(true);
 
-      ajaxVariableList
-        .onSaveClicked()
-        .then(() => {
-          expect(errorBox.classList.contains(HIDE_CLASS)).toEqual(false);
-          expect(errorBox.textContent.trim().replace(/\n+\s+/m, ' ')).toEqual(
-            `Validation failed ${validationError}`,
-          );
-        })
-        .then(done)
-        .catch(done.fail);
+      return ajaxVariableList.onSaveClicked().then(() => {
+        expect(errorBox.classList.contains(HIDE_CLASS)).toEqual(false);
+        expect(errorBox.textContent.trim().replace(/\n+\s+/m, ' ')).toEqual(
+          `Validation failed ${validationError}`,
+        );
+      });
     });
 
-    it('shows flash message when request fails', done => {
+    it('shows flash message when request fails', () => {
       mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(500);
 
       expect(errorBox.classList.contains(HIDE_CLASS)).toEqual(true);
 
-      ajaxVariableList
-        .onSaveClicked()
-        .then(() => {
-          expect(errorBox.classList.contains(HIDE_CLASS)).toEqual(true);
-        })
-        .then(done)
-        .catch(done.fail);
+      return ajaxVariableList.onSaveClicked().then(() => {
+        expect(errorBox.classList.contains(HIDE_CLASS)).toEqual(true);
+      });
     });
   });
 

spec/javascripts/ci_variable_list/ci_variable_list_spec.js → spec/frontend/ci_variable_list/ci_variable_list/ci_variable_list_spec.js

 import $ from 'jquery';
-import getSetTimeoutPromise from 'spec/helpers/set_timeout_promise_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import VariableList from '~/ci_variable_list/ci_variable_list';
 
 const HIDE_CLASS = 'hide';
@@ -127,86 +127,74 @@ describe('VariableList', () => {
       variableList.init();
     });
 
-    it('should not add another row when editing the last rows protected checkbox', done => {
+    it('should not add another row when editing the last rows protected checkbox', () => {
       const $row = $wrapper.find('.js-row:last-child');
       $row.find('.ci-variable-protected-item .js-project-feature-toggle').click();
 
-      getSetTimeoutPromise()
-        .then(() => {
-          expect($wrapper.find('.js-row').length).toBe(1);
-        })
-        .then(done)
-        .catch(done.fail);
+      return waitForPromises().then(() => {
+        expect($wrapper.find('.js-row').length).toBe(1);
+      });
     });
 
-    it('should not add another row when editing the last rows masked checkbox', done => {
+    it('should not add another row when editing the last rows masked checkbox', () => {
+      jest.spyOn(variableList, 'checkIfRowTouched');
       const $row = $wrapper.find('.js-row:last-child');
       $row.find('.ci-variable-masked-item .js-project-feature-toggle').click();
 
-      getSetTimeoutPromise()
-        .then(() => {
-          expect($wrapper.find('.js-row').length).toBe(1);
-        })
-        .then(done)
-        .catch(done.fail);
+      return waitForPromises().then(() => {
+        // This validates that we are checking after the event listener has run
+        expect(variableList.checkIfRowTouched).toHaveBeenCalled();
+        expect($wrapper.find('.js-row').length).toBe(1);
+      });
     });
 
     describe('validateMaskability', () => {
       let $row;
 
       const maskingErrorElement = '.js-row:last-child .masking-validation-error';
+      const clickToggle = () =>
+        $row.find('.ci-variable-masked-item .js-project-feature-toggle').click();
 
       beforeEach(() => {
         $row = $wrapper.find('.js-row:last-child');
-        $row.find('.ci-variable-masked-item .js-project-feature-toggle').click();
       });
 
       it('has a regex provided via a data attribute', () => {
+        clickToggle();
+
         expect($wrapper.attr('data-maskable-regex')).toBe('^[a-zA-Z0-9_+=/@:.-]{8,}$');
       });
 
-      it('allows values that are 8 characters long', done => {
+      it('allows values that are 8 characters long', () => {
         $row.find('.js-ci-variable-input-value').val('looooong');
 
-        getSetTimeoutPromise()
-          .then(() => {
-            expect($wrapper.find(maskingErrorElement)).toHaveClass('hide');
-          })
-          .then(done)
-          .catch(done.fail);
+        clickToggle();
+
+        expect($wrapper.find(maskingErrorElement)).toHaveClass('hide');
       });
 
-      it('rejects values that are shorter than 8 characters', done => {
+      it('rejects values that are shorter than 8 characters', () => {
         $row.find('.js-ci-variable-input-value').val('short');
 
-        getSetTimeoutPromise()
-          .then(() => {
-            expect($wrapper.find(maskingErrorElement)).toBeVisible();
-          })
-          .then(done)
-          .catch(done.fail);
+        clickToggle();
+
+        expect($wrapper.find(maskingErrorElement)).toBeVisible();
       });
 
-      it('allows values with base 64 characters', done => {
+      it('allows values with base 64 characters', () => {
         $row.find('.js-ci-variable-input-value').val('abcABC123_+=/-');
 
-        getSetTimeoutPromise()
-          .then(() => {
-            expect($wrapper.find(maskingErrorElement)).toHaveClass('hide');
-          })
-          .then(done)
-          .catch(done.fail);
+        clickToggle();
+
+        expect($wrapper.find(maskingErrorElement)).toHaveClass('hide');
       });
 
-      it('rejects values with other special characters', done => {
+      it('rejects values with other special characters', () => {
         $row.find('.js-ci-variable-input-value').val('1234567$');
 
-        getSetTimeoutPromise()
-          .then(() => {
-            expect($wrapper.find(maskingErrorElement)).toBeVisible();
-          })
-          .then(done)
-          .catch(done.fail);
+        clickToggle();
+
+        expect($wrapper.find(maskingErrorElement)).toBeVisible();
       });
     });
   });