Merge pull request #18 from tdjones/master

Fixed 'next' status from never being removed after multiple transitions.
e0ipso · Nov 24, 2014 · 5edef84 · 5edef84
2 parents ab0a94e + 1c47217
commit 5edef84
Show file tree

Hide file tree

Showing 4 changed files with 218 additions and 6 deletions.
diff --git a/message-center.js b/message-center.js
@@ -10,6 +10,7 @@ MessageCenterModule.
  function ($rootScope, $sce, $timeout) {
  return {
  mcMessages: this.mcMessages || [],
+ offlistener: this.offlistener || undefined,
  status: {
  unseen: 'unseen',
  shown: 'shown',
@@ -65,11 +66,11 @@ MessageCenterModule.
  if (!this.mcMessages[index].processed) {
  if (this.mcMessages[index].status == this.status.unseen) {
  this.mcMessages[index].status = this.status.shown;
+ this.mcMessages[index].processed = true;
  }
  else if (this.mcMessages[index].status == this.status.next) {
  this.mcMessages[index].status = this.status.unseen;
  }
- this.mcMessages[index].processed = true;
  }
  }
  },
@@ -110,8 +111,9 @@ MessageCenterModule.
  $rootScope.mcMessages = messageCenterService.mcMessages;
  messageCenterService.flush();
  };
- $rootScope.$on('$locationChangeStart', changeReaction);
-
+ if (messageCenterService.offlistener === undefined) {
+ messageCenterService.offlistener = $rootScope.$on('$locationChangeSuccess', changeReaction);
+ }
  scope.animation = attrs.animation || 'fade in';
  }
  };

diff --git a/test/app/index.html b/test/app/index.html
@@ -63,6 +63,13 @@
  $scope.saveFailure = function() {
  messageCenterService.add('danger', 'Something went wrong!');
  };
+ $scope.saveSuccessGoHome = function() {
+ messageCenterService.add('success', 'Saved successfully and went home!', {status: messageCenterService.status.next});
+ $scope.goIndex();
+ };
+ $scope.goIndex = function() {
+ $location.path('/');
+ };
  })
 
  .controller('AllowHTMLController', function($scope, $location, messageCenterService) {
@@ -72,7 +79,14 @@
  $scope.plainText = function() {
  messageCenterService.add('warning', '<strong>HTML</strong> <em>is</em> NOT <span>allowed</span>.');
  };
- });
+ })
+
+ .controller('PermanentController', function($scope, $location, messageCenterService) {
+ $scope.goIndex = function() {
+ $location.path('/');
+ };
+ })
+ ;
  </script>
  </head>
 
@@ -100,6 +114,8 @@ <h1>Edit</h1>
  <button id="saveMultipleSuccess" data-ng-click="saveMultipleSuccess()">Save (multiple success)</button>
  <button id="saveMultipleTypes" data-ng-click="saveMultipleTypes()">Save (multiple types)</button>
  <button id="saveFailure" data-ng-click="saveFailure()">Save (failure)</button>
+ <button id="saveSuccessGoHome" data-ng-click="saveSuccessGoHome()">Save and Go Home</button>
+
  </article>
  </script>
 
@@ -111,6 +127,13 @@ <h1>HTML</h1>
  </article>
  </script>
 
+ <script type="text/ng-template" id="permanent">
+ <article data-ng-controller="PermanentController">
+ <h1>Permanent</h1>
+ <button id="goIndex" data-ng-click="goIndex()">Index page</button>
+ </article>
+ </script>
+
  <div mc-messages></div>
  <article data-ng-view />
  </body>

diff --git a/test/app/index3.html b/test/app/index3.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <script src="components/angular/angular.js"></script>
+ <script src="components/angular-route/angular-route.js"></script>
+ <script src="message-center.js"></script>
+ <script>
+ angular.module('messageCenter.e2e', ['MessageCenterModule', 'ngRoute'])
+ .config(function($routeProvider) {
+ $routeProvider
+ .when('/', { templateUrl: 'home' })
+ .when('/edit', { templateUrl: 'edit' })
+ .when('/html', { templateUrl: 'html' })
+ .when('/permanent', { templateUrl: 'permanent' });
+ })
+
+ .controller('HomeController', function($scope, $location, messageCenterService) {
+ $scope.goIndex = function() {
+ $location.path('/');
+ };
+ $scope.goEdit = function() {
+ $location.path('/edit');
+ };
+ $scope.goHTML = function() {
+ $location.path('/html');
+ };
+ $scope.goPermanent = function() {
+ messageCenterService.add('success', 'Showing permanent message!', {status: messageCenterService.status.permanent});
+ $location.path('/permanent');
+ };
+ $scope.goEditSuccess = function() {
+ messageCenterService.add('success', 'You have reached the edit page!', {status: messageCenterService.status.next});
+ $scope.goEdit();
+ };
+ $scope.goEditMultipleSuccess = function() {
+ messageCenterService.add('success', 'Yay!', {status: messageCenterService.status.next});
+ messageCenterService.add('success', 'You have reached the edit page!', {status: messageCenterService.status.next});
+ $scope.goEdit();
+ };
+ $scope.goEditMultipleTypes = function() {
+ messageCenterService.add('success', 'Yay!', {status: messageCenterService.status.next});
+ messageCenterService.add('danger', 'Something went wrong!', {status: messageCenterService.status.next});
+ $scope.goEdit();
+ };
+ $scope.goEditFailure = function() {
+ messageCenterService.add('danger', 'Something went wrong!', {status: messageCenterService.status.next});
+ $scope.goEdit();
+ };
+ })
+
+ .controller('EditController', function($scope, $location, messageCenterService) {
+ $scope.saveSuccess = function() {
+ messageCenterService.add('success', 'Saved successfully!');
+ };
+ $scope.saveMultipleSuccess = function() {
+ messageCenterService.add('success', 'Yay!');
+ messageCenterService.add('success', 'Saved successfully!');
+ };
+ $scope.saveMultipleTypes = function() {
+ messageCenterService.add('success', 'Yay!');
+ messageCenterService.add('danger', 'Something went wrong!');
+ };
+ $scope.saveFailure = function() {
+ messageCenterService.add('danger', 'Something went wrong!');
+ };
+ $scope.saveSuccessGoHome = function() {
+ messageCenterService.add('success', 'Saved successfully and went home!', {status: messageCenterService.status.next});
+ $scope.goIndex();
+ };
+ $scope.goIndex = function() {
+ $location.path('/');
+ };
+ })
+
+ .controller('AllowHTMLController', function($scope, $location, messageCenterService) {
+ $scope.allowedHTML = function() {
+ messageCenterService.add('success', '<strong>HTML</strong> <em>is</em> <span>allowed</span>.', {html: true});
+ };
+ $scope.plainText = function() {
+ messageCenterService.add('warning', '<strong>HTML</strong> <em>is</em> NOT <span>allowed</span>.');
+ };
+ })
+
+ .controller('PermanentController', function($scope, $location, messageCenterService) {
+ $scope.goIndex = function() {
+ $location.path('/');
+ };
+ })
+ ;
+ </script>
+ </head>
+
+ <body data-ng-app="messageCenter.e2e">
+ <script type="text/ng-template" id="home">
+ <article data-ng-controller="HomeController" >
+ <div mc-messages></div>
+ <h1>Home</h1>
+ <button id="goIndex" data-ng-click="goIndex()">Index page</button>
+ <button id="goEdit" data-ng-click="goEdit()">Edit page</button>
+ <button id="goHTML" data-ng-click="goHTML()">HTML page</button>
+ <button id="goPermanent" data-ng-click="goPermanent()">Permanent page</button>
+ <button id="goEditSuccess" data-ng-click="goEditSuccess()">Edit (success)</button>
+ <button id="goEditMultipleSuccess" data-ng-click="goEditMultipleSuccess()">Edit (multiple success)</button>
+ <button id="goEditMultipleTypes" data-ng-click="goEditMultipleTypes()">Edit (multiple types)</button>
+ <button id="goEditFailure" data-ng-click="goEditFailure()">Edit (failure)</button>
+ <button id="testPermanent" data-ng-click="testPermanent()">Test permanent</button>
+ <button id="testPermanentClose" data-ng-click="testPermanent()">Test permanent (close)</button>
+ </article>
+ </script>
+
+ <script type="text/ng-template" id="edit">
+ <article data-ng-controller="EditController">
+ <div mc-messages></div>
+ <h1>Edit</h1>
+ <button id="saveSuccess" data-ng-click="saveSuccess()">Save</button>
+ <button id="saveMultipleSuccess" data-ng-click="saveMultipleSuccess()">Save (multiple success)</button>
+ <button id="saveMultipleTypes" data-ng-click="saveMultipleTypes()">Save (multiple types)</button>
+ <button id="saveFailure" data-ng-click="saveFailure()">Save (failure)</button>
+ <button id="saveSuccessGoHome" data-ng-click="saveSuccessGoHome()">Save and Go Home</button>
+
+ </article>
+ </script>
+
+ <script type="text/ng-template" id="html">
+ <article data-ng-controller="AllowHTMLController">
+ <div mc-messages></div>
+ <h1>HTML</h1>
+ <button id="allowedHTML" data-ng-click="allowedHTML()">Allowed HTML</button>
+ <button id="plainText" data-ng-click="plainText()">Plain Text</button>
+ </article>
+ </script>
+
+ <script type="text/ng-template" id="permanent">
+ <article data-ng-controller="PermanentController">
+ <div mc-messages></div>
+ <h1>Permanent</h1>
+ <button id="goIndex" data-ng-click="goIndex()">Index page</button>
+ </article>
+ </script>
+
+
+ <article data-ng-view />
+ </body>
+</html>
diff --git a/test/scenarios.js b/test/scenarios.js
@@ -1,4 +1,4 @@
-describe('Message Center', function() {
+describe('Message Center with single directive', function() {
 
  beforeEach(module('MessageCenterModule'));
 
@@ -88,7 +88,7 @@ describe('Message Center', function() {
  });
  });
 
- describe('after navigating to multiple different views', function () {
+ describe('after navigating to multiple different views with permanent message', function () {
  beforeEach(function () {
  element('#goPermanent').click();
  });
@@ -130,6 +130,21 @@ describe('Message Center', function() {
  });
  });
 
+ describe('after navigating to multiple different views with next message', function () {
+ it('clears the next message', function () {
+ element('#goEditSuccess').click();
+ var messages = element('div#mc-messages-wrapper .alert');
+ expect(messages.count()).toBe(1);
+ expect(messages.prop('className')).toEqual('alert alert-success fade in');
+ expect(messages.text()).toMatch('You have reached the edit page!');
+ element('#saveSuccessGoHome').click();
+ var messages = element('div#mc-messages-wrapper .alert');
+ expect(messages.count()).toBe(1);
+ expect(messages.prop('className')).toEqual('alert alert-success fade in');
+ expect(messages.text()).toMatch('Saved successfully and went home!');
+ });
+ });
+
  describe('when going to the allowed HTML page', function(){
  beforeEach(function() { element('#goHTML').click(); });
 
@@ -203,3 +218,31 @@ describe('Message Center', function() {
  });
  });
 });
+
+describe('Message Center with multiple directives', function() {
+
+ beforeEach(module('MessageCenterModule'));
+
+ beforeEach(function() { browser().navigateTo('/index3.html'); });
+
+ it('renders an empty ordered list on its initial state', function() {
+ expect(element('div#mc-messages-wrapper').count()).toBe(1);
+ expect(element('div#mc-messages-wrapper .alert').count()).toBe(0);
+ });
+
+ describe('when navigating through two views', function() {
+
+ it('renders a message with the default "success" level', function() {
+ element('#goEditSuccess').click();
+ var messages = element('div#mc-messages-wrapper .alert');
+ expect(messages.count()).toBe(1);
+ expect(messages.prop('className')).toEqual('alert alert-success fade in');
+ expect(messages.text()).toMatch('You have reached the edit page!');
+ element('#saveSuccessGoHome').click();
+ messages = element('div#mc-messages-wrapper .alert');
+ expect(messages.count()).toBe(1);
+ expect(messages.prop('className')).toEqual('alert alert-success fade in');
+ expect(messages.text()).toMatch('Saved successfully and went home!');
+ });
+ });
+});