chore(datepicker): Unregister parent watchers on $destroy

[deeg]

Closes #5242

@wesleycho, looking for advice on how to test.

I basically want to spy on the $parent.$watch function and return a spy and see how many times the spy is called. I had this

    describe('clean parent watchers', function(){
        it("should clean watchers in controller", function(){
          var scope;
          var clearSpy;
          inject(function($controller, $rootScope, $parse, $interpolate, $log, dateFilter, uibDatepickerConfig, $datepickerSuppressError, uibDateParser) {
            scope = $rootScope.$new();
            scope.$parent = jasmine.createSpyObj("scope.$parent", ["$watch"]);
            clearSpy = jasmine.createSpy("clearSpy");
            scope.$parent.$watch.and.returnValue(clearSpy);
            $controller('UibDatepickerController', {
              $scope: scope,
              $attrs: {},
              $parse: $parse,
              $interpolate: $interpolate,
              $log: $log,
              dateFilter: dateFilter,
              datepickerConfig: uibDatepickerConfig,
              $datepickerSuppressError: $datepickerSuppressError,
              dateParser: uibDateParser
            });
          });

          $templateCache.put('uib/template/datepicker/datepicker.html', '<div>{{datepicker.text}}</div>');
          $rootScope.date = new Date('September 12, 2010');
          $rootScope.mode = 'month';
          element = $compile('<uib-datepicker ng-model="date" min-date="date" max-date="date" min-mode="mode" max-mode="mode" init-date="date" ng-disabled="true"></uib-datepicker>')($rootScope);
          $rootScope.$digest();

          var ctrl = element.controller('uib-datepicker');
          ctrl.$destroy();

          expect(clearSpy.calls.count()).toBe(6);
        });

but was getting this error when running

TypeError: Cannot read property 'uib:datepicker.focus' of undefined
        at Scope.$on (/Users/dgornstein/Workspace/ui-bootstrap-fork/node_modules/angular/angular.js:16231:39)
        at new <anonymous> (/Users/dgornstein/Workspace/ui-bootstrap-fork/src/datepicker/datepicker.js:9:15478)
        at invoke (/Users/dgornstein/Workspace/ui-bootstrap-fork/node_modules/angular/angular.js:4523:17)
        at Object.instantiate (/Users/dgornstein/Workspace/ui-bootstrap-fork/node_modules/angular/angular.js:4531:27)
        at /Users/dgornstein/Workspace/ui-bootstrap-fork/node_modules/angular/angular.js:9197:28
        at /Users/dgornstein/Workspace/ui-bootstrap-fork/node_modules/angular-mocks/angular-mocks.js:1882:12
        at Object.<anonymous> (/Users/dgornstein/Workspace/ui-bootstrap-fork/src/datepicker/test/datepicker.spec.js:3036:13)
        at Object.invoke (/Users/dgornstein/Workspace/ui-bootstrap-fork/node_modules/angular/angular.js:4523:17)
        at Object.workFn (/Users/dgornstein/Workspace/ui-bootstrap-fork/node_modules/angular-mocks/angular-mocks.js:2439:20)
        at window.inject.angular.mock.inject (/Users/dgornstein/Workspace/ui-bootstrap-fork/node_modules/angular-mocks/angular-mocks.js:2411:37)
    Error: Declaration Location
        at window.inject.angular.mock.inject (/Users/dgornstein/Workspace/ui-bootstrap-fork/node_modules/angular-mocks/angular-mocks.js:2410:25)
        at Object.<anonymous> (/Users/dgornstein/Workspace/ui-bootstrap-fork/src/datepicker/test/datepicker.spec.js:3031:11)

Sorry if I'm missing something trivial.

[deeg]

I'll fix spacing, damn ide

[wesleycho]

This function should not be outside the controllers of relevance - this will leak as a global function.

In this case, the functionality is simple enough to not require a helper function. Something like

while (watchListeners.length) {
  watchListeners.shift()();
}

in all relevant areas should be enough

[deeg]

Sounds good, will fix.

[wesleycho]

You may need to do a $timeout.flush() before executing scope.$destroy().

[deeg]

That still gives the same error even after adding the flush.