Commit ca9969a6 authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera Committed by Phil Hughes

Migrate ci_variable_list to Jest

parent 5dbb2845
...@@ -35,8 +35,8 @@ describe('AjaxFormVariableList', () => { ...@@ -35,8 +35,8 @@ describe('AjaxFormVariableList', () => {
maskableRegex: container.dataset.maskableRegex, maskableRegex: container.dataset.maskableRegex,
}); });
spyOn(ajaxVariableList, 'updateRowsWithPersistedVariables').and.callThrough(); jest.spyOn(ajaxVariableList, 'updateRowsWithPersistedVariables');
spyOn(ajaxVariableList.variableList, 'toggleEnableRow').and.callThrough(); jest.spyOn(ajaxVariableList.variableList, 'toggleEnableRow');
}); });
afterEach(() => { afterEach(() => {
...@@ -44,7 +44,7 @@ describe('AjaxFormVariableList', () => { ...@@ -44,7 +44,7 @@ describe('AjaxFormVariableList', () => {
}); });
describe('onSaveClicked', () => { describe('onSaveClicked', () => {
it('shows loading spinner while waiting for the request', done => { it('shows loading spinner while waiting for the request', () => {
const loadingIcon = saveButton.querySelector('.js-ci-variables-save-loading-icon'); const loadingIcon = saveButton.querySelector('.js-ci-variables-save-loading-icon');
mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(() => { mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(() => {
...@@ -55,63 +55,47 @@ describe('AjaxFormVariableList', () => { ...@@ -55,63 +55,47 @@ describe('AjaxFormVariableList', () => {
expect(loadingIcon.classList.contains(HIDE_CLASS)).toEqual(true); expect(loadingIcon.classList.contains(HIDE_CLASS)).toEqual(true);
ajaxVariableList return ajaxVariableList.onSaveClicked().then(() => {
.onSaveClicked() expect(loadingIcon.classList.contains(HIDE_CLASS)).toEqual(true);
.then(() => { });
expect(loadingIcon.classList.contains(HIDE_CLASS)).toEqual(true);
})
.then(done)
.catch(done.fail);
}); });
it('calls `updateRowsWithPersistedVariables` with the persisted variables', done => { it('calls `updateRowsWithPersistedVariables` with the persisted variables', () => {
const variablesResponse = [{ id: 1, key: 'foo', value: 'bar' }]; const variablesResponse = [{ id: 1, key: 'foo', value: 'bar' }];
mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(200, { mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(200, {
variables: variablesResponse, variables: variablesResponse,
}); });
ajaxVariableList return ajaxVariableList.onSaveClicked().then(() => {
.onSaveClicked() expect(ajaxVariableList.updateRowsWithPersistedVariables).toHaveBeenCalledWith(
.then(() => { variablesResponse,
expect(ajaxVariableList.updateRowsWithPersistedVariables).toHaveBeenCalledWith( );
variablesResponse, });
);
})
.then(done)
.catch(done.fail);
}); });
it('hides any previous error box', done => { it('hides any previous error box', () => {
mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(200); mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(200);
expect(errorBox.classList.contains(HIDE_CLASS)).toEqual(true); expect(errorBox.classList.contains(HIDE_CLASS)).toEqual(true);
ajaxVariableList return ajaxVariableList.onSaveClicked().then(() => {
.onSaveClicked() expect(errorBox.classList.contains(HIDE_CLASS)).toEqual(true);
.then(() => { });
expect(errorBox.classList.contains(HIDE_CLASS)).toEqual(true);
})
.then(done)
.catch(done.fail);
}); });
it('disables remove buttons while waiting for the request', done => { it('disables remove buttons while waiting for the request', () => {
mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(() => { mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(() => {
expect(ajaxVariableList.variableList.toggleEnableRow).toHaveBeenCalledWith(false); expect(ajaxVariableList.variableList.toggleEnableRow).toHaveBeenCalledWith(false);
return [200, {}]; return [200, {}];
}); });
ajaxVariableList return ajaxVariableList.onSaveClicked().then(() => {
.onSaveClicked() expect(ajaxVariableList.variableList.toggleEnableRow).toHaveBeenCalledWith(true);
.then(() => { });
expect(ajaxVariableList.variableList.toggleEnableRow).toHaveBeenCalledWith(true);
})
.then(done)
.catch(done.fail);
}); });
it('hides secret values', done => { it('hides secret values', () => {
mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(200, {}); mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(200, {});
const row = container.querySelector('.js-row'); const row = container.querySelector('.js-row');
...@@ -124,46 +108,34 @@ describe('AjaxFormVariableList', () => { ...@@ -124,46 +108,34 @@ describe('AjaxFormVariableList', () => {
expect(valuePlaceholder.classList.contains(HIDE_CLASS)).toBe(true); expect(valuePlaceholder.classList.contains(HIDE_CLASS)).toBe(true);
expect(valueInput.classList.contains(HIDE_CLASS)).toBe(false); expect(valueInput.classList.contains(HIDE_CLASS)).toBe(false);
ajaxVariableList return ajaxVariableList.onSaveClicked().then(() => {
.onSaveClicked() expect(valuePlaceholder.classList.contains(HIDE_CLASS)).toBe(false);
.then(() => { expect(valueInput.classList.contains(HIDE_CLASS)).toBe(true);
expect(valuePlaceholder.classList.contains(HIDE_CLASS)).toBe(false); });
expect(valueInput.classList.contains(HIDE_CLASS)).toBe(true);
})
.then(done)
.catch(done.fail);
}); });
it('shows error box with validation errors', done => { it('shows error box with validation errors', () => {
const validationError = 'some validation error'; const validationError = 'some validation error';
mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(400, [validationError]); mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(400, [validationError]);
expect(errorBox.classList.contains(HIDE_CLASS)).toEqual(true); expect(errorBox.classList.contains(HIDE_CLASS)).toEqual(true);
ajaxVariableList return ajaxVariableList.onSaveClicked().then(() => {
.onSaveClicked() expect(errorBox.classList.contains(HIDE_CLASS)).toEqual(false);
.then(() => { expect(errorBox.textContent.trim().replace(/\n+\s+/m, ' ')).toEqual(
expect(errorBox.classList.contains(HIDE_CLASS)).toEqual(false); `Validation failed ${validationError}`,
expect(errorBox.textContent.trim().replace(/\n+\s+/m, ' ')).toEqual( );
`Validation failed ${validationError}`, });
);
})
.then(done)
.catch(done.fail);
}); });
it('shows flash message when request fails', done => { it('shows flash message when request fails', () => {
mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(500); mock.onPatch(VARIABLE_PATCH_ENDPOINT).reply(500);
expect(errorBox.classList.contains(HIDE_CLASS)).toEqual(true); expect(errorBox.classList.contains(HIDE_CLASS)).toEqual(true);
ajaxVariableList return ajaxVariableList.onSaveClicked().then(() => {
.onSaveClicked() expect(errorBox.classList.contains(HIDE_CLASS)).toEqual(true);
.then(() => { });
expect(errorBox.classList.contains(HIDE_CLASS)).toEqual(true);
})
.then(done)
.catch(done.fail);
}); });
}); });
......
import $ from 'jquery'; import $ from 'jquery';
import getSetTimeoutPromise from 'spec/helpers/set_timeout_promise_helper'; import waitForPromises from 'helpers/wait_for_promises';
import VariableList from '~/ci_variable_list/ci_variable_list'; import VariableList from '~/ci_variable_list/ci_variable_list';
const HIDE_CLASS = 'hide'; const HIDE_CLASS = 'hide';
...@@ -127,86 +127,74 @@ describe('VariableList', () => { ...@@ -127,86 +127,74 @@ describe('VariableList', () => {
variableList.init(); variableList.init();
}); });
it('should not add another row when editing the last rows protected checkbox', done => { it('should not add another row when editing the last rows protected checkbox', () => {
const $row = $wrapper.find('.js-row:last-child'); const $row = $wrapper.find('.js-row:last-child');
$row.find('.ci-variable-protected-item .js-project-feature-toggle').click(); $row.find('.ci-variable-protected-item .js-project-feature-toggle').click();
getSetTimeoutPromise() return waitForPromises().then(() => {
.then(() => { expect($wrapper.find('.js-row').length).toBe(1);
expect($wrapper.find('.js-row').length).toBe(1); });
})
.then(done)
.catch(done.fail);
}); });
it('should not add another row when editing the last rows masked checkbox', done => { it('should not add another row when editing the last rows masked checkbox', () => {
jest.spyOn(variableList, 'checkIfRowTouched');
const $row = $wrapper.find('.js-row:last-child'); const $row = $wrapper.find('.js-row:last-child');
$row.find('.ci-variable-masked-item .js-project-feature-toggle').click(); $row.find('.ci-variable-masked-item .js-project-feature-toggle').click();
getSetTimeoutPromise() return waitForPromises().then(() => {
.then(() => { // This validates that we are checking after the event listener has run
expect($wrapper.find('.js-row').length).toBe(1); expect(variableList.checkIfRowTouched).toHaveBeenCalled();
}) expect($wrapper.find('.js-row').length).toBe(1);
.then(done) });
.catch(done.fail);
}); });
describe('validateMaskability', () => { describe('validateMaskability', () => {
let $row; let $row;
const maskingErrorElement = '.js-row:last-child .masking-validation-error'; const maskingErrorElement = '.js-row:last-child .masking-validation-error';
const clickToggle = () =>
$row.find('.ci-variable-masked-item .js-project-feature-toggle').click();
beforeEach(() => { beforeEach(() => {
$row = $wrapper.find('.js-row:last-child'); $row = $wrapper.find('.js-row:last-child');
$row.find('.ci-variable-masked-item .js-project-feature-toggle').click();
}); });
it('has a regex provided via a data attribute', () => { it('has a regex provided via a data attribute', () => {
clickToggle();
expect($wrapper.attr('data-maskable-regex')).toBe('^[a-zA-Z0-9_+=/@:.-]{8,}$'); expect($wrapper.attr('data-maskable-regex')).toBe('^[a-zA-Z0-9_+=/@:.-]{8,}$');
}); });
it('allows values that are 8 characters long', done => { it('allows values that are 8 characters long', () => {
$row.find('.js-ci-variable-input-value').val('looooong'); $row.find('.js-ci-variable-input-value').val('looooong');
getSetTimeoutPromise() clickToggle();
.then(() => {
expect($wrapper.find(maskingErrorElement)).toHaveClass('hide'); expect($wrapper.find(maskingErrorElement)).toHaveClass('hide');
})
.then(done)
.catch(done.fail);
}); });
it('rejects values that are shorter than 8 characters', done => { it('rejects values that are shorter than 8 characters', () => {
$row.find('.js-ci-variable-input-value').val('short'); $row.find('.js-ci-variable-input-value').val('short');
getSetTimeoutPromise() clickToggle();
.then(() => {
expect($wrapper.find(maskingErrorElement)).toBeVisible(); expect($wrapper.find(maskingErrorElement)).toBeVisible();
})
.then(done)
.catch(done.fail);
}); });
it('allows values with base 64 characters', done => { it('allows values with base 64 characters', () => {
$row.find('.js-ci-variable-input-value').val('abcABC123_+=/-'); $row.find('.js-ci-variable-input-value').val('abcABC123_+=/-');
getSetTimeoutPromise() clickToggle();
.then(() => {
expect($wrapper.find(maskingErrorElement)).toHaveClass('hide'); expect($wrapper.find(maskingErrorElement)).toHaveClass('hide');
})
.then(done)
.catch(done.fail);
}); });
it('rejects values with other special characters', done => { it('rejects values with other special characters', () => {
$row.find('.js-ci-variable-input-value').val('1234567$'); $row.find('.js-ci-variable-input-value').val('1234567$');
getSetTimeoutPromise() clickToggle();
.then(() => {
expect($wrapper.find(maskingErrorElement)).toBeVisible(); expect($wrapper.find(maskingErrorElement)).toBeVisible();
})
.then(done)
.catch(done.fail);
}); });
}); });
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment