Add modal tests

directives/modal/modal.js

@@ -1,5 +1,6 @@
 angular.module('ui.bootstrap').directive('bsModal', ['$parse',function($parse) {
   var backdropEl;
+  var body = angular.element(document.getElementsByTagName('body')[0]);
   var defaultOpts = {
     backdrop: true,
     escape: true
@@ -15,7 +16,7 @@ angular.module('ui.bootstrap').directive('bsModal', ['$parse',function($parse) {
       if (opts.backdrop && !backdropEl) {
         backdropEl = angular.element('<div class="modal-backdrop"></div>');
         backdropEl.css('display','none');
-        angular.element(document.getElementsByTagName('body')[0]).append(backdropEl);
+        body.append(backdropEl);
       }
 
       function setShown(shown) {
@@ -32,29 +33,29 @@ angular.module('ui.bootstrap').directive('bsModal', ['$parse',function($parse) {
       }
 
       function close() {
-        if (opts.escape) { body.unbind('keyup', escapeClose); console.log('escp'); }
+        if (opts.escape) { body.unbind('keyup', escapeClose); }
         if (opts.backdrop) {
-          backdropEl.css('display', 'none');
+          backdropEl.css('display', 'none').removeClass('in');
           backdropEl.unbind('click', clickClose);
         }
-        elm.css('display', 'none');
+        elm.css('display', 'none').removeClass('in');
+        body.removeClass('modal-open');
       }
       function open() {
         if (opts.escape) { body.bind('keyup', escapeClose); }
         if (opts.backdrop) {
-          backdropEl.css('display', 'block');
+          backdropEl.css('display', 'block').addClass('in');
           backdropEl.bind('click', clickClose);
         }
-        elm.css('display', 'block');
+        elm.css('display', 'block').addClass('in');
+        body.addClass('modal-open');
       }
 
       scope.$watch(shownAttr, function(isShown, oldShown) {
-        if (isShown !== oldShown) {
-          if (isShown) {
-            open();
-          } else {
-            close();
-          }
+        if (isShown) {
+          open();
+        } else {
+          close();
         }
       });
     }

directives/modal/test/modalSpec.js

@@ -0,0 +1,67 @@
+describe('modal', function() {
+  var scope, $compile;
+
+  beforeEach(module('ui.bootstrap'));
+  beforeEach(inject(function($rootScope, _$compile_) {
+    scope = $rootScope;//.$new();
+    $compile = _$compile_;
+  }));
+
+  function modal(options, expr) {
+    scope.modalOpts = options;
+    return $compile("<div bs-modal='"+(expr || 'modalShown')+"' options='modalOpts'>" +
+      "Content</div>")(scope);
+  }
+
+  it('should toggle modal with model', function() {
+    var elm = modal();
+    scope.$apply('modalShown = true');
+    expect(elm).toHaveClass('in');
+    scope.$apply('modalShown = false');
+    expect(elm).not.toHaveClass('in');
+  });
+
+  it('should close on escape if option is true (default)', function() {
+    var elm = modal();
+    scope.$apply('modalShown = true');
+    $("body").trigger({type: 'keyup', which: 27}); //escape
+    expect(elm).not.toHaveClass('in');
+  });
+
+  it('should close on backdrop click if option is true (default)', function() {
+    var elm = modal();
+    scope.$apply('modalShown = true');
+    $(".modal-backdrop").click();
+    expect(elm).not.toHaveClass('in');
+  });
+
+  it('should not close on escape if option is false', function() {
+    var elm = modal({escape:false});
+    scope.$apply('modalShown = true');
+    $("body").trigger({type: 'keyup', which: 27});
+    expect(elm).toHaveClass('in');
+  });
+
+  it('should not close on backdrop click if option is false', function() {
+    var elm = modal({backdrop:false});
+    scope.$apply('modalShown = true');
+    $(".modal-backdrop").click();
+    expect(elm).toHaveClass('in');
+  });
+
+  it('should work with expression instead of variable', function() {
+    scope.foo = true;
+    scope.shown = function() { return scope.foo; };
+    var elm = modal({}, 'shown()');
+    scope.$apply();
+    expect(elm).toHaveClass('in');
+    scope.$apply('foo = false');
+    expect(elm).not.toHaveClass('in');
+  });
+
+  it('should work with escape/backdrop when an expression TODO', function() {
+    expect(true).toBe(false);
+    //failed test so we know it doesn't work yet
+  });
+});
+

test/lib/helpers.js

@@ -0,0 +1,13 @@
+// jasmine matcher for expecting an element to have a css class
+// https://github.com/angular/angular.js/blob/master/test/matchers.js
+beforeEach(function() {
+  this.addMatchers({
+    toHaveClass: function(cls) {
+      this.message = function() {
+        return "Expected '" + angular.mock.dump(this.actual) + "' to have class '" + cls + "'.";
+      };
+
+      return this.actual.hasClass(cls);
+    }
+  });
+});

test/test-config.js

@@ -9,6 +9,7 @@ files = [
   'test/lib/jquery-1.8.2.min.js',
   'test/lib/angular-1.0.2.js',
   'test/lib/angular-1.0.2-mocks.js',
+  'test/lib/helpers.js',
   'common/*.js',
   'directives/**/*.js'
 ];