I am a fake restaurant component
' }, }) .compileComponents(); fixture = TestBed.createComponent(AppComponent); location = TestBed.inject(Location); router = TestBed.inject(Router); }); it('should create the app', () => { const app = fixture.componentInstance; expect(app).toBeTruthy(); }); it(`should have as title 'place-my-order'`, () => { const app = fixture.componentInstance; expect(app.title).toEqual('place-my-order'); }); it('should render title in a h1 tag', () => { fixture.detectChanges(); const compiled = fixture.nativeElement as HTMLElement; expect(compiled.querySelector('h1')?.textContent).toContain( 'place-my-order.com' ); }); it('should render the HomeComponent with router navigates to "/" path', fakeAsync(() => { fixture.detectChanges(); const compiled = fixture.nativeElement as HTMLElement; router.navigate(['']).then(() => { expect(location.path()).toBe(''); expect(compiled.querySelector('pmo-home')).not.toBe(null); }); })); it('should render the RestaurantsComponent with router navigates to "/restaurants" path', fakeAsync(() => { fixture.detectChanges(); const compiled = fixture.nativeElement as HTMLElement; router.navigate(['restaurants']).then(() => { expect(location.path()).toBe('/restaurants'); expect(compiled.querySelector('pmo-restaurant')).not.toBe(null); }); })); it('should render the DetailComponent with router navigates to "/restaurants/slug" path', fakeAsync(() => { fixture.detectChanges(); const compiled = fixture.nativeElement as HTMLElement; router.navigate(['restaurants/crab-shack']).then(() => { expect(location.path()).toBe('/restaurants/crab-shack'); expect(compiled.querySelector('pmo-detail')).not.toBe(null); }); })); it('should have the home navigation link href set to "/"', () => { fixture.detectChanges(); const compiled = fixture.nativeElement as HTMLElement; const homeLink = compiled.querySelector('li a'); const href = homeLink?.getAttribute('href'); expect(href).toEqual('/'); }); it('should have the restaurants navigation link href set to "/restaurants"', () => { fixture.detectChanges(); const compiled = fixture.nativeElement as HTMLElement; const restaurantsLink = compiled.querySelector('li:nth-child(2) a'); const href = restaurantsLink?.getAttribute('href'); expect(href).toEqual('/restaurants'); }); it('should make the home navigation link class active when the router navigates to "/" path', fakeAsync(() => { const compiled = fixture.nativeElement as HTMLElement; router.navigate(['']); fixture.detectChanges(); tick(); fixture.detectChanges(); const homeLinkLi = compiled.querySelector('li'); expect(homeLinkLi?.classList).toContain('active'); expect(compiled.querySelectorAll('.active').length).toBe(1); flush(); })); it('should make the restaurants navigation link class active when the router navigates to "/restaurants" path', fakeAsync(() => { const compiled = fixture.nativeElement as HTMLElement; router.navigate(['restaurants']); fixture.detectChanges(); tick(); fixture.detectChanges(); expect(location.path()).toBe('/restaurants'); const restaurantsLinkLi = compiled.querySelector('li:nth-child(2)'); expect(restaurantsLinkLi?.classList).toContain('active'); expect(compiled.querySelectorAll('.active').length).toBe(1); flush(); })); }); ``` ## Solution If you’ve implemented the solution correctly, the tests will pass when you run `npm run test`! Click to see the solution ✏️ Update **src/app/app-routing.module.ts** ``` import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { DetailComponent } from './restaurant/detail/detail.component'; import { RestaurantComponent } from './restaurant/restaurant.component'; const routes: Routes = [ { path: '', component: HomeComponent, }, { path: 'restaurants', component: RestaurantComponent, }, { path: 'restaurants/:slug', component: DetailComponent, }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], }) export class AppRoutingModule {} ``` ✏️ Update **src/app/restaurant/detail/detail.component.ts** ``` import { Component, OnDestroy, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Subject, takeUntil } from 'rxjs'; import { Restaurant } from '../restaurant'; import { RestaurantService } from '../restaurant.service'; @Component({ selector: 'pmo-detail', templateUrl: './detail.component.html', styleUrl: './detail.component.css' }) export class DetailComponent implements OnInit, OnDestroy { restaurant?: Restaurant; isLoading: boolean = true; private onDestroy$ = new Subject