Question

我正在尝试为我的导航栏组件创建单元测试。此组件是应用程序的父容器。由于某些原因，业力不断给我这个错误，我无法在互联网上找到它的任何参考或如何解决它。任何帮助都会很棒，谢谢

navBar.comp.spec.ts

    import { APP_BASE_HREF } from '@angular/common';
    import { By } from '@angular/platform-browser';
    import { ComponentFixture, ComponentFixtureAutoDetect, TestBed , async} from '@angular/core/testing';
    import { Router, ActivatedRoute, RouterModule, Routes } from '@angular/router';
    import { MdTabsModule } from '@angular/material';
    import { Observable } from 'rxjs';
    import { NavBarComponent } from './navBar.component';

    describe('NavBarComponent', () => {
        let comp: NavBarComponent;
        let fixture: ComponentFixture<NavBarComponent>;

        beforeEach(() => {
            const routes: Routes = [
                {
                  path: '',
                  component: NavBarComponent,
                }
            ];
            const routerStub = {
                events: Observable.of('/')
            };
            const activatedRouteStub = {
              params: Observable.of({'id': 1})
            };
            TestBed.configureTestingModule({
                declarations: [ NavBarComponent ],
                providers: [
                    { provide: Router, useValue: routerStub },
                    { provide: ActivatedRoute, useValue: activatedRouteStub },
                    { provide: APP_BASE_HREF, useValue: '/' },
                    { provide: ComponentFixtureAutoDetect, useValue: true }
                ],
                imports: [ MdTabsModule, MdTabsModule, RouterModule.forRoot(routes) ],
            });
            spyOn(NavBarComponent.prototype, 'setActiveIndex');
            spyOn(NavBarComponent.prototype, 'getActiveIndex');
            fixture = TestBed.createComponent(NavBarComponent);
            comp = fixture.componentInstance;
        });

        it('should set navbmobile', async(() => {
          fixture.detectChanges();

          fixture.whenStable().then(() => {
            fixture.detectChanges();
            expect(fixture.debugElement.query(By.css('#navBMobile')).nativeElement.style.display).toBe("");
          })
        }))

    });

navBar.comp.html

    <nav [style.display]="style" id="navB" md-tab-nav-bar aria-label="Navigation links">
      <a md-tab-link
        *ngFor="let routeLink of routeLinks; let i = index"
        [routerLink]="routeLink.link"
        [active]="activeLinkIndex === i"
        (click)="activeLinkIndex = i">
        {{routeLink.label}}
      </a>
    </nav>

    <nav [style.display]="style" id="navBMobile" md-tab-nav-bar aria-label="Navigation links">
      <md-card id="mobileNav">
      <a md-tab-link
        *ngFor="let routeLink of mobileRouteLinks; let i = index"
        [routerLink]="routeLink.link"
        [active]="activeLinkIndex === i"
        (click)="activeLinkIndex = i"
        style="width:10%">
        <div class="mobileButtons" [innerHtml]="routeLink.label"></div>
      </a>
      </md-card>
    </nav>

    <router-outlet></router-outlet>

navBar.comp.ts

    import { Component } from '@angular/core';
    import { Router } from '@angular/router';

    @Component({
      selector: 'app-nav-bar',
      templateUrl: 'navBar.component.html'
    })
    export class NavBarComponent {
      public activeIndex = 2 ;
      activeLinkIndex: number;
      mobileRouteLinks: any[];
      routeLinks: any[];
      style: string;

      constructor(
        private router: Router
      ) {
        this.style = 'none';

        router.events.subscribe((url: any) => {
          this.setActiveIndex(url.url);
          this.activeLinkIndex = this.getActiveIndex();
        });

        this.routeLinks = [
          {label: 'Profile', link: '/profile/', index: '0'},
          {label: 'Notifications', link: '/notifications/', index: '1'},
          {label: 'Home', link: '', index: '2'},
          {label: 'My Posts', link: '/posts/', index: '3'},
          {label: 'Create a Post', link: '/create/', index: '4'}
        ];

        this.mobileRouteLinks = [
          {label: '<i class="material-icons">perm_identity</i>', link: '/profile/', index: '0'},
          {label: '<i class="material-icons">notifications_none</i>', link: '/notifications/', index: '1'},
          {label: '<i class="material-icons">home</i>', link: '', index: '2'},
          {label: '<i class="material-icons">content_copy</i>', link: '/posts/', index: '3'},
          {label: '<i class="material-icons">create</i>', link: '/create/', index: '4'}
        ];
      }

      setActiveIndex(s: string) {
        if (s === '/profile') {
          this.activeIndex = 0;
        } else if (s === '/notifications') {
          this.activeIndex = 1;
        } else if (s === '/') {
          this.activeIndex = 2;
        } else if (s === '/posts') {
          this.activeIndex = 3;
        } else if (s === '/create') {
          this.activeIndex = 4;
        }
      }

      getActiveIndex(): number {
        return this.activeIndex;
      }
    }

Answer 1

当您在单元测试中为Router提供存根时，您还需要在存根中定义函数（代码应该有效）：

const routerStub = {
    events: Observable.of('/'),
    createUrlTree: (commands, navExtras = {}) => {}
};

TypeError：this.router.createUrlTree不是函数

1 个答案: