Angular2測試 - 通過標識

Question

我正在寫一個Angular2測試組件獲取元素，我注意到在教程這一行：

de = fixture.debugElement.query(By.css('h1')); 

de被定義爲DebugElement類型。

我怎樣才能得到DebugElement ID？

這看起來非常簡單，但我無法在文檔中找到任何方向。

Answer 1

您還可以使用by.css

de = fixture.debugElement.query(by.css('#theid')); 

Answer 2

工作對我來說：

文件... component.html：

<ul id="submenu"> 

    <li> 
     <a [routerLink]="['blankpage']"><span>Blank Page</span></a> 
    </li> 
</ul> 

文件...- spec.ts：

import { SidebarComponent} from './sidebar'; 
import { TestBed, async } from '@angular/core/testing'; 
import { HttpModule } from '@angular/http'; 
import { RouterTestingModule } from '@angular/router/testing'; 
import { ComponentFixture} from '@angular/core/testing'; 
import { By }    from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 

describe('...',() => { 
let comp : SidebarComponent; 
let fixture : ComponentFixture<SidebarComponent>; 
let de : DebugElement; 
beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ 
     SidebarComponent 
     ], 
     imports: [RouterTestingModule,HttpModule] 
    }).compileComponents(); 
    })); 
    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ 
      SidebarComponent 
     ] 
    }); 
    TestBed.compileComponents(); 
    fixture = TestBed.createComponent(SidebarComponent); 
    fixture.detectChanges(); 
    de = fixture.debugElement; 
}); 

it('Sidebar element "Blank Page" was created',() => { 
     expect(de.nativeElement.querySelector('ul.submenu a span').textContent).toContain('Blank Page') 
     expect(de.nativeElement.querySelector('ul.submenu a span').textContent).toBeDefined() 
    }); 

    it('Checking ul id',() => { 
    expect(de.nativeElement.querySelector('ul').getAttribute('id')).toMatch('submenu') 
    }); 

)}