Angular单元测试fixture.detectChanges()

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()相关推荐

Angular jasmine fixture.detectChanges如何触发directive的set方法
测试代码: import { Component } from '@angular/core'; import { waitForAsync, ComponentFixture, TestBed } ...
关于jasmine里debugElement.query和fixture.detectChanges的依赖关系
单元测试代码: import { Component } from '@angular/core'; import { async, ComponentFixture, TestBed } from ...
Angular单元测试ComponentFixture的实例化过程明细
从angular core里导入单元测试需要的库文件: import { async, ComponentFixture, TestBed } from '@angular/core/testing' ...
[转]Angular 单元测试讲解
Angular_单元测试测试分类按开发阶段划分按是否运行划分按是否查看源代码划分其他 ATDD,TDD,BDD,DDD ATDD TDD BDD DDD Angular单元测试 Karma的 ...
Angular单元测试框架里API toHaveBeenCalledTimes的工作原理
看这样一段代码: let spiedFirstFocusable = spyOn(keyboardFocusService,'findFirstFocusable').and.returnValue( ...
jasmine没有调用fixture.detectChanges就取不到元素的原因
如果没有调用fixture.detectChanges, element context的innerHTML里根本就看不到button的源代码: 要获取更多Jerry的原创文章,请关注公众号" ...
Angular 单元测试讲解
Angular_单元测试测试分类按开发阶段划分按是否运行划分按是否查看源代码划分其他 ATDD,TDD,BDD,DDD ATDD TDD BDD DDD Angular单元测试 Karma的 ...
Angular jasmine单元测试框架fixture.detectChanges的实现原理
源代码: fixture的类型是component-fixture,里面会调用_tick方法: 具体执行的detectChange逻辑,取决于Change Detect reference: Root ...
Angular单元测试里使用fixture.debugElement测试UI界面元素
场景1:使用fixture.debugElement.queryAll获得页面所有的a标签: fixture.debugElement.queryAll接受一个predicate: 需要的predic ...

Angular单元测试fixture.detectChanges()

Angular单元测试fixture.detectChanges()相关推荐

最新文章

热门文章