如何使用karma-Jasmine测试进行页面导航(路由)

Question

我正在编写angular (Karma-Jasmine)测试用例，我想在页面之间导航。如何使用karma-Jasmine在页面之间导航。

Answer 1

1)测试使用导航的组件:执行操作时应调用导航方法(如toHaveBeenCalled或toHaveBeenCalledWith之类的断言)

it('should redirect the user to the users page after saving', () => {
  let router = TestBed.get(Router);
  let spy = spyOn(router, 'navigate');

  component.save();

  expect(spy).toHaveBeenCalledWith(['users'])
});

2)还要测试您的路由是否将使用正确的组件

app.routes.spec.ts
import { routes } from './app.routes'

it('should contain a route for users', () => {
  expect(routes).toContain({path: 'users', component: UserComponent})
});

3)您可以使用useValue来测试不同的activatedRouteParams (只需配置然后传递给providers，参见示例)。组件ts文件示例：

ngOnInit() {
  this.contextType = this.route.snapshot.paramMap.get('contextType');
  this.contextId = this.route.snapshot.paramMap.get('contextId');
  this.contextFriendlyId = this.route.snapshot.paramMap.get('contextFriendlyId');
}

规范文件(configureTestData是一个允许您传递不同可配置值的函数，在我的例子中是activatedRouteParams)

export function configureTestData(activatedRouteParams) {
  beforeEach(async(() => {
     TestBed.configureTestingModule({
        declarations: [SetUpComponent],
        imports: [RouterTestingModule],
        providers: [
           {
              provide: ActivatedRoute, useValue: activatedRouteParams
           }
        ]
     });
  }));
}


describe('SetUp Component:Folder ', () => {
  let component: SetUpComponent;
  let fixture: ComponentFixture<SetUpComponent>;


  configureTestData({
     snapshot: {
        paramMap: convertToParamMap({
           contextType: 'Folder',
           contextId: 'FX6C3F2EDE-DB25-BC3D-0F16-D984753C9D2E',
           contextFriendlyId: 'FX17373'
        })
     }
  });

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

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

  it('should create alert with required properties', () => {
     expect(component.contextType).toEqual('Folder);

   .... etc
  });
});

4) router-outlet和routerLink模板文件：

<nav>
  <a routerLink="todos"></a>
</nav>
<router-outlet></router-outlet> 

beforeEach(() => {
  TestBed.configureTestingModule({
     imports: [RouterTestingModule.withRoutes([])],
     declarations: [AppComponent]
  });
});

it('should have router outlet', () => {
  let de = fixture.debugElement.query(By.directive(RouterOutlet));

  expect(de).not.toBeNull();
});

it('should have a link to todos page', () => {
  let debugElements = fixture.debugElement.queryAll(By.directive(RouterLinkWithHref));

  let index = debugElements.findIndex(de => de.properties['href'] === '/todos');
  expect(index).toBeGreaterThan(-1);
});

5)我们可以推送参数component.ts的ActivatedRoute存根

    ngOnInit() {
        this.route.params.subscribe(p => {
            if (p['id'] === 0) {
                this.router.navigate(['not-found']);
            }
        });
    }

规范文件：

class RouterStub {
  navigate(params) {}
}


class ActivatedRouteStub {
  private subject = new Subject();


  get params () {
     return this.subject.asObservable();
  }

  push(value) {
     this.subject.next(value);
  }
}


describe('Navigation Testing', () => {

  beforeEach(() => {
     TestBed.configureTestingModule({
        imports: [],
        providers: [
           {provide: Router, useClass: RouterStub},
           {provide: ActivatedRoute, useClass: ActivatedRouteStub}
        ]
     });
  });

  it('should navigate to invalid page when invalid params passed', () => {
     let router = TestBed.get(Router);
     let spy = spyOn(router, 'navigate');

     let route: ActivatedRouteStub = TestBed.get(ActivatedRoute);
     route.push({id: 0});

     expect(spy).toHaveBeenCalledWith(['not-found'])
  });
});