https://codecraft.tv/courses/angular/unit-testing/change-detection/

ATB：Angular Test Bed

// create component and test fixture
fixture = TestBed.createComponent(LoginComponent);

fixture通過ATB的createComponent方法創建，輸入參數是正式的Component.

The fixture as well as holding an instance of the component also holds a reference to something called a DebugElement, this is a wrapper to the low-level DOM element that represents the component’s view, via the debugElement property.

通過fixture.debugElement獲取Component view里的元素：

We can get references to other child nodes by querying this debugElement with a By class. The By class lets us query using a number of methods, one is via a CSS class like we have in our example, another way is to request by a type of directive like By.directive(MyDirective).

調用完query之后，如果不顯式調用fixture.detectChanges, 則query返回的handle里，是無法獲取到視圖內容的。

That’s because when Angular first loads no change detection has been triggered and therefore the view doesn’t show either the Login or Logout text.

fixture is a wrapper for our component’s environment so we can control things like change detection.

fixture是Component環境的wrapper，因此在單元測試代碼里，我們可以自行控制change detection的觸發時機。

it('login button hidden when the user is authenticated', () => {expect(el.nativeElement.textContent.trim()).toBe('');fixture.detectChanges();expect(el.nativeElement.textContent.trim()).toBe('Login'); }); 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Angular单元测试fixture.detectChanges()的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。