title: How to test angular 7 component with ActiveRoute.snapshot.data and Router?
body: <p>I have a <code>TitleComponent</code> that uses <code>ActivedRoute.snapshot.data</code> and <code>Router</code> to update data from <code>app-routing</code>.</p>
  
  <p>This is my <code>app-routing.module</code></p>
  
  <pre><code>export const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
  
    {
      path: 'home',
      component: MainHomeComponent,
      data: {
        title: 'Home',
      }
    },
  
  
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled',
      anchorScrolling: 'enabled',
      scrollOffset: [0, 64] // [x, y]
    } )],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>and this is my <code>TitleComponent.ts</code></p>
  
  <pre><code>export class TitleComponent implements OnInit {
    titleTab: string;
    subTitle: string;
    isTablet$: Subscribable&lt;boolean&gt; = this.breakpointsService.isTablet$;
    constructor(private router: Router, private route: ActivatedRoute, private breakpointsService: BreakpointsService) {
      this.router.events.subscribe((data) =&gt; {
        if (data instanceof NavigationEnd) {
          console.log('title is= ',this.route.snapshot.data['title']);
          // console.log(this.route.root.firstChild.snapshot.data.subTitle);
          this.titleTab = this.route.snapshot.data['title'];
          if (this.route.snapshot.data['subTitle']) {
            this.subTitle = this.route.snapshot.data['subTitle'];
          } else {
            this.subTitle = '';
          }
        }
      });
    }
  
    ngOnInit() {
  
    }
  
  }
  </code></pre>
  
  <p>Now i want to test  my TitleComponent. For example, when i navigate to home, i want to have <code>titleTab === Home or Actived.snapshot.data['title'] = Home</code></p>
  
  <p>How do it? I tried many ways buti always have errors.</p>
  
  <p>My spec.ts</p>
  
  <pre><code> fdescribe('TitleComponent', () =&gt; {
        let component: TitleComponent;
        let fixture: ComponentFixture&lt;TitleComponent&gt;;
        let location: Location;
        let router: Router;
        // let route: ActivatedRoute;
        const mockActivedRoute = jasmine.createSpyObj('ActivatedRoute', ['get']);
        const testRouter = jasmine.createSpyObj('Router', ['get'])
        const route = ({ data: of({ title: 'home' }) } as any) as ActivatedRoute;
  
  
        beforeEach(async(() =&gt; {
          TestBed.configureTestingModule({
            declarations: [
              TitleComponent,
              HomeComponent,
              SearchComponent,
              AppComponent,
              MainHomeComponent,
            ],
            providers: [
              {
                provide: ActivatedRoute,
                useValue: {
                  snapshot: {
                    data: { title: 'home' }
                  }
                },
              }
            ],
            imports: [RouterTestingModule.withRoutes(routes)],
            schemas: [NO_ERRORS_SCHEMA],
          }).compileComponents();
  
          router = TestBed.get(Router);
          location = TestBed.get(Location);
          router.initialNavigation();
        }));
  
        beforeEach(() =&gt; {
          fixture = TestBed.createComponent(TitleComponent);
          component = fixture.componentInstance;
          fixture.detectChanges();
        });
  
  
  
        // It doesn't works with mock
  
        it('test home data', fakeAsync(() =&gt; {
          router.navigate(['/home']);
          tick();
          expect(route.snapshot.data.title).toBe('title');
  
  
           }));
  
      // It doesn't works with component
       //it('test ', fakeAsync(() =&gt; {
          //router.navigate(['/home']);
          //tick();
          //expect(component.titleTab).toBe('home');
     // }));
  </code></pre>
  
  <p>Help me please.</p>