@ViewChild returns undefined in unit tests with material components

[franpsif]

Bug:

When I try to access to a material component using @ViewChild from the unit tests I recieve undefined. If I use @ViewChild('element') element: ElementRef; all is fine, but if I use for instance @ViewChild('prompt') prompt: MdSlideToggle; the 'prompt' value is undefined. I need to use MdSlideToggle instead of ElementRef because I need to access to the specific properties of the component.

What is the expected behavior?

The component accessed through the @ViewChild decorator should be visible in the unit tests.

What is the current behavior?

The component accessed through the @ViewChild decorator is undefined in the unit tests.

What are the steps to reproduce?

Create the following:

• html:

<md-slide-toggle #prompt></md-slide-toggle>

• ts:

@ViewChild('prompt') prompt: MdSlideToggle;

Now create a simple unit test and try to access to the 'prompt' element. The value is undefined.

What is the use-case or motivation for changing an existing behavior?

Because the angular material components should be accessible from the unit tests like the common html components.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

• Angular: 4.3.6
• Material: 2.0.0-beta.10
• Windows 10
• TypeScript: 2.4.2
• All browsers

[willshowell]

This is specific to Material? If you use ViewChild to access any other component (not just elementRef), does it work?

[franpsif]

Yes. If I try to access to a custom component created by me the result is correct. I am using in that case this:

@ViewChild('fromFilterValue') fromFilterValue: FilterValueComponent;

Where FilterValueComponent is my custom component.

[josephperrott]

@franpsif Can you provide an example test that this fails for?

I was able to use the ViewChild to reference a material component in a test as expected.

import {Component, ViewChild} from '@angular/core';
import {ComponentFixture, TestBed, async} from '@angular/core/testing';
import {MdSlideToggleModule, MdSlideToggle} from '@angular/material/slide-toggle';


describe('Test Component', () => {
  let fixture: ComponentFixture<TestComponent>;

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


  beforeEach(() => {
    fixture = TestBed.createComponent(TestComponent);
  });

  it('will have the both `ViewChild`s defined', () => {
    expect(fixture.componentInstance.myToggleByTemplateRef).toBeDefined();
    expect(fixture.componentInstance.myToggleByComponentRef).toBeDefined();
  });
});

@Component({
  template: `
    <div>
      <h1>This has a slide toggle in it</h1>
      <mat-slide-toggle #myToggle></mat-slide-toggle>
    </div>
  `
})
class TestComponent {
  @ViewChild('myToggle') myToggleByTemplateRef: MdSlideToggle;
  @ViewChild(MdSlideToggle) myToggleByComponentRef: MdSlideToggle;
}

[jelbourn]

There's nothing in Angular Material that affects how the components are queried. Any issues would be something specific to your app/test

[franpsif]

Yes, finally it was an error in our code, Sorry for that and thank you for your time.

[JSMike]

using @ViewChild from the unit tests I receive undefined

Just to leave a comment, in case others get here from a google search.

In unit tests if your test component has an incomplete template, or have an html syntax error, it will get past compiling the component (it will pass the truthy test) and any View/Conent child/ren variables will be undefined.

[abhinavbhardwaj2011]

Hello Guys, I need bit help in unit testing. It would be nice if someone can help me to write the unit test for slider and few other components. I can pay a small amount for it.. Thank you

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}