diff options
author | Eric Eastwood <contact@ericeastwood.com> | 2018-01-24 10:36:21 +0300 |
---|---|---|
committer | Eric Eastwood <contact@ericeastwood.com> | 2018-01-25 01:27:59 +0300 |
commit | 2f0ab2526a87fea9e6b178c0094f42c0a5ffe6ff (patch) | |
tree | 49d00d484ff8a657d1f9a99026e4e2b8c0382908 /spec/javascripts/behaviors | |
parent | 44728e0527bc7c5cf982be2fbbd26e24a79e5d8f (diff) |
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.
Diffstat (limited to 'spec/javascripts/behaviors')
-rw-r--r-- | spec/javascripts/behaviors/secret_values_spec.js | 110 |
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); + }); + }); }); |