Question

我正在测试一个角度组件（导航栏），该组件根据路线显示不同的信息，并且隐藏了一些菜单按钮。所以我需要在运行测试之前更改路由。我以为这很容易（也许是这样），但不知道如何完成。所有搜索结果都与测试路由模块自身有关。

navbar.component.spec.ts

describe('Navbar Component', () => {
  let router: Router;
  // Other definitions...

  beforeEach(async(() => {
    // Configuring Testbed etc...
  }))

  describe('routes A', () => {
    beforeEach(async(() => {
      router = TestBed.get(Router)
      router.navigate(['/', 'a']);
    }))

    it('should show the relevant links', async(() => {
      // Testing code
    }))
  })
})

上面的代码给我错误Error: Cannot match any routes. URL Segment: 'a'。如何在测试中更改路线？

在组件中，我要测试的更改如下所示：

navbar.component.ts

ngOnInit () {
  this.router.events
  .subscribe((routerEvent: Event) => {
    if (routerEvent instanceof NavigationStart) {
      // Do stuff
    }
  });
}

Answer 1

您可以使用routerLink以<角度>在 app-routing.module.ts 中的路线之间导航：<h1>routerLink="/search"</h1>

如果您想更改路线路径，可以进入 app-routing.module.ts 。希望对您有所帮助！

Answer 2

在路由器上进行测试的最简单方法是使用RouterTestingModule而不是模拟路由器。应该从@angular/router/testing

导入

import { RouterTestingModule } from '@angular/router/testing';
import { Router, NavigationStart } from '@angular/router';

在配置TestBed时将其添加到导入中

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [ myComponent ],
    imports: [ RouterTestingModule ],
    providers: []
  })
  .compileComponents();
}));

现在，您可以在测试期间在路由器上发出事件：

it('sets logged in to true if the url includes \'login\'', () => {
  const router = TestBed.get(Router);
  router.events.next(new NavigationStart(1, '/a'));

  // expect...
});

请注意，我尚未将路由器强制转换为Router。这将阻止您在router.events上进行下一步呼叫，因为路由器事件是可观察到的。

如何导航到测试中的新路线

2 个答案: