Montando componentes reales

ahora que se puede ver la navegacion entre rutas y verificar si despues de dar click en la ruta se crea y renderiza el componente de la ruta seleccionada.

pero estamos usando mock de componentes, ahora veamos como montar componentes reales

app.integration.spec.ts

import { routes  } from './app-routing.module';
import { AppModule  } from './app.module';

beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        AppModule,
        RouterTestingModule.withRoutes(routes)
      ],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();
  });

 it('should render OthersComponent when clicked', fakeAsync(() => {
    clickElement(fixture, 'others-link', true);
    tick(); // wait while nav...
    fixture.detectChanges(); // ngOnInit - OthersComponent

	expect(router.url).toEqual('/others');
    const element = query(fixture, 'app-others');
    expect(element).not.toBeNull();
  }));


  it('should render Pico-PreviewComponent when clicked', fakeAsync(() => {
    clickElement(fixture, 'pico-link', true);
    tick(); // wait while nav...
    fixture.detectChanges(); // ngOnInit - PicoPreviewComponent
    expect(router.url).toEqual('/pico-preview');
    const element = query(fixture, 'app-pico-preview');
    expect(element).not.toBeNull();
  }));