title: How to Unit Test Angular 2 route firstChild
body: <p>In my Angular 4, I have this code. </p>
  
  <p>I want to unit test for <code>ngOnInit()</code>, but not getting any solution for <code>this.route.firstChild</code>.</p>
  
  <p>It showing Error as Cannot read property firstChild of undefined. </p>
  
  <pre><code>ngOnInit() {
      try {
  
           /*Subscription for routing outlet*/
          this.route.firstChild.queryParams.takeUntil(this.ngUnsubscribe).subscribe(params =&gt; {
              if (this.ViewMode == 'single' &amp;&amp; params.ViewMode == 'Grid') {
                  this.grid = (params.ViewMode == 'Grid' ? true : false);
                  this.ActivaPageNo = 0;
                  this.GridPagination(this.fdcTreeData, 4, 0, 'Data');
              }
              this.ViewMode = params.ViewMode;
          });
          this.grid = (this.ViewMode == 'Grid' ? true : false);
          if (this.grid == false) {
              this.singleView()
          }
          this.fdcTreeData = this.commonService.FDCMainLocationsForForms;
          this.date = new FormControl(new Date());
          if (this.date) {
              this.commonService.fdcDate = "" + this.date.value.getDate() + (this.date.value.getMonth() + 1) + this.date.value.getFullYear();
          }
      } catch (e) {
          console.error('Exception in ngOnInit() of  FDCGridTemplateComponent at time ' + new Date().toString() + '. Exception is : ' + e);
          this.logger.logException(new Error('Exception in ngOnInit() of FDCGridTemplateComponent at time ' + new Date().toString() + '. Exception is : ' + e));
      }  
  }
  </code></pre>
  
  <p>This is my test case</p>
  
  <p>describe('FdcgridTemplateComponent', () => {</p>
  
  <pre><code>let Excomponent: FdcgridTemplateComponent;
  let fixture: ComponentFixture&lt;FdcgridTemplateComponent&gt;;
  let dialog: MatDialog;
  let commonservice: CommonService;
  let fdcservice: FDCService;
  let mockRouter: any;
  let mockActivatedRoute: any;
  beforeEach(async(() =&gt; {
  
      mockRouter = sinon.createStubInstance(Router);
      mockActivatedRoute = sinon.createStubInstance(ActivatedRoute);
      TestBed.configureTestingModule({
      declarations: [FdcgridTemplateComponent],
      imports: [OverlayModule, 
          HttpModule, RouterTestingModule,
          FormsModule, ReactiveFormsModule,
          BrowserAnimationsModule, MatDialogModule],
          providers: [MatDialog, CommonService, Http,  ConnectionBackend, ActivitiesService, CollaborationService, FDCService, MessagingService, AppInsightsService,
              { provide: 'instrumentationKey', useValue: '36935597-7d97-4635-ab0b-409a8c6e4223' },
              { provide: 'BASE_URL', useValue: 'http://localhost' },
              { provide: 'BASE_URL', useValue: "http://localhost" },
              { provide: ComponentFixtureAutoDetect, useValue: true },
              { provide: MatDialogRef, useValue: { close: (dialogResult: any) =&gt; { } } },
              { provide: MAT_DIALOG_DATA, useValue: [] },
              { provide: ActivatedRoute, useValue: mockActivatedRoute },
              { provide: Router, useValue: mockRouter },
          ComponentFactoryResolver, FdcgridTemplateComponent],
          schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
      }).compileComponents();
    dialog = TestBed.get(MatDialog);
  }));
  beforeEach(inject([FdcgridTemplateComponent], (component) =&gt; {
      Excomponent = component;
  }));
  beforeEach(inject([CommonService], Cservice =&gt; {
      commonservice = Cservice;
  }));
  beforeEach(inject([FDCService], Fservice =&gt; {
      fdcservice = Fservice;
  }));
  
  describe('#ngOnInit', () =&gt; {
      it('should ...', () =&gt; {
          mockActivatedRoute.snapshot = { params: { routeParam1: 'grid', routeParam2: 'Single' } };
          mockRouter.currentRouterState = { snapshot: { queryParams: { viewPage: 'Single' } } };
          Excomponent.ngOnInit();
      });
  });
  </code></pre>
  
  <p>});</p>