How to write Test cases for below angular method

Question

I have created a component that opens my custom type dialog, I just want to create Jasmine unit test cases for this method.

export class OpenPopUpComponent implements OnInit {
    constructor(public dialog:NewCustomDialog) {}

    ngOnInit() {

    }

    openModel(){
        this.dialog.open(NewComponent,<NewCustomDialogConfig>{
            size: 'double',
            data: {
                title: 'New Dialog'
            }
        });
    }
}

Answer 1

You will not test the dialog itself. What you need to do is to mock the NewCustomDialog and provide it as injected.

In your spec.ts

beforeEach(() => {
  const spy = jasmine.createSpyObj('NewCustomDialog', ['open']);

  TestBed.configureTestingModule({
    // Provide (spy) dependency
    providers: [
      { provide: NewCustomDialog, useValue: {newCustomDialogSpy} }
    ]
  });
  // Inject both the service-to-test and its (spy) dependency
  masterService = TestBed.get(MasterService);
  valueServiceSpy = TestBed.get(ValueService);
});

Then you can check that the spy has been called with parameters (the ones you expect).

Answer 2

The intension of the unit test is to test the feature of component itself and not to start testing the features which is outside the scope of component which is to be tested. So, you do not need to test dialog.open as this should be tested in unit test of NewCustomDialog itself.

1. start by creating a Stub which you can use as a placeholder for NewCustomDialog , such as

export class NewCustomDialogStub{
   open(){ return null; }
   close(){ return null; }
   // and similar dummy methods which is required by "OpenPopUpComponent"
}

2. Inject this stub as useClass in providers as below:

export class NewCustomDialogStub{
   open(){ return null; }
   close(){ return null; }
   // and similar dummy methods which is required by "OpenPopUpComponent"
}

describe('OpenPopUpComponent', () => {
  let component: OpenPopUpComponent;
  let fixture: ComponentFixture<OpenPopUpComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [],
      declaration: [OpenPopUpComponent],
      providers: [
         { provide: NewCustomDialog, useClass: NewCustomDialogStub }
      ]
    }).compileComponents();
  });

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

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

   it('should call "open" method of dialog on calling openModel() ',()=>{
      spyon(component.dialog,'open').and.callThrough();
      component.openModel();
      expect(component.dialog.open).toHaveBeenCalled();
   })   
})

This is very basic testing but if you want to know more about writing tests, you can refer to this series of articles where I have covered almost all basic testing scenarios . Check the bottom of article for all links. The one which I used here is this one