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 render the OrderComponent with router navigates to "/restaurants/slug/order" path', fakeAsync(() => { fixture.detectChanges(); const compiled = fixture.nativeElement as HTMLElement; router.navigate(['restaurants/crab-shack/order']).then(() => { expect(location.path()).toBe('/restaurants/crab-shack/order'); expect(compiled.querySelector('pmo-order')).not.toBe(null); }); })); it('should render the HistoryComponent with router navigates to "/order-history" path', fakeAsync(() => { fixture.detectChanges(); const compiled = fixture.nativeElement as HTMLElement; router.navigate(['order-history']).then(() => { expect(location.path()).toBe('/order-history'); expect(compiled.querySelector('pmo-history')).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(); })); }); ``` - **src/app/order/history/history.component.spec.ts** ``` import { NO_ERRORS_SCHEMA } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { Observable, of } from 'rxjs'; import { ItemTotalPipe } from '../../item-total.pipe'; import { ListComponent } from '../list/list.component'; import { Order, OrderService } from '../order.service'; import { HistoryComponent } from './history.component'; class MockOrderService { getOrders(): Observable<{ data: Order[] }> { return of({ data: [ { address: '', items: [ { name: 'Onion fries', price: 15.99 }, { name: 'Roasted Salmon', price: 23.99 }, ], name: 'Client 1', phone: '', restaurant: 'uPkA2jiZi24tCvXh', status: 'new', _id: '0awcHyo3iD6CpvhX', }, { address: '', items: [ { name: 'Steak Tacos', price: 15.99 }, { name: 'Guacamole', price: 3.99 }, ], name: 'Client 2', phone: '', restaurant: 'uPkA2jiZi24tCvXh', status: 'preparing', _id: '0awcHyo3iD6CpvhX', }, { address: '', items: [ { name: 'Mac & Cheese', price: 15.99 }, { name: 'Grilled chicken', price: 23.99 }, ], name: 'Client 3', phone: '', restaurant: 'uPkA2jiZi24tCvXh', status: 'delivery', _id: '0awcHyo8iD7XjahX', }, { address: '', items: [ { name: 'Eggrolls', price: 5.99 }, { name: 'Fried Rice', price: 18.99 }, ], name: 'Client 4', phone: '', restaurant: 'uPkA2jiZi24tCvXh', status: 'delivered', _id: '1awcJyo3iD6CpvhZ', }, ], }); } } describe('HistoryComponent', () => { let component: HistoryComponent; let fixture: ComponentFixtureMark as:
Mark as: