gitlab-org--gitlab-foss/spec/frontend/behaviors/secret_values_spec.js

231 lines
7.8 KiB
JavaScript
Raw Normal View History

import SecretValues from '~/behaviors/secret_values';
function generateValueMarkup(
secret,
valueClass = 'js-secret-value',
placeholderClass = 'js-secret-value-placeholder',
) {
return `
<div class="${placeholderClass}">
***
</div>
2018-04-16 14:46:30 -04:00
<div class="hidden ${valueClass}">
${secret}
</div>
`;
}
function generateFixtureMarkup(secrets, isRevealed, valueClass, placeholderClass) {
return `
<div class="js-secret-container">
${secrets.map(secret => generateValueMarkup(secret, valueClass, placeholderClass)).join('')}
<button
class="js-secret-value-reveal-button"
data-secret-reveal-status="${isRevealed}"
>
...
</button>
</div>
`;
}
function setupSecretFixture(
secrets,
isRevealed,
valueClass = 'js-secret-value',
placeholderClass = 'js-secret-value-placeholder',
) {
const wrapper = document.createElement('div');
2018-10-17 03:13:26 -04:00
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;
}
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 have 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);
2018-05-17 18:23:54 -04:00
expect(values[0].classList.contains('hide')).toEqual(true);
expect(placeholders.length).toEqual(1);
2018-05-17 18:23:54 -04:00
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);
2018-05-17 18:23:54 -04:00
expect(values[0].classList.contains('hide')).toEqual(false);
expect(placeholders.length).toEqual(1);
2018-05-17 18:23:54 -04:00
expect(placeholders[0].classList.contains('hide')).toEqual(true);
revealButton.click();
expect(values.length).toEqual(1);
2018-05-17 18:23:54 -04:00
expect(values[0].classList.contains('hide')).toEqual(true);
expect(placeholders.length).toEqual(1);
2018-05-17 18:23:54 -04:00
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);
2018-10-17 03:13:26 -04:00
values.forEach(value => {
2018-05-17 18:23:54 -04:00
expect(value.classList.contains('hide')).toEqual(true);
});
2018-10-09 14:03:09 -04:00
expect(placeholders.length).toEqual(3);
2018-10-17 03:13:26 -04:00
placeholders.forEach(placeholder => {
2018-05-17 18:23:54 -04:00
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);
2018-10-17 03:13:26 -04:00
values.forEach(value => {
2018-05-17 18:23:54 -04:00
expect(value.classList.contains('hide')).toEqual(false);
});
2018-10-09 14:03:09 -04:00
expect(placeholders.length).toEqual(3);
2018-10-17 03:13:26 -04:00
placeholders.forEach(placeholder => {
2018-05-17 18:23:54 -04:00
expect(placeholder.classList.contains('hide')).toEqual(true);
});
revealButton.click();
expect(values.length).toEqual(3);
2018-10-17 03:13:26 -04:00
values.forEach(value => {
2018-05-17 18:23:54 -04:00
expect(value.classList.contains('hide')).toEqual(true);
});
2018-10-09 14:03:09 -04:00
expect(placeholders.length).toEqual(3);
2018-10-17 03:13:26 -04:00
placeholders.forEach(placeholder => {
2018-05-17 18:23:54 -04:00
expect(placeholder.classList.contains('hide')).toEqual(false);
});
});
});
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
2018-10-17 03:13:26 -04:00
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);
2018-10-17 03:13:26 -04:00
values.forEach(value => {
2018-05-17 18:23:54 -04:00
expect(value.classList.contains('hide')).toEqual(false);
});
2018-10-09 14:03:09 -04:00
expect(placeholders.length).toEqual(4);
2018-10-17 03:13:26 -04:00
placeholders.forEach(placeholder => {
2018-05-17 18:23:54 -04:00
expect(placeholder.classList.contains('hide')).toEqual(true);
});
revealButton.click();
expect(values.length).toEqual(4);
2018-10-17 03:13:26 -04:00
values.forEach(value => {
2018-05-17 18:23:54 -04:00
expect(value.classList.contains('hide')).toEqual(true);
});
2018-10-09 14:03:09 -04:00
expect(placeholders.length).toEqual(4);
2018-10-17 03:13:26 -04:00
placeholders.forEach(placeholder => {
2018-05-17 18:23:54 -04:00
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);
2018-05-17 18:23:54 -04:00
expect(values[0].classList.contains('hide')).toEqual(false);
expect(placeholders.length).toEqual(1);
2018-05-17 18:23:54 -04:00
expect(placeholders[0].classList.contains('hide')).toEqual(true);
});
});
});