Updated tests, added prop validation, fixed stylesheets

Author: teodosii

README.md

@@ -22,15 +22,15 @@ https://teodosii.github.io/react-notifications-component/
     <td>:heavy_check_mark:</td>
   </tr>
   <tr>
-    <td>Standard notification types (<code>default</code>, <code>success</code>, <code>info</code>, <code>danger</code>, <code>warning</code>)</td>
+    <td>Standard notification types <br/> (<code>default</code>, <code>success</code>, <code>info</code>, <code>danger</code>, <code>warning</code>)</td>
     <td>:heavy_check_mark:</td>
   </tr>
   <tr>
     <td>Custom notification types</td>
     <td>:heavy_check_mark:</td>
   </tr>
   <tr>
-    <td>Custom notification content - <code>images</code>, <code>icons</code> etc</td>
+    <td>Custom notification content <br />(<code>images</code>, <code>icons</code> etc)</td>
     <td>:heavy_check_mark:</td>
   </tr>
   <tr>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-notifications-component",
-  "version": "0.2.1",
+  "version": "1.0.0",
   "homepage": "http://teodosii.github.io/react-notifications-component",
   "description": "React component for creating notifications on the fly",
   "main": "dist/react-notifications-component.js",
@@ -12,10 +12,10 @@
     "watch:library": "webpack -w --config webpack.dev.js",
     "start": "webpack-dev-server --config ./webpack.samples.dev.js",
     "test": "jest",
-    "predeploy": "npm run build:prod",
+    "predeploy": "npm run build:samples:prod",
     "deploy": "gh-pages -d dist",
     "coveralls": "jest --coverage && cat ./coverage/lcov.info | coveralls",
-    "publish": "npm run prod && npm publish"
+    "publish": "npm run build:library:prod && npm publish"
   },
   "repository": {
     "type": "git",

samples/styles/_customTypes.scss

@@ -1,16 +1,14 @@
 .notification-custom-icon {
   flex-basis: 20%;
   position: relative;
-  display: inline-block;
   padding: 8px 8px 8px 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   .fa {
-    top: 50%;
-    left: 50%;
     color: #fff;
     font-size: 28px;
-    position: relative;
-    transform: translate(-50%, -50%);
   }
 }
 

samples/styles/stylesheet.scss

@@ -30,6 +30,11 @@ body,
     "Segoe UI Symbol" !important;
 }
 
+.notification-item-root {
+  backface-visibility: hidden;
+  transform: translateZ(0) scale(1.0, 1.0);
+}
+
 div.usage-example {
   text-align: left;
 }

src/constants.js

@@ -90,3 +90,5 @@ export const ERROR = {
   // custom types
   TYPE_NOT_FOUND: "custom type not found"
 };
+
+export const BREAKPOINT = 768;

src/react-notification-component.js

@@ -1,14 +1,13 @@
 import React from "react";
 import ReactNotification from "src/react-notification";
-import {
-  isArray,
-  isNullOrUndefined
-} from "src/utils";
+import PropTypes from "prop-types";
+import { isArray } from "src/utils";
 
 import {
   INSERTION,
   NOTIFICATION_STAGE,
-  REMOVAL
+  REMOVAL,
+  BREAKPOINT
 } from "src/constants";
 
 import {
@@ -21,28 +20,30 @@ import {
 import "src/scss/notification.scss";
 
 class ReactNotificationComponent extends React.Component {
+  static propTypes = {
+    // option for responsiveness (defaults to true)
+    isMobile: PropTypes.bool,
+    // responsiveness breakpoint (defaults to 768)
+    breakpoint: PropTypes.number,
+    types: PropTypes.array,
+    onNotificationRemoval: PropTypes.func
+  }
+
+  static defaultProps = {
+    isMobile: true,
+    breakpoint: BREAKPOINT
+  }
+
   constructor(props) {
     super(props);
 
     this.state = {
-      // option for responsiveness (defaults to true)
       isMobile: props.isMobile,
-      // responsiveness breakpoint (defaults to 768)
       breakpoint: props.breakpoint,
       // notifications array data
       notifications: []
     };
 
-    if (isNullOrUndefined(props.breakpoint)) {
-      // set default breakpoint
-      this.state.breakpoint = 768;
-    }
-
-    if (isNullOrUndefined(props.isMobile)) {
-      // option defaults to true
-      this.state.isMobile = true;
-    }
-
     if (isArray(props.types)) {
       // check for custom types
       this.state.userDefinedTypes = props.types;

tests/react-notifications-component.test.js

@@ -4,7 +4,7 @@ import Enzyme, { mount } from "enzyme";
 import React16Adapter from "enzyme-adapter-react-16";
 import sinon from "sinon";
 import notificationMock from "tests/mocks/notification.mock";
-import { NOTIFICATION_STAGE } from "src/constants";
+import { NOTIFICATION_STAGE, BREAKPOINT } from "src/constants";
 
 Enzyme.configure({
   // use react-16 adapter
@@ -15,22 +15,20 @@ describe("Wrapper component", () => {
   let component;
   let clock;
 
-  // arrow function helpers
+  // helpers
   const state = () => component.state();
   const instance = () => component.instance();
+  
+  const getTypesMock = () => [{
+    name: "awesome",
+    htmlClasses: ["awesome"]
+  }];
 
-  const getTypesMock = function () {
-    return [{
-      name: "awesome",
-      htmlClasses: ["awesome"]
-    }];
-  };
-
-  const getNotificationMock = function (edits = {}) {
+  const getNotificationMock = (edits = {}) => {
     return Object.assign({}, notificationMock, edits);
   };
 
-  const addNotification = function (mock) {
+  const addNotification = (mock) => {
     return instance().addNotification(mock);
   };
 
@@ -323,24 +321,30 @@ describe("Wrapper component", () => {
     expect(notif.props.toggleTouchEnd).toBeDefined();
   });
 
-  it("renders mobile if `isMobile` is set", () => {
+  it("renders mobile for 512px width if `isMobile` is true", () => {
     // width for mobile view
     global.window.innerWidth = 512;
 
+    // just in case we update breakpoint in near future
+    expect(global.window.innerWidth).toBeLessThan(BREAKPOINT);
+
     // mount
-    component = mount(<ReactNotificationComponent isMobile={true} />);
+    component = mount(<ReactNotificationComponent />);
 
     // all mobile containers rendered
     expect(component.find(".notification-container-mobile-top").length).toBe(1);
     expect(component.find(".notification-container-mobile-bottom").length).toBe(1);
   });
 
-  it("renders desktop if `isMobile` is not set", () => {
+  it("renders desktop for 512px width if `isMobile` is false", () => {
     // width for mobile view
     global.window.innerWidth = 512;
 
+    // just in case we update breakpoint in near future
+    expect(global.window.innerWidth).toBeLessThan(BREAKPOINT);
+
     // mount
-    component = mount(<ReactNotificationComponent />);
+    component = mount(<ReactNotificationComponent isMobile={false} />);
 
     // all desktop containers rendered
     expect(component.find(".notification-container-top-left").length).toBe(1);

webpack.dev.js

@@ -17,7 +17,7 @@ module.exports = {
 
   plugins: [
     new webpack.DefinePlugin({
-      "process.env.NODE_ENV": JSON.stringify("production")
+      "process.env.NODE_ENV": JSON.stringify("development")
     })
   ],
 

webpack.samples.dev.js

@@ -67,6 +67,9 @@ module.exports = {
       inject: true,
       template: "./samples/html/index.html"
     }),
+    new webpack.DefinePlugin({
+      "process.env.NODE_ENV": JSON.stringify("development")
+    }),
     new webpack.NamedModulesPlugin()
   ]
 };