茉莉花香试验在带有侧面的侧面导航

Question

我有一个带有这样路由的组件：

<div>
  <div class="d-flex px-2 py-3">
    <a
      class="navbar-brand p-0"
      aria-label="AdAsia"
      [routerLink]="[routes.pages.dashboard.children.home.link]"
    >
      <app-logo [logoType]="logoType"></app-logo>
    </a>
  </div>

  <nav class="nav flex-column mb-4 flex-column">
    <p
      class="nav-item w-100 rounded-sm mb-2"
      #home="routerLinkActive"
      [routerLinkActive]="['active']"
    >
      <a
        class="nav-link text-m text-truncate p-1"
        [routerLink]="[routes.pages.dashboard.children.home.link]"
      >
        <svg-icon [hidden]="!home.isActive" src="assets/svg/dooh-dashboard-dark.svg"></svg-icon>
        <svg-icon [hidden]="home.isActive" src="assets/svg/dooh-dashboard-light.svg"></svg-icon>
        {{ 'PAGES.DASHBOARD.NAME' | translate }}
      </a>
    </p>
    <p
      class="nav-item w-100 rounded-sm mb-2"
      #report="routerLinkActive"
      [routerLinkActive]="['active']"
    >
      <a
        class="nav-link text-m text-truncate p-1"
        [routerLink]="[routes.pages.dashboard.children.reports.link]"
      >
        <svg-icon [hidden]="!report.isActive" src="assets/svg/report-dark.svg"></svg-icon>
        <svg-icon [hidden]="report.isActive" src="assets/svg/report-light.svg"></svg-icon>
        {{ 'PAGES.REPORTS.NAME' | translate }}
      </a>
    </p>
  </nav>
</div>

我尝试使用以下方法进行测试：

import { ComponentFixture, TestBed } from '@angular/core/testing'
import { NO_ERRORS_SCHEMA } from '@angular/core'
import { TranslateModule } from '@ngx-translate/core'

import { LogoTypeEnum } from '@app/types'
import { SidenavComponent } from './sidenav.component'

describe('SidenavComponent', () => {
  let component: SidenavComponent
  let fixture: ComponentFixture<SidenavComponent>

  beforeEach(() => {
    TestBed.configureTestingModule({
      schemas: [NO_ERRORS_SCHEMA],
      declarations: [SidenavComponent],
      imports: [TranslateModule.forRoot()],
    })
    fixture = TestBed.createComponent(SidenavComponent)
    component = fixture.componentInstance
  })

  it('can load instance', () => {
    expect(component).toBeTruthy()
  })

  it('logoType has default value', () => {
    expect(component.logoType).toEqual(LogoTypeEnum.DARK)
  })
})

但是我有一个routerActiveLink不存在错误。

所以我在另一个答案之后创建一个像这样的存根

import { Directive, Input, HostListener } from '@angular/core'

@Directive({
  /* tslint:disable-next-line */
  selector: '[routerLink]',
})
export class RouterLinkStubDirective {
  /* tslint:disable-next-line */
  @Input('routerLink') linkParams: any
  navigatedTo: any = null

  @HostListener('click')
  onClick() {
    this.navigatedTo = this.linkParams
  }
}

并更新了茉莉花测试

@Component({
  template: ``,
})
export class HomeComponent {}

@Component({
  template: ``,
})
export class EditComponent {}

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
  },
  {
    path: 'edit',
    component: EditComponent,
  },
]

describe('SidenavComponent', () => {
  let component: SidenavComponent
  let fixture: ComponentFixture<SidenavComponent>
  let router: Router

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      schemas: [NO_ERRORS_SCHEMA],
      imports: [RouterTestingModule.withRoutes(routes), TranslateModule.forRoot()],
      declarations: [SidenavComponent, RouterLinkStubDirective, HomeComponent, EditComponent],
    }).compileComponents()
  }))

  beforeEach(() => {
    fixture = TestBed.createComponent(SidenavComponent)
    component = fixture.componentInstance
    router = TestBed.get(Router)
    fixture.detectChanges()
  })

  it('can be instantiated', () => {
    expect(component).not.toBeNull()
  })
})

但现在我得到了can't find property pages of undefined

但是我不知道这是从哪里来的。

我该如何解决？

Answer 1

最好的方法是正确模拟它，例如尝试使用ng-mocks。