karma-jasmine - 如何使用 karma-Jasmine 测试进行页面导航（路由）

1）测试一个使用导航的组件：当你做一个动作时应该调用导航方法（断言像 toHaveBeenCalled OR 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来测试不同的激活路由参数（只需配置然后传递给提供者，请参见示例）。组件 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 是一个允许您传递不同可配置值的函数，在我的例子中是激活的RouteParams）

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) ActivatedRoute 的存根，我们可以在其中推送参数 component.ts

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

karma-jasmine - 如何使用 karma-Jasmine 测试进行页面导航（路由）

问题描述

解决方案

推荐阅读