I am getting the following error

1. Should open confirmation dialog ConfigurationRestoreComponent TypeError: restoreDialogRef.afterClosed is not a function at ConfigurationRestoreComponent.openConfirmationDialog (main.js:16303:22) at

ts file looks like follows

openConfirmationDialog() 
{
    const restoreDialogRef = this.dialog.open(RestoreConfirmationComponent, {
      restoreFocus: false,
      width: '37.5rem',
    });
    const dialogCallOnrestore = restoreDialogRef.componentInstance.onRestore
      .pipe(takeUntil(this.destroy$))
      .subscribe(() => {
        this.upload(this.formData);
      });

    const dialogCallOncancel = restoreDialogRef.componentInstance.onCancel
      .pipe(takeUntil(this.destroy$))
      .subscribe(() => {
        this.onCancel();
      });

    restoreDialogRef.afterClosed().subscribe(() => {
      dialogCallOnrestore.unsubscribe();
      dialogCallOncancel.unsubscribe();
    });
  }

spec.ts file is as follows

  it('Should open confirmation dialog ', fakeAsync(() => {
    fixture = TestBed.createComponent(ConfigurationRestoreComponent);
    component = fixture.componentInstance;

    const mockedDialogRef = { componentInstance: { onRestore: new Subject<void>(), onCancel: new Subject<void>() } };
    spyOn((component as any).dialog, 'open').and.returnValue(mockedDialogRef);
    spyOn(component, 'openConfirmationDialog').and.callThrough();
    component.openConfirmationDialog();
    mockedDialogRef.componentInstance.onRestore.next();
    mockedDialogRef.componentInstance.onCancel.next();
    tick(2000);
    fixture.detectChanges();
    expect(component.openConfirmationDialog).toHaveBeenCalled;
    expect(component.upload).toHaveBeenCalled;
    expect(component.onCancel).toHaveBeenCalled;
  }));

    const matDialogSpy = jasmine.createSpyObj('MatDialogRef.componentInstance', ['onReset', 'onCancel']);
    TestBed.configureTestingModule({
      imports: [FormsModule, MatTabsModule, ReactiveFormsModule, MatDialogModule,CiqTestingModule],
      declarations: [SettingsIntegratedGatewayComponent],
      providers: [
        { provide: MAT_DIALOG_DATA, useValue: {} },
        { provide: MatDialogRef, useValue: matDialogSpy },
        { provide: MatDialog, useValue: dialogMock },
        { provide: SettingsEsrsService, useValue: settingsEsrsService },
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    })
      .overrideProvider(InteractivityChecker, {
        useValue: {
          isFocusable: () => true,
        },
      })
      .compileComponents();
    matDialogRef = TestBed.get(MatDialogRef);
  }));

Any idea how to resolve this issue?

CodePudding user response：

You're mocking the dialog object open method.

spyOn((component as any).dialog, 'open').and.returnValue(mockedDialogRef);

Which return mockedDialogRef object, it contains the componentInstance object with their methods. It should also return afterClosed method mocked implementation as well.

const mockedDialogRef = { 
   componentInstance: { 
     onRestore: new Subject<void>(),
     onCancel: new Subject<void>(), 
   },
   afterClosed: () => new Subject<void>(), // <- provide fake function for afterClosed.
};