Why can my ng-blur call function correctly but won't pass the unit test? Jasmine

I tested my code on the server and it will call the pinNameEditBlur correctly when I make the textbox blur, but it won't pass the unit test here. The error for the unit test is pinNameEditBlur is not called. I don't know whether it's because I used wrong way to emulate blur().

HTML:

<input type="text" id="edit-pin-name-text-{{pin.id}}" ng-model="editedPinNames[pin.id]" ng-blur="pinNameEditBlur($event, pin)" ng-keydown="pinNameChanged($event, pin)">

Test:

describe("ng-blur", function(){
      it("should call function pinNameEditBlur when the text box is blurred", function(){
          var element = document.createElement('div');
          document.getElementById = jasmine.createSpy('HTML Element').and.returnValue(element);
          var elementId = "edit-pin-name-text-2";
          spyOn(scope, 'pinNameEditBlur');
          document.getElementById(elementId).blur();
          expect(element.classList.contains('blur'));
          expect(scope.pinNameEditBlur).toHaveBeenCalled();
});

Test Error:

Mozilla/5.0 (win32) AppleWebKit/537.36 (KHTML, like Gecko) jsdom/11.12.0 PinTable ng-blur should call function pinNameEditBlur when the text box is blurred FAILED
        Error: Expected spy pinNameEditBlur to have been called.
            at <Jasmine>
            at UserContext.<anonymous> (src/test/karma/specs/PinTable.spec.js:276:41)
            at <Jasmine>