Mocking Angular Material Dialog afterClosed() for unit test

Question

I am opening my mat-dialog with the following function:

accept() {
  let dialogRef = this.dialog.open(AcceptDialogComponent, {
    data: {
      hasAccepted: false
    }
  })
  dialogRef.afterClosed().subscribe(result => {
    console.log(result);
    if (result.hasAccepted === true) {
      this.leadService.acceptLead(this.holdingAccountId, this.lead.id)
        .pipe(
          takeUntil(this.onDestroy$)
        )
        .subscribe(acceptLeadRes => {
            console.log(acceptLeadRes);
            this.leadService.updateLeadAction('accept');
          },
          (err: HttpErrorResponse) => {
            console.log(err);
            this.router.navigate(['/error']);
          });
    }
  });
}

I am attempting to write a test for this function that simply fires the afterClosed() so that I can check if my service method that makes a backend call is called.

component.spec.ts (beforeEach Testbed creation)

beforeEach(async (() => {
  TestBed.configureTestingModule({
      declarations: [LeadCardComponent, AcceptDialogComponent],
      imports: [
        requiredTestModules,
        JwtModule.forRoot({
          config: {
            tokenGetter: () => {
              return '';
            }
          }
        })
      ],
      providers: [
        ApplicationInsightsService,
        JwtHelperService,
        // { provide: LeadsService, useValue: leadServiceSpy }
      ],
    }),

    TestBed.overrideModule(BrowserDynamicTestingModule, {
      set: {
        entryComponents: [AcceptDialogComponent]
      }
    });
  TestBed.compileComponents();
}));

component.spec.ts (test)

it('Return from AcceptLeadDialog with hasAccepted equals true should call acceptLead endpoint', () => {
  let matDiaglogref = dialog.open(AcceptDialogComponent, {
    data: {
      hasAccepted: false
    }
  });
  spyOn(matDiaglogref, 'afterClosed').and.callThrough().and.returnValue({
    hasAccepted: true
  });
  spyOn(leadService, 'acceptLead').and.callThrough();
  component.acceptLead();
  fixture.detectChanges();
  matDiaglogref.close();
  fixture.detectChanges();

  expect(leadService.acceptLead).toHaveBeenCalled();
});

The test currently fails with a "Expected spy acceptLead to have been called." I am failing on understanding how to test the function and execute some sort of mock MatDialogRef so that I can check if the conditions of my test pass.

Any help/suggestions would be much appreciated

Update Working Test implemented from Accepted Answer

it('Return from AcceptLeadDialog with hasAccepted equals true should call acceptLead endpoint', () => {
  spyOn(component.dialog, 'open')
    .and
    .returnValue({
      afterClosed: () => of({
        hasAccepted: true
      })
    });
  spyOn(leadService, 'acceptLead').and.callThrough();
  component.acceptLead();
  expect(component.dialog).toBeDefined();
  expect(leadService.acceptLead).toHaveBeenCalled();
});

Have you tried to mock the `MatDialog` `open` method? Doing that should allow you to return a mock `MatDialogRef` that you are in control of and you can manually trigger the `afterClosed` observable to emit a new value. — Daniel W Strimpel, May 08 '19 at 01:59
Could I trigger afterClosed manually and still test the logic of it's response being a condition for additional code to execute? — Brian Stanley, May 08 '19 at 18:16
Did you solve your problem? That it is the complete solution because I am also looking to test the opening and closing of a popup — dna, Aug 18 '20 at 08:49
@dna It has been a while but the accepted answer worked for my tests — Brian Stanley, Aug 18 '20 at 20:16

score 42 · Answer 1 · edited Jul 08 '21 at 16:23

42

I solved this problem as the first post by @Adithya Sreyaj but added the next change:

spyOn(component.dialog, 'open')
    .and
    .returnValue({
        afterClosed: () => of(true)
    } as MatDialogRef<typeof component>);

edited Jul 08 '21 at 16:23

Magiczne

1,586
2
15
23

answered Aug 05 '20 at 17:53

CrgioPeca88

973
7
12

3

This should be the no.1 top answer. – EM-Creations Dec 21 '20 at 12:53
Although this only works if `dialog` is a public member of `component`, no? – Elias Dec 16 '21 at 07:32
The best answer. Instead of providing all functions and properties of MatDialogRef, only change what you need. – Olrhain Aug 08 '22 at 20:04
2

I am not sure this will work after Jest 28. We must now use jest.spyOn and can no longer us `.and.returnValue...` – cmcevoy Sep 02 '22 at 08:40

score 32 · Accepted Answer · answered Jun 20 '19 at 04:35

32

You can test Angular Material Dialog's afterClosed method this way:

import { of } from 'rxjs';
spy on the dialog and return an observable for the afterClosed() method

spyOn(component.dialog, 'open')
     .and
     .returnValue({afterClosed: () => of(true)});

Basically, the afterClosed() of the dialogRef is expecting an Observable. So we spy on the component's dialog open method and return an Observable for the afterClosed() method by using the of operator from rxjs.

You can then replace the of(true) from the returnValue with your own data what you are sending in the afterClosed() of the dialog in the main component.

answered Jun 20 '19 at 04:35

Adithya Sreyaj

1,710
10
22

6

it is throwing error. can you help me with that. Argument of type '{ afterClosed: () => Observable; }' is not assignable to parameter of type 'MatDialogRef'. Type '{ afterClosed: () => Observable; }' is missing the following properties from type 'MatDialogRef': _overlayRef, _containerInstance, id, componentInstance, and 18 more.t – Sunil Soni Jun 10 '20 at 07:16
@SunilSoni, I am facing the same problem. Did you solve it? – Rod Nolan Nov 19 '21 at 21:15
3

@SunilSoni Well `.open` is normally supposed to return a `MatDialogRef`. In this case you are only returning a fraction of that object, so TypesScript is complaining about it. To satisfy TypeScript you can cast the value using: `.and.returnValue({ afterClosed: () => of(data) } as MatDialogRef)`. But be aware that TypeScript complains were quite valid. If calls to any other method of `MatDialogRef` are made within the test, it's going to fail trying to call `undefined`. – Elias Dec 16 '21 at 07:26
@RodNolan see my other comment on this question please. – Elias Dec 16 '21 at 07:27
1

Thanks @Elias for your help – Sunil Soni Jan 04 '22 at 13:36

Shashank Vivek · Answer 3 · 2019-05-11T15:48:43.817

I think you are missing the whole point of unit testing the component. From my understanding:

You have a function accept() which creates subscription to the closing event of this.dialog
You should write unit test to verify the logic that the subscription is getting created and the service is called.
Make dialogRef global to component rather than keeping it private to accept(). This would help you test your code better. private variables can't be access during unit testing.

So:

component.ts

accept() {
 this.dialogRef = this.dialog.open(AcceptDialogComponent, {
  data: {
    hasAccepted: false
      }
    })
 this.dialogRef.afterClosed().subscribe(result => {
  console.log(result);
  if (result.hasAccepted === true) {
    this.leadService.acceptLead(this.holdingAccountId, this.lead.id)
    .pipe(
      takeUntil(this.onDestroy$)
    )
    .subscribe (acceptLeadRes => {
      console.log(acceptLeadRes);
      this.leadService.updateLeadAction('accept');
    },
    (err: HttpErrorResponse) => {
      console.log(err);
      this.router.navigate(['/error']);
    });
   }
 });
}

spec.ts

it('should create subscription to Modal closing event and call "acceptLead()" of "leadService" ', () => {
    spyOn(component.dialogRef, 'afterClosed').and.returnValue(
        of({
            hasAccepted: false
        })
    );
    spyOn(component.leadService, 'acceptLead').and.callThrough();
    component.accept();
    expect(component.dialogRef).toBeDefined();
    expect(component.dialogRef.afterClosed).toHaveBeenCalled();
    expect(component.leadService.acceptLead).toHaveBeenCalled();
});

Sorry for the delay. I am not able to get your solution working. I could make dialogRef global to the component but I am opening several different dialogs from this component, would this not conflict with being able to do that? — Brian Stanley, May 14 '19 at 16:28
@BrianStanley : If you are opening several `dialogRef`, the you'll have to make separate `refs` for all of them globally. If you keep the variable as private, you wont be able to test it using `jasmine` — Shashank Vivek, May 16 '19 at 11:22

score 0 · Answer 4 · answered Jun 02 '21 at 23:27

0

has anyone used the dialog, passing a callback function but instead of in the afterClosed the callback is in onOk method?

ex.

 let modalOptions = {
  uContent: 'are you sure you want to delete',
  uTitle: 'modal title',
  uOnOk: () => {
   callback function here
  }
};
this.modalService.create(modalOptions);

looking to test using jest the callback function

answered Jun 02 '21 at 23:27

ArbolDie

13
1
5

If this is a question, please create a new question instead of providing this as an answer. – Jason Foglia May 11 '23 at 18:06

Mocking Angular Material Dialog afterClosed() for unit test

4 Answers4

Linked