Updated tests

Author: teodosii

samples/js/index.js

@@ -2,6 +2,6 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./components/App";
 import "../styles/stylesheet.scss";
-import "babel-polyfill";
+import "@babel/polyfill";
 
 ReactDOM.render(<App />, document.getElementById("root"));

src/helpers.js

@@ -176,13 +176,35 @@ export function slidingExitTransition(notification) {
   );
 }
 
+export function touchSwipeTransition(notification) {
+  const { swipe } = notification.touchSlidingExit;
+
+  return getCubicBezierTransition(
+    swipe.duration,
+    swipe.cubicBezier,
+    swipe.delay,
+    "left"
+  );
+}
+
+export function touchFadeTransition(notification) {
+  const { fade } = notification.touchSlidingExit;
+
+  return getCubicBezierTransition(
+    fade.duration,
+    fade.cubicBezier,
+    fade.delay,
+    "opacity"
+  );
+}
+
 export function getInitialSlidingState({ notification, isFirstNotification }) {
   // no sliding needed for first notification in container
   const hasSliding = shouldNotificationHaveSliding(notification) && !isFirstNotification;
   const state = {};
 
   // set default classes for animated element
-  state.animatedElementClasses = exports.getHtmlClassesForType(notification);
+  state.animatedElementClasses = getHtmlClassesForType(notification);
   state.rootElementStyle = {
     height: "0",
     marginBottom: 0,
@@ -204,8 +226,8 @@ export function getInitialSlidingState({ notification, isFirstNotification }) {
 
 export function getChildStyleForTouchTransitionExit(notification, startX, currentX) {
   const width = window.innerWidth * 2;
-  const touchSwipe = exports.touchSwipeTransition(notification);
-  const touchFade = exports.touchFadeTransition(notification);
+  const touchSwipe = touchSwipeTransition(notification);
+  const touchFade = touchFadeTransition(notification);
 
   return {
     opacity: 0,
@@ -221,11 +243,11 @@ export function getChildStyleForTouchTransitionExit(notification, startX, curren
 
 export function handleTouchSlidingAnimationExit(notification, currentX, startX) {
   // set current html classes
-  const animatedElementClasses = exports.getHtmlClassesForType(notification);
+  const animatedElementClasses = getHtmlClassesForType(notification);
   // set opacity and left to pull-out notification
   const childElementStyle = getChildStyleForTouchTransitionExit(notification, startX, currentX);
   // sliding out transition
-  const slidingTransition = exports.slidingExitTransition(notification);
+  const slidingTransition = slidingExitTransition(notification);
 
   return {
     childElementStyle,
@@ -242,7 +264,7 @@ export function handleTouchSlidingAnimationExit(notification, currentX, startX)
 
 export function handleSlidingAnimationExit(notification) {
   const { animationOut } = notification;
-  const animatedElementClasses = exports.getHtmlClassesForType(notification);
+  const animatedElementClasses = getHtmlClassesForType(notification);
 
   if (animationOut) {
     // add CSS classes if any defined
@@ -283,7 +305,7 @@ export function handleStageTransition(notification, state) {
   if (notification.resized) {
     // window got resized, do not apply animations
     rootElementStyle = stateRootStyle;
-    animatedElementClasses = exports.getHtmlClassesForType(notification);
+    animatedElementClasses = getHtmlClassesForType(notification);
   } else {
     // use values from state
     rootElementStyle = stateRootStyle;
@@ -315,28 +337,6 @@ export function getRootHeightStyle(notification, scrollHeight) {
   };
 }
 
-export function touchSwipeTransition(notification) {
-  const { swipe } = notification.touchSlidingExit;
-
-  return getCubicBezierTransition(
-    swipe.duration,
-    swipe.cubicBezier,
-    swipe.delay,
-    "left"
-  );
-}
-
-export function touchFadeTransition(notification) {
-  const { fade } = notification.touchSlidingExit;
-
-  return getCubicBezierTransition(
-    fade.duration,
-    fade.cubicBezier,
-    fade.delay,
-    "opacity"
-  );
-}
-
 export function getIconHtmlContent(notification, onClickHandler) {
   // use icon defined by user
   if (notification.dismissIcon) {
@@ -383,7 +383,7 @@ export function getNotificationOptions(options, userDefinedTypes) {
   } = notification;
 
   // for now we'll use Math.random for id
-  notification.id = exports.getRandomId();
+  notification.id = getRandomId();
 
   // validate notification's title
   validateTitle(notification);

src/react-notification.js

@@ -48,8 +48,7 @@ export default class ReactNotification extends React.Component {
 
   componentWillUnmount() {
     if (this.timeoutId) {
-      // timeout cleanup
-      clearTimeout(this.timeoutId);
+      this.timeoutId = clearTimeout(this.timeoutId);
     }
   }
 

tests/__snapshots__/react-notification.test.js.snap

@@ -289,9 +289,37 @@ Object {
 }
 `;
 
-exports[`Notification component onTransitionEnd updates state with needed CSS classes 1`] = `[Function]`;
+exports[`Notification component onTransitionEnd updates state with needed CSS classes 1`] = `
+Object {
+  "animatedElementClasses": Array [
+    "notification-item",
+    "notification-success",
+    "notification-visible",
+    "html5",
+    "css3",
+  ],
+  "hasSliding": true,
+  "rootElementStyle": Object {
+    "height": "auto",
+    "width": undefined,
+  },
+}
+`;
 
-exports[`Notification component onTransitionEnd updates state with needed CSS classes 2`] = `[Function]`;
+exports[`Notification component onTransitionEnd updates state with needed CSS classes 2`] = `
+Object {
+  "animatedElementClasses": Array [
+    "notification-item",
+    "notification-success",
+    "notification-visible",
+  ],
+  "hasSliding": true,
+  "rootElementStyle": Object {
+    "height": "auto",
+    "width": undefined,
+  },
+}
+`;
 
 exports[`Notification component timeout handler skips setting state if stage is REMOVAL/EXIT 1`] = `
 Object {

tests/__snapshots__/stage-helpers.test.js.snap

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test suite for stage-helpers adds CSS animation classes on removal if animationOut is defined 1`] = `
+Object {
+  "animatedElementClasses": Array [
+    "notification-item",
+    "notification-success",
+    "jest-test",
+  ],
+  "rootElementStyle": Object {
+    "height": 0,
+    "marginBottom": 0,
+    "transition": "600ms all cubic-bezier(0.215, 0.61, 0.355, 1) 0ms",
+    "width": undefined,
+  },
+}
+`;
+
+exports[`test suite for stage-helpers does not add CSS animation classes on removal if animationOut is undefined 1`] = `
+Object {
+  "animatedElementClasses": Array [
+    "notification-item",
+    "notification-success",
+  ],
+  "rootElementStyle": Object {
+    "height": 0,
+    "marginBottom": 0,
+    "transition": "600ms all cubic-bezier(0.215, 0.61, 0.355, 1) 0ms",
+    "width": undefined,
+  },
+}
+`;
+
+exports[`test suite for stage-helpers notification slides to the left edge of the window 1`] = `
+Object {
+  "left": "-2048px",
+  "opacity": 0,
+  "position": "relative",
+  "transition": "600ms left ease-in 0ms, 300ms opacity ease-in 0ms",
+}
+`;
+
+exports[`test suite for stage-helpers notification slides to the right edge of the window 1`] = `
+Object {
+  "left": "2048px",
+  "opacity": 0,
+  "position": "relative",
+  "transition": "600ms left ease-in 0ms, 300ms opacity ease-in 0ms",
+}
+`;