已解决：Mocking Angular Dialog afterClosed() 进行单元测试

Question

我在为单元测试模拟弹出数据时遇到了麻烦。收到如下错误：TypeError: Cannot read property 'showFilterModal' of undefined 我做错了什么？

过滤器组件

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) => {

      });
}

这个想法是创建具有必要的可观察对象和功能的假服务。非常感谢@Naren

正确的测试模拟：

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

您可以在创建组件时模拟modelService 并放入providers，并监视service methods 并定义预期值。

您可以尝试这样，但请确保您已根据您的组件更新了必要的更改。如果有任何错误，请告诉我。

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);
  });
})