Angular 2+ UI-具有相对 uiSref 的路由器单元测试

Question

我有一个 Angular 组件 (9.1.3)，上面有一个 UI-Router 相对路由：

<button class="ls-btn light-blue-btn new-btn" uiSref=".new">
  <span class="fa fa-plus"></span>
  <span class="new-btn-text">New Tournament</span>
</button>

<ui-view></ui-view>

当我运行应用程序时，一切都按我预期的那样工作，但是当对组件运行s 进行单元测试时，我得到一个错误：

No reference point given for path '.new'

单元测试的代码是最基本的：

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

import { TournamentsViewComponent } from './tournaments-view.component';
import { UIRouterModule } from '@uirouter/angular';
import { APP_BASE_HREF } from '@angular/common';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ UIRouterModule.forRoot() ],
      declarations: [ TournamentsViewComponent ],
      providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TournamentsViewComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

我曾尝试将一些状态添加到 UIRouterModule.forRoot()，但这会产生相同的错误 - 我也曾尝试将 /base 用于 APP_BASE_HREF。

我看过 uiSref 上的 UI-Router docs，其中提到

If a component template uses a relative uiSref, e.g., uiSref=".child", the reference is relative to that component's state.

添加状态无效，基础变体无效；有人可以帮我找到我丢失的东西吗？

Answer 1

我找到了解决方法。我不必保持相对路径直接，而是将模块的所有完全限定状态名称放入映射中，因此使用 StateService 的任何组件都可以准确地到达它想要的位置。

在配置文件中：

export const STATE_NAMES = {
  state1: some.place.in.app,
  state2: some.place.in.app.child1,
  state3: some.place.in.app.child2
}

然后组件中的一个函数来处理路由变化：

goToState () {
  this.stateService.go(STATE_NAMES.state2);
}

不确定这是否是 'right' 的方法，但它使代码保持整洁，所以这就是我要使用的方法。

Angular 2+ UI-具有相对 uiSref 的路由器单元测试

Angular 2+ UI-Router Unit test with relative uiSref

angular

unit-testing

angular-ui-router