Чем отличается fixture.debugElement.componentInstance от fixture.nativeElement? - PullRequest
Новая
       42

Чем отличается fixture.debugElement.componentInstance от fixture.nativeElement?

0 голосов
/ 07 июня 2019

В этом тестовом файле я видел два разных синтаксиса

один const app = fixture.debugElement.componentInstance;, а другой const compiled = fixture.nativeElement; Я не знаю, чем отличаются эти два синтаксиса?

IЯ полностью новичок в угловых испытаниях, и я применяю его в своем проекте, но он немного смущает меня по этому поводу. 

describe('AppComponent (initial CLI version)', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
  it(`should have as title 'app'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app');
  }));
  it('should render title in a h1 tag', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
  }));
});

1 Ответ

1 голос
/ 08 июня 2019

DebugElement - это оболочка для собственных элементов и протестированного компонента, позволяющая запускать тест на всех поддерживаемых платформах.

fixture.nativeElement и fixture.debugElement.nativeElement одинаковывещи.Это HTML-элемент, сгенерированный в DOM Angular, как указано в шаблоне тестируемого компонента.Через nativeElement вы можете получить доступ и проверить то, что визуализируется на экране, в вашем тесте выше было ли текстовое содержимое H1 Welcome to the app.Помните, что fixture.debugElement имеет другие методы и свойства, которые полезны в таких тестах, как, например, By.css () .

fixture.componentInstance предоставляет вам доступ ккласс компонентов.Это позволяет вам протестировать публичный API вашего компонента.В приведенном выше тесте вы определяете, является ли свойство title компонента вашего приложения app.

. Для получения более подробной информации вы можете обратиться к руководству по тестированию Angular .

...