加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular – fakeAsync不等待异步操作完成

发布时间:2020-12-17 10:24:11 所属栏目:安全 来源:网络整理
导读:上下文 我正在测试一个组件,该组件使用基于可观察的服务来获取一些数据并显示它用于i18n目的. 由于特定需要,i18n服务是定制的. 该组件在开发模式下工作(在某些模板中使用,工作正常)但测试失败. 资源 零件 @Component({ selector : "i18n",template : 'span [
上下文

我正在测试一个组件,该组件使用基于可观察的服务来获取一些数据并显示它用于i18n目的.

由于特定需要,i18n服务是定制的.

该组件在开发模式下工作(在某些模板中使用,工作正常)但测试失败.

资源

零件

@Component({
    selector     : "i18n",template     : '<span [innerHTML]="text"></span><span #wrapper hidden="true"><ng-content></ng-content><span>',encapsulation: ViewEncapsulation.None
})
export class I18nComponent implements OnChanges {

    constructor(private i18n:I18n) {
    }

    @ViewChild('wrapper')
    content:ElementRef;

    @Input('key')
    key:string;

    @Input('domain')
    domain:string;

    @Input('variables')
    variables:Variables = [];

    @Input("plural")
    plural:number;

    text:string;

    ngOnChanges():any {
        this.i18n.get(this.key,this.content.nativeElement.innerHTML,this.variables,this.domain).subscribe((res) => {
            this.text = res;
        });
    }
}

I18n.get

public get(key:string,defaultValue?:string,variables:Variables = {},domain?:string):Observable<string>{
    const catalog = {
                         "StackOverflowDomain":
                         {
                             "my-key":"my-value"
                         }
                    };

    return Observable.of(catalog[domain][key]).delay(300);
}

与变量:

export interface Variables {
    [key:string]:any;
}

考试

describe("I18n component",() => {

    beforeEach(() => {
        TestBed.configureTestingModule({
            providers   : [
                I18n,{
                    provide : I18N_CONFIG,useValue: {
                        defaultLocale : "fr_FR",variable_start: '~',variable_end  : '~'
                    }
                },{
                    provide : I18N_LOADERS,useClass: MockLocaleLoader,multi   : true
                }
            ],declarations: [
                I18nComponent
            ]
        });
        fixture = TestBed.createComponent<I18nComponent>(I18nComponent);
        comp = fixture.componentInstance;
    });

    fit("can call I18n.get.",fakeAsync(() => {
        comp.content.nativeElement.innerHTML = "nope";
        comp.key = "test";
        comp.domain = "test domain";
        comp.ngOnChanges();
        tick();
        fixture.detectChanges();
        expect(comp.text).toBe("test value");
    }));

});

问题

测试失败并显示以下消息:

Expected undefined to be ‘test value’.

Error: 1 periodic timer(s) still in the queue.

因为i18n.get在检查断言之前没有完成它的工作,所以comp.text仍未定义.

已经尝试过了

>在tick方法调用中添加一个非常高的值,什么都没改变(尝试用5000).
>让ngOnChanges返回一个Promise< void>在this.text = res之后解决;并使用在comp.ngOnChanges中调用的done方法更改fakeAsync区域以进行简单测试.它工作,但ngOnChanges不应该返回Promise,我想要一个干净的解决方案.

请注意,async和fakeasync不像jasmine.done那样强大和包容

从(撰写本文时)的确切说明:
https://angular.io/guide/testing#component-fixture

它说:“编写带有完成的测试函数,虽然比async和fakeAsync更麻烦,是一种可行且偶尔必需的技术.例如,在测试涉及intervalTimer的代码时,不能调用async或fakeAsync,这在测试async Observable时很常见”

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读