3

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

 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错误还是必须用自定义模拟替换它。

4

3 回答 3

2

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

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();
  });
});
于 2020-05-27T08:59:56.203 回答
1

我所做的是设置一个提供者来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();
  }));

还需要将模态组件添加到入口组件中。

于 2020-05-08T21:29:57.560 回答
1

NzModalRef是动态注入的NzModalComponent，不需要向providers.

于 2019-08-27T12:21:22.770 回答