test: improve and enhance ItemDropdownService and ItemDropdownOverlay…

…Builder unit tests
tFaster · Mar 24, 2020 · 25b6a0b · 25b6a0b
1 parent b859243
commit 25b6a0b
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 11 deletions.
diff --git a/...b/toolbar-template-item-with-dropdown/item-dropdown/item-dropdown-overlay-builder.spec.ts b/...b/toolbar-template-item-with-dropdown/item-dropdown/item-dropdown-overlay-builder.spec.ts
@@ -1,4 +1,4 @@
-import { ItemDropdownOverlayBuilder } from './item-dropdown-overlay-builder';
+import { getComposedEventPath, ItemDropdownOverlayBuilder } from './item-dropdown-overlay-builder';
 import { OverlayConfig } from '@angular/cdk/overlay';
 
 const overlayServiceStub: any = {
@@ -12,3 +12,21 @@ describe('ItemOverlayBuilder', () => {
     expect(new ItemDropdownOverlayBuilder(overlayServiceStub)).toBeTruthy();
   });
 });
+
+describe('getComposedEventPath', () => {
+  it('should get same composed event path as native composedPath() function', () => {
+    const testBtnElement: HTMLButtonElement = document.createElement('button');
+    document.body.append(testBtnElement);
+    const testEvent: MouseEvent = new MouseEvent('click');
+
+    testBtnElement.addEventListener('click', (mouseEvent: MouseEvent) => {
+      const composedPath: EventTarget[] = getComposedEventPath(mouseEvent);
+      const nativeComposedPath: EventTarget[] = mouseEvent.composedPath();
+      expect(composedPath.length).toBe(nativeComposedPath.length);
+      nativeComposedPath.forEach((el: EventTarget, index) => {
+        expect(composedPath[index]).toBe(el);
+      });
+    });
+    testBtnElement.dispatchEvent(testEvent);
+  });
+});
diff --git a/...rc/lib/toolbar-template-item-with-dropdown/item-dropdown/item-dropdown-overlay-builder.ts b/...rc/lib/toolbar-template-item-with-dropdown/item-dropdown/item-dropdown-overlay-builder.ts
@@ -26,12 +26,7 @@ export class ItemDropdownOverlayBuilder<T, C> {
   private _config: ItemOverlayBuilderConfig = DEFAULT_CONFIG;
 
   private _documentClickPath$: Observable<EventTarget[]> = fromEvent<MouseEvent>(document, 'click', {capture: true}).pipe(
-    map((event: MouseEvent) => {
-      if (event.composedPath) {
-        return event.composedPath();
-      }
-      return getComposedEventPath(event); // Fallback for IE11
-    })
+    map((event: MouseEvent) => event.composedPath ? event.composedPath() : getComposedEventPath(event))
   );
 
   constructor(private _overlayService: Overlay) {
@@ -201,9 +196,9 @@ export interface ItemOverlayBuilderConfig {
   dropdownBypassElement?: HTMLElement;
 }
 
-export function getComposedEventPath(event) {
-  let el = event.target;
-  const path = [];
+export function getComposedEventPath(event: Event): EventTarget[] {
+  let el: Element = event.target as Element;
+  const path: EventTarget[] = [];
   while (el) {
     path.push(el);
     if (el.tagName === 'HTML') {

diff --git a/...r/src/lib/toolbar-template-item-with-dropdown/item-dropdown/item-dropdown.service.spec.ts b/...r/src/lib/toolbar-template-item-with-dropdown/item-dropdown/item-dropdown.service.spec.ts
@@ -100,7 +100,7 @@ describe('ItemOverlayBuilderService', () => {
       expect(document.querySelector('.test-overlay-panel')).toBeNull();
     });
 
-    it('should build overlay and close on document click', () => {
+    it('should build overlay and close on body click', () => {
       const overlayController: ItemDropdownController<any, any> = builder.withConfig({
         panelClass: 'test-overlay-panel'
       }).buildAndConnect(
@@ -114,6 +114,21 @@ describe('ItemOverlayBuilderService', () => {
       expect(document.querySelector('.test-overlay-panel')).toBeNull();
     });
 
+    it('should build overlay and not close on body click when body is bypass element', () => {
+      const overlayController: ItemDropdownController<any, any> = builder.withConfig({
+        panelClass: 'test-overlay-panel',
+        dropdownBypassElement: document.body
+      }).buildAndConnect(
+        templateTestComponentRef.instance.originElement,
+        templateTestComponentRef.instance.itemDropdownTemplate
+      );
+      overlayController.open();
+      fixture.detectChanges();
+      document.querySelector('body').dispatchEvent(new KeyboardEvent('click', {}));
+      fixture.detectChanges();
+      expect(document.querySelector('.test-overlay-panel')).not.toBeNull();
+    });
+
   });
 })
 ;