title: Mocking Angular Material Dialog afterClosed() for unit test
body: <p>I am opening my mat-dialog with the following function:</p>
  <pre class="lang-js prettyprint-override"><code>accept() {
    let dialogRef = this.dialog.open(AcceptDialogComponent, {
      data: {
        hasAccepted: false
      }
    })
    dialogRef.afterClosed().subscribe(result =&gt; {
      console.log(result);
      if (result.hasAccepted === true) {
        this.leadService.acceptLead(this.holdingAccountId, this.lead.id)
          .pipe(
            takeUntil(this.onDestroy$)
          )
          .subscribe(acceptLeadRes =&gt; {
              console.log(acceptLeadRes);
              this.leadService.updateLeadAction('accept');
            },
            (err: HttpErrorResponse) =&gt; {
              console.log(err);
              this.router.navigate(['/error']);
            });
      }
    });
  }
  </code></pre>
  <p>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.</p>
  <p>component.spec.ts (beforeEach Testbed creation)</p>
  <pre class="lang-js prettyprint-override"><code>beforeEach(async (() =&gt; {
    TestBed.configureTestingModule({
        declarations: [LeadCardComponent, AcceptDialogComponent],
        imports: [
          requiredTestModules,
          JwtModule.forRoot({
            config: {
              tokenGetter: () =&gt; {
                return '';
              }
            }
          })
        ],
        providers: [
          ApplicationInsightsService,
          JwtHelperService,
          // { provide: LeadsService, useValue: leadServiceSpy }
        ],
      }),
  
      TestBed.overrideModule(BrowserDynamicTestingModule, {
        set: {
          entryComponents: [AcceptDialogComponent]
        }
      });
    TestBed.compileComponents();
  }));
  </code></pre>
  <p>component.spec.ts (test)</p>
  <pre class="lang-js prettyprint-override"><code>it('Return from AcceptLeadDialog with hasAccepted equals true should call acceptLead endpoint', () =&gt; {
    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();
  });
  </code></pre>
  <p>The test currently fails with a &quot;Expected spy acceptLead to have been called.&quot; 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.</p>
  <p>Any help/suggestions would be much appreciated</p>
  <p><strong>Update Working Test implemented from Accepted Answer</strong></p>
  <pre class="lang-js prettyprint-override"><code>it('Return from AcceptLeadDialog with hasAccepted equals true should call acceptLead endpoint', () =&gt; {
    spyOn(component.dialog, 'open')
      .and
      .returnValue({
        afterClosed: () =&gt; of({
          hasAccepted: true
        })
      });
    spyOn(leadService, 'acceptLead').and.callThrough();
    component.acceptLead();
    expect(component.dialog).toBeDefined();
    expect(leadService.acceptLead).toHaveBeenCalled();
  });
  </code></pre>