diff options
Diffstat (limited to 'spec/frontend/flash_spec.js')
| -rw-r--r-- | spec/frontend/flash_spec.js | 255 |
1 files changed, 247 insertions, 8 deletions
diff --git a/spec/frontend/flash_spec.js b/spec/frontend/flash_spec.js index fc736f2d155..d5451ec2064 100644 --- a/spec/frontend/flash_spec.js +++ b/spec/frontend/flash_spec.js @@ -1,9 +1,12 @@ import * as Sentry from '@sentry/browser'; +import { setHTMLFixture } from 'helpers/fixtures'; import createFlash, { hideFlash, addDismissFlashClickListener, FLASH_TYPES, FLASH_CLOSED_EVENT, + createAlert, + VARIANT_WARNING, } from '~/flash'; jest.mock('@sentry/browser'); @@ -68,6 +71,236 @@ describe('Flash', () => { }); }); + describe('createAlert', () => { + const mockMessage = 'a message'; + let alert; + + describe('no flash-container', () => { + it('does not add to the DOM', () => { + alert = createAlert({ message: mockMessage }); + + expect(alert).toBeNull(); + expect(document.querySelector('.gl-alert')).toBeNull(); + }); + }); + + describe('with flash-container', () => { + beforeEach(() => { + setHTMLFixture('<div class="flash-container"></div>'); + }); + + afterEach(() => { + if (alert) { + alert.$destroy(); + } + document.querySelector('.flash-container')?.remove(); + }); + + it('adds alert element into the document by default', () => { + alert = createAlert({ message: mockMessage }); + + expect(document.querySelector('.flash-container').textContent.trim()).toBe(mockMessage); + expect(document.querySelector('.flash-container .gl-alert')).not.toBeNull(); + }); + + it('adds flash of a warning type', () => { + alert = createAlert({ message: mockMessage, variant: VARIANT_WARNING }); + + expect( + document.querySelector('.flash-container .gl-alert.gl-alert-warning'), + ).not.toBeNull(); + }); + + it('escapes text', () => { + alert = createAlert({ message: '<script>alert("a");</script>' }); + + const html = document.querySelector('.flash-container').innerHTML; + + expect(html).toContain('<script>alert("a");</script>'); + expect(html).not.toContain('<script>alert("a");</script>'); + }); + + it('adds alert into specified container', () => { + setHTMLFixture(` + <div class="my-alert-container"></div> + <div class="my-other-container"></div> + `); + + alert = createAlert({ message: mockMessage, containerSelector: '.my-alert-container' }); + + expect(document.querySelector('.my-alert-container .gl-alert')).not.toBeNull(); + expect(document.querySelector('.my-alert-container').innerText.trim()).toBe(mockMessage); + + expect(document.querySelector('.my-other-container .gl-alert')).toBeNull(); + expect(document.querySelector('.my-other-container').innerText.trim()).toBe(''); + }); + + it('adds alert into specified parent', () => { + setHTMLFixture(` + <div id="my-parent"> + <div class="flash-container"></div> + </div> + <div id="my-other-parent"> + <div class="flash-container"></div> + </div> + `); + + alert = createAlert({ message: mockMessage, parent: document.getElementById('my-parent') }); + + expect(document.querySelector('#my-parent .flash-container .gl-alert')).not.toBeNull(); + expect(document.querySelector('#my-parent .flash-container').innerText.trim()).toBe( + mockMessage, + ); + + expect(document.querySelector('#my-other-parent .flash-container .gl-alert')).toBeNull(); + expect(document.querySelector('#my-other-parent .flash-container').innerText.trim()).toBe( + '', + ); + }); + + it('removes element after clicking', () => { + alert = createAlert({ message: mockMessage }); + + expect(document.querySelector('.flash-container .gl-alert')).not.toBeNull(); + + document.querySelector('.gl-dismiss-btn').click(); + + expect(document.querySelector('.flash-container .gl-alert')).toBeNull(); + }); + + it('does not capture error using Sentry', () => { + alert = createAlert({ + message: mockMessage, + captureError: false, + error: new Error('Error!'), + }); + + expect(Sentry.captureException).not.toHaveBeenCalled(); + }); + + it('captures error using Sentry', () => { + alert = createAlert({ + message: mockMessage, + captureError: true, + error: new Error('Error!'), + }); + + expect(Sentry.captureException).toHaveBeenCalledWith(expect.any(Error)); + expect(Sentry.captureException).toHaveBeenCalledWith( + expect.objectContaining({ + message: 'Error!', + }), + ); + }); + + describe('with buttons', () => { + const findAlertAction = () => document.querySelector('.flash-container .gl-alert-action'); + + it('adds primary button', () => { + alert = createAlert({ + message: mockMessage, + primaryButton: { + text: 'Ok', + }, + }); + + expect(findAlertAction().textContent.trim()).toBe('Ok'); + }); + + it('creates link with href', () => { + alert = createAlert({ + message: mockMessage, + primaryButton: { + link: '/url', + text: 'Ok', + }, + }); + + const action = findAlertAction(); + + expect(action.textContent.trim()).toBe('Ok'); + expect(action.nodeName).toBe('A'); + expect(action.getAttribute('href')).toBe('/url'); + }); + + it('create button as href when no href is present', () => { + alert = createAlert({ + message: mockMessage, + primaryButton: { + text: 'Ok', + }, + }); + + const action = findAlertAction(); + + expect(action.nodeName).toBe('BUTTON'); + expect(action.getAttribute('href')).toBe(null); + }); + + it('escapes the title text', () => { + alert = createAlert({ + message: mockMessage, + primaryButton: { + text: '<script>alert("a")</script>', + }, + }); + + const html = findAlertAction().innerHTML; + + expect(html).toContain('<script>alert("a")</script>'); + expect(html).not.toContain('<script>alert("a")</script>'); + }); + + it('calls actionConfig clickHandler on click', () => { + const clickHandler = jest.fn(); + + alert = createAlert({ + message: mockMessage, + primaryButton: { + text: 'Ok', + clickHandler, + }, + }); + + expect(clickHandler).toHaveBeenCalledTimes(0); + + findAlertAction().click(); + + expect(clickHandler).toHaveBeenCalledTimes(1); + expect(clickHandler).toHaveBeenCalledWith(expect.any(MouseEvent)); + }); + }); + + describe('Alert API', () => { + describe('dismiss', () => { + it('dismiss programmatically with .dismiss()', () => { + expect(document.querySelector('.gl-alert')).toBeNull(); + + alert = createAlert({ message: mockMessage }); + + expect(document.querySelector('.gl-alert')).not.toBeNull(); + + alert.dismiss(); + + expect(document.querySelector('.gl-alert')).toBeNull(); + }); + + it('calls onDismiss when dismissed', () => { + const dismissHandler = jest.fn(); + + alert = createAlert({ message: mockMessage, onDismiss: dismissHandler }); + + expect(dismissHandler).toHaveBeenCalledTimes(0); + + alert.dismiss(); + + expect(dismissHandler).toHaveBeenCalledTimes(1); + }); + }); + }); + }); + }); + describe('createFlash', () => { const message = 'test'; const fadeTransition = false; @@ -91,7 +324,7 @@ describe('Flash', () => { describe('with flash-container', () => { beforeEach(() => { - setFixtures( + setHTMLFixture( '<div class="content-wrapper js-content-wrapper"><div class="flash-container"></div></div>', ); }); @@ -115,11 +348,12 @@ describe('Flash', () => { }); it('escapes text', () => { - createFlash({ ...defaultParams, message: '<script>alert("a");</script>' }); + createFlash({ ...defaultParams, message: '<script>alert("a")</script>' }); - expect(document.querySelector('.flash-text').textContent.trim()).toBe( - '<script>alert("a");</script>', - ); + const html = document.querySelector('.flash-text').innerHTML; + + expect(html).toContain('<script>alert("a")</script>'); + expect(html).not.toContain('<script>alert("a")</script>'); }); it('adds flash into specified parent', () => { @@ -193,8 +427,10 @@ describe('Flash', () => { }, }); - expect(findFlashAction().href).toBe(`${window.location}testing`); - expect(findFlashAction().textContent.trim()).toBe('test'); + const action = findFlashAction(); + + expect(action.href).toBe(`${window.location}testing`); + expect(action.textContent.trim()).toBe('test'); }); it('uses hash as href when no href is present', () => { @@ -227,7 +463,10 @@ describe('Flash', () => { }, }); - expect(findFlashAction().textContent.trim()).toBe('<script>alert("a")</script>'); + const html = findFlashAction().innerHTML; + + expect(html).toContain('<script>alert("a")</script>'); + expect(html).not.toContain('<script>alert("a")</script>'); }); it('calls actionConfig clickHandler on click', () => { |