Angular 2+ UI-Router Unit test с относительным 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>

Когда я запускаю приложение, все работает так, как я ожидал , но когда запускается модульный тест для компонента, я получаю сообщение об ошибке:

No reference point given for path '.new'

Код для модульного теста примерно такой же basi c, как он получает:

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.

Я был по UI-Router docs на uiSref, где упоминается

Если в шаблоне компонента используется относительный uiSref, например, uiSref = ". child", ссылка относится к состояние этого компонента.

Добавление состояний не сработало, варианты основы не работают; может кто-нибудь помочь мне найти то, что мне не хватает?

Answer 1

Я нашел обходной путь. Вместо того, чтобы сохранять прямые относительные маршруты, я помещаю все полные имена состояний для модуля на карту, поэтому любой компонент, использующий StateService, может go именно там, где он хочет.

В config:

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);
}

Не уверен, что это «правильный» способ сделать это, но он сохраняет код красивый и чистый, поэтому я собираюсь использовать go.