Angular Mat dialog unit test: This.dialogref.updatesize is not a function

Question

I am new to angular. I am trying to write a unit test for mat dialog but it throws error.

My method in ts file :

isMobileScreen= Observable<BreakpointState>= this.breakpointObserver.observe('(max-width:600px)');
    
    OpenDialog(){
      if(index===0){
        this.dialogref=this.dialog.open(MyComonent,{
        maxWidth:'600px'
        });
    
        Const dialogSub= this.isMobileScreen.subscribe(result=> {
        if(result.matches){
         this.dialogref.updatesize('100%','100%');
        }
        else{
         this.dialogref.updatesize('50%');
        }
    });
    
    this.dialogref.afterclosed(). subscribe (results=>{
      dialogSub.unsubcribe():
    });
   }

Spec file

       class isMobileScreen {
            Value= new subject ();
            isMobileScreen= this.value.asObservable();
            setValue(val){ // getting error here cannot read property 'setvalue' of undefined
             this.value.next(val);
            }
         }
        
      //  Inside describe    
     
    
       describe('component', ()=>{
          ...
        Let isMobileScreen: isMobileScreen;
        Const dialogRefMock={
              afterClosed(){
                    return of(true);
               },
               updatesize(width?:string, height?: string){}
         };
         Const dialogMock={ open:()=> dialogRefMock};
    
         // Inside before each I gave dialogMock as provider
         beforeEach(async(() => {
          TestBed.configureTestingModule({
          declarations: [ MyComponent],
          imports: [RouterTestingModule,MatDialogModule],
          providers: [ { provide: MatDialog, useValue: dialogStub },{provide : MatDialogRef, useValue : {}, { provide: isMobileScreen, useValue: isMobileScreen }]
        })
        .compileComponents();
      }));
      beforeEach(() => {
      fixture = TestBed.createComponent(MyComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
      isMobileScreen = TestBed.get(isMobileScreen);
      });
      it('',async(()=>{
         component.Opendialog();
         isMobileScreen.setvalue(true);
         fixture.detectChanges();
         fixture.whenStable().then(()=>{
         let spy= spyOn(component.dialogref, 'updatesize').and.callThough();
            expect (spy).toHaveBeenCalled(); // getting error here this.dialogref.updatesize is not a function.
                  
          });
        }));
     });

I am getting two error.

cannot read property 'setvalue' of undefined
this.dialogref.updatesize is not a function.

May be I wrote wrong mocking. Please help me to resolve this error

score 4 · Accepted Answer · edited Jan 07 '22 at 20:16

4

try this

    providers: [ { provide: MatDialog, useValue: dialogMock },
          {provide : MatDialogRef, useValue : dialogRefMock} 
    ]

Also make sure the mocked method is called updateSize with capital S

edited Jan 07 '22 at 20:16

Mauricio Gracia Gutierrez

10,288
6
68
99

answered Jul 10 '20 at 13:45

Nitin Lawande

563
1
4
8

Thank you for your response. I am still getting the error "Cannot read property 'setValue' of undefined". – Muthukani K Jul 10 '20 at 14:05
providers: [ { provide: MatDialog, useValue: dialogMock }, {provide : MatDialogRef, useValue : dialogRefMock}, { provide: isMobileScreen, useClass: isMobileScreen } ] – Nitin Lawande Jul 13 '20 at 12:35
This what I gave already. But I am getting error "cannot read property 'setvalue' of undefined". – Muthukani K Jul 16 '20 at 13:26

score 0 · Answer 2 · edited Jan 15 '23 at 19:33

instead of mocking dialogref. mock dialog or dialogservice and return as example below (can please forgive for not writing according to question but this method works) Also add { provide: DialogService, useValue: mockDialogService } in providers

mockDialogService = {
   open:() => {
     return {
       updateSize: (params) => { return () },
       afterclosed: of({ dataSource: {dataName: 'text1' }})
     }
   }
}

)

Angular Mat dialog unit test: This.dialogref.updatesize is not a function

2 Answers2