router-test.ts

import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';

import { BreadcrumbComponent } from './breadcrumb.component';
import { RouterTestingModule } from '@angular/router/testing';
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { By } from '@angular/platform-browser';
import { HttpClientTestingModule } from '@angular/common/http/testing';

describe('BreadcrumbComponent', () => {
  @Component({
    template: ``,
  })
  class MockPageComponent {}

  @Component({
    template: ` <router-outlet name="testing"></router-outlet>`,
  })
  class MockViewComponent {}

  @Component({
    template: `
      <breadcrumb [rootLabel]="rootLabel" [showTitle]="showTitle"></breadcrumb>
      <router-outlet></router-outlet>
    `,
  })
  class HostComponent {
    rootLabel = 'Test Root Page';
    showTitle = true;
  }

  let component: HostComponent;
  let fixture: ComponentFixture<HostComponent>;
  let router: Router;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule,
        RouterTestingModule.withRoutes([
          {
            path: 'page-1',
            component: MockViewComponent,
            data: {
              breadcrumbTitle: 'Test Page Breadcrumb',
              pageTitle: 'Test Page Title',
            },
            children: [
              {
                path: 'sub-page-1',
                component: MockPageComponent,
                outlet: 'testing',
                data: [
                  {
                    breadcrumbTitle: 'Test Sub-Page Breadcrumb',
                    pageTitle: 'Test Sub-Page Title',
                  },
                ],
              },
              {
                path: '',
                pathMatch: 'full',
                component: MockPageComponent,
                outlet: 'testing',
              },
            ],
          },
          {
            path: '',
            pathMatch: 'full',
            component: MockViewComponent,
          },
        ]),
      ],
      declarations: [BreadcrumbComponent, MockViewComponent, MockPageComponent, HostComponent],
    }).compileComponents();
  });

  beforeEach(() => {
    router = TestBed.inject(Router);

    fixture = TestBed.createComponent(HostComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  afterEach(async () => {
    await router.navigate(['']);
  });

  it('should create the host component', () => {
    expect(component).toBeTruthy();
  });

  it(
    'should render the passed root label',
    waitForAsync(async () => {
      await router.navigate(['page-1']);
      fixture.detectChanges();
      await fixture.whenStable();

      const rootLink = fixture.debugElement.query(By.css('.root a > span'));
      expect(rootLink.nativeElement.textContent).toBe('Test Root Page');
    }),
  );

  /**
   * We only go to page 1 in the tests and we cannot test with named outlets
   */

  it(
    'should render the page breadcrumb as a leaf',
    waitForAsync(async () => {
      await router.navigate(['page-1']);
      fixture.detectChanges();
      await fixture.whenStable();
      const leaf = fixture.debugElement.query(By.css('.leaf > span'));
      expect(leaf.nativeElement.textContent).toBe('Test Page Breadcrumb');
    }),
  );

  it(
    'should render the page title for a leaf',
    waitForAsync(async () => {
      await router.navigate(['page-1']);
      fixture.detectChanges();
      await fixture.whenStable();

      const rootLink = fixture.debugElement.query(By.css('.page-title'));
      expect(rootLink.nativeElement.textContent).toBe('Test Page Title');
    }),
  );

  it(
    'should not render the page title for a leaf if showTitle is false',
    waitForAsync(async () => {
      component.showTitle = false;
      await router.navigate(['page-1']);
      fixture.detectChanges();
      await fixture.whenStable();

      const rootLink = fixture.debugElement.query(By.css('.page-title'));
      expect(rootLink).toBeNull();
    }),
  );
});