TypeError: Невозможно прочитать свойство '0' из неопределенного при чтении параметров ActivatedRoute - Angular 6 тестирования в Jasmine / Karma - PullRequest
Новая
       17

TypeError: Невозможно прочитать свойство '0' из неопределенного при чтении параметров ActivatedRoute - Angular 6 тестирования в Jasmine / Karma

0 голосов
/ 29 октября 2018

Я пытаюсь протестировать компонент, который считывает параметр Id из Активированного маршрута, в настоящее время моя цель состоит в том, чтобы заставить компонент правильно отображаться, но я не могу понять, почему тест не пройден.

Я передал ActivatedRoute таким же образом для аналогичного компонента, и там он работал без проблем.

Компонент: 

@Component({
  selector: 'app-recipe-detail',
  templateUrl: './recipe-detail.component.html',
  styleUrls: ['./recipe-detail.component.css']
})
export class RecipeDetailComponent implements OnInit {
   recipeState: Observable<fromRecipe.State>;
   id: number;
  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private store: Store<fromRecipe.FeatureState>
    ) { }

   // pass the "id" to return the index of the array
  ngOnInit() {
    this.route.params
      .subscribe((params: Params) => {
      this.id = +params['id'];
      this.recipeState = this.store.select('recipes');
    });
  }

  onAddToShopping() {
    this.store.select('recipes').pipe(take(1)).subscribe((recipeState: fromRecipe.State) => {
      this.store.dispatch(new ShoppingListAction.AddIngredients(recipeState.recipes[this.id].ingredients));
    });
  }

  onEditRecipe() {
    this.router.navigate(['edit'], {relativeTo: this.route});
  }

  onDeleteRecipe() {
    this.store.dispatch(new RecipeActions.DeleteRecipe(this.id));
    this.router.navigate(['./recipes']);
  }
}

Спецификация 

describe('Recipe Detail Component should', () => {
  let fixture: ComponentFixture<RecipeDetailComponent>;
  let component: RecipeDetailComponent;
  let store: TestStore<any>;
  const router = {
    navigate: jasmine.createSpy('navigate')
  };
  let dispatchSpy;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ RecipeDetailComponent ],
      imports: [RouterTestingModule],
      providers: [
        {provide: Store, useClass: TestStore},
        { provide: Router, useValue: router },
        {
          provide: ActivatedRoute,
          useValue: {
            params: of({ id: 0 })
          }
        }],
    }).compileComponents();
  });

  beforeEach(async(inject([Store], (testStore: TestStore<any>) => {
    store = testStore;
    testStore.setState({initialState});
    fixture = TestBed.createComponent(RecipeDetailComponent);
    component = fixture.debugElement.componentInstance;
    fixture.detectChanges();
  })));

  it('render correctly', () => {
    console.log(component);
    expect(component).toBeTruthy();
  });
});

1 Ответ

0 голосов
/ 29 октября 2018

У меня была похожая проблема, которую мне пришлось решить с помощью paramMap: 

providers: [
    { provide: ActivatedRoute, useValue: {
            paramMap: of( convertToParamMap( { id: 0 } ) )
        }
    }
],

convertToParamMap в @angular/Router

Удачи

...