angular jasmine unit test mat dialog after closed not subscribing value

i have this function in component

onAgendaOpen(type: AppointmentType, appointment: IAppointment): void {
if (AppointmentOrigin.RDS_LIGHT === appointment.origin) {
const dialogRef = this.dialog.open(RestitutionDateLightModalComponent, {
data: {
receptionDate: appointment?.reception?.dateTime,
restitutionDate: appointment?.restitution?.dateTime
},
width: '40vw',
panelClass: 'restitution-light-dialog'
});
console.log('before')
this['toUnsubscribe'] = dialogRef.afterClosed().subscribe(restitutionDate => {
console.log('inside')
if (!isNullOrUndefined(restitutionDate)) {
this.storeService.callAction(AppointmentLightDetailActions.saveRestitutionDate, {date: restitutionDate});
}
});
} else {
this.storeService.callAction(AgendaActions.clickOnOpenAgenda, {type, manual: true});
}
}


i am trying to test that my storeService is called in this test :

fdescribe('AppointmentsInterventionsComponent', () => {
let component: AppointmentsInterventionsComponent;
let fixture: ComponentFixture<AppointmentsInterventionsComponent>;let store: MockStore;

beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
mockDirective({
selector: 'rds-service-advisor-agenda-info',
inputs: ['canBeChanged'],
}),
],
imports: [
AppointmentsInterventionsComponent,
HttpClientTestingModule,
NgxPermissionsModule,
MatDialogModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useClass: TranslateFakeLoader,
},
}),
],
providers: [MatDialog]
}).compileComponents();

store = TestBed.inject(MockStore);
fixture = TestBed.createComponent(AppointmentsInterventionsComponent);
component = fixture.componentInstance;
});

afterEach(() => {
store.resetSelectors();
});

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

[
{
description: 'should open dialog and dispatch saveRestitutionDate for RDS_LIGHT origin',
appointment: {
origin: AppointmentOrigin.RDS_LIGHT,
reception: { dateTime: new Date('2025-01-01T08:00:00Z') },
restitution: { dateTime: new Date('2025-01-01T09:00:00Z') },
} as IAppointment,
type: AppointmentType.restitution,
expectedAction: AppointmentLightDetailActions.saveRestitutionDate,
expectDialog: true,
},
{
description: 'should dispatch clickOnOpenAgenda for other origins',
appointment: {
origin: AppointmentOrigin.RDS,
reception: { dateTime: new Date('2025-01-01T08:00:00Z') },
restitution: { dateTime: new Date('2025-01-01T09:00:00Z') },
} as unknown as IAppointment,
type: AppointmentType.restitution,
expectedAction: AgendaActions.clickOnOpenAgenda,
expectDialog: false,
},
].forEach(({ description, appointment, type, expectedAction, expectDialog }) => {
it(description, fakeAsync(() => {
const storeServiceSpy = spyOn(TestBed.inject(StoreService), 'callAction').and.stub();
const dialog = TestBed.inject(MatDialog);

const dialogOpenSpy = spyOn(dialog, 'open').and.returnValue({
afterClosed: () => {
return of(new Date('2025-01-01T10:00:00Z'))
}
} as MatDialogRef<RestitutionDateLightModalComponent>)

component.onAgendaOpen(type, appointment);

flush();
if (expectDialog) {
expect(storeServiceSpy).toHaveBeenCalledWith(expectedAction, {
date: new Date('2025-01-01T10:00:00Z'),
});
} else {
expect(storeServiceSpy).toHaveBeenCalledWith(expectedAction, {
type,
manual: true,
});
expect(dialogOpenSpy).not.toHaveBeenCalled();
}
}));
});


And my test is working fine for else block where AgendaActions.clickOnOpenAgenda is called but not for my if block, because its not going inside of subscribe and i dont know why, i tried many things, my console.log('before') is called but 'inside' not, do you see issue?

Continue reading...