0

I'm trying to test a component that reads the Id param from the Activated route, currently my goal is to get the component to render correctly but I can't figure out why the test fails.

I have passed the ActivatedRoute in the same way for a similar component and there it worked without any problem.

Component:

@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']);
  }
}

Spec File

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();
  });
});
Oscar Fredriksson
  • 1
  • 1
  • 1
  • Hi Oscar, welcome to StackOverflow. :) What you have done with route.params looked fine to me, so I threw together a stackblitz with all the store details stripped out, just leaving your ngOnInit() to setting the id from params. As you can see, the test passes there. Guessing your actual issue is somewhere else - check it out here: https://stackblitz.com/edit/stackoverflow-q-53043528?file=app%2Fmy.component.spec.ts. My suggestion is to rewrite this test not using 'inject', I've had issues with that in the past. – dmcgrandle Oct 29 '18 at 20:53

2 Answers2

0

I've had a similar problem that I had to solve using paramMap:

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

convertToParamMap is in @angular/Router

Good Luck

Beartums
  • 1,340
  • 1
  • 10
  • 15
0

I had similar problem and it was also caused by this.route.data.subscribe in component. If somebody has similar problem the best way to investigate it is: Check console log in debug mode while run tests in Jasmine.

Kacpers
  • 173
  • 3
  • 6