toast component jest tests (#215)

* toast jest tests

* using test style guide this time

* test each color value

src/components/toast/__snapshots__/global_toast_list.test.js.snap

@@ -5,5 +5,9 @@ exports[`EuiGlobalToastList is rendered 1`] = `
   aria-label="aria-label"
   class="euiGlobalToastList testClass1 testClass2"
   data-test-subj="test subject string"
-/>
+>
+  <div>
+    hi
+  </div>
+</div>
 `;

src/components/toast/__snapshots__/toast.test.js.snap

@@ -1,17 +1,116 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiToast Props color danger is rendered 1`] = `
+<div
+  className="euiToast euiToast--danger"
+>
+  <div
+    className="euiToastHeader"
+  >
+    <span
+      className="euiToastHeader__title"
+    />
+  </div>
+</div>
+`;
+
+exports[`EuiToast Props color primary is rendered 1`] = `
+<div
+  className="euiToast euiToast--primary"
+>
+  <div
+    className="euiToastHeader"
+  >
+    <span
+      className="euiToastHeader__title"
+    />
+  </div>
+</div>
+`;
+
+exports[`EuiToast Props color success is rendered 1`] = `
+<div
+  className="euiToast euiToast--success"
+>
+  <div
+    className="euiToastHeader"
+  >
+    <span
+      className="euiToastHeader__title"
+    />
+  </div>
+</div>
+`;
+
+exports[`EuiToast Props color warning is rendered 1`] = `
+<div
+  className="euiToast euiToast--warning"
+>
+  <div
+    className="euiToastHeader"
+  >
+    <span
+      className="euiToastHeader__title"
+    />
+  </div>
+</div>
+`;
+
+exports[`EuiToast Props iconType is rendered 1`] = `
+<div
+  className="euiToast"
+>
+  <div
+    className="euiToastHeader"
+  >
+    <EuiIcon
+      aria-hidden="true"
+      className="euiToastHeader__icon"
+      size="m"
+      type="user"
+    />
+    <span
+      className="euiToastHeader__title"
+    />
+  </div>
+</div>
+`;
+
+exports[`EuiToast Props title is rendered 1`] = `
+<div
+  className="euiToast"
+>
+  <div
+    className="euiToastHeader"
+  >
+    <span
+      className="euiToastHeader__title"
+    >
+      toast title
+    </span>
+  </div>
+</div>
+`;
+
 exports[`EuiToast is rendered 1`] = `
 <div
   aria-label="aria-label"
   class="euiToast testClass1 testClass2"
   data-test-subj="test subject string"
 >
   <div
-    class="euiToastHeader"
+    class="euiToastHeader euiToastHeader--withBody"
   >
     <span
       class="euiToastHeader__title"
     />
   </div>
+  <div
+    class="euiText euiText--small"
+  >
+    <p>
+      Hi
+    </p>
+  </div>
 </div>
 `;

src/components/toast/global_toast_list.test.js

@@ -7,7 +7,9 @@ import { EuiGlobalToastList } from './global_toast_list';
 describe('EuiGlobalToastList', () => {
   test('is rendered', () => {
     const component = render(
-      <EuiGlobalToastList {...requiredProps} />
+      <EuiGlobalToastList {...requiredProps}>
+        <div>hi</div>
+      </EuiGlobalToastList>
     );
 
     expect(component)

src/components/toast/toast.js

@@ -48,6 +48,7 @@ export const EuiToast = ({ title, color, iconType, onClose, children, className,
         className="euiToast__closeButton"
         aria-label="Dismiss toast"
         onClick={onClose}
+        data-test-subj="toastCloseButton"
       >
         <EuiIcon
           type="cross"
@@ -92,4 +93,5 @@ EuiToast.propTypes = {
   iconType: PropTypes.oneOf(ICON_TYPES),
   color: PropTypes.oneOf(COLORS),
   onClose: PropTypes.func,
+  children: PropTypes.node,
 };

src/components/toast/toast.test.js

@@ -1,16 +1,64 @@
 import React from 'react';
-import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
+import { render, shallow } from 'enzyme';
+import sinon from 'sinon';
+import {
+  findTestSubject,
+  requiredProps
+} from '../../test';
 
-import { EuiToast } from './toast';
+import {
+  COLORS,
+  EuiToast
+} from './toast';
 
 describe('EuiToast', () => {
   test('is rendered', () => {
     const component = render(
-      <EuiToast {...requiredProps} />
+      <EuiToast {...requiredProps}>
+        <p>Hi</p>
+      </EuiToast>
     );
 
     expect(component)
       .toMatchSnapshot();
   });
+
+  describe('Props', () => {
+    describe('title', () => {
+      test('is rendered', () => {
+        const component = <EuiToast title="toast title" />;
+        expect(shallow(component)).toMatchSnapshot();
+      });
+    });
+
+    describe('color', () => {
+      COLORS.forEach(color => {
+        test(`${color} is rendered`, () => {
+          const component = <EuiToast color={color} />;
+          expect(shallow(component)).toMatchSnapshot();
+        });
+      });
+    });
+
+    describe('iconType', () => {
+      test('is rendered', () => {
+        const component = <EuiToast iconType="user" />;
+        expect(shallow(component)).toMatchSnapshot();
+      });
+    });
+
+    describe('onClose', () => {
+      test('is called when the close button is clicked', () => {
+        const onCloseHandler = sinon.stub();
+
+        const component = shallow(
+          <EuiToast onClose={onCloseHandler} />
+        );
+        const closeButton = findTestSubject(component, 'toastCloseButton');
+        closeButton.simulate('click');
+
+        sinon.assert.calledOnce(onCloseHandler);
+      });
+    });
+  });
 });