Angular2 testing - Получить элемент по идентификатору

Я пишу тестовый компонент Angular2, и я заметил эту строку в учебниках:

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

de определяется как DebugElement.

Как я могу получить DebugElement по id?

Это может показаться чрезвычайно простым, но я не могу найти никакого направления в документах.

Ответ 1

Вы также можете использовать by.css

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

Ответ 2

  const fixture = TestBed.createComponent(DashboardComponent);
  const compiled = fixture.debugElement.nativeElement;

используя идентификатор

expect(compiled.querySelector('#from').textContent).toContain('From Date');
используя CSS

expect(compiled.querySelector('.from').textContent).toContain('From Date');

Ответ 3

Вы можете использовать следующий синтаксис для получения значения атрибута из элемента HTML:

Чтобы извлечь элемент HTML:

const element = fixture.debugElement.nativeElement.querySelector('name of element'); // example a, h1, p

Чтобы получить значение атрибута из этого элемента:

const attributeValue = element.attributeName // like textContent/href

Ответ 4

работайте для меня:

file... component.html:

<ul id="submenu">

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

file...- 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')
  });

)}