Маршруты Angular routerlink неверны в тесте

Я пытаюсь протестировать щелчок маршрутизатора, который должен перенаправляться из /parent в /parent/child в корневом маршрутизаторе-выходе. Когда я запускаю свое приложение, все работает, но в моем тесте я получаю это сообщение об ошибке:

Ошибка: Не удается сопоставить ни одного маршрута. Сегмент URL: «дочерний»

Мои маршруты:

export const routes: Routes = [
  {
    path: 'parent',
    pathMatch: 'full',
    component: ParentComponent
  },

  {
    path: 'parent/child',
    component: ChildComponent
  }

];

HTML-код родителя (/parent), который должен перенаправляться в /parent/child

<a routerLink="./child">child</a>

это также работает, но не в тесте:

<a routerLink="child">child</a>

Мой тест:

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

  let location: Location;
  let router: Router;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule.withRoutes(routes),
        AppModule
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ParentComponent);
    component = fixture.componentInstance;
    router = TestBed.get(Router);
    location = TestBed.get(Location);
    fixture.detectChanges();
  });

  it('router to child test', fakeAsync(() => {
    router.navigate(["/parent"]);
    tick();
    expect(location.path()).toBe("/parent")
    fixture.debugElement.query(By.css("a")).nativeElement.click();
    tick();
    expect(location.path()).toBe("/parent/child");
  }));
});

Сам маршрут есть, потому что, когда я пытаюсь сделать что-то подобное, он работает:

 it('router to child test', fakeAsync(() => {
    router.navigate(["/parent"]);
    tick();
    expect(location.path()).toBe("/parent")
    //fixture.debugElement.query(By.css("a")).nativeElement.click();
    router.navigate(["/parent/child"]);

    tick();
    expect(location.path()).toBe("/parent/child");
  }));

Кажется, что мой тест не может напрямую обрабатывать routerLink.


angular testing angular-routerlink
person pL4Gu33    schedule 05.04.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, вы пытаетесь проверить внутреннюю работу Angular.

Вместо этого было бы достаточно проверить, имеет ли элемент правильное значение атрибута в routerLink, и доверить фреймворку правильность действий.

Что-то вроде этого:

  it('renders the correct routerLink attribute to the child component', () => {
    const anchor = fixture.debugElement.query(By.css('a'));

    expect(anchor.nativeElement.getAttribute('routerLink')).toEqual('./child');
  });

ОБНОВЛЕНИЕ

Да, во время модульного тестирования дочерний маршрут не добавляется к родительскому маршруту.

router.navigate(['./child']); // <-- not working

теперь вернемся к вашей исходной реализации:

router.navigate(["/parent/child"]); // <-- it works

теперь, чтобы заставить его работать с вашим html, вы можете изменить атрибут routerLink на это:

<a routerLink="/parent/child">child</a>

теперь ваш модульный тест пройдет.

  it('router to child test', fakeAsync(() => {
    router.navigate(['/parent']);
    tick();

    expect(location.path()).toBe('/parent');

    fixture.debugElement.query(By.css('a')).nativeElement.click();    
    tick();

    expect(location.path()).toBe('/parent/child');
  }));

Также обратите внимание на атрибут children в конфигурации маршрута, чтобы создать настоящие дочерние маршруты. Что-то вроде этого:

  {
    path: 'parent',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent
      }
    ]
  },
person robert    schedule 05.04.2020
comment
я понимаю вашу аргументацию. Я думаю, что это немного сбивает с толку, потому что когда я вызываю routerlink с /parent, он работает. Но я не могу направить маршрут от /parent к /parent/child в своем тесте, потому что модуль тестового маршрутизатора не распознает, что он должен добавить /child к текущему /parent маршруту. Это правильно? И нет возможности сделать это? - person pL4Gu33; 06.04.2020
comment
спасибо за редактирование .... Иметь всю ссылку сразу, как /parent/child только для тестирования, для меня не очень приятно, потому что я хочу использовать дочерний элемент в разных родителях, но теперь я буду придерживаться вашего первого решения. Спасибо. - person pL4Gu33; 06.04.2020