From d668294f28c7a54a34b6cc896953ece1c9def15d Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 3 Oct 2017 15:01:02 +0100 Subject: spec fixes --- spec/javascripts/integrations/integration_settings_form_spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'spec/javascripts') diff --git a/spec/javascripts/integrations/integration_settings_form_spec.js b/spec/javascripts/integrations/integration_settings_form_spec.js index 3daeb91b1e2..b83a4abca9a 100644 --- a/spec/javascripts/integrations/integration_settings_form_spec.js +++ b/spec/javascripts/integrations/integration_settings_form_spec.js @@ -181,7 +181,7 @@ describe('IntegrationSettingsForm', () => { deferred.reject(); - expect($('.flash-container .flash-text').text()).toEqual(errorMessage); + expect($('.flash-container .flash-text').text().trim()).toEqual(errorMessage); }); it('should always call `toggleSubmitBtnState` with `false` once request is completed', () => { -- cgit v1.2.1 From bbf7ea24a560e22c3b51326d2413a6f8d6f0a530 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 4 Oct 2017 12:13:11 +0100 Subject: flash tests added back in documentation comment to flash file --- spec/javascripts/flash_spec.js | 248 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 248 insertions(+) create mode 100644 spec/javascripts/flash_spec.js (limited to 'spec/javascripts') diff --git a/spec/javascripts/flash_spec.js b/spec/javascripts/flash_spec.js new file mode 100644 index 00000000000..1feb31f5c4f --- /dev/null +++ b/spec/javascripts/flash_spec.js @@ -0,0 +1,248 @@ +import flash, { + createFlashEl, + createAction, + hideFlash, +} from '~/flash'; + +describe('Flash', () => { + describe('createFlashEl', () => { + let el; + + beforeEach(() => { + el = document.createElement('div'); + }); + + afterEach(() => { + el.innerHTML = ''; + }); + + it('creates flash element with type', () => { + el.innerHTML = createFlashEl('testing', 'alert'); + + expect( + el.querySelector('.flash-alert'), + ).not.toBeNull(); + }); + + it('escapes text', () => { + el.innerHTML = createFlashEl('', 'alert'); + + expect( + el.querySelector('.flash-text').textContent.trim(), + ).toBe(''); + }); + }); + + describe('hideFlash', () => { + let el; + + beforeEach(() => { + el = document.createElement('div'); + el.className = 'js-testing'; + }); + + it('sets transition style', () => { + hideFlash(el); + + expect( + el.style.transition, + ).toBe('opacity 0.3s'); + }); + + it('sets opacity style', () => { + hideFlash(el); + + expect( + el.style.opacity, + ).toBe('0'); + }); + + it('removes element after transitionend', () => { + document.body.appendChild(el); + + hideFlash(el); + el.dispatchEvent(new Event('transitionend')); + + expect( + document.querySelector('.js-testing'), + ).toBeNull(); + }); + + it('calls event listener callback once', () => { + spyOn(el, 'remove').and.callThrough(); + document.body.appendChild(el); + + hideFlash(el); + + el.dispatchEvent(new Event('transitionend')); + el.dispatchEvent(new Event('transitionend')); + + expect( + el.remove.calls.count(), + ).toBe(1); + }); + }); + + describe('createAction', () => { + let el; + + beforeEach(() => { + el = document.createElement('div'); + }); + + it('creates link with href', () => { + el.innerHTML = createAction({ + href: 'testing', + title: 'test', + }); + + expect( + el.querySelector('.flash-action').href, + ).toContain('testing'); + }); + + it('uses hash as href when no href is present', () => { + el.innerHTML = createAction({ + title: 'test', + }); + + expect( + el.querySelector('.flash-action').href, + ).toContain('#'); + }); + + it('adds role when no href is present', () => { + el.innerHTML = createAction({ + title: 'test', + }); + + expect( + el.querySelector('.flash-action').getAttribute('role'), + ).toBe('button'); + }); + + it('escapes the title text', () => { + el.innerHTML = createAction({ + title: '', + }); + + expect( + el.querySelector('.flash-action').textContent.trim(), + ).toBe(''); + }); + }); + + describe('createFlash', () => { + describe('no flash-container', () => { + it('does not add to the DOM', () => { + const el = flash('test'); + const flashEl = flash('testing'); + + expect( + flashEl, + ).toBeNull(); + expect( + document.querySelector('.flash-alert'), + ).toBeNull(); + }); + }); + + describe('with flash-container', () => { + beforeEach(() => { + document.body.innerHTML += ` +
+
+
+ `; + }); + + afterEach(() => { + document.querySelector('.js-content-wrapper').remove(); + }); + + it('adds flash element into container', () => { + flash('test'); + + expect( + document.querySelector('.flash-alert'), + ).not.toBeNull(); + }); + + it('adds flash into specified parent', () => { + flash( + 'test', + 'alert', + document.querySelector('.content-wrapper'), + ); + + 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') + }); + + 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, + ).toBe('flash-text') + }); + + it('removes element after clicking', () => { + flash('test', 'alert', document, null, false); + + document.querySelector('.flash-alert').click(); + + expect( + document.querySelector('.flash-alert'), + ).toBeNull(); + }); + + describe('with actionConfig', () => { + it('adds action link', () => { + flash( + 'test', + 'alert', + document, + { + title: 'test', + }, + ); + + expect( + document.querySelector('.flash-action'), + ).not.toBeNull(); + }); + + it('calls actionConfig clickHandler on click', () => { + const actionConfig = { + title: 'test', + clickHandler: jasmine.createSpy('actionConfig'), + }; + + flash( + 'test', + 'alert', + document, + actionConfig, + ); + + document.querySelector('.flash-action').click(); + + expect( + actionConfig.clickHandler, + ).toHaveBeenCalled(); + }); + }); + }); + }); +}); -- cgit v1.2.1 From 6c97107d37771522d1deec6007a791332270ba6f Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 4 Oct 2017 14:44:43 +0100 Subject: fixed eslint --- spec/javascripts/flash_spec.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'spec/javascripts') diff --git a/spec/javascripts/flash_spec.js b/spec/javascripts/flash_spec.js index 1feb31f5c4f..66cc76ee626 100644 --- a/spec/javascripts/flash_spec.js +++ b/spec/javascripts/flash_spec.js @@ -135,7 +135,6 @@ describe('Flash', () => { describe('createFlash', () => { describe('no flash-container', () => { it('does not add to the DOM', () => { - const el = flash('test'); const flashEl = flash('testing'); expect( @@ -185,7 +184,7 @@ describe('Flash', () => { expect( document.querySelector('.flash-text').className, - ).toBe('flash-text container-fluid container-limited') + ).toBe('flash-text container-fluid container-limited'); }); it('does not add container when outside of content-wrapper', () => { @@ -194,7 +193,7 @@ describe('Flash', () => { expect( document.querySelector('.flash-text').className, - ).toBe('flash-text') + ).toBe('flash-text'); }); it('removes element after clicking', () => { -- cgit v1.2.1 From cbfc97b112849299b0aaf3b5155e278d3db17c91 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 4 Oct 2017 15:55:01 +0100 Subject: karma spec fixes --- spec/javascripts/integrations/integration_settings_form_spec.js | 6 +++--- spec/javascripts/notes_spec.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'spec/javascripts') diff --git a/spec/javascripts/integrations/integration_settings_form_spec.js b/spec/javascripts/integrations/integration_settings_form_spec.js index b83a4abca9a..9033eb9ce02 100644 --- a/spec/javascripts/integrations/integration_settings_form_spec.js +++ b/spec/javascripts/integrations/integration_settings_form_spec.js @@ -138,9 +138,9 @@ describe('IntegrationSettingsForm', () => { deferred.resolve({ error: true, message: errorMessage, service_response: 'some error' }); const $flashContainer = $('.flash-container'); - expect($flashContainer.find('.flash-text').text()).toEqual('Test failed. some error'); + expect($flashContainer.find('.flash-text').text().trim()).toEqual('Test failed. some error'); expect($flashContainer.find('.flash-action')).toBeDefined(); - expect($flashContainer.find('.flash-action').text()).toEqual('Save anyway'); + expect($flashContainer.find('.flash-action').text().trim()).toEqual('Save anyway'); }); it('should submit form if ajax request responds without any error in test', () => { @@ -168,7 +168,7 @@ describe('IntegrationSettingsForm', () => { expect($flashAction).toBeDefined(); spyOn(integrationSettingsForm.$form, 'submit'); - $flashAction.trigger('click'); + $flashAction.get(0).click(); expect(integrationSettingsForm.$form.submit).toHaveBeenCalled(); }); diff --git a/spec/javascripts/notes_spec.js b/spec/javascripts/notes_spec.js index 3e791a31604..65d2e8fd9fb 100644 --- a/spec/javascripts/notes_spec.js +++ b/spec/javascripts/notes_spec.js @@ -815,7 +815,7 @@ import '~/notes'; }); it('shows a flash message', () => { - this.notes.addFlash('Error message', FLASH_TYPE_ALERT, this.notes.parentTimeline); + this.notes.addFlash('Error message', FLASH_TYPE_ALERT, this.notes.parentTimeline.get(0)); expect($('.flash-alert').is(':visible')).toBeTruthy(); }); @@ -828,7 +828,7 @@ import '~/notes'; }); it('hides visible flash message', () => { - this.notes.addFlash('Error message 1', FLASH_TYPE_ALERT, this.notes.parentTimeline); + this.notes.addFlash('Error message 1', FLASH_TYPE_ALERT, this.notes.parentTimeline.get(0)); this.notes.clearFlash(); -- cgit v1.2.1 From fcd842b55837d2a8eab4ef32b65b5a44dfab6eba Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Thu, 5 Oct 2017 10:27:43 +0100 Subject: fixed notes specs changed how the container class is added onto the text element more specs --- spec/javascripts/flash_spec.js | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) (limited to 'spec/javascripts') 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(''); }); + + 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'); }); -- cgit v1.2.1