fix(focus): don't use focus patch in jest (ngneat#373)

In Jest, don't patch HTML Element focus() or blur() methods, b/c they
break correct jsdom behavior.

In browsers, improve HTML Element focus() patch so it triggers a blur
on the activeElement, and updates the activeElement.

Author: johncrim

projects/spectator/jest/test/focus/test-focus.component.spec.ts

@@ -0,0 +1,33 @@
+import { SpectatorHost, createHostFactory } from '@ngneat/spectator/jest';
+
+import { TestFocusComponent } from '../../../test/focus/test-focus.component';
+
+describe('SpectatorHost.focus() in jest', () => {
+
+  const createHost = createHostFactory(TestFocusComponent);
+  let host: SpectatorHost<TestFocusComponent>;
+
+  beforeEach(() => {
+    host = createHost('<app-test-focus></app-test-focus>');
+  })
+
+  it('sets document.activeElement', () => {
+    host.focus('#button1');
+
+    expect(host.query('#button1')).toBeFocused();
+  });
+
+  it('causes blur events', () => {
+    host.focus();
+    host.focus('#button1');
+    host.focus('#button2');
+
+    expect(host.component.focusCount('app-test-focus')).toBe(1);
+    expect(host.component.blurCount('app-test-focus')).toBe(1);
+    expect(host.component.focusCount('button1')).toBe(1);
+    expect(host.component.blurCount('button1')).toBe(1);
+    expect(host.component.focusCount('button2')).toBe(1);
+    expect(host.component.blurCount('button2')).toBe(0);
+  });
+
+});

projects/spectator/src/lib/internals/element-focus.ts

@@ -1,4 +1,8 @@
 import { dispatchFakeEvent } from '../dispatch-events';
+import { isRunningInJsDom } from '../utils';
+
+/** Property name added to HTML Elements to ensure we don't double-patch focus methods on an element. */
+const IS_FOCUS_PATCHED_PROP = '_patched_focus';
 
 /**
  * Patches an elements focus and blur methods to emit events consistently and predictably.
@@ -8,6 +12,22 @@ import { dispatchFakeEvent } from '../dispatch-events';
  * patchElementFocus(triggerEl);
  */
 export function patchElementFocus(element: HTMLElement): void {
-  element.focus = () => dispatchFakeEvent(element, 'focus');
-  element.blur = () => dispatchFakeEvent(element, 'blur');
+
+  // https://github.com/ngneat/spectator/issues/373 - Don't patch when using JSDOM, eg in Jest
+  if (!isRunningInJsDom() && (element[IS_FOCUS_PATCHED_PROP] === undefined)) {
+    const baseFocus = element.focus.bind(element);
+    element.focus = (options) => {
+      // Blur current active
+      const active = element.ownerDocument.activeElement;
+      if (active) {
+        dispatchFakeEvent(active, 'blur');
+      }
+
+      // Focus
+      baseFocus(options); // Needed to set document.activeElement
+      dispatchFakeEvent(element, 'focus'); // Needed to cause focus event
+    }
+    element.blur = () => dispatchFakeEvent(element, 'blur');
+    element[IS_FOCUS_PATCHED_PROP] = true;
+  }
 }

projects/spectator/test/focus/test-focus.component.spec.ts

@@ -0,0 +1,32 @@
+import { SpectatorHost, createHostFactory } from '@ngneat/spectator';
+import { TestFocusComponent } from './test-focus.component';
+
+describe('SpectatorHost.focus() ', () => {
+
+  const createHost = createHostFactory(TestFocusComponent);
+  let host: SpectatorHost<TestFocusComponent>;
+
+  beforeEach(() => {
+    host = createHost('<app-test-focus></app-test-focus>');
+  })
+
+  it('sets document.activeElement', () => {
+    host.focus('#button1');
+
+    expect(host.query('#button1')).toBeFocused();
+  });
+
+  it('causes blur events', () => {
+    host.focus();
+    host.focus('#button1');
+    host.focus('#button2');
+
+    expect(host.component.focusCount('app-test-focus')).toBe(1);
+    expect(host.component.blurCount('app-test-focus')).toBe(1);
+    expect(host.component.focusCount('button1')).toBe(1);
+    expect(host.component.blurCount('button1')).toBe(1);
+    expect(host.component.focusCount('button2')).toBe(1);
+    expect(host.component.blurCount('button2')).toBe(0);
+  });
+
+});

projects/spectator/test/focus/test-focus.component.ts

@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-test-focus',
+  template: `<button id="button1" (focus)="countFocus('button1')" (blur)="countBlur('button1')">Button1</button>
+             <button id="button2" (focus)="countFocus('button2')" (blur)="countBlur('button2')">Button2</button>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[attr.tabindex]': '0',
+    '(focus)': 'countFocus("app-test-focus")',
+    '(blur)': 'countBlur("app-test-focus")'
+  }
+})
+export class TestFocusComponent {
+
+  private readonly focusCounts = new Map<string, number>();
+  private readonly blurCounts = new Map<string, number>();
+
+  public countFocus(id: string) {
+    this.focusCounts.set(id, this.focusCount(id) + 1);
+  }
+
+  public countBlur(id: string) {
+    this.blurCounts.set(id, this.blurCount(id) + 1);
+  }
+
+  public focusCount(id: string): number {
+    return this.focusCounts.get(id) ?? 0;
+  }
+
+  public blurCount(id: string): number {
+    return this.blurCounts.get(id) ?? 0;
+  }
+
+}