Merge branch '42929-hide-new-variable-values' into 'master'

Hide CI secret variable values on save

Closes #42929

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

1 files changed, 37 insertions, 4 deletions

diff --git a/spec/javascripts/ci_variable_list/ci_variable_list_spec.js b/spec/javascripts/ci_variable_list/ci_variable_list_spec.js
index 8acb346901f..cac785fd3c6 100644
--- a/spec/javascripts/ci_variable_list/ci_variable_list_spec.js
+++ b/spec/javascripts/ci_variable_list/ci_variable_list_spec.js
@@ -1,6 +1,8 @@
 import VariableList from '~/ci_variable_list/ci_variable_list';
 import getSetTimeoutPromise from '../helpers/set_timeout_promise_helper';
 
+const HIDE_CLASS = 'hide';
+
 describe('VariableList', () => {
   preloadFixtures('pipeline_schedules/edit.html.raw');
   preloadFixtures('pipeline_schedules/edit_with_variables.html.raw');
@@ -92,14 +94,14 @@ describe('VariableList', () => {
         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);
+        expect($placeholder.hasClass(HIDE_CLASS)).toBe(false);
+        expect($inputValue.hasClass(HIDE_CLASS)).toBe(true);
 
         // Reveal values
         $wrapper.find('.js-secret-value-reveal-button').click();
 
-        expect($placeholder.hasClass('hide')).toBe(true);
-        expect($inputValue.hasClass('hide')).toBe(false);
+        expect($placeholder.hasClass(HIDE_CLASS)).toBe(true);
+        expect($inputValue.hasClass(HIDE_CLASS)).toBe(false);
       });
     });
   });
@@ -179,4 +181,35 @@ describe('VariableList', () => {
       expect($wrapper.find('.js-ci-variable-input-key:not([disabled])').length).toBe(3);
     });
   });
+
+  describe('hideValues', () => {
+    beforeEach(() => {
+      loadFixtures('projects/ci_cd_settings.html.raw');
+      $wrapper = $('.js-ci-variable-list-section');
+
+      variableList = new VariableList({
+        container: $wrapper,
+        formField: 'variables',
+      });
+      variableList.init();
+    });
+
+    it('should hide value input and show placeholder stars', () => {
+      const $row = $wrapper.find('.js-row');
+      const $inputValue = $row.find('.js-ci-variable-input-value');
+      const $placeholder = $row.find('.js-secret-value-placeholder');
+
+      $row.find('.js-ci-variable-input-value')
+        .val('foo')
+        .trigger('input');
+
+      expect($placeholder.hasClass(HIDE_CLASS)).toBe(true);
+      expect($inputValue.hasClass(HIDE_CLASS)).toBe(false);
+
+      variableList.hideValues();
+
+      expect($placeholder.hasClass(HIDE_CLASS)).toBe(false);
+      expect($inputValue.hasClass(HIDE_CLASS)).toBe(true);
+    });
+  });
 });