feat(ngMock): add support for creating dynamic style sheets within test code

Author: matsko

angularFiles.js

@@ -79,7 +79,8 @@ angularFiles = {
     'src/ngTouch/swipe.js',
     'src/ngTouch/directive/ngClick.js',
     'src/ngTouch/directive/ngSwipe.js',
-    'docs/components/angular-bootstrap/bootstrap.js'
+    'docs/components/angular-bootstrap/bootstrap.js',
+    'src/privateMocks.js'
   ],
 
   'angularScenario': [

src/privateMocks.js

@@ -0,0 +1,28 @@
+function createMockStyleSheet(doc, wind) {
+  doc = doc ? doc[0] : document;
+  wind = wind || window;
+
+  var node = doc.createElement('style');
+  var head = doc.getElementsByTagName('head')[0];
+  head.appendChild(node);
+
+  var ss = doc.styleSheets[doc.styleSheets.length - 1];
+
+  return {
+    addRule : function(selector, styles) {
+      try {
+        ss.insertRule(selector + '{ ' + styles + '}', 0);
+      }
+      catch(e) {
+        try {
+          ss.addRule(selector, styles);
+        }
+        catch(e) {}
+      }
+    },
+
+    destroy : function() {
+      head.removeChild(node);
+    }
+  };
+};

test/ngAnimate/animateSpec.js

@@ -1118,11 +1118,15 @@ describe("ngAnimate", function() {
       }));
 
       it("should properly execute CSS animations/transitions and use callbacks when using addClass / removeClass",
-        inject(function($animate, $rootScope, $sniffer, $rootElement, $timeout) {
+        inject(function($animate, $rootScope, $sniffer, $rootElement, $timeout, $window, $document) {
 
-        var transition = 'transition:11s linear all;';
-        var style = transition + ' ' + vendorPrefix + transition;
-        var parent = jqLite('<div><span style="' + style + '"></span></div>');
+        var ss = createMockStyleSheet($document, $window);
+        ss.addRule('.klass-add', 'transition:11s linear all');
+        ss.addRule('.klass-add', vendorPrefix  + 'transition:11s linear all');
+        ss.addRule('.klass-remove', 'transition:11s linear all');
+        ss.addRule('.klass-remove', vendorPrefix + 'transition:11s linear all');
+
+        var parent = jqLite('<div><span></span></div>');
         $rootElement.append(parent);
         body.append($rootElement);
         var element = jqLite(parent.find('span'));

test/privateMocksSpec.js

@@ -0,0 +1,36 @@
+describe('private mocks', function() {
+  describe('createMockStyleSheet', function() {
+
+    it('should allow custom styles to be created and removed when the stylesheet is destroyed',
+      inject(function($compile, $document, $window, $rootElement, $rootScope) {
+
+      var doc = $document[0];
+      var count = doc.styleSheets.length;
+      var stylesheet = createMockStyleSheet($document, $window);
+      expect(doc.styleSheets.length).toBe(count + 1);
+
+      jqLite(doc.body).append($rootElement);
+
+      var elm = $compile('<div class="padded">...</div>')($rootScope);
+      $rootElement.append(elm);
+
+      expect(getStyle(elm, 'paddingTop')).toBe('0px');
+
+      stylesheet.addRule('.padded', 'padding-top:2px');
+
+      expect(getStyle(elm, 'paddingTop')).toBe('2px');
+
+      stylesheet.destroy();
+
+      expect(getStyle(elm, 'paddingTop')).toBe('0px');
+
+      function getStyle(element, key) {
+        var node = element[0];
+        return node.currentStyle ?
+          node.currentStyle[key] :
+          $window.getComputedStyle(node)[key];
+      };
+    }));
+
+  });
+});