+
{ title }
{ message }
{ dismiss }
diff --git a/src/constants.js b/src/constants.js
index 59538d5..f686ac2 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -25,7 +25,7 @@ var CONSTANTS = {
level: null,
position: 'tr',
autoDismiss: 5,
- dismissible: true,
+ dismissible: 'both',
action: null
}
};
diff --git a/src/styles.js b/src/styles.js
index 4289c4d..cb11e02 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -182,6 +182,7 @@ var STYLES = {
Dismiss: {
DefaultStyle: {
+ cursor: 'pointer',
fontFamily: 'Arial',
fontSize: '17px',
position: 'absolute',
diff --git a/test/notification-system.test.js b/test/notification-system.test.js
index cb72a4a..44b17a7 100644
--- a/test/notification-system.test.js
+++ b/test/notification-system.test.js
@@ -2,7 +2,7 @@
import React, { Component } from 'react';
import TestUtils from 'react-dom/test-utils';
-import expect from 'expect';
+import { expect } from 'chai';
import NotificationSystem from 'NotificationSystem';
import { positions, levels } from 'constants';
import merge from 'object-assign';
@@ -56,36 +56,36 @@ describe('Notification Component', function() {
it('should be rendered', done => {
component = TestUtils.findRenderedDOMComponentWithClass(instance, 'notifications-wrapper');
- expect(component).not.toBeNull();
+ expect(component).to.not.be.null;
done();
});
it('should hold the component ref', done => {
- expect(component).not.toBeNull();
+ expect(component).to.not.be.null;
done();
});
it('should render a single notification', done => {
component.addNotification(defaultNotification);
let notification = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'notification');
- expect(notification.length).toEqual(1);
+ expect(notification.length).to.equal(1);
done();
});
it('should not set a notification visibility class when the notification is initially added', done => {
component.addNotification(defaultNotification);
let notification = TestUtils.findRenderedDOMComponentWithClass(instance, 'notification');
- expect(notification.className).not.toMatch(/notification-hidden/);
- expect(notification.className).not.toMatch(/notification-visible/);
+ expect(notification.className).to.not.match(/notification-hidden/);
+ expect(notification.className).to.not.match(/notification-visible/);
done();
});
it('should set the notification class to visible after added', done => {
component.addNotification(defaultNotification);
let notification = TestUtils.findRenderedDOMComponentWithClass(instance, 'notification');
- expect(notification.className).toMatch(/notification/);
+ expect(notification.className).to.match(/notification/);
clock.tick(400);
- expect(notification.className).toMatch(/notification-visible/);
+ expect(notification.className).to.match(/notification-visible/);
done();
});
@@ -109,12 +109,12 @@ describe('Notification Component', function() {
containers.forEach(function(container) {
for (let level of Object.keys(levels)) {
let notification = container.getElementsByClassName('notification-' + levels[level]);
- expect(notification).not.toBeNull();
+ expect(notification).to.not.be.null;
}
});
let notifications = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'notification');
- expect(notifications.length).toEqual(count);
+ expect(notifications.length).to.equal(count);
done();
});
@@ -126,7 +126,7 @@ describe('Notification Component', function() {
}
let notifications = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'notification');
- expect(notifications.length).toEqual(randomNumber);
+ expect(notifications.length).to.equal(randomNumber);
done();
});
@@ -135,7 +135,7 @@ describe('Notification Component', function() {
component.addNotification(notificationObj);
component.addNotification(notificationObj);
let notification = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'notification');
- expect(notification.length).toEqual(1);
+ expect(notification.length).to.equal(1);
done();
});
@@ -144,38 +144,38 @@ describe('Notification Component', function() {
component.addNotification(notificationObj);
clock.tick(3000);
let notification = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'notification');
- expect(notification.length).toEqual(0);
+ expect(notification.length).to.equal(0);
done();
});
it('should remove a notification using returned object', done => {
let notificationCreated = component.addNotification(defaultNotification);
let notification = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'notification');
- expect(notification.length).toEqual(1);
+ expect(notification.length).to.equal(1);
component.removeNotification(notificationCreated);
clock.tick(1000);
let notificationRemoved = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'notification');
- expect(notificationRemoved.length).toEqual(0);
+ expect(notificationRemoved.length).to.equal(0);
done();
});
it('should remove a notification using uid', done => {
let notificationCreated = component.addNotification(defaultNotification);
let notification = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'notification');
- expect(notification.length).toEqual(1);
+ expect(notification.length).to.equal(1);
component.removeNotification(notificationCreated.uid);
clock.tick(200);
let notificationRemoved = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'notification');
- expect(notificationRemoved.length).toEqual(0);
+ expect(notificationRemoved.length).to.equal(0);
done();
});
it('should edit an existing notification using returned object', (done) => {
const notificationCreated = component.addNotification(defaultNotification);
const notification = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'notification');
- expect(notification.length).toEqual(1);
+ expect(notification.length).to.equal(1);
const newTitle = 'foo';
const newContent = 'foobar';
@@ -183,15 +183,15 @@ describe('Notification Component', function() {
component.editNotification(notificationCreated, { title: newTitle, message: newContent });
clock.tick(1000);
const notificationEdited = TestUtils.findRenderedDOMComponentWithClass(instance, 'notification');
- expect(notificationEdited.getElementsByClassName('notification-title')[0].textContent).toEqual(newTitle);
- expect(notificationEdited.getElementsByClassName('notification-message')[0].textContent).toEqual(newContent);
+ expect(notificationEdited.getElementsByClassName('notification-title')[0].textContent).to.equal(newTitle);
+ expect(notificationEdited.getElementsByClassName('notification-message')[0].textContent).to.equal(newContent);
done();
});
it('should edit an existing notification using uid', (done) => {
const notificationCreated = component.addNotification(defaultNotification);
const notification = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'notification');
- expect(notification.length).toEqual(1);
+ expect(notification.length).to.equal(1);
const newTitle = 'foo';
const newContent = 'foobar';
@@ -199,8 +199,8 @@ describe('Notification Component', function() {
component.editNotification(notificationCreated.uid, { title: newTitle, message: newContent });
clock.tick(1000);
const notificationEdited = TestUtils.findRenderedDOMComponentWithClass(instance, 'notification');
- expect(notificationEdited.getElementsByClassName('notification-title')[0].textContent).toEqual(newTitle);
- expect(notificationEdited.getElementsByClassName('notification-message')[0].textContent).toEqual(newContent);
+ expect(notificationEdited.getElementsByClassName('notification-title')[0].textContent).to.equal(newTitle);
+ expect(notificationEdited.getElementsByClassName('notification-message')[0].textContent).to.equal(newContent);
done();
});
@@ -209,11 +209,11 @@ describe('Notification Component', function() {
component.addNotification(defaultNotification);
component.addNotification(defaultNotification);
let notification = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'notification');
- expect(notification.length).toEqual(3);
+ expect(notification.length).to.equal(3);
component.clearNotifications();
clock.tick(200);
let notificationRemoved = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'notification');
- expect(notificationRemoved.length).toEqual(0);
+ expect(notificationRemoved.length).to.equal(0);
done();
});
@@ -223,7 +223,17 @@ describe('Notification Component', function() {
TestUtils.Simulate.click(notification);
clock.tick(1000);
let notificationRemoved = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'notification');
- expect(notificationRemoved.length).toEqual(0);
+ expect(notificationRemoved.length).to.equal(0);
+ done();
+ });
+
+ it('should dismiss notification on click of dismiss button', done => {
+ component.addNotification(notificationObj);
+ let dismissButton = TestUtils.findRenderedDOMComponentWithClass(instance, 'notification-dismiss');
+ TestUtils.Simulate.click(dismissButton);
+ clock.tick(1000);
+ let notificationRemoved = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'notification');
+ expect(notificationRemoved.length).to.equal(0);
done();
});
@@ -231,7 +241,7 @@ describe('Notification Component', function() {
delete notificationObj.title;
component.addNotification(notificationObj);
let notification = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'notification-title');
- expect(notification.length).toEqual(0);
+ expect(notification.length).to.equal(0);
done();
});
@@ -239,7 +249,7 @@ describe('Notification Component', function() {
delete notificationObj.message;
component.addNotification(notificationObj);
let notification = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'notification-message');
- expect(notification.length).toEqual(0);
+ expect(notification.length).to.equal(0);
done();
});
@@ -249,7 +259,27 @@ describe('Notification Component', function() {
let notification = TestUtils.findRenderedDOMComponentWithClass(instance, 'notification');
TestUtils.Simulate.click(notification);
let notificationAfterClicked = TestUtils.findRenderedDOMComponentWithClass(instance, 'notification');
- expect(notificationAfterClicked).not.toBeNull();
+ expect(notificationAfterClicked).to.not.be.null;
+ done();
+ });
+
+ it('should not dismiss the notification on click if dismissible is none', done => {
+ notificationObj.dismissible = 'none';
+ component.addNotification(notificationObj);
+ let notification = TestUtils.findRenderedDOMComponentWithClass(instance, 'notification');
+ TestUtils.Simulate.click(notification);
+ let notificationAfterClicked = TestUtils.findRenderedDOMComponentWithClass(instance, 'notification');
+ expect(notificationAfterClicked).to.exist;
+ done();
+ });
+
+ it('should not dismiss the notification on click if dismissible is button', done => {
+ notificationObj.dismissible = 'button';
+ component.addNotification(notificationObj);
+ let notification = TestUtils.findRenderedDOMComponentWithClass(instance, 'notification');
+ TestUtils.Simulate.click(notification);
+ let notificationAfterClicked = TestUtils.findRenderedDOMComponentWithClass(instance, 'notification');
+ expect(notificationAfterClicked).to.exist;
done();
});
@@ -261,7 +291,7 @@ describe('Notification Component', function() {
component.addNotification(defaultNotification);
let button = TestUtils.findRenderedDOMComponentWithClass(instance, 'notification-action-button');
- expect(button).not.toBeNull();
+ expect(button).to.not.be.null;
done();
});
@@ -277,7 +307,7 @@ describe('Notification Component', function() {
component.addNotification(notificationObj);
let button = TestUtils.findRenderedDOMComponentWithClass(instance, 'notification-action-button');
TestUtils.Simulate.click(button);
- expect(testThis).toEqual(true);
+ expect(testThis).to.equal(true);
done();
});
@@ -290,7 +320,7 @@ describe('Notification Component', function() {
let button = TestUtils.findRenderedDOMComponentWithClass(instance, 'notification-action-button');
TestUtils.Simulate.click(button);
let notification = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'notification');
- expect(notification.length).toEqual(0);
+ expect(notification.length).to.equal(0);
done();
});
@@ -301,7 +331,7 @@ describe('Notification Component', function() {
};
component.addNotification(notificationObj);
- expect(testThis).toEqual(true);
+ expect(testThis).to.equal(true);
done();
});
@@ -314,7 +344,7 @@ describe('Notification Component', function() {
component.addNotification(notificationObj);
let notification = TestUtils.findRenderedDOMComponentWithClass(instance, 'notification');
TestUtils.Simulate.click(notification);
- expect(testThis).toEqual(true);
+ expect(testThis).to.equal(true);
done();
});
@@ -325,7 +355,7 @@ describe('Notification Component', function() {
component.addNotification(defaultNotification);
let customContainer = TestUtils.findRenderedDOMComponentWithClass(instance, 'custom-container');
- expect(customContainer).not.toBeNull();
+ expect(customContainer).to.not.be.null;
done();
});
@@ -336,7 +366,7 @@ describe('Notification Component', function() {
TestUtils.Simulate.mouseEnter(notification);
clock.tick(4000);
let _notification = TestUtils.findRenderedDOMComponentWithClass(instance, 'notification');
- expect(_notification).not.toBeNull();
+ expect(_notification).to.not.be.null;
done();
});
@@ -349,7 +379,7 @@ describe('Notification Component', function() {
TestUtils.Simulate.mouseLeave(notification);
clock.tick(2000);
let _notification = TestUtils.scryRenderedDOMComponentsWithClass(instance, 'notification');
- expect(_notification.length).toEqual(0);
+ expect(_notification.length).to.equal(0);
done();
});
@@ -358,7 +388,7 @@ describe('Notification Component', function() {
component.addNotification(defaultNotification);
let notification = TestUtils.findRenderedDOMComponentWithClass(instance, 'notification-message');
let htmlElement = notification.getElementsByClassName('allow-html-strong');
- expect(htmlElement.length).toEqual(1);
+ expect(htmlElement.length).to.equal(1);
done();
});
@@ -367,7 +397,7 @@ describe('Notification Component', function() {
component.addNotification(notificationObj);
let notification = TestUtils.findRenderedDOMComponentWithClass(instance, 'notifications-tc');
let width = notification.style.width;
- expect(width).toEqual('600px');
+ expect(width).to.equal('600px');
done();
});
@@ -376,7 +406,7 @@ describe('Notification Component', function() {
component.addNotification(notificationObj);
let notification = TestUtils.findRenderedDOMComponentWithClass(instance, 'notification');
let bottomPosition = notification.style.bottom;
- expect(bottomPosition).toEqual('-100px');
+ expect(bottomPosition).to.equal('-100px');
done();
});
@@ -385,31 +415,31 @@ describe('Notification Component', function() {
component.addNotification(notificationObj);
let notification = TestUtils.findRenderedDOMComponentWithClass(instance, 'notifications-tl');
let width = notification.style.width;
- expect(width).toEqual('800px');
+ expect(width).to.equal('800px');
done();
});
it('should throw an error if no level is defined', done => {
delete notificationObj.level;
- expect(() => component.addNotification(notificationObj)).toThrow(/notification level is required/);
+ expect(() => component.addNotification(notificationObj)).to.throw(/notification level is required/);
done();
});
it('should throw an error if a invalid level is defined', done => {
notificationObj.level = 'invalid';
- expect(() => component.addNotification(notificationObj)).toThrow(/is not a valid level/);
+ expect(() => component.addNotification(notificationObj)).to.throw(/is not a valid level/);
done();
});
it('should throw an error if a invalid position is defined', done => {
notificationObj.position = 'invalid';
- expect(() => component.addNotification(notificationObj)).toThrow(/is not a valid position/);
+ expect(() => component.addNotification(notificationObj)).to.throw(/is not a valid position/);
done();
});
it('should throw an error if autoDismiss is not a number', done => {
notificationObj.autoDismiss = 'string';
- expect(() => component.addNotification(notificationObj)).toThrow(/\'autoDismiss\' must be a number./);
+ expect(() => component.addNotification(notificationObj)).to.throw(/\'autoDismiss\' must be a number./);
done();
});
});