$.fn equivalent in angularjs (using angular.element)?

Question

I'm doing a directive unit test using jasmine.

I have this test working now, but I must replace the $.fn using the equivalent for angularjs, (because in my company they don't let us use $)

Code:

(function scrollTopEventDirective(application) {
  'use strict';

  application.services.directive('scrollTopEvent', ['$rootScope', function scrollTopEvent($rootScope) {
    return {
      restrict: 'A',
      link: function link(scope, element, attrs) {
        $rootScope.$on(attrs.scrollTopEvent, function onScope(event, top) {
          element.animate({ scrollTop: top || 0 }, 500);
        });
      }
    };
  }]);
})(window.application);

Test:

(function scrollTopEventTest() {
  'use strict';

  describe('Directive: scrollTopEvent', function scrollTopEvent() {

    beforeEach(module('app'));

    var $compile, $scope;

    beforeEach(inject(function beforeFunction(_$compile_, $rootScope) {
      $compile = _$compile_;
      $scope = $rootScope.$new();
    }));

    describe('Scroll set top property', function scrollTopEventTest() {
      it('should call the scroll top event without value', function scrollTopEventTest() {
        var div = angular.element('<div style="overflow:scroll; width:100px; height:100px;" scroll-top-event="main-scroll-top"><br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x</div>');
        $compile(div)($scope);
        spyOn($.fn, 'animate');
        $scope.$emit('main-scroll-top');
        $scope.$digest();
        expect(div.animate).toHaveBeenCalledWith({scrollTop: 0}, 500);
      });    
  });
})();

Question doesn't make sense. ` $.fn` is very specific to jQuery. Angular is conceptually different from jQuery and doesn't have and "equivalent" to `$.fn`. If your company doesn't allow `$` anywhere in your code, you are going to struggle with Angular. — Roamer-1888, Jul 24 '17 at 14:06
I understand, so how can I replace $.fn using angular.element or something like that? — Luciano Herrera, Jul 24 '17 at 14:16
To do what? You haven't explained what you need to accomplish. Please take some time to read [ask] — charlietfl, Jul 24 '17 at 14:26
By `$.fn`, you do mean jQuery's [alias for it's `prototype` property](https://stackoverflow.com/a/4083362/3478010), don't you? And if so, why on earth would Angular want to replace it? — Roamer-1888, Jul 24 '17 at 14:27
Sorry, my goal is to replace thie line "spyOn($.fn, 'animate');" for something witout the $.fn. Idk why, but when I use the spyOn without the $.fn is not working, so I need that but I cant use it in that form. That make any sense? — Luciano Herrera, Jul 24 '17 at 14:29

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

Use `angular.element.prototype`

jQuery.fn is an alias for jQuery.prototype. In AngularJS, angular.element is an alias for jQuery. So use angular.element.prototype.

From the Docs:

If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to AngularJS's built-in subset of jQuery, called "jQuery lite" or jqLite.

To use jQuery, simply ensure it is loaded before the angular.js file. You can also use the ngJq directive to specify that jqlite should be used over jQuery, or to use a specific version of jQuery if multiple versions exist on the page.

— AngularJS angular.element API Reference

$.fn equivalent in angularjs (using angular.element)?

1 Answers1

Use angular.element.prototype

Use `angular.element.prototype`