我的單元測試源代碼：import { Component } from '@angular/core';
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { FocusDirective } from './focus.directive';
import { KeyboardFocusService } from './services';
/*
After cxFocus is enhanced with refreshFocus feature, an element will be focused twice when the page is displayed for the FIRST time:
1. in ngOnChanges hook
2. in ngAfterViewInit hook
Once the page is rendered, all subsequent operations will only cause element to be focused once in ngOnChanges, because ngAfterViewInit then will not be triggered any more.
*/
const ELEMENT_FOCUSED_TIME = 2;
@Component({
selector: 'cx-host',
template: `
id="a"
[cxFocus]="{ autofocus: true, refreshFocus: modelA }"
>
`,
})
class MockComponent {
modelA = 'A';
modelB = 'B';
}
class MockKeyboardFocusService {
get() {}
set() {}
shouldFocus() {}
getPersistenceGroup() {}
findFirstFocusable() {}
hasPersistedFocus() {}
describe('FocusDirective', () => {
let component: MockComponent;
let fixture: ComponentFixture;
let keyboardFocusService: KeyboardFocusService;
beforeEach(
waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [FocusDirective, MockComponent],
providers: [
{
provide: KeyboardFocusService,
useClass: MockKeyboardFocusService,
},
],
}).compileComponents();
fixture = TestBed.createComponent(MockComponent);
component = fixture.componentInstance;
keyboardFocusService = TestBed.inject(KeyboardFocusService);
})
);
it('should be created', () => {
expect(component).toBeTruthy();
});
it('should default tabindex to -1', () => {
const el: HTMLElement = fixture.debugElement.query(By.css('#a'))
.nativeElement;
fixture.detectChanges();
expect(el.getAttribute('tabindex')).toEqual('-1');
it('should focus element marked with autofocus = true', () => {
spyOn(keyboardFocusService, 'findFirstFocusable').and.returnValue(el);
expect(document.activeElement.id).toEqual('a');
it('should only refresh focus with change on configured attribute', () => {
let spiedFirstFocusable = spyOn(
keyboardFocusService,
'findFirstFocusable'
).and.returnValue(el);
expect(spiedFirstFocusable).toHaveBeenCalledTimes(ELEMENT_FOCUSED_TIME);
component.modelB = '1';
component.modelA = '1';
expect(spiedFirstFocusable).toHaveBeenCalledTimes(ELEMENT_FOCUSED_TIME + 1);
});
執行到refreshView時，由于之前已經執行過fixture.detectChange, 是以第7225行hooksInitPhaseCompleted這個标志位為true了，是以會執行AfterViewChecked hook，而不是else 分支内的AfterViewInit hook:
