Bug/373 jest focus (#473)

Author: johncrim

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

@@ -0,0 +1,44 @@
+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);
+  });
+
+
+  it('calling focus() multiple times does not cause multiple patches', () => {
+    host.focus('#button1');
+    host.focus();
+    host.focus('#button1');
+
+    expect(host.component.focusCount('app-test-focus')).toBe(1);
+    expect(host.component.focusCount('button1')).toBe(2);
+    expect(host.component.blurCount('button1')).toBe(1);
+  });
+  
+});

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

@@ -1,13 +1,73 @@
 import { dispatchFakeEvent } from '../dispatch-events';
+import { isRunningInJsDom } from '../utils';
+
+/** Property added to HTML Elements to ensure we don't double-patch focus methods on an element. */
+const IS_FOCUS_PATCHED_PROP = Symbol('isFocusPatched');
+
+/** Ensures that a single set of matching focus and blur events occur when HTMLElement.focus() is called. */
+class FocusEventWatcher implements EventListenerObject {
+
+  private readonly priorActiveElement: Element | null;
+
+  /** Set to true when browser sends a blur event for priorActiveElement */
+  private _blurred = false;
+  /** Set to true when browser sends a focus event for element */
+  private _focused = false;
+
+  constructor(private readonly element: HTMLElement) {
+    this.element.addEventListener('focus', this);
+    this.priorActiveElement = element.ownerDocument.activeElement;
+    this.priorActiveElement?.addEventListener('blur', this);
+  }
+
+  public handleEvent({ type }: Event): void {
+    if (type === 'focus') {
+      this._focused = true;
+    }
+    else if (type === 'blur') {
+      this._blurred = true;
+    }
+  }
+
+  /**
+   * If focus and blur events haven't occurred, fire fake ones.
+   */
+  public ensureFocusEvents() {
+    this.element.removeEventListener('focus', this);
+    this.priorActiveElement?.removeEventListener('blur', this);
+
+    // Ensure priorActiveElement is blurred
+    if (!this._blurred && this.priorActiveElement) {
+      dispatchFakeEvent(this.priorActiveElement, 'blur');
+    }
+
+    if (!this._focused) {
+      dispatchFakeEvent(this.element, 'focus'); // Needed to cause focus event
+    }
+  }
+}
 
 /**
- * Patches an elements focus and blur methods to emit events consistently and predictably.
+ * Patches an element's focus and blur methods to emit events consistently and predictably in tests.
  * This is necessary, because some browsers, like IE11, will call the focus handlers asynchronously,
  * while others won't fire them at all if the browser window is not focused.
  *
  * 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 originalFocus = element.focus.bind(element);
+    element.focus = (options) => {
+      const focusEventWatcher = new FocusEventWatcher(element);
+
+      // Sets document.activeElement. May or may not send focus + blur events
+      originalFocus(options);
+
+      focusEventWatcher.ensureFocusEvents();
+    }
+    element.blur = () => dispatchFakeEvent(element, 'blur');
+    element[IS_FOCUS_PATCHED_PROP] = true;
+  }
 }

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

@@ -0,0 +1,42 @@
+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);
+  });
+
+  it('calling focus() multiple times does not cause multiple patches', () => {
+    host.focus('#button1');
+    host.focus();
+    host.focus('#button1');
+
+    expect(host.component.focusCount('app-test-focus')).toBe(1);
+    expect(host.component.focusCount('button1')).toBe(2);
+    expect(host.component.blurCount('button1')).toBe(1);
+  });
+
+});

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;
+  }
+
+}