1 files changed, 189 insertions, 0 deletions
diff --git a/spec/javascripts/ci_variable_list/ajax_variable_list_spec.js b/spec/javascripts/ci_variable_list/ajax_variable_list_spec.js
new file mode 100644
index 00000000000..5b9cdceee71
--- /dev/null
+++ b/spec/javascripts/ci_variable_list/ajax_variable_list_spec.js
@@ -0,0 +1,189 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import AjaxFormVariableList from '~/ci_variable_list/ajax_variable_list';
+
+const VARIABLE_PATCH_ENDPOINT = 'http://test.host/frontend-fixtures/builds-project/variables';
+
+describe('AjaxFormVariableList', () => {
+  preloadFixtures('projects/ci_cd_settings.html.raw');
+  preloadFixtures('projects/ci_cd_settings_with_variables.html.raw');
+
+  let container;
+  let saveButton;
+  let errorBox;
+
+  let mock;
+  let ajaxVariableList;
+
+  beforeEach(() => {
+    loadFixtures('projects/ci_cd_settings.html.raw');
+    container = document.querySelector('.js-ci-variable-list-section');
+
+    mock = new MockAdapter(axios);
+
+    const ajaxVariableListEl = document.querySelector('.js-ci-variable-list-section');
+    saveButton = ajaxVariableListEl.querySelector('.js-secret-variables-save-button');
+    errorBox = container.querySelector('.js-ci-variable-error-box');
+    ajaxVariableList = new AjaxFormVariableList({
+      container,
+      formField: 'variables',
+      saveButton,
+      errorBox,
+      saveEndpoint: container.dataset.saveEndpoint,
+    });
+
+    spyOn(ajaxVariableList, 'updateRowsWithPersistedVariables').and.callThrough();
+    spyOn(ajaxVariableList.variableList, 'toggleEnableRow').and.callThrough();
+  });
+
+  afterEach(() => {
+    mock.restore();
+  });
+
+  describe('onSaveClicked', () => {
+    it('shows loading spinner while waiting for the request', (done) => {
+      const loadingIcon = saveButton.querySelector('.js-secret-variables-save-loading-icon');
+
+      mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(() => {
+        expect(loadingIcon.classList.contains('hide')).toEqual(false);
+
+        return [200, {}];
+      });
+
+      expect(loadingIcon.classList.contains('hide')).toEqual(true);
+
+      ajaxVariableList.onSaveClicked()
+        .then(() => {
+          expect(loadingIcon.classList.contains('hide')).toEqual(true);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('calls `updateRowsWithPersistedVariables` with the persisted variables', (done) => {
+      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);
+    });
+
+    it('hides any previous error box', (done) => {
+      mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(200);
+
+      expect(errorBox.classList.contains('hide')).toEqual(true);
+
+      ajaxVariableList.onSaveClicked()
+        .then(() => {
+          expect(errorBox.classList.contains('hide')).toEqual(true);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('disables remove buttons while waiting for the request', (done) => {
+      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);
+    });
+
+    it('shows error box with validation errors', (done) => {
+      const validationError = 'some validation error';
+      mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(400, [
+        validationError,
+      ]);
+
+      expect(errorBox.classList.contains('hide')).toEqual(true);
+
+      ajaxVariableList.onSaveClicked()
+        .then(() => {
+          expect(errorBox.classList.contains('hide')).toEqual(false);
+          expect(errorBox.textContent.trim().replace(/\n+\s+/m, ' ')).toEqual(`Validation failed ${validationError}`);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('shows flash message when request fails', (done) => {
+      mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(500);
+
+      expect(errorBox.classList.contains('hide')).toEqual(true);
+
+      ajaxVariableList.onSaveClicked()
+        .then(() => {
+          expect(errorBox.classList.contains('hide')).toEqual(true);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+
+  describe('updateRowsWithPersistedVariables', () => {
+    beforeEach(() => {
+      loadFixtures('projects/ci_cd_settings_with_variables.html.raw');
+      container = document.querySelector('.js-ci-variable-list-section');
+
+      const ajaxVariableListEl = document.querySelector('.js-ci-variable-list-section');
+      saveButton = ajaxVariableListEl.querySelector('.js-secret-variables-save-button');
+      errorBox = container.querySelector('.js-ci-variable-error-box');
+      ajaxVariableList = new AjaxFormVariableList({
+        container,
+        formField: 'variables',
+        saveButton,
+        errorBox,
+        saveEndpoint: container.dataset.saveEndpoint,
+      });
+    });
+
+    it('removes variable that was removed', () => {
+      expect(container.querySelectorAll('.js-row').length).toBe(3);
+
+      container.querySelector('.js-row-remove-button').click();
+
+      expect(container.querySelectorAll('.js-row').length).toBe(3);
+
+      ajaxVariableList.updateRowsWithPersistedVariables([]);
+
+      expect(container.querySelectorAll('.js-row').length).toBe(2);
+    });
+
+    it('updates new variable row with persisted ID', () => {
+      const row = container.querySelector('.js-row:last-child');
+      const idInput = row.querySelector('.js-ci-variable-input-id');
+      const keyInput = row.querySelector('.js-ci-variable-input-key');
+      const valueInput = row.querySelector('.js-ci-variable-input-value');
+
+      keyInput.value = 'foo';
+      keyInput.dispatchEvent(new Event('input'));
+      valueInput.value = 'bar';
+      valueInput.dispatchEvent(new Event('input'));
+
+      expect(idInput.value).toEqual('');
+
+      ajaxVariableList.updateRowsWithPersistedVariables([{
+        id: 3,
+        key: 'foo',
+        value: 'bar',
+      }]);
+
+      expect(idInput.value).toEqual('3');
+      expect(row.dataset.isPersisted).toEqual('true');
+    });
+  });
+});