title: Jasmine - Can't access shadowRoot of custom web component
body: <p>I've recently been trying to use jasmine for some unit testing of a custom web component that utilises the shadow dom.
  The component takes in a text property and passes it to a child element to use as its text content, I'm trying to verify that the textContent is what it should be.</p>
  
  <p>Every time I try to access the <code>shadowRoot</code> of my component, to then access its children, it simply returns null.</p>
  
  <p>I've simplified some names but the code is the same.</p>
  
  <p>Component:</p>
  
  <pre><code>@Component({
      tag: 'my-button',
      styleUrl: 'my-button.css',
      shadow: true,
  })
  export class MyButton {
      @Prop() text: string;
      @Prop() iconName: string;
      @Prop() url: string;
  
      render() {
          return (
              &lt;div class="button-outer"&gt;
                  &lt;ion-button class="button" expand="block" href={this.url}&gt;
                      &lt;holo-icon class="button-icon" slotName="icon-only" iconName={this.iconName} /&gt;
                      &lt;p class="button-label"&gt;{this.text}&lt;/p&gt;
                  &lt;/ion-button&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;my-button
      text="Test"
      icon-name="assets/svg/test-icon.svg"
      url="/test"
  &gt;&lt;/my-button&gt;
  </code></pre>
  
  <p>Test: (TestBed is setup as normal - async)</p>
  
  <pre><code>describe('has the expected html tags', () =&gt; {
      let buttons;
  
      beforeEach(() =&gt; {
          button = page.querySelector('my-button');
      });
  
      it('has text "Test"', () =&gt; {
          const label = button.shadowRoot.querySelector('div &gt; ion-button &gt; p');
          expect(label.textContent).toBe('Test');
      });
  }
  </code></pre>
  
  <p>Karma Result:
  <code>TypeError: Cannot read property 'querySelector' of null</code></p>
  
  <p>The web component was developed in a separate project and imported in as an npm package, if that makes any difference?</p>
  
  <p>I can create an element in the test, and attach a shadow root to it, and I can access and read its contents fine, just not actual elements that belong to the external page component I'm testing.
  It's really blocking me on other tests that use the shadow dom too. All I can find is answers suggesting <code>fixture.detectChanges()</code> but that doesn't seem to do anything.</p>
  
  <p>Has anyone come across this or has a workaround or anything? Would be greatly appreciated :)</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I would just query the <code>text</code> attribute of my component if I knew how to preserve it, but it just gets replaced by <code>_ngcontent-c##=""</code></p>