使用 NzModalFooterDirective 时测试组件答案

【问题标题】：testing a component when using NzModalFooterDirective使用 NzModalFooterDirective 时测试组件
【发布时间】：2019-12-21 22:43:53
【问题描述】：

我有一个想要测试的简单组件。我从另一个模块加载这个组件：

 const modal = this.modalService.create({
     nzContent: MyModalComponent
    });

组件

@Component({
  selector: 'my-modal-component',
  template: `

<div *nzModalFooter>
  <button nz-button nzType="default" (click)="destroyModal()">
    Cancel
  </button>
</div>
`
})
export class MyModalComponent{

  constructor(private modal: NzModalRef) {}

  destroyModal(): void {
    this.modal.destroy({});
  } 
}

在为MyModalComponent 组件创建测试台时，出现错误：

 NullInjectorError: StaticInjectorError(DynamicTestModule)[NzModalFooterDirective -> NzModalRef]:
      StaticInjectorError(Platform: core)[NzModalFooterDirective -> NzModalRef]:
        NullInjectorError: No provider for NzModalRef!

读取错误我尝试使用NzModalFooterDirective。

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [OtherModules],
      declarations: [MyModalComponent],
      providers: [
        NzModalFooterDirective
      ]
    }).compileComponents();
  }));

以及任何其他导入：

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [OtherModules],
      declarations: [MyModalComponent],
      providers: [
        { provide: NZ_MODAL_CONFIG, useValue: {} },
        NzModalService,
        NzModalFooterDirective
      ]
    }).compileComponents();
  }));

没有成功...

我也试过直接使用 NzModalRef

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [OtherModules],
      declarations: [MyModalComponent],
      providers: [NzModalRef]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyModalComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

但是我得到了错误： this.nzModalRef.getInstance is not a function

我只是想准备测试台。我不确定我是否导入了 NzModalRef 错误，或者我是否必须用自定义模拟替换它。

【问题讨论】：

标签： angular testing modal-dialog jestjs ng-zorro-antd

【解决方案1】：

NzModalRef 是动态注入到NzModalComponent 中的，不需要向providers 声明。

【讨论】：

感谢您抽出宝贵时间。任何想法如何摆脱NullInjectorError: StaticInjectorError(DynamicTestModule) NzModalFooterDirective -> NzModalRef]: StaticInjectorError(Platform: core) NzModalFooterDirective -> NzModalRef]: NullInjectorError: No provider for NzModalRef!error

【解决方案2】：

我所做的是为NzModalRef 设置一个提供程序，使用工厂创建一个新模式：

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        OtherModules
      ],
      declarations: [MyModalComponent],
      providers: [
        {
          provide: NzModalRef,
          useFactory: (modalSvc: NzModalService) => modalSvc.create({
            nzClosable: false,
            nzContent: MyModalComponent
          }),
          deps: [NzModalService]
        }
      ]
    }).overrideModule(BrowserTestingModule, {
      set: {entryComponents: [MyModalComponent]}
    }).compileComponents();
  }));

在入口组件中还需要添加modal组件。

【讨论】：

【解决方案3】：

如果你想绕过这个错误，你可以简单地通过useValue模拟NzModelRef

providers: [
  {
    provide: NzModalRef,
    useValue: {
      getInstance: () => {
        return {
          setFooterWithTemplate: () => {}
        };
      }
    }
   }
]

你的情况

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [OtherModules],
      declarations: [MyModalComponent],
      providers: [{
         provide: NzModalRef,
         useValue: {
          getInstance: () => {
            return {
              setFooterWithTemplate: () => {}
            };
          }
        }
      }]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyModalComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

【讨论】：