Update secret_values to support dynamic elements within parent

Used in https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/4110
which introduces a dynamic variable list and needs secrets.

We use the valueSelector/placeholderSelector options to avoid selecting
the last empty row.

1 files changed, 96 insertions, 14 deletions

diff --git a/spec/javascripts/behaviors/secret_values_spec.js b/spec/javascripts/behaviors/secret_values_spec.js
index 9eeae474e7d..38d9bba6868 100644
--- a/spec/javascripts/behaviors/secret_values_spec.js
+++ b/spec/javascripts/behaviors/secret_values_spec.js
@@ -1,16 +1,24 @@
 import SecretValues from '~/behaviors/secret_values';
 
-function generateFixtureMarkup(secrets, isRevealed) {
+function generateValueMarkup(
+  secret,
+  valueClass = 'js-secret-value',
+  placeholderClass = 'js-secret-value-placeholder',
+) {
+  return `
+    <div class="${placeholderClass}">
+      ***
+    </div>
+    <div class="hide ${valueClass}">
+      ${secret}
+    </div>
+  `;
+}
+
+function generateFixtureMarkup(secrets, isRevealed, valueClass, placeholderClass) {
   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('')}
+    ${secrets.map(secret => generateValueMarkup(secret, valueClass, placeholderClass)).join('')}
     <button
       class="js-secret-value-reveal-button"
       data-secret-reveal-status="${isRevealed}"
@@ -21,11 +29,25 @@ function generateFixtureMarkup(secrets, isRevealed) {
   `;
 }
 
-function setupSecretFixture(secrets, isRevealed) {
+function setupSecretFixture(
+  secrets,
+  isRevealed,
+  valueClass = 'js-secret-value',
+  placeholderClass = 'js-secret-value-placeholder',
+) {
   const wrapper = document.createElement('div');
-  wrapper.innerHTML = generateFixtureMarkup(secrets, isRevealed);
-
-  const secretValues = new SecretValues(wrapper.querySelector('.js-secret-container'));
+  wrapper.innerHTML = generateFixtureMarkup(
+    secrets,
+    isRevealed,
+    valueClass,
+    placeholderClass,
+  );
+
+  const secretValues = new SecretValues({
+    container: wrapper.querySelector('.js-secret-container'),
+    valueSelector: `.${valueClass}`,
+    placeholderSelector: `.${placeholderClass}`,
+  });
   secretValues.init();
 
   return wrapper;
@@ -49,7 +71,7 @@ describe('setupSecretValues', () => {
       expect(revealButton.textContent).toEqual('Hide value');
     });
 
-    it('should value hidden initially', () => {
+    it('should have value hidden initially', () => {
       const wrapper = setupSecretFixture(secrets, false);
       const values = wrapper.querySelectorAll('.js-secret-value');
       const placeholders = wrapper.querySelectorAll('.js-secret-value-placeholder');
@@ -143,4 +165,64 @@ describe('setupSecretValues', () => {
       });
     });
   });
+
+  describe('with dynamic secrets', () => {
+    const secrets = ['mysecret123', 'happygoat456', 'tanuki789'];
+
+    it('should toggle values and placeholders', () => {
+      const wrapper = setupSecretFixture(secrets, false);
+      // Insert the new dynamic row
+      wrapper.querySelector('.js-secret-container').insertAdjacentHTML('afterbegin', generateValueMarkup('foobarbazdynamic'));
+
+      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(4);
+      values.forEach((value) => {
+        expect(value.classList.contains('hide')).toEqual(false);
+      });
+      expect(placeholders.length).toEqual(4);
+      placeholders.forEach((placeholder) => {
+        expect(placeholder.classList.contains('hide')).toEqual(true);
+      });
+
+      revealButton.click();
+
+      expect(values.length).toEqual(4);
+      values.forEach((value) => {
+        expect(value.classList.contains('hide')).toEqual(true);
+      });
+      expect(placeholders.length).toEqual(4);
+      placeholders.forEach((placeholder) => {
+        expect(placeholder.classList.contains('hide')).toEqual(false);
+      });
+    });
+  });
+
+  describe('selector options', () => {
+    const secrets = ['mysecret123'];
+
+    it('should respect `valueSelector` and `placeholderSelector` options', () => {
+      const valueClass = 'js-some-custom-placeholder-selector';
+      const placeholderClass = 'js-some-custom-value-selector';
+
+      const wrapper = setupSecretFixture(secrets, false, valueClass, placeholderClass);
+      const values = wrapper.querySelectorAll(`.${valueClass}`);
+      const placeholders = wrapper.querySelectorAll(`.${placeholderClass}`);
+      const revealButton = wrapper.querySelector('.js-secret-value-reveal-button');
+
+      expect(values.length).toEqual(1);
+      expect(placeholders.length).toEqual(1);
+
+      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);
+    });
+  });
 });