Usando Angular 16 e Jasmine/Karma.
Eu tenho esta assinatura para um assunto de comportamento chamadotableList$
ngOnInit() {
const { pageNumber } = this.subscribersService.getMiscValues();
this.subscribersService.initPage(pageNumber);
>> this.subscribersService.tableList$.subscribe((tableList) => {
// this.tableList = this.deleteSubscribersService.setDeleteCheckboxStates(tableList);
});
}
Estou tentando zombar do assunto comportamento, mas estou conseguindo this.subscribersService.tableList$.subscribe is not a function
.
Alguma idéia do que estou fazendo de errado, por favor?
Observe, eu também tentei subscribersServiceMock.tableList$.and.returnValue({ subscribe: () => tableListMock$.subscribe });
sem sucesso
fdescribe('ManageSubscribersComponent', () => {
let component: ManageSubscribersComponent;
let fixture: ComponentFixture<ManageSubscribersComponent>;
let miscMockValues;
let tableMockData;
let tableListMock$;
let dialogServiceMock
let dialogSubjectMock;
let subscribersServiceMock;
let deleteSubscribersServiceMock;
const displayedColumns = [
'id',
'name',
'description',
'createdBy',
'createdOn',
'updatedBy',
'updatedOn',
];
beforeEach(() => {
tableListMock$ = new Subject();
dialogSubjectMock = new Subject();
dialogServiceMock = jasmine.createSpyObj([
'open',
'afterClosed',
]);
deleteSubscribersServiceMock = jasmine.createSpyObj([
'deleteSubscribers',
]);
subscribersServiceMock = jasmine.createSpyObj([
'resetMiscValues',
'getMiscValues',
'initPage',
'tableList$',
]);
miscMockValues = {
pageNumber: 1,
pageSize: 25,
sort: '',
active: true,
testMode: false,
searchTerms: '',
};
subscribersServiceMock.getMiscValues.and.returnValue(miscMockValues);
subscribersServiceMock.tableList$.and.returnValue(tableListMock$);
dialogServiceMock.afterClosed.and.returnValue(dialogSubjectMock);
TestBed.configureTestingModule({
declarations: [ManageSubscribersComponent],
imports: [
HttpClientTestingModule,
MatFormFieldModule,
MatIconModule,
MatSliderModule,
MatTableModule,
MatFormFieldModule,
MatInputModule,
BrowserAnimationsModule,
MatPaginatorModule,
MatDialogModule,
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA,
NO_ERRORS_SCHEMA,
],
providers: [
{
provide: SubscribersService,
useValue: subscribersServiceMock,
},
{
provide: DeleteSubscribersService,
useValue: deleteSubscribersServiceMock,
},
],
});
fixture = TestBed.createComponent(ManageSubscribersComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
fit('should init', fakeAsync(() => {
fixture.whenStable().then(() => {
expect(component.displayedColumns).toEqual(displayedColumns);
expect(subscribersServiceMock.getMiscValues).toHaveBeenCalled();
})
}));
Conforme declarado nos comentários, o problema está na configuração do teste
Ao configurar a
SubscribersService
simulação fazendoEsses nomes na matriz serão métodos para criar espiões conforme a
createSpyObj
documentaçãoNo entanto,
SubscribersService
usatableList$
como propriedade. Porque funcionathis.tableList$
como algum tipo de objeto observável e não o chama como você faria com um método:this.tableList$()
.Se você deseja criar um objeto com seu
tableListMock
assunto para atableList$
propriedade , você pode usar o próximo argumento opcional paracreateSpyObj
:Como afirmam
createSpyObj
os documentos , o último argumento pode definir propriedades para as quais criar espiões. Ou um objeto para realmente definir propriedades com seus valores no objeto.Você também pode passar um array de nomes de métodos:
Em seguida, serão criados espiões para o acessador de propriedade . Desta forma você poderá espionar quando
tableList$
éget
ouset
.Veja como você configuraria o
get
espião parasubscribersServiceMock.tableList$
retornar o assunto simulado:Um pouco complicado se você quiser apenas definir o valor, a forma anterior de passar um objeto é mais curta. Porém desta forma você pode verificar se
tableList$
foi acessado usando o espião: