chore(ToastNotification): update storybook, increase test coverage (#231

)
patternfly · Feb 19, 2018 · b9d63d3 · b9d63d3
1 parent 700364e
commit b9d63d3
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 54 deletions.
diff --git a/src/components/ToastNotification/ToastNotification.stories.js b/src/components/ToastNotification/ToastNotification.stories.js
@@ -32,7 +32,7 @@ stories.addWithInfo(
     const actionEnabled = boolean('Action', true);
 
     const story = (
-      <div>
+      <ToastNotificationList>
         <ToastNotification
           type={type}
           onDismiss={
@@ -59,7 +59,7 @@ stories.addWithInfo(
             {message}
           </span>
         </ToastNotification>
-      </div>
+      </ToastNotificationList>
     );
 
     return inlineTemplate({

diff --git a/src/components/ToastNotification/ToastNotification.test.js b/src/components/ToastNotification/ToastNotification.test.js
@@ -2,32 +2,98 @@
 
 import React from 'react';
 import renderer from 'react-test-renderer';
+import ReactTestUtils from 'react-dom/test-utils';
 
 import ToastNotification from './ToastNotification';
 import TimedToastNotification from './TimedToastNotification';
+import ToastNotificationList from './ToastNotificationList';
 
-const testToastNotificationSnapshot = Component => {
-  const handleNotificationClose = jest.fn();
-  const handleOnMouseEnter = jest.fn();
-  const handleOnMouseLeave = jest.fn();
-  const component = renderer.create(
+const testToastNotificationSnapshot = (Component, props, rest) => (
+  <ToastNotificationList {...rest}>
     <Component
-      type="error"
-      onDismiss={handleNotificationClose}
-      onMouseEnter={handleOnMouseEnter}
-      onMouseLeave={handleOnMouseLeave}
+      type="success"
+      onDismiss={jest.fn()}
+      onMouseEnter={jest.fn()}
+      onMouseLeave={jest.fn()}
+      {...props}
     >
-      <span>Danger Will Robinson!</span>
+      <span>Success Will Robinson!</span>
     </Component>
-  );
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
-};
+  </ToastNotificationList>
+);
 
 test('ToastNotification renders properly', () => {
-  testToastNotificationSnapshot(ToastNotification);
+  const component = renderer.create(
+    testToastNotificationSnapshot(ToastNotification, { type: 'error' })
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('TimedToastNotification persisted and paused renders properly', () => {
+  const component = renderer.create(
+    testToastNotificationSnapshot(TimedToastNotification, {
+      persisted: true,
+      paused: true
+    })
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('TimedToastNotification expectedly sets pause', () => {
+  const component = ReactTestUtils.renderIntoDocument(
+    <TimedToastNotification
+      type="success"
+      onDismiss={jest.fn()}
+      onMouseEnter={jest.fn()}
+      onMouseLeave={jest.fn()}
+      paused
+    />
+  );
+  expect(component.props.paused).toBe(true);
 });
 
-test('TimedToastNotification renders properly', () => {
-  testToastNotificationSnapshot(TimedToastNotification);
+test('TimedToastNotification expectedly executes mouse enter/leave and dismiss functions', () => {
+  let eventCount = 0;
+  const component = ReactTestUtils.renderIntoDocument(
+    testToastNotificationSnapshot(TimedToastNotification, {
+      type: 'info',
+      persisted: true,
+      onDismiss: () => eventCount++,
+      onMouseEnter: () => eventCount++,
+      onMouseLeave: () => eventCount++
+    })
+  );
+  const notification = ReactTestUtils.findRenderedDOMComponentWithClass(
+    component,
+    'alert-info'
+  );
+  ReactTestUtils.Simulate.mouseEnter(notification);
+  ReactTestUtils.Simulate.mouseLeave(notification);
+  const close = ReactTestUtils.findRenderedDOMComponentWithTag(
+    component,
+    'button'
+  );
+  ReactTestUtils.Simulate.click(close);
+  expect(eventCount).toBe(3);
+});
+
+test('ToastNotificationList expectedly executes mouse enter/leave functions', () => {
+  let eventCount = 0;
+  const component = ReactTestUtils.renderIntoDocument(
+    testToastNotificationSnapshot(
+      TimedToastNotification,
+      { type: 'warning' },
+      {
+        onMouseEnter: () => eventCount++,
+        onMouseLeave: () => eventCount++
+      }
+    )
+  );
+  const notification = ReactTestUtils.findRenderedDOMComponentWithClass(
+    component,
+    'toast-notifications-list-pf'
+  );
+  ReactTestUtils.Simulate.mouseEnter(notification);
+  ReactTestUtils.Simulate.mouseLeave(notification);
+  expect(eventCount).toBe(2);
 });
diff --git a/src/components/ToastNotification/__snapshots__/ToastNotification.test.js.snap b/src/components/ToastNotification/__snapshots__/ToastNotification.test.js.snap
@@ -1,57 +1,69 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TimedToastNotification renders properly 1`] = `
+exports[`TimedToastNotification persisted and paused renders properly 1`] = `
 <div
-  className="alert toast-pf alert-danger alert-dismissable"
+  className="toast-notifications-list-pf"
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >
-  <button
-    aria-hidden="true"
-    className="close close-default"
-    disabled={false}
-    onClick={[MockFunction]}
-    type="button"
+  <div
+    className="alert toast-pf alert-success alert-dismissable"
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
   >
+    <button
+      aria-hidden="true"
+      className="close close-default"
+      disabled={false}
+      onClick={[MockFunction]}
+      type="button"
+    >
+      <span
+        aria-hidden="true"
+        className="pficon pficon-close"
+      />
+    </button>
     <span
       aria-hidden="true"
-      className="pficon pficon-close"
+      className="pficon pficon-ok"
     />
-  </button>
-  <span
-    aria-hidden="true"
-    className="pficon pficon-error-circle-o"
-  />
-  <span>
-    Danger Will Robinson!
-  </span>
+    <span>
+      Success Will Robinson!
+    </span>
+  </div>
 </div>
 `;
 
 exports[`ToastNotification renders properly 1`] = `
 <div
-  className="alert toast-pf alert-danger alert-dismissable"
-  onMouseEnter={[MockFunction]}
-  onMouseLeave={[MockFunction]}
+  className="toast-notifications-list-pf"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
 >
-  <button
-    aria-hidden="true"
-    className="close close-default"
-    disabled={false}
-    onClick={[MockFunction]}
-    type="button"
+  <div
+    className="alert toast-pf alert-danger alert-dismissable"
+    onMouseEnter={[MockFunction]}
+    onMouseLeave={[MockFunction]}
   >
+    <button
+      aria-hidden="true"
+      className="close close-default"
+      disabled={false}
+      onClick={[MockFunction]}
+      type="button"
+    >
+      <span
+        aria-hidden="true"
+        className="pficon pficon-close"
+      />
+    </button>
     <span
       aria-hidden="true"
-      className="pficon pficon-close"
+      className="pficon pficon-error-circle-o"
     />
-  </button>
-  <span
-    aria-hidden="true"
-    className="pficon pficon-error-circle-o"
-  />
-  <span>
-    Danger Will Robinson!
-  </span>
+    <span>
+      Success Will Robinson!
+    </span>
+  </div>
 </div>
 `;