Update tests.

elastic · Feb 5, 2018 · 7d6de97 · 7d6de97
1 parent 56dd522
commit 7d6de97
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 48 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
@@ -13,27 +13,16 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = `
   class="euiGlobalToastList"
 >
   <div
-    class="euiToast euiGlobalToastListItem"
-    id="A"
+    class="euiToast euiToast--success euiGlobalToastListItem"
+    data-test-subj="a"
+    id="a"
   >
     <div
-      class="euiToastHeader"
-    >
-      <span
-        class="euiToastHeader__title"
-      >
-        A
-      </span>
-    </div>
-    <button
-      aria-label="Dismiss toast"
-      class="euiToast__closeButton"
-      data-test-subj="toastCloseButton"
-      type="button"
+      class="euiToastHeader euiToastHeader--withBody"
     >
       <svg
         aria-hidden="true"
-        class="euiIcon euiIcon--medium"
+        class="euiIcon euiToastHeader__icon euiIcon--medium"
         height="16"
         viewBox="0 0 16 16"
         width="16"
@@ -42,28 +31,18 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = `
       >
         <defs>
           <path
-            d="M7.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
-            id="cross-a"
+            d="M6.5 12a.502.502 0 0 1-.354-.146l-4-4a.502.502 0 0 1 .708-.708L6.5 10.793l6.646-6.647a.502.502 0 0 1 .708.708l-7 7A.502.502 0 0 1 6.5 12"
+            id="check-a"
           />
         </defs>
         <use
-          fill-rule="nonzero"
-          href="#cross-a"
+          href="#check-a"
         />
       </svg>
-    </button>
-  </div>
-  <div
-    class="euiToast euiGlobalToastListItem"
-    id="B"
-  >
-    <div
-      class="euiToastHeader"
-    >
       <span
         class="euiToastHeader__title"
       >
-        B
+        A
       </span>
     </div>
     <button
@@ -93,18 +72,43 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = `
         />
       </svg>
     </button>
+    <div
+      class="euiText euiText--small"
+    >
+      a
+    </div>
   </div>
   <div
-    class="euiToast euiGlobalToastListItem"
-    id="C"
+    class="euiToast euiToast--danger euiGlobalToastListItem"
+    data-test-subj="b"
+    id="b"
   >
     <div
-      class="euiToastHeader"
+      class="euiToastHeader euiToastHeader--withBody"
     >
+      <svg
+        aria-hidden="true"
+        class="euiIcon euiToastHeader__icon euiIcon--medium"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g
+          fill-rule="evenodd"
+        >
+          <path
+            d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
+          />
+          <path
+            d="M7 6h1v5H7zM7 12h1v1H7z"
+          />
+        </g>
+      </svg>
       <span
         class="euiToastHeader__title"
       >
-        C
+        B
       </span>
     </div>
     <button
@@ -134,6 +138,11 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = `
         />
       </svg>
     </button>
+    <div
+      class="euiText euiText--small"
+    >
+      b
+    </div>
   </div>
 </div>
 `;
diff --git a/src/components/toast/global_toast_list.test.js b/src/components/toast/global_toast_list.test.js
@@ -1,40 +1,103 @@
 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', () => {
     const component = render(
       <EuiGlobalToastList
         {...requiredProps}
         dismissToast={() => {}}
-        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(
           <EuiGlobalToastList
-            toasts={toats}
+            toasts={toasts}
             dismissToast={() => {}}
-            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(
+          <EuiGlobalToastList
+            toasts={[{
+              'data-test-subj': 'b',
+              id: 'b',
+            }]}
+            dismissToast={dismissToastSpy}
+            toastLifeTimeMs={100}
+          />
+        );
+
+        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(
+          <EuiGlobalToastList
+            toasts={[{
+              'data-test-subj': 'b',
+              id: 'b',
+            }]}
+            dismissToast={dismissToastSpy}
+            toastLifeTimeMs={TOAST_LIFE_TIME_MS}
+          />
+        );
+
+        // 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);
       });
     });
   });