vendredi 7 juin 2019

Cannot read property 'value' of undefined - Angular 7 Ngrx Tests

I getting five errors of this type. I'm not sure why i getting it. I try a lot of ways to get this state but i can't go further. At this moment i just did't have any idea how to make test works. There is a test in typescript about of module:

import { getLandFilters } from './../../../store/land.store';
import { MockStore } from '@ngrx/store/testing';
import { SavedLandFilterComponent } from '../saved-land-filter/saved-land-filter.component';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { SavedLandFiltersPanelComponent } from './saved-land-filters-panel.component';
import { SavedLandFilterRangeComponent } from '../saved-land-filter-range/saved-land-filter-range.component';
import { ChipsSpaceComponent, ChipsState } from '../../../../../shared/chips/chips-space/chips-space.component';
import { ChipsComponent } from '../../../../../shared/chips/chips.component';
import { WindowButtonSmallComponent } from '../../../../../canvas/window/components/window-button-small/window-button-small.component';
import { WindowService } from '../../../../../canvas/window/services/window.service';
import { Store, StateObservable } from '@ngrx/store';
import { of } from 'rxjs';

describe('[SavedLandFiltersPanelComponent]', () => {
  let component: SavedLandFiltersPanelComponent;
  let fixture: ComponentFixture<SavedLandFiltersPanelComponent>;

  let storeMock;

  //let mockStore : MockStore<ChipsState>;
  //spyOn(mockStore, 'select').and.callThrough();
 // spyOn(mockStore, 'subscribe').and.callThrough();

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        SavedLandFiltersPanelComponent,
        SavedLandFilterComponent,
        SavedLandFilterRangeComponent,
        ChipsSpaceComponent,
        ChipsComponent,
        WindowButtonSmallComponent
      ],
      providers: [
        WindowService,
        //Store,
        //StateObservable
        {
          provide: Store,
          useValue: jasmine.createSpyObj('Store', ['subscribe', 'select', 'dispatch', 'pipe'])
          //useValue: mockStore
        }
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    storeMock = TestBed.get(Store);

    storeMock.dispatch.and.callThrough();

    storeMock.select.and.returnValue(of({}));

    fixture = TestBed.createComponent(SavedLandFiltersPanelComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

And there is some code which i want to test (it's not soo long, the issue of testing is inside of constructor):

import { getLandFilters } from './../../../store/land.store';
import { Component, OnInit } from '@angular/core';
import { ChipsState } from '../../../../../shared/chips/chips-space/chips-space.component';
import { Store } from '@ngrx/store';
import { Chips } from '../../../../../shared/chips/chips';
import { Subscription } from 'rxjs';


@Component({
  selector: 'app-saved-land-filters-panel',
  templateUrl: './saved-land-filters-panel.component.html',
  styleUrls: ['./saved-land-filters-panel.component.scss']
})
export class SavedLandFiltersPanelComponent implements OnInit {
  constructor(private store: Store<ChipsState>) {
    this.currentChipsSetsInStore = this.store
      .select(getLandFilters)
      .subscribe(s => (this.chips = s));
  }

  public chips: Chips[];
  public currentChipsSetsInStore: Subscription;

  public ngOnInit() {
  }
}

Aucun commentaire:

Enregistrer un commentaire