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.

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

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

Answer 1

try this

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

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