Question

我在做标题所说的问题时......这是我的指示：

import {Directive, Input, ElementRef, Renderer, OnInit, OnDestroy} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';

@Directive({
  selector: '[focusController]'
})
export class FocusControllerDirective implements OnInit, OnDestroy {
  @Input('doFocus') private readonly _doFocus$: Observable<any>;
  private readonly _destroy$ = new Subject();

  // TODO: check if Renderer3 supports setting focus after update. see also: https://github.com/angular/angular/issues/15674
  constructor(private hostEl: ElementRef, private renderer: Renderer) {}

  ngOnInit() {
    this._doFocus$.takeUntil(this._destroy$).subscribe(() => {
      this.renderer.invokeElementMethod(this.hostEl.nativeElement, 'focus', []);
    });
  }

  ngOnDestroy(): void {
    this._destroy$.next();
  }
}

这是规范文件：

/* tslint:disable:no-unused-variable */
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {Component, DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
import {FocusControllerDirective} from '@lib/form-directives';
import {Subject} from 'rxjs/Subject';

@Component({
  template: `<input type="text" focusController [doFocus]="doFocus$">`
})
class ParentOfForceFocusComponent {
  doFocus$ = new Subject();
}

describe('FocusControllerDirective', () => {
  let component: ParentOfForceFocusComponent;
  let fixture: ComponentFixture<ParentOfForceFocusComponent>;
  let debugElement: DebugElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ParentOfForceFocusComponent, FocusControllerDirective]
    });
    fixture = TestBed.createComponent(ParentOfForceFocusComponent);
    component = fixture.componentInstance;
    debugElement = fixture.debugElement.query(By.css('input'));
    spyOn(debugElement.nativeElement, 'focus');
    fixture.detectChanges();
  });

  it('should trigger focus on Subject update', async(() => {
    let elementWithFocus = debugElement.query(By.css(':focus'));
    expect(elementWithFocus).toBeNull();
    component.doFocus$.next();
    fixture.whenStable().then(() => {
      fixture.detectChanges();
      elementWithFocus = debugElement.query(By.css(':focus'));
      expect(elementWithFocus).not.toBeNull();
      expect(elementWithFocus).toBe(debugElement);
    });
  }));
});

Jasmine告诉我Expected null not to be null.我不知道该怎么做，没有错误，什么都没有。尽管在浏览器中手动测试代码仍然有效，但测试失败了。

Answer 1

您不应使用String，而应尝试By.css(':focus')：

document.activeElement

Angular：测试焦点设置指令

1 个答案: