diff options
Diffstat (limited to 'spec/javascripts/flash_spec.js')
| -rw-r--r-- | spec/javascripts/flash_spec.js | 145 |
1 files changed, 40 insertions, 105 deletions
diff --git a/spec/javascripts/flash_spec.js b/spec/javascripts/flash_spec.js index bdb26c4eb0d..d7338ee0f66 100644 --- a/spec/javascripts/flash_spec.js +++ b/spec/javascripts/flash_spec.js @@ -1,9 +1,4 @@ -import flash, { - createFlashEl, - createAction, - hideFlash, - removeFlashClickListener, -} from '~/flash'; +import flash, { createFlashEl, createAction, hideFlash, removeFlashClickListener } from '~/flash'; describe('Flash', () => { describe('createFlashEl', () => { @@ -20,29 +15,23 @@ describe('Flash', () => { it('creates flash element with type', () => { el.innerHTML = createFlashEl('testing', 'alert'); - expect( - el.querySelector('.flash-alert'), - ).not.toBeNull(); + expect(el.querySelector('.flash-alert')).not.toBeNull(); }); it('escapes text', () => { el.innerHTML = createFlashEl('<script>alert("a");</script>', 'alert'); - expect( - el.querySelector('.flash-text').textContent.trim(), - ).toBe('<script>alert("a");</script>'); + expect(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-fluid')).toBeTruthy(); - expect( - el.querySelector('.flash-text').classList.contains('container-limited'), - ).toBeTruthy(); + expect(el.querySelector('.flash-text').classList.contains('container-limited')).toBeTruthy(); }); }); @@ -57,33 +46,23 @@ describe('Flash', () => { it('sets transition style', () => { hideFlash(el); - expect( - el.style['transition-property'], - ).toBe('opacity'); + expect(el.style['transition-property']).toBe('opacity'); - expect( - el.style['transition-duration'], - ).toBe('0.3s'); + expect(el.style['transition-duration']).toBe('0.3s'); }); it('sets opacity style', () => { hideFlash(el); - expect( - el.style.opacity, - ).toBe('0'); + expect(el.style.opacity).toBe('0'); }); it('does not set styles when fadeTransition is false', () => { hideFlash(el, false); - expect( - el.style.opacity, - ).toBe(''); + expect(el.style.opacity).toBe(''); - expect( - el.style.transition, - ).toBe(''); + expect(el.style.transition).toBe(''); }); it('removes element after transitionend', () => { @@ -92,9 +71,7 @@ describe('Flash', () => { hideFlash(el); el.dispatchEvent(new Event('transitionend')); - expect( - document.querySelector('.js-testing'), - ).toBeNull(); + expect(document.querySelector('.js-testing')).toBeNull(); }); it('calls event listener callback once', () => { @@ -106,9 +83,7 @@ describe('Flash', () => { el.dispatchEvent(new Event('transitionend')); el.dispatchEvent(new Event('transitionend')); - expect( - el.remove.calls.count(), - ).toBe(1); + expect(el.remove.calls.count()).toBe(1); }); }); @@ -125,9 +100,7 @@ describe('Flash', () => { title: 'test', }); - expect( - el.querySelector('.flash-action').href, - ).toContain('testing'); + expect(el.querySelector('.flash-action').href).toContain('testing'); }); it('uses hash as href when no href is present', () => { @@ -135,9 +108,7 @@ describe('Flash', () => { title: 'test', }); - expect( - el.querySelector('.flash-action').href, - ).toContain('#'); + expect(el.querySelector('.flash-action').href).toContain('#'); }); it('adds role when no href is present', () => { @@ -145,9 +116,7 @@ describe('Flash', () => { title: 'test', }); - expect( - el.querySelector('.flash-action').getAttribute('role'), - ).toBe('button'); + expect(el.querySelector('.flash-action').getAttribute('role')).toBe('button'); }); it('escapes the title text', () => { @@ -155,9 +124,9 @@ describe('Flash', () => { title: '<script>alert("a")</script>', }); - expect( - el.querySelector('.flash-action').textContent.trim(), - ).toBe('<script>alert("a")</script>'); + expect(el.querySelector('.flash-action').textContent.trim()).toBe( + '<script>alert("a")</script>', + ); }); }); @@ -166,13 +135,9 @@ describe('Flash', () => { it('does not add to the DOM', () => { const flashEl = flash('testing'); - expect( - flashEl, - ).toBeNull(); + expect(flashEl).toBeNull(); - expect( - document.querySelector('.flash-alert'), - ).toBeNull(); + expect(document.querySelector('.flash-alert')).toBeNull(); }); }); @@ -192,42 +157,30 @@ describe('Flash', () => { it('adds flash element into container', () => { flash('test', 'alert', document, null, false, true); - expect( - document.querySelector('.flash-alert'), - ).not.toBeNull(); + expect(document.querySelector('.flash-alert')).not.toBeNull(); - expect( - document.body.className, - ).toContain('flash-shown'); + expect(document.body.className).toContain('flash-shown'); }); it('adds flash into specified parent', () => { - flash( - 'test', - 'alert', - document.querySelector('.content-wrapper'), - ); + flash('test', 'alert', document.querySelector('.content-wrapper')); - expect( - document.querySelector('.content-wrapper .flash-alert'), - ).not.toBeNull(); + expect(document.querySelector('.content-wrapper .flash-alert')).not.toBeNull(); }); it('adds container classes when inside content-wrapper', () => { flash('test'); - expect( - document.querySelector('.flash-text').className, - ).toBe('flash-text container-fluid container-limited'); + expect(document.querySelector('.flash-text').className).toBe( + 'flash-text container-fluid container-limited', + ); }); it('does not add container when outside of content-wrapper', () => { document.querySelector('.content-wrapper').className = 'js-content-wrapper'; flash('test'); - expect( - document.querySelector('.flash-text').className.trim(), - ).toBe('flash-text'); + expect(document.querySelector('.flash-text').className.trim()).toBe('flash-text'); }); it('removes element after clicking', () => { @@ -235,29 +188,18 @@ describe('Flash', () => { document.querySelector('.flash-alert').click(); - expect( - document.querySelector('.flash-alert'), - ).toBeNull(); + expect(document.querySelector('.flash-alert')).toBeNull(); - expect( - document.body.className, - ).not.toContain('flash-shown'); + expect(document.body.className).not.toContain('flash-shown'); }); describe('with actionConfig', () => { it('adds action link', () => { - flash( - 'test', - 'alert', - document, - { - title: 'test', - }, - ); - - expect( - document.querySelector('.flash-action'), - ).not.toBeNull(); + flash('test', 'alert', document, { + title: 'test', + }); + + expect(document.querySelector('.flash-action')).not.toBeNull(); }); it('calls actionConfig clickHandler on click', () => { @@ -266,18 +208,11 @@ describe('Flash', () => { clickHandler: jasmine.createSpy('actionConfig'), }; - flash( - 'test', - 'alert', - document, - actionConfig, - ); + flash('test', 'alert', document, actionConfig); document.querySelector('.flash-action').click(); - expect( - actionConfig.clickHandler, - ).toHaveBeenCalled(); + expect(actionConfig.clickHandler).toHaveBeenCalled(); }); }); }); @@ -288,7 +223,7 @@ describe('Flash', () => { document.body.innerHTML += '<div class="flash-container"><div class="flash"></div></div>'; }); - it('removes global flash on click', (done) => { + it('removes global flash on click', done => { const flashEl = document.querySelector('.flash'); removeFlashClickListener(flashEl, false); |