CODEWITHSUNDEEP
angularkarma-jasmineangular-material2
rajk
rajk

Reputation: 221

Getting error while testing Angular 2 Material Dialog Component

When I run the test I am getting "Can't resolve all parameters for MdDialogRef: (?, ?)" error. Please help.

Please refer the below code for further reference.

MyComponent.spec.ts

import { async, ComponentFixture, ComponentFixtureAutoDetect, TestBed } from '@angular/core/testing';
import { MyComponent } from './my.component';
import { MdDialogModule, MdDialog, MdDialogConfig, MdDialogRef } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

describe('Component: My Component', () => {

  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent],
      imports: [BrowserAnimationsModule, MdDialogModule.forRoot()],
      providers: [MdDialogRef],
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should, have defined component', () => {
    expect(component).toBeDefined();
  });
});

MyComponent.ts

import { Component } from '@angular/core';
import { MdDialog, MdDialogRef } from '@angular/material';
@Component({
    templateUrl: './mys.component.html'
})

export class MyComponent {
    constructor(public dialogRef: MdDialogRef<any>) { }
}

Upvotes: 1

Views: 2110

Answers (1)

Parth Ghiya
Parth Ghiya

Reputation: 6949

Open Issue in Angular [https://github.com/angular/angular/issues/10760]

Resolution As Per Comments:

"Tests that rely on ComponentFactoryResolver to be filled correctly need to declare "entryComponents" via configureTestModule (or import a module that does so). This way you can test that your module is correct / test how users would use your module."

Demo Plunkr: https://plnkr.co/edit/Tv5fbtPtsiNhFIJ5QhRf?p=preview

Created Component:

import { Component } from '@angular/core';
import { MdDialogRef } from '@angular/material';

@Component({
  selector: 'dialog-component',
  template: `Can't resolve all parameters for MdDialogRef: (?)`
})
export class TestComponent {
  constructor(private dialogRef: MdDialogRef<any>) { }
}

Added in Module

@NgModule({
    declarations: [TestComponent],
    entryComponents: [TestComponent],
    exports: [TestComponent],
})
class TestModule { }

Used TestModule

describe('Component: Login', () => {
    let component: TestComponent;
    let dialog: MdDialog;

    beforeEach(() => {
      TestBed.configureTestingModule({
        imports: [
          TestModule, 
          MdDialogModule.forRoot()
        ]
      });
    });

    beforeEach(() => {
      dialog = TestBed.get(MdDialog);
      let dialogRef = dialog.open(TestComponent);

      component = dialogRef.componentInstance;
    });

    it('should create', () => {
      expect(component).toBeTruthy();
    });
});

Upvotes: 2

Related Questions