testing - Resolved: Mocking Angular Dialog afterClosed() for unit test

Question

I have troubles with mocking popup data for unit testing. Getting an error like: TypeError: Cannot read property 'showFilterModal' of undefined What am I doing wrong?

FilterComponent

public openFilterModal() {
  this.filterModal = this.modalService.showFilterModal(this.filtersOptions, this.userRole, 'bills');
  this.filterModal.afterClosed
    .subscribe(
      (result) => {
        this.selectedFiltersAmount = result.total;
        this.filtersOptions = result.filters;
      },
      (err) => {

      });
}

The idea was to create fake service with necessary observables and functions. Much thanks @Naren

Correct test mocking:

describe('Component', () => {
  let component: Component;
  let fixture: ComponentFixture<Component>;

  const mockModelService = {
    showFilterModal: 
    jasmine.createSpy('showFilterModal').and.returnValue({ 
      afterClosed: of({
        total: 1,
        filters: null,
        reqObj: {
          status: 'active',
        }
      })})
    };

   beforeEach(() => {
    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', () => {
    component.openFilterModal();
    expect(mockModelService.showFilterModal).toHaveBeenCalled();
    expect(component.selectedFiltersAmount).toBe(1);
  });
});

Answer 1

You can mock the modelService and put in the providers while creating the component, and Spy on the service methods and define expected values.

You could try like this, But make sure, you updated the necessary changes accordingly your component. If there's any error let me know.

import { of } from 'rxjs';
import YourModelService from '/path/serives'


const mockModelService = {
  showFilterModal: jasmine.createSpy('showFilterModal').and.returnValue({ afterClosed: of({
  total: 1,
  filters: null,
  reqObj: {
    status: 'active',
  }
} })
}

describe('testing', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [YourComponent],
      providers: [
        {
          provide: YourModelService,
          useValue: mockModelService // <-- here mocked the service
        }
      ],
      schemas:[CUSTOM_ELEMENTS_SCHEMA]
    });
  })
  
  it('should create subscription after close modal', () => {
    component.openFilterModal();
  
    expect(mockModelService.showFilterModal).toHaveBeenCalled();
    expect(afterClosedSpy).toHaveBeenCalled();
    expect(component.selectedFiltersAmount).toBe(1);
  });
})