[Angular Unit Testing] Debug unit testing -- component rendering
Angular -- Component debug Testing unit rendering
2023-09-14 09:00:51 时间
If sometime you want to log out the comonent html to see whether the html render correctly, you can do :
import {TestBed, async, ComponentFixture} from '@angular/core/testing'; import {AppComponent} from './app.component'; import {AuFaInputComponent} from './lib/au-fa-input/au-fa-input.component'; import {InputRefDirective} from './lib/common/input-ref.directive'; import {DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; describe('AppComponent', () => { let component: AppComponent, fixture: ComponentFixture<AppComponent>, el: DebugElement, emailField: DebugElement; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent, AuFaInputComponent, InputRefDirective ], }).compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(AppComponent); component = fixture.debugElement.componentInstance; el = fixture.debugElement; emailField = el.query(By.css('#email-field')); fixture.detectChanges(); }); it('should include the correct email icon inside the email input', async() => { // debug a component html console.log(emailField.nativeElement.outerHTML); expect(emaailField.query(By.css('i.icon.fa.fa-envelope'))).toBeTruthy(); }); });
If you found that some tmeplate binding doesn't render, you might should add :
fixture.detectChanges();
to trigger change detection.
相关文章
- Angular 中依赖注入
- Angular tsconfig.json 文件里的 paths 用途
- SAP 电商云 Spartacus UI Angular UI 和 Accelerator JSP UI 的混合使用
- Angular HTTP 请求自定义 timeout 值的一种实现思路
- 关于 Angular HttpClient 的单例特性的思考
- 关于 Angular Universal 应用执行时需要 Browser API 的问题
- 使用 Angular Universal 进行服务器端渲染的防御性编程思路
- Angular 项目路径添加指定的访问前缀
- MySQL Error number: 3739; Symbol: ER_SRS_INVALID_ANGULAR_UNIT; SQLSTATE: SR002 报错 故障修复 远程处理
- 微软与 Google 将共同打造 Angular 2