測試代碼：

import { Component } from '@angular/core'; import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; import { FocusDirective } from './focus.directive'; import { KeyboardFocusService } from './services'; import { By } from '@angular/platform-browser';@Component({selector: 'cx-host',template: ` <div id="b" [cxFocus]="{autofocus: ':host'}" [cxRefreshFocusOn]="jerry"></div> `, }) class MockComponent {jerry = 1; }class MockKeyboardFocusService {get() {}set() {}shouldFocus() {}getPersistenceGroup() {}findFirstFocusable(){}hasPersistedFocus(){} }describe('FocusDirective', () => {let fixture: ComponentFixture<MockComponent>;let component: MockComponent;beforeEach(waitForAsync(() => {TestBed.configureTestingModule({declarations: [FocusDirective, MockComponent],providers: [{provide: KeyboardFocusService,useClass: MockKeyboardFocusService,},],}).compileComponents();fixture = TestBed.createComponent(MockComponent);component = fixture.componentInstance;fixture.detectChanges();}));it('should focus itself', () => {let service: KeyboardFocusService;service = TestBed.inject(KeyboardFocusService);const host = fixture.debugElement.query(By.css('#b'));const el = host.nativeElement;spyOn(service, 'findFirstFocusable').and.returnValue(el);spyOn(el, 'focus').and.callThrough();fixture.detectChanges();const event = {preventDefault: () => {},stopPropagation: () => {},};host.triggerEventHandler('focus', event);expect(el.focus).toHaveBeenCalled();expect(service.findFirstFocusable).toHaveBeenCalled();component.jerry = 2;fixture.detectChanges();}); });

在單元測試代碼里顯式修改Component的jerry屬性為2：

detectChanges會觸發(fā)ngZone的run方法，進(jìn)而調(diào)用_tick函數(shù)：

以callback的方式回調(diào)_tick():

changeDetectorRef指向RootViewRef, 因此執(zhí)行Root view的change detection策略：

最后執(zhí)行到refreshView里的executeTemplate方法：

執(zhí)行template function：

待更新template的屬性名稱：cxRefreshFocusOn, 屬性值：2

function elementPropertyInternal(tView, tNode, lView, propName, value, renderer, sanitizer, nativeOnly) {ngDevMode && assertNotSame(value, NO_CHANGE, 'Incoming value should never be NO_CHANGE.');const element = getNativeByTNode(tNode, lView);let inputData = tNode.inputs;let dataValue;if (!nativeOnly && inputData != null && (dataValue = inputData[propName])) {setInputsForProperty(tView, lView, dataValue, propName, value);if (isComponentHost(tNode))markDirtyIfOnPush(lView, tNode.index);if (ngDevMode) {setNgReflectProperties(lView, element, tNode.type, dataValue, value);}}

這個(gè)33是element在LView中的索引值：

從lView里根據(jù)索引值33拿到directive實(shí)例：

最后設(shè)置該實(shí)例的值為2：

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的Angular jasmine fixture.detectChanges如何触发directive的set方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。