0

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')

kayssmile
  • 1
  • 1
  • `{ provide: fluxDispatcherToken, useValue: new Subject() },`? The error tells already what the problem is. The object (`{}`) that you provided for the `fluxDispatcherToken` does not have a `next` method. It's only a plain javascript object. – Octavian Mărculescu Jan 10 '23 at 14:43
  • thx ! , but the next error is : TypeError: Cannot read properties of undefined (reading 'subscribe') . – kayssmile Jan 10 '23 at 14:47
  • You can update your question and see how that goes. Include the exception that you get now – Octavian Mărculescu Jan 10 '23 at 15:01

0 Answers0