diff --git a/src/components/toast/__snapshots__/global_toast_list.test.js.snap b/src/components/toast/__snapshots__/global_toast_list.test.js.snap index 3d5e88846c2f..1ba3fa4d1733 100644 --- a/src/components/toast/__snapshots__/global_toast_list.test.js.snap +++ b/src/components/toast/__snapshots__/global_toast_list.test.js.snap @@ -13,27 +13,16 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = ` class="euiGlobalToastList" >
- - A - -
- -
-
-
- B + A
+
+ a +
+ - C + B
+
+ b +
`; diff --git a/src/components/toast/global_toast_list.test.js b/src/components/toast/global_toast_list.test.js index f0935ffc3513..4ce964973a39 100644 --- a/src/components/toast/global_toast_list.test.js +++ b/src/components/toast/global_toast_list.test.js @@ -1,8 +1,12 @@ import React from 'react'; -import { render } from 'enzyme'; -import { requiredProps } from '../../test/required_props'; +import { render, mount } from 'enzyme'; +import sinon from 'sinon'; +import { requiredProps, findTestSubject } from '../../test'; -import { EuiGlobalToastList } from './global_toast_list'; +import { + EuiGlobalToastList, + TOAST_FADE_OUT_MS, +} from './global_toast_list'; describe('EuiGlobalToastList', () => { test('is rendered', () => { @@ -10,31 +14,90 @@ describe('EuiGlobalToastList', () => { {}} - toastLifeTimeMs={1000} + toastLifeTimeMs={5} /> ); - expect(component).toMatchSnapshot(); + expect(component) + .toMatchSnapshot(); }); describe('props', () => { describe('toasts', () => { - it('is rendered', () => { - const toats = [ - { id: 'A', title: 'A' }, - { id: 'B', title: 'B' }, - { id: 'C', title: 'C' }, - ]; + test('is rendered', () => { + const toasts = [{ + title: 'A', + text: 'a', + color: 'success', + iconType: 'check', + 'data-test-subj': 'a', + id: 'a', + }, { + title: 'B', + text: 'b', + color: 'danger', + iconType: 'alert', + 'data-test-subj': 'b', + id: 'b', + }]; const component = render( {}} - toastLifeTimeMs={1000} + toastLifeTimeMs={5} /> ); - expect(component).toMatchSnapshot(); + expect(component) + .toMatchSnapshot(); + }); + }); + + describe('dismissToast', () => { + test('is called when a toast is clicked', done => { + const dismissToastSpy = sinon.spy(); + const component = mount( + + ); + + const toastB = findTestSubject(component, 'b'); + const closeButton = findTestSubject(toastB, 'toastCloseButton'); + closeButton.simulate('click'); + + // The callback is invoked once the toast fades from view. + setTimeout(() => { + expect(dismissToastSpy.called).toBe(true); + done(); + }, TOAST_FADE_OUT_MS + 1); + }); + + test('is called when the toast lifetime elapses', done => { + const TOAST_LIFE_TIME_MS = 5; + const dismissToastSpy = sinon.spy(); + mount( + + ); + + // The callback is invoked once the toast fades from view. + setTimeout(() => { + expect(dismissToastSpy.called).toBe(true); + done(); + }, TOAST_LIFE_TIME_MS + TOAST_FADE_OUT_MS); }); }); });