Angular 4 - Testing when a component has another component

Question

I am applying testing to my application of Angular:

ng test

This is my html file (page-not-found.component.html):

<menu></menu>
<div>
  <h4>
    ERROR 404 - PÁGINA NO ENCONTRADA
  </h4>
</div>

When I run ng test the component gives me error.

This the file spec (page-not-found.component.spec.ts)

import { MenuComponent } from '../menu/menu.component';

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ PageNotFoundComponent, MenuComponent ]
    })
    .compileComponents();
  }));

This is the component code (pàge-not-found.component.ts)

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-page-not-found',
  templateUrl: './page-not-found.component.html',
  styleUrls: ['./page-not-found.component.css']
})
export class PageNotFoundComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

This is the error:

Error: No provider for ActivatedRoute!

Could you tell me the problem? thanks

Answer 1

You need to provide a provider for ActivatedRoute in your Testbed. For example

 TestBed.configureTestingModule({
      declarations: [ PageNotFoundComponent, MenuComponent ],
providers: [
        {provide: ActivatedRoute, useValue: activatedRoute}, // using a mock
      ]
    })

Does that menucomponent needs te be in your not-found component?