Menu
The directive (isolated scope, transcluded, replaced) inserts a mask into the <body>.
var mask = angular.element('<div id="mask"></div>');
$document.find('body').append(mask);
scope.$on('$destroy', function() {
mask.remove();
});
I am trying to test this case with a simple broadcast on the scope:
var $document, scope, element, rootScope;
beforeEach(inject(function($compile, _$document_, $rootScope, $injector) {
rootScope = $injector.get('$rootScope');
scope = $rootScope;
$document = _$document_;
mask = $document.find('#mask');
element = $compile(angular.element('<overlay id="derp"></overlay>'))(scope);
}));
it('should remove mask when casting the $destory event', function (done) {
scope.$broadcast('$destroy');
scope.$digest();
expect($document.find('#mask').length).toBe(0);
});
Any idea why this doesn't work?
584
The mistake was: the directive creates the <div id="mask"></div> multiple for mulitple overlays. So angular seems to have problems when adding multiple <div>'s with the same ID to the DOM. After fixing this, all worked as expected.
it('should remove mask when $destoryed', function () {
scope.$destroy();
expect($document.find('#mask').length).toBe(0);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With