如何在 angular 中为 lib ngx-smart-modal 创建单元测试

Question

I'm trying create tests with jasmine in a Angular 12 project and I would to test the receive of data coming of an modal opened with ngx-smart-modal . My test is structured creating and opening the modal on beforeEach function because the behavior which I want to test is on construct.

New Updates

Adding a little more of context, I'm testing a component which i call with Ngx Smart Modal trying to reproduce the same comportment calling on the component.spec.ts file a function to open it as modal. I'm giving a main error whos is these: enter image description here

Here is the error dump:

TypeError: Cannot read properties of null (reading 'markForCheck')
    at NgxSmartModalComponent.markForCheck (http://localhost:9876/_karma_webpack_/webpack:/node_modules/ngx-smart-modal/__ivy_ngcc__/esm2015/ngx-smart-modal.js:295:1)
    at NgxSmartModalComponent.setData (http://localhost:9876/_karma_webpack_/webpack:/node_modules/ngx-smart-modal/__ivy_ngcc__/esm2015/ngx-smart-modal.js:246:1)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/core/components/commom/verify-trade-document-infos/verify-trade-document-infos.component.spec.ts:32:8)
    at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:364:1)
    at ProxyZoneSpec.push.QpwO.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:292:1)
    at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:363:1)
    at Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:123:1)
    at runInTestZone (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:545:1)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:560:1)
    at <Jasmine>

component.spec.ts

    describe('PseudoComponentComponent', () => {
        let component: PseudoComponentComponent;
        let fixture: ComponentFixture<PseudoComponentComponent>;
        let modal: NgxSmartModalComponent;
      
        beforeEach(async () => {
          await TestBed.configureTestingModule({
            imports: [NgxSmartModalModule, SharedModule, CoreModule],
            declarations: [PseudoComponentComponent],
            providers: [
              { provide: NgxSmartModalService, useValue: ngxSmartModalServiceStub },
            ],
          }).compileComponents().
        });
      
        beforeEach(() => {
          fixture =  TestBed.createComponent(PseudoComponentComponent);
          component = fixture.componentInstance;
          modal = ngxSmartModalServiceStub
            .create('myIdenfier', PseudoComponentComponent)
            .setData({
              mainData: new PseudoClass(),
              type: 'dataType',
            });
      
          fixture.detectChanges();
        });
      
        it('should have a modalInitialized', () => {
            expect(component.data).toBeInstanceOf(PseudoClass);
        });
    });

The stub class

class NgxSmartModalServiceStub {
  ngxSmartModalService: Partial<NgxSmartModalService>;

  closeAll = () => null;
  closeLatestModal = () => null;

  getModal = (id: string): NgxSmartModalComponent =>
    new NgxSmartModalComponent(null, null, null, {}, {});
  getModalData = (id: string): any => this.getModal(id).getData();

  getTopOpenedModal = (): NgxSmartModalComponent =>
    new NgxSmartModalComponent(null, null, null, {}, {});

  create = <T>(
    id: string,
    content: Content<T>,
    options?: INgxSmartModalOptions
  ): NgxSmartModalComponent =>
    new NgxSmartModalComponent(null, null, null, {}, {});

  getStub() {
    this.ngxSmartModalService = {
      closeAll: this.closeAll,
      closeLatestModal: this.closeLatestModal,
      getModal: this.getModal,
      get: this.getModal,
      // getTopOpenedModal: this.getTopOpenedModal,
      create: this.create,
    };

    return this.ngxSmartModalService;
  }
}

const ngxSmartModalServiceStub = new NgxSmartModalServiceStub();
export { ngxSmartModalServiceStub };

Answer 1

I think, the setup is incomplete. You're code seems to be missing the TestBed.configureTestingModule() .

Check this example from https://angular.io/guide/testing-components-basics#componentfixture

describe('BannerComponent (with beforeEach)', () => {
    let component: BannerComponent;
    let fixture: ComponentFixture<BannerComponent>;

    beforeEach(() => {
        TestBed.configureTestingModule({declarations: [BannerComponent]}); // <-- do not forget this
        fixture = TestBed.createComponent(BannerComponent);
        component = fixture.componentInstance;
    });

    it('should create', () => {
        expect(component).toBeDefined(); // <-- do this test to check if the component is defined
    });
});

Answer 2

Hello to everyone whos will be here, I found a solution its more simple than like: so lets to code: TL:DR. Create yout modal component in describe function and open on beforeEach function.

The describe function will be like this.

    describe('ComponentTest', () => {
         const modal = ngxSmartModalServiceStub.create('identifier', PseudoComponent)
        .setData({ data: new Data() });
    })

and the before each function:

    beforeEach(() => {
          fixture =  TestBed.createComponent(PseudoComponentComponent);
          component = fixture.componentInstance;
    
          fixture.detectChanges();
          modal.open();
        });