Angular routerlink 路由测试错误

Question

我尝试测试应该从 /parent 路由到根路由器出口中的 /parent/child 的路由器链接点击。当我启动我的应用程序时一切正常，但在我的测试中我收到此错误消息：

Error: Cannot match any routes. URL Segment: 'child'

我的路线：

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

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

];

HTML 在应该路由到 /parent/child

的父级 (/parent)

<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。

Answer 1

您似乎在尝试测试 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
      }
    ]
  },

Angular routerlink 路由测试错误

Angular routerlink routes wrong in test

angular

testing

angular-routerlink