debian-mirror-gitlab/spec/frontend/behaviors/secret_values_spec.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

231 lines
7.8 KiB
JavaScript
Raw Normal View History

2018-03-17 18:26:18 +05:30
import SecretValues from '~/behaviors/secret_values';
function generateValueMarkup(
secret,
valueClass = 'js-secret-value',
placeholderClass = 'js-secret-value-placeholder',
) {
return `
<div class="${placeholderClass}">
***
</div>
2018-11-08 19:23:39 +05:30
<div class="hidden ${valueClass}">
2018-03-17 18:26:18 +05:30
${secret}
</div>
`;
}
function generateFixtureMarkup(secrets, isRevealed, valueClass, placeholderClass) {
return `
<div class="js-secret-container">
2021-03-08 18:12:59 +05:30
${secrets.map((secret) => generateValueMarkup(secret, valueClass, placeholderClass)).join('')}
2018-03-17 18:26:18 +05:30
<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-12-13 13:39:08 +05:30
wrapper.innerHTML = generateFixtureMarkup(secrets, isRevealed, valueClass, placeholderClass);
2018-03-17 18:26:18 +05:30
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);
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);
2021-03-08 18:12:59 +05:30
values.forEach((value) => {
2018-03-17 18:26:18 +05:30
expect(value.classList.contains('hide')).toEqual(true);
});
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(placeholders.length).toEqual(3);
2021-03-08 18:12:59 +05:30
placeholders.forEach((placeholder) => {
2018-03-17 18:26:18 +05:30
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);
2021-03-08 18:12:59 +05:30
values.forEach((value) => {
2018-03-17 18:26:18 +05:30
expect(value.classList.contains('hide')).toEqual(false);
});
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(placeholders.length).toEqual(3);
2021-03-08 18:12:59 +05:30
placeholders.forEach((placeholder) => {
2018-03-17 18:26:18 +05:30
expect(placeholder.classList.contains('hide')).toEqual(true);
});
revealButton.click();
expect(values.length).toEqual(3);
2021-03-08 18:12:59 +05:30
values.forEach((value) => {
2018-03-17 18:26:18 +05:30
expect(value.classList.contains('hide')).toEqual(true);
});
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(placeholders.length).toEqual(3);
2021-03-08 18:12:59 +05:30
placeholders.forEach((placeholder) => {
2018-03-17 18:26:18 +05:30
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-12-13 13:39:08 +05:30
wrapper
.querySelector('.js-secret-container')
.insertAdjacentHTML('afterbegin', generateValueMarkup('foobarbazdynamic'));
2018-03-17 18:26:18 +05:30
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);
2021-03-08 18:12:59 +05:30
values.forEach((value) => {
2018-03-17 18:26:18 +05:30
expect(value.classList.contains('hide')).toEqual(false);
});
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(placeholders.length).toEqual(4);
2021-03-08 18:12:59 +05:30
placeholders.forEach((placeholder) => {
2018-03-17 18:26:18 +05:30
expect(placeholder.classList.contains('hide')).toEqual(true);
});
revealButton.click();
expect(values.length).toEqual(4);
2021-03-08 18:12:59 +05:30
values.forEach((value) => {
2018-03-17 18:26:18 +05:30
expect(value.classList.contains('hide')).toEqual(true);
});
2018-12-13 13:39:08 +05:30
2018-03-17 18:26:18 +05:30
expect(placeholders.length).toEqual(4);
2021-03-08 18:12:59 +05:30
placeholders.forEach((placeholder) => {
2018-03-17 18:26:18 +05:30
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);
});
});
});