Merge branch 'refactor-ci-variable-list-for-future-usage-in-4110' into 'master'

Refactor CI variable list code for usage with CI/CD settings page secret variables

See merge request gitlab-org/gitlab-ce!16729

5 files changed, 252 insertions, 159 deletions

diff --git a/spec/features/projects/pipeline_schedules_spec.rb b/spec/features/projects/pipeline_schedules_spec.rb
index fa2f7a1fd78..65e24862d43 100644
--- a/spec/features/projects/pipeline_schedules_spec.rb
+++ b/spec/features/projects/pipeline_schedules_spec.rb
@@ -168,11 +168,11 @@ feature 'Pipeline Schedules', :js do
 
       scenario 'user sees the new variable in edit window' do
         find(".content-list .pipeline-schedule-table-row:nth-child(1) .btn-group a[title='Edit']").click
-        page.within('.pipeline-variable-list') do
-          expect(find(".pipeline-variable-row:nth-child(1) .pipeline-variable-key-input").value).to eq('AAA')
-          expect(find(".pipeline-variable-row:nth-child(1) .pipeline-variable-value-input").value).to eq('AAA123')
-          expect(find(".pipeline-variable-row:nth-child(2) .pipeline-variable-key-input").value).to eq('BBB')
-          expect(find(".pipeline-variable-row:nth-child(2) .pipeline-variable-value-input").value).to eq('BBB123')
+        page.within('.ci-variable-list') do
+          expect(find(".ci-variable-row:nth-child(1) .js-ci-variable-input-key").value).to eq('AAA')
+          expect(find(".ci-variable-row:nth-child(1) .js-ci-variable-input-value", visible: false).value).to eq('AAA123')
+          expect(find(".ci-variable-row:nth-child(2) .js-ci-variable-input-key").value).to eq('BBB')
+          expect(find(".ci-variable-row:nth-child(2) .js-ci-variable-input-value", visible: false).value).to eq('BBB123')
         end
       end
     end
@@ -185,16 +185,18 @@ feature 'Pipeline Schedules', :js do
 
         visit_pipelines_schedules
         find(".content-list .pipeline-schedule-table-row:nth-child(1) .btn-group a[title='Edit']").click
-        all('[name="schedule[variables_attributes][][key]"]')[0].set('foo')
-        all('[name="schedule[variables_attributes][][value]"]')[0].set('bar')
+
+        find('.js-ci-variable-list-section .js-secret-value-reveal-button').click
+        first('.js-ci-variable-input-key').set('foo')
+        first('.js-ci-variable-input-value').set('bar')
         click_button 'Save pipeline schedule'
       end
 
       scenario 'user sees the updated variable in edit window' do
         find(".content-list .pipeline-schedule-table-row:nth-child(1) .btn-group a[title='Edit']").click
-        page.within('.pipeline-variable-list') do
-          expect(find(".pipeline-variable-row:nth-child(1) .pipeline-variable-key-input").value).to eq('foo')
-          expect(find(".pipeline-variable-row:nth-child(1) .pipeline-variable-value-input").value).to eq('bar')
+        page.within('.ci-variable-list') do
+          expect(find(".ci-variable-row:nth-child(1) .js-ci-variable-input-key").value).to eq('foo')
+          expect(find(".ci-variable-row:nth-child(1) .js-ci-variable-input-value", visible: false).value).to eq('bar')
         end
       end
     end
@@ -207,15 +209,15 @@ feature 'Pipeline Schedules', :js do
 
         visit_pipelines_schedules
         find(".content-list .pipeline-schedule-table-row:nth-child(1) .btn-group a[title='Edit']").click
-        find('.pipeline-variable-list .pipeline-variable-row-remove-button').click
+        find('.ci-variable-list .ci-variable-row-remove-button').click
         click_button 'Save pipeline schedule'
       end
 
       scenario 'user does not see the removed variable in edit window' do
         find(".content-list .pipeline-schedule-table-row:nth-child(1) .btn-group a[title='Edit']").click
-        page.within('.pipeline-variable-list') do
-          expect(find(".pipeline-variable-row:nth-child(1) .pipeline-variable-key-input").value).to eq('')
-          expect(find(".pipeline-variable-row:nth-child(1) .pipeline-variable-value-input").value).to eq('')
+        page.within('.ci-variable-list') do
+          expect(find(".ci-variable-row:nth-child(1) .js-ci-variable-input-key").value).to eq('')
+          expect(find(".ci-variable-row:nth-child(1) .js-ci-variable-input-value", visible: false).value).to eq('')
         end
       end
     end
diff --git a/spec/javascripts/ci_variable_list/ci_variable_list_spec.js b/spec/javascripts/ci_variable_list/ci_variable_list_spec.js
new file mode 100644
index 00000000000..0170ab458d4
--- /dev/null
+++ b/spec/javascripts/ci_variable_list/ci_variable_list_spec.js
@@ -0,0 +1,163 @@
+import VariableList from '~/ci_variable_list/ci_variable_list';
+import getSetTimeoutPromise from '../helpers/set_timeout_promise_helper';
+
+describe('VariableList', () => {
+  preloadFixtures('pipeline_schedules/edit.html.raw');
+  preloadFixtures('pipeline_schedules/edit_with_variables.html.raw');
+
+  let $wrapper;
+  let variableList;
+
+  describe('with only key/value inputs', () => {
+    describe('with no variables', () => {
+      beforeEach(() => {
+        loadFixtures('pipeline_schedules/edit.html.raw');
+        $wrapper = $('.js-ci-variable-list-section');
+
+        variableList = new VariableList({
+          container: $wrapper,
+          formField: 'schedule',
+        });
+        variableList.init();
+      });
+
+      it('should remove the row when clicking the remove button', () => {
+        $wrapper.find('.js-row-remove-button').trigger('click');
+
+        expect($wrapper.find('.js-row').length).toBe(0);
+      });
+
+      it('should add another row when editing the last rows key input', () => {
+        const $row = $wrapper.find('.js-row');
+        $row.find('.js-ci-variable-input-key')
+          .val('foo')
+          .trigger('input');
+
+        expect($wrapper.find('.js-row').length).toBe(2);
+
+        // Check for the correct default in the new row
+        const $keyInput = $wrapper.find('.js-row:last-child').find('.js-ci-variable-input-key');
+        expect($keyInput.val()).toBe('');
+      });
+
+      it('should add another row when editing the last rows value textarea', () => {
+        const $row = $wrapper.find('.js-row');
+        $row.find('.js-ci-variable-input-value')
+          .val('foo')
+          .trigger('input');
+
+        expect($wrapper.find('.js-row').length).toBe(2);
+
+        // Check for the correct default in the new row
+        const $valueInput = $wrapper.find('.js-row:last-child').find('.js-ci-variable-input-key');
+        expect($valueInput.val()).toBe('');
+      });
+
+      it('should remove empty row after blurring', () => {
+        const $row = $wrapper.find('.js-row');
+        $row.find('.js-ci-variable-input-key')
+          .val('foo')
+          .trigger('input');
+
+        expect($wrapper.find('.js-row').length).toBe(2);
+
+        $row.find('.js-ci-variable-input-key')
+          .val('')
+          .trigger('input')
+          .trigger('blur');
+
+        expect($wrapper.find('.js-row').length).toBe(1);
+      });
+    });
+
+    describe('with persisted variables', () => {
+      beforeEach(() => {
+        loadFixtures('pipeline_schedules/edit_with_variables.html.raw');
+        $wrapper = $('.js-ci-variable-list-section');
+
+        variableList = new VariableList({
+          container: $wrapper,
+          formField: 'schedule',
+        });
+        variableList.init();
+      });
+
+      it('should have "Reveal values" button initially when there are already variables', () => {
+        expect($wrapper.find('.js-secret-value-reveal-button').text()).toBe('Reveal values');
+      });
+
+      it('should reveal hidden values', () => {
+        const $row = $wrapper.find('.js-row:first-child');
+        const $inputValue = $row.find('.js-ci-variable-input-value');
+        const $placeholder = $row.find('.js-secret-value-placeholder');
+
+        expect($placeholder.hasClass('hide')).toBe(false);
+        expect($inputValue.hasClass('hide')).toBe(true);
+
+        // Reveal values
+        $wrapper.find('.js-secret-value-reveal-button').click();
+
+        expect($placeholder.hasClass('hide')).toBe(true);
+        expect($inputValue.hasClass('hide')).toBe(false);
+      });
+    });
+  });
+
+  describe('with all inputs(key, value, protected)', () => {
+    beforeEach(() => {
+      // This markup will be replaced with a fixture when we can render the
+      // CI/CD settings page with the new dynamic variable list in https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/4110
+      $wrapper = $(`<form class="js-variable-list">
+        <ul>
+          <li class="js-row">
+            <div class="ci-variable-body-item">
+              <input class="js-ci-variable-input-key" name="variables[variables_attributes][][key]">
+            </div>
+
+            <div class="ci-variable-body-item">
+              <textarea class="js-ci-variable-input-value" name="variables[variables_attributes][][value]"></textarea>
+            </div>
+
+            <div class="ci-variable-body-item ci-variable-protected-item">
+              <button type="button" class="js-project-feature-toggle project-feature-toggle">
+                <input
+                  type="hidden"
+                  class="js-ci-variable-input-protected js-project-feature-toggle-input"
+                  name="variables[variables_attributes][][protected]"
+                  value="true"
+                />
+              </button>
+            </div>
+
+            <button type="button" class="js-row-remove-button"></button>
+          </li>
+        </ul>
+        <button type="button" class="js-secret-value-reveal-button">
+          Reveal values
+        </button>
+      </form>`);
+
+      variableList = new VariableList({
+        container: $wrapper,
+        formField: 'variables',
+      });
+      variableList.init();
+    });
+
+    it('should add another row when editing the last rows protected checkbox', (done) => {
+      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(2);
+
+          // Check for the correct default in the new row
+          const $protectedInput = $wrapper.find('.js-row:last-child').find('.js-ci-variable-input-protected');
+          expect($protectedInput.val()).toBe('true');
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+});
diff --git a/spec/javascripts/ci_variable_list/native_form_variable_list_spec.js b/spec/javascripts/ci_variable_list/native_form_variable_list_spec.js
new file mode 100644
index 00000000000..eb508a7f059
--- /dev/null
+++ b/spec/javascripts/ci_variable_list/native_form_variable_list_spec.js
@@ -0,0 +1,30 @@
+import setupNativeFormVariableList from '~/ci_variable_list/native_form_variable_list';
+
+describe('NativeFormVariableList', () => {
+  preloadFixtures('pipeline_schedules/edit.html.raw');
+
+  let $wrapper;
+
+  beforeEach(() => {
+    loadFixtures('pipeline_schedules/edit.html.raw');
+    $wrapper = $('.js-ci-variable-list-section');
+
+    setupNativeFormVariableList({
+      container: $wrapper,
+      formField: 'schedule',
+    });
+  });
+
+  describe('onFormSubmit', () => {
+    it('should clear out the `name` attribute on the inputs for the last empty row on form submission (avoid BE validation)', () => {
+      const $row = $wrapper.find('.js-row');
+      expect($row.find('.js-ci-variable-input-key').attr('name')).toBe('schedule[variables_attributes][][key]');
+      expect($row.find('.js-ci-variable-input-value').attr('name')).toBe('schedule[variables_attributes][][value]');
+
+      $wrapper.closest('form').trigger('trigger-submit');
+
+      expect($row.find('.js-ci-variable-input-key').attr('name')).toBe('');
+      expect($row.find('.js-ci-variable-input-value').attr('name')).toBe('');
+    });
+  });
+});
diff --git a/spec/javascripts/fixtures/pipeline_schedules.rb b/spec/javascripts/fixtures/pipeline_schedules.rb
new file mode 100644
index 00000000000..56f27ea7df1
--- /dev/null
+++ b/spec/javascripts/fixtures/pipeline_schedules.rb
@@ -0,0 +1,43 @@
+require 'spec_helper'
+
+describe Projects::PipelineSchedulesController, '(JavaScript fixtures)', type: :controller do
+  include JavaScriptFixturesHelpers
+
+  let(:admin) { create(:admin) }
+  let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
+  let(:project) { create(:project, :public, :repository) }
+  let!(:pipeline_schedule) { create(:ci_pipeline_schedule, project: project, owner: admin) }
+  let!(:pipeline_schedule_populated) { create(:ci_pipeline_schedule, project: project, owner: admin) }
+  let!(:pipeline_schedule_variable1) { create(:ci_pipeline_schedule_variable, key: 'foo', value: 'foovalue', pipeline_schedule: pipeline_schedule_populated) }
+  let!(:pipeline_schedule_variable2) { create(:ci_pipeline_schedule_variable, key: 'bar', value: 'barvalue', pipeline_schedule: pipeline_schedule_populated) }
+
+  render_views
+
+  before(:all) do
+    clean_frontend_fixtures('pipeline_schedules/')
+  end
+
+  before do
+    sign_in(admin)
+  end
+
+  it 'pipeline_schedules/edit.html.raw' do |example|
+    get :edit,
+      namespace_id: project.namespace.to_param,
+      project_id: project,
+      id: pipeline_schedule.id
+
+    expect(response).to be_success
+    store_frontend_fixture(response, example.description)
+  end
+
+  it 'pipeline_schedules/edit_with_variables.html.raw' do |example|
+    get :edit,
+      namespace_id: project.namespace.to_param,
+      project_id: project,
+      id: pipeline_schedule_populated.id
+
+    expect(response).to be_success
+    store_frontend_fixture(response, example.description)
+  end
+end
diff --git a/spec/javascripts/pipeline_schedules/setup_pipeline_variable_list_spec.js b/spec/javascripts/pipeline_schedules/setup_pipeline_variable_list_spec.js
deleted file mode 100644
index 5b316b319a5..00000000000
--- a/spec/javascripts/pipeline_schedules/setup_pipeline_variable_list_spec.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import {
-  setupPipelineVariableList,
-  insertRow,
-  removeRow,
-} from '~/pipeline_schedules/setup_pipeline_variable_list';
-
-describe('Pipeline Variable List', () => {
-  let $markup;
-
-  describe('insertRow', () => {
-    it('should insert another row', () => {
-      $markup = $(`<div>
-        <li class="js-row">
-          <input>
-          <textarea></textarea>
-        </li>
-      </div>`);
-
-      insertRow($markup.find('.js-row'));
-
-      expect($markup.find('.js-row').length).toBe(2);
-    });
-
-    it('should clear `data-is-persisted` on cloned row', () => {
-      $markup = $(`<div>
-        <li class="js-row" data-is-persisted="true"></li>
-      </div>`);
-
-      insertRow($markup.find('.js-row'));
-
-      const $lastRow = $markup.find('.js-row').last();
-      expect($lastRow.attr('data-is-persisted')).toBe(undefined);
-    });
-
-    it('should clear inputs on cloned row', () => {
-      $markup = $(`<div>
-        <li class="js-row">
-          <input value="foo">
-          <textarea>bar</textarea>
-        </li>
-      </div>`);
-
-      insertRow($markup.find('.js-row'));
-
-      const $lastRow = $markup.find('.js-row').last();
-      expect($lastRow.find('input').val()).toBe('');
-      expect($lastRow.find('textarea').val()).toBe('');
-    });
-  });
-
-  describe('removeRow', () => {
-    it('should remove dynamic row', () => {
-      $markup = $(`<div>
-        <li class="js-row">
-          <input>
-          <textarea></textarea>
-        </li>
-      </div>`);
-
-      removeRow($markup.find('.js-row'));
-
-      expect($markup.find('.js-row').length).toBe(0);
-    });
-
-    it('should hide and mark to destroy with already persisted rows', () => {
-      $markup = $(`<div>
-        <li class="js-row" data-is-persisted="true">
-          <input class="js-destroy-input">
-        </li>
-      </div>`);
-
-      const $row = $markup.find('.js-row');
-      removeRow($row);
-
-      expect($row.find('.js-destroy-input').val()).toBe('1');
-      expect($markup.find('.js-row').length).toBe(1);
-    });
-  });
-
-  describe('setupPipelineVariableList', () => {
-    beforeEach(() => {
-      $markup = $(`<form>
-        <li class="js-row">
-          <input class="js-user-input" name="schedule[variables_attributes][][key]">
-          <textarea class="js-user-input" name="schedule[variables_attributes][][value]"></textarea>
-          <button class="js-row-remove-button"></button>
-          <button class="js-row-add-button"></button>
-        </li>
-      </form>`);
-
-      setupPipelineVariableList($markup);
-    });
-
-    it('should remove the row when clicking the remove button', () => {
-      $markup.find('.js-row-remove-button').trigger('click');
-
-      expect($markup.find('.js-row').length).toBe(0);
-    });
-
-    it('should add another row when editing the last rows key input', () => {
-      const $row = $markup.find('.js-row');
-      $row.find('input.js-user-input')
-        .val('foo')
-        .trigger('input');
-
-      expect($markup.find('.js-row').length).toBe(2);
-    });
-
-    it('should add another row when editing the last rows value textarea', () => {
-      const $row = $markup.find('.js-row');
-      $row.find('textarea.js-user-input')
-        .val('foo')
-        .trigger('input');
-
-      expect($markup.find('.js-row').length).toBe(2);
-    });
-
-    it('should remove empty row after blurring', () => {
-      const $row = $markup.find('.js-row');
-      $row.find('input.js-user-input')
-        .val('foo')
-        .trigger('input');
-
-      expect($markup.find('.js-row').length).toBe(2);
-
-      $row.find('input.js-user-input')
-        .val('')
-        .trigger('input')
-        .trigger('blur');
-
-      expect($markup.find('.js-row').length).toBe(1);
-    });
-
-    it('should clear out the `name` attribute on the inputs for the last empty row on form submission (avoid BE validation)', () => {
-      const $row = $markup.find('.js-row');
-      expect($row.find('input').attr('name')).toBe('schedule[variables_attributes][][key]');
-      expect($row.find('textarea').attr('name')).toBe('schedule[variables_attributes][][value]');
-
-      $markup.filter('form').submit();
-
-      expect($row.find('input').attr('name')).toBe('');
-      expect($row.find('textarea').attr('name')).toBe('');
-    });
-  });
-});