Repository: angular
Issue: Angular 9.1.1 fixture.query() can't see DOM built directly with Renderer
Labels: area: testing,state: confirmed,P3

<!--🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅

Oh hi there! 😄

To expedite issue processing please search open and closed issues before submitting a new one.
Existing issues often contain information about workarounds, resolution, or progress updates.

🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅🔅-->


# 🐞 bug report

### Affected Package
Probably `@angular/compiler`

### Is this a regression?
Yes. Test success in angular 8 (ViewEngine)

### Description

When a element is inserted into DOM directly for performance reasons, I can't query it in tests using `fixture.query()`.

If I use `fixture.debugElement.queryAll(By.css('span')).length` I got 1 element.
But when I query it directly from the DOM `fixture.nativeElement.querySelectorAll('span').length` I got 2 elements.

## 🔬 Minimal Reproduction

Component:
```
<span>foo</span>
<ng-container #footerSection></ng-container>
```

```
      @ViewChild('footerSection', {read: ViewContainerRef, static: true})
      footerSection: ViewContainerRef;

....

      constructor(private renderer: Renderer2) {}

....

      if (this.footerTemplate instanceof TemplateRef) {
        this.footerSection.createEmbeddedView(this.footerTemplate);
      } else {
        let span = this.renderer.createElement('span');
        this.renderer.addClass(span, 'footer');
        this.renderer.appendChild(
          span, this.renderer.createText(this.footerTemplate));

        this.renderer.appendChild(this.elementRef.nativeElement, span);
      }
```
Test:

```
fit('Should show string as footer', () => {
    component.templateId = 2;
    fixture.detectChanges();

    console.log(fixture.debugElement.queryAll(By.css('span')).length); // 1 element
    console.log(fixture.nativeElement.querySelectorAll('span').length); // 2 elements
    
    let span = fixture.debugElement.queryAll(By.css('span'))[1];

    expect(span).toBeTruthy();
    expect(span.nativeElement.textContent.trim()).toEqual('test string');
  });
```

## 🌍  Your Environment

**Angular Version:**
<pre><code>
Angular CLI: 9.1.1
Node: 12.14.1
OS: darwin x64

Angular: 9.1.1
... animations, bazel, cli, common, compiler, compiler-cli, core
... forms, language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.26
@angular-devkit/build-angular     0.803.26
@angular-devkit/build-optimizer   0.803.26
@angular-devkit/build-webpack     0.803.26
@angular-devkit/core              9.1.1
@angular-devkit/schematics        9.1.1
@angular/cdk                      8.2.3
@angular/service-worker           8.2.14+3.sha-d2f7315
@bazel/bazel                      2.0.0
@bazel/bazel-darwin_x64           2.0.0
@bazel/hide-bazel-files           1.5.0
@bazel/ibazel                     v0.11.1
@bazel/karma                      1.2.2
@bazel/protractor                 1.2.2
@bazel/rollup                     1.2.2
@bazel/terser                     1.2.2
@bazel/typescript                 1.2.2
@ngtools/webpack                  8.3.26
@schematics/angular               9.1.1
@schematics/update                0.901.1
rxjs                              6.5.4
typescript                        3.8.3
webpack                           4.39.2
</code></pre>