Angular By. css селектор не возвращает ожидаемых результатов

Question

Я пытаюсь просто выбрать дочерние элементы в моем тесте, используя DebugElement.queryAll(By.css('div div')):

https://stackblitz.com/edit/github-test-run-draft-suadxl?embed=1&file=src / app / app.component.spe c .ts

Я продолжаю получать родительский div, а также дочерние div. Ожидается получение только дочерних элементов.

import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';

describe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>;
  let comp: AppComponent;
  let de: DebugElement;
  let ne: any;

    beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [],
      declarations: [AppComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(AppComponent);
    de = fixture.debugElement;
    comp = fixture.componentInstance;
    ne = de.nativeElement;
    fixture.detectChanges();
  }));

  it('is expected to select correct div', () => {
    let childDivs = de.queryAll(By.css('div div'));
    expect(childDivs.length).toBe(2);
    expect(childDivs[0].nativeElement.textContent).toEqual('ONE');
    expect(childDivs[1].nativeElement.textContent).toEqual('TWO');
  });


});

---

<div id='parent'>
  <div id='child1'>ONE</div>
  <div id='child2'>TWO</div>
</div>