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.

  • 相关阅读:
    年底送书活动:送出6本技术书籍,价值372元!
    (7)ASP.NET WEB服务器控件
    (6)DataTable 转换成 Json
    (9)C#连mysql
    (8)C#连sqlserver
    VM虚拟机
    (7)C#连DB2---oledb方式
    (48)C#网络4 web
    远程桌面
    (47)C#运行时序列化
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6994793.html
Copyright © 2011-2022 走看看