test(core): add visibility.directive.spec

npm/ng-packs/packages/core/src/lib/directives/visibility.directive.ts

@@ -3,7 +3,7 @@ import { Subject } from 'rxjs';
 import snq from 'snq';
 
 @Directive({
-  selector: '[abpVisibility]'
+  selector: '[abpVisibility]',
 })
 export class VisibilityDirective implements AfterViewInit {
   @Input('abpVisibility')
@@ -17,6 +17,10 @@ export class VisibilityDirective implements AfterViewInit {
   constructor(@Optional() private elRef: ElementRef, private renderer: Renderer2) {}
 
   ngAfterViewInit() {
+    if (!this.focusedElement && this.elRef) {
+      this.focusedElement = this.elRef.nativeElement;
+    }
+
     let observer: MutationObserver;
     if (this.mutationObserverEnabled) {
       observer = new MutationObserver(mutations => {
@@ -25,7 +29,7 @@ export class VisibilityDirective implements AfterViewInit {
 
           const htmlNodes = snq(
             () => Array.from(mutation.target.childNodes).filter(node => node instanceof HTMLElement),
-            []
+            [],
           );
 
           if (!htmlNodes.length) {
@@ -40,13 +44,13 @@ export class VisibilityDirective implements AfterViewInit {
       });
 
       observer.observe(this.focusedElement, {
-        childList: true
+        childList: true,
       });
     } else {
       setTimeout(() => {
         const htmlNodes = snq(
           () => Array.from(this.focusedElement.childNodes).filter(node => node instanceof HTMLElement),
-          []
+          [],
         );
 
         if (!htmlNodes.length) this.removeFromDOM();

npm/ng-packs/packages/core/src/lib/tests/visibility.directive.spec.ts

@@ -0,0 +1,128 @@
+import { SpectatorDirective, createDirectiveFactory } from '@ngneat/spectator/jest';
+import { VisibilityDirective } from '../directives/visibility.directive';
+
+describe('VisibilityDirective', () => {
+  let spectator: SpectatorDirective<VisibilityDirective>;
+  let directive: VisibilityDirective;
+  const createDirective = createDirectiveFactory({
+    directive: VisibilityDirective,
+  });
+
+  describe('without mutation observer and without content', () => {
+    beforeEach(() => {
+      spectator = createDirective('<div [abpVisibility] [mutationObserverEnabled]="false"></div>');
+      directive = spectator.directive;
+    });
+
+    it('should be created', () => {
+      expect(directive).toBeTruthy();
+    });
+
+    it('should be removed', done => {
+      setTimeout(() => {
+        expect(spectator.query('div')).toBeFalsy();
+        done();
+      }, 0);
+    });
+  });
+
+  describe('without mutation observer and with content', () => {
+    beforeEach(() => {
+      spectator = createDirective(
+        '<div [abpVisibility] [mutationObserverEnabled]="false"><p id="content">Content</p></div>',
+      );
+      directive = spectator.directive;
+    });
+
+    it('should not removed', done => {
+      setTimeout(() => {
+        expect(spectator.query('div')).toBeTruthy();
+        done();
+      }, 0);
+    });
+  });
+
+  describe('without mutation observer and with focused element', () => {
+    beforeEach(() => {
+      spectator = createDirective(
+        '<div id="main" [abpVisibility]="container" [mutationObserverEnabled]="false"></div><div #container><p id="content">Content</p></div>',
+      );
+      directive = spectator.directive;
+    });
+
+    it('should not removed', done => {
+      setTimeout(() => {
+        expect(spectator.query('#main')).toBeTruthy();
+        done();
+      }, 0);
+    });
+  });
+
+  describe('without content and with focused element', () => {
+    beforeEach(() => {
+      spectator = createDirective(
+        '<div id="main" [abpVisibility]="container" [mutationObserverEnabled]="false"></div><div #container></div>',
+      );
+      directive = spectator.directive;
+    });
+
+    it('should be removed', done => {
+      setTimeout(() => {
+        expect(spectator.query('#main')).toBeFalsy();
+        done();
+      }, 0);
+    });
+  });
+
+  describe('with mutation observer and with content', () => {
+    beforeEach(() => {
+      spectator = createDirective('<div [abpVisibility]><div id="content">Content</div></div>');
+      directive = spectator.directive;
+    });
+
+    it('should remove the main div element when content removed', done => {
+      spectator.query('#content').remove();
+
+      setTimeout(() => {
+        expect(spectator.query('div')).toBeFalsy();
+        done();
+      }, 0);
+    });
+
+    it('should not remove the main div element', done => {
+      spectator.query('div').appendChild(document.createElement('div'));
+
+      setTimeout(() => {
+        expect(spectator.query('div')).toBeTruthy();
+        done();
+      }, 100);
+    });
+  });
+
+  describe('with mutation observer and with focused element', () => {
+    beforeEach(() => {
+      spectator = createDirective(
+        '<div id="main" [abpVisibility]="container"></div><div #container><p id="content">Content</p></div>',
+      );
+      directive = spectator.directive;
+    });
+
+    it('should remove the main div element when content removed', done => {
+      spectator.query('#content').remove();
+
+      setTimeout(() => {
+        expect(spectator.query('#main')).toBeFalsy();
+        done();
+      }, 0);
+    });
+
+    it('should not remove the main div element', done => {
+      spectator.query('#content').appendChild(document.createElement('div'));
+
+      setTimeout(() => {
+        expect(spectator.query('#main')).toBeTruthy();
+        done();
+      }, 100);
+    });
+  });
+});