使用Jasmine测试Angular queryParams

汤姆·拉奇

StackBlitz示例

我希望能够测试从一种视图传递到另一种视图的参数。我想测试一下参数是否存在,并且该参数是否与我提供的模拟测试数据匹配。

我是单元测试的新手,在阅读有关激活路线的测试以及传递参数方面做了大量的研究。我认为我坚持的是“期望”。它给我一个错误

Argument of type '{ urn: string[]; }' is not assignable to parameter of type 'Expected<Observable<Params>>'

零件

 export class SearchComponent implements OnInit {
  constructor(private route: ActivatedRoute, private router: Router) {
    this.getParam();
  }

  ngOnInit() {
  }

  getParam():void {
    this.route.queryParams.subscribe(params => {
      console.log(params["urn"]);
    });
}
}

规格

providers: [
        HttpClient,
        {
          provide: ActivatedRoute,
          useValue: {
            queryParams: of({
              urn: '123'
            })
          }
        }
      ],
...

  it('test queryParam in route', () => {
    const activatedRoute: ActivatedRoute = fixture.debugElement.injector.get(ActivatedRoute);

    activatedRoute.queryParams = of({ urn: '123' });

    fixture.detectChanges(); 
    //  tick();

    expect(activatedRoute.queryParams).toEqual({ urn: ['123'] }); // this line giving me trouble
  });

如果有人可以帮我看看我在做什么错-这是我想到的stackBlitz演示

Arnaud Denoyelle

这里 :

expect(activatedRoute.queryParams).toEqual({ urn: ['123'] })

activatedRoute.queryParams不是,{ urn: ['123'] }而是Observable会触发此值的。

您可以这样测试:

  /*
    Notice the extra "done" parameter. It is a function that you must call
    to indicate that the test is finished.
    It is necessary because we are testing an asynchronous method.
    This will prevent the test from exiting until the "done" method is called.
    Also, the test will fail if the done method is not called within 5s by default.
  */                                
  it('test queryParam in route', (done) => {
    [...]

    activatedRoute.queryParams.subscribe((value) => {
      expect(value).toEqual({ urn: ['123'] })
      done();
    })

  });

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

何时使用pathParams或QueryParams

在Angular 2中同时订阅路由参数和queryParams

从queryParams angular 2删除参数

用Angular2 RC6获取queryParams的正确方法

Angular2 queryParams抛出“类型不存在”错误

Angular 2:activateRoute.snapshot.queryParams [“”]的茉莉花测试用例

如何按类别筛选项目,在Angular 2或4中使用queryParams

Angular 5路由中的queryParams列表为空

使用queryParams重定向到URL

如何使用Typescript在queryparams中获取对象?

使用Spock和Java Spark测试QueryParams

在Angular中路由时,使用URL中的queryParams时,URL中的%%被%25代替

Angular 7-使用queryParams定义路由

如何在Angular 6中创建一个从URL返回queryParams的方法?

在Angular路由中实现queryParams

Angular Router.navigate通过queryParams导航到子路由

为什么ActivatedRoute.queryParams在Angular中不起作用?

使用NavigationByUrl时,queryParams不会反映在URL中

Django静态标记,在使用DigitalOcean空间时将queryparams添加到生成的静态文件

Angular 2-如何基于URL queryparams动态更改整个CSS样式表

Angular 4正在削减带有散列的queryParams

如何停止在Angular 7的[queryParams]中调用方法?

route.queryParams.subscribe在Angular Typescript组件中返回未定义

Angular 2中的queryParams正在编码,如何防止这种情况发生?

使用 this.activeRoute.queryParams._value 访问 angular2 中的查询字符串参数

只从 angular queryParams 中获取最终值

如何在 Resolver Angular 中访问 queryParams

是否可以在 routerLink 的 queryParams 中使用常量作为属性名称?

Angular 12:将 Queryparams 转换为编码的 url