diff options
author | Phil Hughes <me@iamphill.com> | 2017-10-05 10:27:43 +0100 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-10-10 10:14:23 +0100 |
commit | fcd842b55837d2a8eab4ef32b65b5a44dfab6eba (patch) | |
tree | 7a6fdd2c94130aab0800d189c881b2bec7ae148a | |
parent | cbfc97b112849299b0aaf3b5155e278d3db17c91 (diff) | |
download | gitlab-ce-fcd842b55837d2a8eab4ef32b65b5a44dfab6eba.tar.gz |
fixed notes specs
changed how the container class is added onto the text element
more specs
-rw-r--r-- | app/assets/javascripts/flash.js | 14 | ||||
-rw-r--r-- | app/assets/javascripts/notes.js | 8 | ||||
-rw-r--r-- | spec/javascripts/flash_spec.js | 24 |
3 files changed, 33 insertions, 13 deletions
diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js index 8ac2b96a22d..bc5cd818e1c 100644 --- a/app/assets/javascripts/flash.js +++ b/app/assets/javascripts/flash.js @@ -12,6 +12,7 @@ const hideFlash = (flashEl, fadeTransition = true) => { flashEl.remove(); }, { once: true, + passive: true, }); if (!fadeTransition) flashEl.dispatchEvent(new Event('transitionend')); @@ -27,12 +28,12 @@ const createAction = config => ` </a> `; -const createFlashEl = (message, type) => ` +const createFlashEl = (message, type, isInContentWrapper = false) => ` <div class="flash-${type}" > <div - class="flash-text" + class="flash-text ${isInContentWrapper ? 'container-fluid container-limited' : ''}" > ${_.escape(message)} </div> @@ -64,7 +65,9 @@ const createFlash = function createFlash( if (!flashContainer) return null; - flashContainer.innerHTML = createFlashEl(message, type); + const isInContentWrapper = flashContainer.parentNode.classList.contains('content-wrapper'); + + flashContainer.innerHTML = createFlashEl(message, type, isInContentWrapper); const flashEl = flashContainer.querySelector(`.flash-${type}`); flashEl.addEventListener('click', () => hideFlash(flashEl, fadeTransition)); @@ -77,11 +80,6 @@ const createFlash = function createFlash( } } - if (flashContainer.parentNode.classList.contains('content-wrapper')) { - const flashText = flashEl.querySelector('.flash-text'); - flashText.className = `${flashText.className} container-fluid container-limited`; - } - flashContainer.style.display = 'block'; return flashContainer; diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index dafbfb59c99..cf7322ba1da 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -1213,13 +1213,13 @@ export default class Notes { } addFlash(...flashParams) { - this.flashInstance = new Flash(...flashParams); + this.flashContainer = new Flash(...flashParams); } clearFlash() { - if (this.flashInstance && this.flashInstance.flashContainer) { - this.flashInstance.flashContainer.hide(); - this.flashInstance = null; + if (this.flashContainer) { + this.flashContainer.style.display = 'none'; + this.flashContainer = null; } } diff --git a/spec/javascripts/flash_spec.js b/spec/javascripts/flash_spec.js index 66cc76ee626..060ffaa339b 100644 --- a/spec/javascripts/flash_spec.js +++ b/spec/javascripts/flash_spec.js @@ -31,6 +31,17 @@ describe('Flash', () => { el.querySelector('.flash-text').textContent.trim(), ).toBe('<script>alert("a");</script>'); }); + + it('adds container classes when inside content wrapper', () => { + el.innerHTML = createFlashEl('testing', 'alert', true); + + expect( + el.querySelector('.flash-text').classList.contains('container-fluid'), + ).toBeTruthy(); + expect( + el.querySelector('.flash-text').classList.contains('container-limited'), + ).toBeTruthy(); + }); }); describe('hideFlash', () => { @@ -57,6 +68,17 @@ describe('Flash', () => { ).toBe('0'); }); + it('does not set styles when fadeTransition is false', () => { + hideFlash(el, false); + + expect( + el.style.opacity, + ).toBe(''); + expect( + el.style.transition, + ).toBe(''); + }); + it('removes element after transitionend', () => { document.body.appendChild(el); @@ -192,7 +214,7 @@ describe('Flash', () => { flash('test'); expect( - document.querySelector('.flash-text').className, + document.querySelector('.flash-text').className.trim(), ).toBe('flash-text'); }); |