zoukankan      html  css  js  c++  java
  • [Angular Unit Testing] Debug unit testing -- component rendering

    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.

  • 相关阅读:
    Java 异常处理机制和集合框架
    如何在Windows 下安装Python
    公司为啥要上市?上市对公司有什么好处?
    MongoDB Driver:使用正确的姿势连接复制集
    mongodb复制集开启安全认证
    关于 MongoDB 复制集
    如何高效的使用 Git
    Linux shell常用命令
    MongoDB 查看所有用户账号信息
    MongoDB开启安全认证
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6994793.html
Copyright © 2011-2022 走看看