How to Unit Test MatBottomSheet

Question

I am getting an error that DependentComponent's properties are not set.

I want to ignore calling DependentComponent - this._bottomSheet.open(DependentComponent), but not sure how to achieve that.

I guess mockBottomSheetRef.open.and.callThrough(); is not the correct way of doing this. I need help here.

.ts


constructor(private _bottomSheetRef: MatBottomSheetRef<DependentComponent>) { }

showOverlay() {
    this._bottomSheet.open(DependentComponent, {
      panelClass: 'search-container'
    });
 }

spec.ts

  mockBottomSheetRef = { open: jasmine.createSpy('open') };

  TestBed.configureTestingModule({
    declarations: [
      MyComponent
      DependentComponent
    ],
    imports: [
      TestModule
    ],
    providers: [
      { provide: MatBottomSheetRef, useValue: mockBottomSheetRef }
    ],
  })
  .overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [DependentComponent] } })
  .compileComponents();



  it('should', () => {
    mockBottomSheetRef.open.and.callThrough(); 
    component.showOverlay();
    expect(mockBottomSheetRef.open).toHaveBeenCalled();
  });

May you please add the code of `this._bottomSheet` creation? most likely it is in the constructor. — IAfanasov, Jul 27 '21 at 09:30
I'm sorry, I could not provide an answer. I hope my thoughts would be of use. I believe you don't need the line `mockBottomSheetRef.open.and.callThrough();` and no need to add `DependentComponent` into declarations. It is because `mockBottomSheetRef = { open: jasmine.createSpy('open') };` would mock the actual behaviour of the `this._bottomSheet.open` and would not call original method so that no one would try to instantiate `DependentComponent`. The only possible issue I can think of is the generic argument of the injection token `MatBottomSheetRef`. — IAfanasov, Jul 27 '21 at 10:04
I tried that, it's erroring out. DependentComponent properties are not defined — Adrita Sharma, Jul 27 '21 at 10:18

IAfanasov · Accepted Answer · 2021-07-27T12:50:14.093

typo is the worst bug :D

this._bottomSheet.open - it is MatBottomSheet while the mock provided for the MatBottomSheetRef. notice the Ref in the end.

It should work like this:

  mockBottomSheet = { open: jasmine.createSpy('open') };

  TestBed.configureTestingModule({
    declarations: [
      MyComponent
      DependentComponent
    ],
    imports: [
      TestModule
    ],
    providers: [
      { provide: MatBottomSheet, useValue: mockBottomSheet }
    ],
  })
  .overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [DependentComponent] } })
  .compileComponents();


  it('opens bottom sheet when `showOverlay` executed', () => {
    component.showOverlay();
    expect(mockBottomSheet.open).toHaveBeenCalled();
  });

How to Unit Test MatBottomSheet

1 Answers1