title: Resolved: Mocking Angular Dialog afterClosed() for unit test
body: <p>I have troubles with mocking popup data for unit testing. Getting an error like: <strong>TypeError: Cannot read property 'showFilterModal' of undefined</strong>
  What am I doing wrong?</p>
  <p><strong>FilterComponent</strong></p>
  <pre><code>public openFilterModal() {
    this.filterModal = this.modalService.showFilterModal(this.filtersOptions, this.userRole, 'bills');
    this.filterModal.afterClosed
      .subscribe(
        (result) =&gt; {
          this.selectedFiltersAmount = result.total;
          this.filtersOptions = result.filters;
        },
        (err) =&gt; {
  
        });
  }
  </code></pre>
  <p>The idea was to create fake service with necessary observables and functions. Much thanks @Naren</p>
  <p><strong>Correct test mocking:</strong></p>
  <pre><code>describe('Component', () =&gt; {
    let component: Component;
    let fixture: ComponentFixture&lt;Component&gt;;
  
    const mockModelService = {
      showFilterModal: 
      jasmine.createSpy('showFilterModal').and.returnValue({ 
        afterClosed: of({
          total: 1,
          filters: null,
          reqObj: {
            status: 'active',
          }
        })})
      };
  
     beforeEach(() =&gt; {
      TestBed.configureTestingModule({
       imports: [NecessaryModules],
       providers: [
        { provide: LocalModalService, useValue: mockModelService }
       ],
       declarations: [ Component]
      }).compileComponents();
      fixture = TestBed.createComponent(Component);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create subscription after close modal', () =&gt; {
      component.openFilterModal();
      expect(mockModelService.showFilterModal).toHaveBeenCalled();
      expect(component.selectedFiltersAmount).toBe(1);
    });
  });
  </code></pre>