Hide runner token in CI/CD settings page

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/38019

3 files changed, 149 insertions, 3 deletions

diff --git a/spec/features/group_variables_spec.rb b/spec/features/group_variables_spec.rb
index d2d0be35f1c..e9b375f4c94 100644
--- a/spec/features/group_variables_spec.rb
+++ b/spec/features/group_variables_spec.rb
@@ -24,7 +24,7 @@ feature 'Group variables', :js do
         expect(find(".variable-value")).to have_content('******')
         expect(find(".variable-protected")).to have_content('Yes')
       end
-      click_on 'Reveal Values'
+      click_on 'Reveal value'
       page.within('.variables-table') do
         expect(find(".variable-value")).to have_content('AAA123')
       end
diff --git a/spec/features/variables_spec.rb b/spec/features/variables_spec.rb
index c78f7d0d9be..dde60c83536 100644
--- a/spec/features/variables_spec.rb
+++ b/spec/features/variables_spec.rb
@@ -65,14 +65,14 @@ describe 'Project variables', :js do
       expect(page).to have_content('******')
     end
 
-    click_button('Reveal Values')
+    click_button('Reveal values')
 
     page.within('.variables-table') do
       expect(page).to have_content('key')
       expect(page).to have_content('key value')
     end
 
-    click_button('Hide Values')
+    click_button('Hide values')
 
     page.within('.variables-table') do
       expect(page).to have_content('key')
diff --git a/spec/javascripts/behaviors/secret_values_spec.js b/spec/javascripts/behaviors/secret_values_spec.js
new file mode 100644
index 00000000000..9eeae474e7d
--- /dev/null
+++ b/spec/javascripts/behaviors/secret_values_spec.js
@@ -0,0 +1,146 @@
+import SecretValues from '~/behaviors/secret_values';
+
+function generateFixtureMarkup(secrets, isRevealed) {
+  return `
+  <div class="js-secret-container">
+    ${secrets.map(secret => `
+      <div class="js-secret-value-placeholder">
+        ***
+      </div>
+      <div class="hide js-secret-value">
+        ${secret}
+      </div>
+    `).join('')}
+    <button
+      class="js-secret-value-reveal-button"
+      data-secret-reveal-status="${isRevealed}"
+    >
+      ...
+    </button>
+  </div>
+  `;
+}
+
+function setupSecretFixture(secrets, isRevealed) {
+  const wrapper = document.createElement('div');
+  wrapper.innerHTML = generateFixtureMarkup(secrets, isRevealed);
+
+  const secretValues = new SecretValues(wrapper.querySelector('.js-secret-container'));
+  secretValues.init();
+
+  return wrapper;
+}
+
+describe('setupSecretValues', () => {
+  describe('with a single secret', () => {
+    const secrets = ['mysecret123'];
+
+    it('should have correct "Reveal" label when values are hidden', () => {
+      const wrapper = setupSecretFixture(secrets, false);
+      const revealButton = wrapper.querySelector('.js-secret-value-reveal-button');
+
+      expect(revealButton.textContent).toEqual('Reveal value');
+    });
+
+    it('should have correct "Hide" label when values are shown', () => {
+      const wrapper = setupSecretFixture(secrets, true);
+      const revealButton = wrapper.querySelector('.js-secret-value-reveal-button');
+
+      expect(revealButton.textContent).toEqual('Hide value');
+    });
+
+    it('should value hidden initially', () => {
+      const wrapper = setupSecretFixture(secrets, false);
+      const values = wrapper.querySelectorAll('.js-secret-value');
+      const placeholders = wrapper.querySelectorAll('.js-secret-value-placeholder');
+
+      expect(values.length).toEqual(1);
+      expect(values[0].classList.contains('hide')).toEqual(true);
+      expect(placeholders.length).toEqual(1);
+      expect(placeholders[0].classList.contains('hide')).toEqual(false);
+    });
+
+    it('should toggle value and placeholder', () => {
+      const wrapper = setupSecretFixture(secrets, false);
+      const revealButton = wrapper.querySelector('.js-secret-value-reveal-button');
+      const values = wrapper.querySelectorAll('.js-secret-value');
+      const placeholders = wrapper.querySelectorAll('.js-secret-value-placeholder');
+
+      revealButton.click();
+
+      expect(values.length).toEqual(1);
+      expect(values[0].classList.contains('hide')).toEqual(false);
+      expect(placeholders.length).toEqual(1);
+      expect(placeholders[0].classList.contains('hide')).toEqual(true);
+
+      revealButton.click();
+
+      expect(values.length).toEqual(1);
+      expect(values[0].classList.contains('hide')).toEqual(true);
+      expect(placeholders.length).toEqual(1);
+      expect(placeholders[0].classList.contains('hide')).toEqual(false);
+    });
+  });
+
+  describe('with a multiple secrets', () => {
+    const secrets = ['mysecret123', 'happygoat456', 'tanuki789'];
+
+    it('should have correct "Reveal" label when values are hidden', () => {
+      const wrapper = setupSecretFixture(secrets, false);
+      const revealButton = wrapper.querySelector('.js-secret-value-reveal-button');
+
+      expect(revealButton.textContent).toEqual('Reveal values');
+    });
+
+    it('should have correct "Hide" label when values are shown', () => {
+      const wrapper = setupSecretFixture(secrets, true);
+      const revealButton = wrapper.querySelector('.js-secret-value-reveal-button');
+
+      expect(revealButton.textContent).toEqual('Hide values');
+    });
+
+    it('should have all values hidden initially', () => {
+      const wrapper = setupSecretFixture(secrets, false);
+      const values = wrapper.querySelectorAll('.js-secret-value');
+      const placeholders = wrapper.querySelectorAll('.js-secret-value-placeholder');
+
+      expect(values.length).toEqual(3);
+      values.forEach((value) => {
+        expect(value.classList.contains('hide')).toEqual(true);
+      });
+      expect(placeholders.length).toEqual(3);
+      placeholders.forEach((placeholder) => {
+        expect(placeholder.classList.contains('hide')).toEqual(false);
+      });
+    });
+
+    it('should toggle values and placeholders', () => {
+      const wrapper = setupSecretFixture(secrets, false);
+      const revealButton = wrapper.querySelector('.js-secret-value-reveal-button');
+      const values = wrapper.querySelectorAll('.js-secret-value');
+      const placeholders = wrapper.querySelectorAll('.js-secret-value-placeholder');
+
+      revealButton.click();
+
+      expect(values.length).toEqual(3);
+      values.forEach((value) => {
+        expect(value.classList.contains('hide')).toEqual(false);
+      });
+      expect(placeholders.length).toEqual(3);
+      placeholders.forEach((placeholder) => {
+        expect(placeholder.classList.contains('hide')).toEqual(true);
+      });
+
+      revealButton.click();
+
+      expect(values.length).toEqual(3);
+      values.forEach((value) => {
+        expect(value.classList.contains('hide')).toEqual(true);
+      });
+      expect(placeholders.length).toEqual(3);
+      placeholders.forEach((placeholder) => {
+        expect(placeholder.classList.contains('hide')).toEqual(false);
+      });
+    });
+  });
+});