Im a Angular newbie and starting to write Unit Tests. I have a simple Component, which loads data from RxJs - Subject. Im not able to initialize the spec.ts file for testing does anyone now how to do the correct implementation ?
Thats my Component
import { Component, Inject, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { fluxDispatcherToken } from 'src/app/shared/helpers/flux.configuration';
import { FluxStore } from 'src/app/shared/services/flux-store';
import { Account } from 'src/app/shared/types/account';
import { FluxAction, FluxActionTypes } from 'src/app/shared/types/actions.type';
import { CsvTransactionFormComponent } from './csv-transaction-form/csv-transaction-form.component';
import { ManualTransactionFormComponent } from './manual-transaction-form/manual-transaction-form.component';
@Component({
selector: 'app-account',
templateUrl: './account.component.html',
styleUrls: ['./account.component.scss']
})
export class AccountComponent implements OnInit, OnDestroy {
@ViewChild('manualTransactionModal') manualTransactionModal!: ManualTransactionFormComponent
@ViewChild('csvTransactionModal') csvTransactionModal!: CsvTransactionFormComponent
@Input() activeAccounts: Account[] = []
accounts: Account[] = []
selectedAccount?: Account
data : string = 'noentry'
private subscription: Subscription[] = []
constructor(@Inject(fluxDispatcherToken) private dispatcher: Subject<FluxAction>, public store: FluxStore){}
ngOnInit() {
this.dispatcher.next(new FluxAction(FluxActionTypes.Load))
this.subscription.push(this.store.Accounts.subscribe((data) => {
if (data.length > 0) {
this.data = 'data'
this.accounts = data;
}
if (data.length === undefined) {
this.data = 'isloading'
}
if (data.length === 0) {
this.data = 'nodata'
this.accounts = [];
}
}))
}
openManualTransactionModal(account: Account) {
this.selectedAccount = account
this.manualTransactionModal.manualtransactionform.nativeElement.classList.add('is-active')
}
openCsvTransactionModal(account: Account) {
this.selectedAccount = account
this.csvTransactionModal.modal.nativeElement.classList.add('is-active')
}
ngOnDestroy() {
this.subscription.forEach((subscription) => {subscription.unsubscribe()})
}
}
And this is the Configuration for the @Inject(fluxDispatcherToken)
import { InjectionToken } from '@angular/core'
import { Subject } from 'rxjs'
import { FluxAction } from '../types/actions.type'
export const fluxDispatcherToken = new InjectionToken('fluxActions')
export const fluxActionSubject = new Subject<FluxAction>()
export const FLUX_CONFIG = [
{ provide: fluxDispatcherToken, useValue: fluxActionSubject },
]
Here is my test file spec.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { AccountComponent } from "./account.component";
import { FluxStore } from 'src/app/shared/services/flux-store';
import { fluxDispatcherToken } from 'src/app/shared/helpers/flux.configuration';
import { FluxAction, FluxActionTypes } from 'src/app/shared/types/actions.type';
import { Subject } from 'rxjs';
describe("AccountComponent", () => {
let component: AccountComponent;
let fixture: ComponentFixture<AccountComponent>;
let Store: FluxStore;
let dispatcher: Subject<FluxAction>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [AccountComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [
{ provide: FluxStore, useValue: {} },
{ provide: fluxDispatcherToken, useValue: new Subject<FluxAction>() },
],
imports: []
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(AccountComponent);
component = fixture.componentInstance;
fixture.detectChanges();
Store = TestBed.inject(FluxStore);
});
describe('method1', () => {
it('should ...', () => {
expect(component).toBeTruthy();
});
});
})
When I start to test there is a failure : TypeError: Cannot read properties of undefined (reading 'subscribe')