From bb7bddb7aa6d56204e7bcde52441fd299c553cc3 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Wed, 20 Dec 2017 19:39:46 -0700
Subject: [PATCH] toast component jest tests (#215)

* toast jest tests

* using test style guide this time

* test each color value
---
 .../global_toast_list.test.js.snap            |   6 +-
 .../toast/__snapshots__/toast.test.js.snap    | 101 +++++++++++++++++-
 .../toast/global_toast_list.test.js           |   4 +-
 src/components/toast/toast.js                 |   2 +
 src/components/toast/toast.test.js            |  56 +++++++++-
 5 files changed, 162 insertions(+), 7 deletions(-)

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 447a1162053..812fd7b0fc9 100644
--- a/src/components/toast/__snapshots__/global_toast_list.test.js.snap
+++ b/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>
 `;
diff --git a/src/components/toast/__snapshots__/toast.test.js.snap b/src/components/toast/__snapshots__/toast.test.js.snap
index aa7bae612bd..18f05d0483d 100644
--- a/src/components/toast/__snapshots__/toast.test.js.snap
+++ b/src/components/toast/__snapshots__/toast.test.js.snap
@@ -1,5 +1,97 @@
 // 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"
@@ -7,11 +99,18 @@ exports[`EuiToast is rendered 1`] = `
   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>
 `;
diff --git a/src/components/toast/global_toast_list.test.js b/src/components/toast/global_toast_list.test.js
index d65854b5b64..0980bb37402 100644
--- a/src/components/toast/global_toast_list.test.js
+++ b/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)
diff --git a/src/components/toast/toast.js b/src/components/toast/toast.js
index 633677bc19d..90615cc5cb7 100644
--- a/src/components/toast/toast.js
+++ b/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,
 };
diff --git a/src/components/toast/toast.test.js b/src/components/toast/toast.test.js
index 67c4bce1a6c..ca9c6fa4fae 100644
--- a/src/components/toast/toast.test.js
+++ b/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);
+      });
+    });
+  });
 });