代码之家 › 专栏 › 技术社区 › Greg

ngx翻译:在单元测试中翻译字符串

ngx-translate karma-jasmine typescript unit-testing angular

6

Greg · 技术社区 · 7 年前

如果是静态测试,我可以得到该值,但每当我试图得到转换后的值时(使用 ngx-translate ),它是空的。

<div id="header-title">
    <h1>{{ 'MENU_TITLE' | translate | uppercase }}</h1>
</div>

这很有效 和返回 Test

<div id="header-title">
    <h1>Test</h1>
</div>

规范ts

it('should translate a string using the key value', () => {
    fixture = TestBed.createComponent(NavComponent);
    const title = fixture.nativeElement;
    console.log(title.querySelector('#header-title h1').innerHTML);
});

导入翻译模块

beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [RouterTestingModule,
                TranslateModule.forRoot({
                    loader: {
                        provide: TranslateLoader,
                        useFactory: HttpLoaderFactory,
                        deps: [HttpClient]
                    }
                }),
                HttpClientModule
            ],
            declarations: [NavComponent]
        }).compileComponents();

        injector = getTestBed();
        translate = injector.get(TranslateService);
    }));

-----固定的----- 但不确定这样做是否正确

let fixture: ComponentFixture<NavComponent>;

it('should translate a string using the key value', () => {
    fixture.detectChanges() // fixture = TestBed.createComponent(NavComponent);
    const title = fixture.nativeElement;
    console.log(title.querySelector('#header-title h1').innerHTML);
});

2 回复 | 直到 7 年前

1

6

Greg 7 年前

找到了在中转换密钥的解决方案 Unit Testing

首先检查 textContent 等于“translate”键。然后为该键设置翻译,并再次检查其是否翻译:

it('should translate a string using the key value', async(() => {
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('#header-title h1').textContent).toEqual('MENU_TITLE');
    translate.setTranslation('en', { MENU_TITLE: 'reporting' });
    translate.use('en');
    fixture.detectChanges();
    expect(compiled.querySelector('#header-title h1').textContent).toEqual('REPORTING');
}));

2

Jmsdb 7 年前

不确定为什么要对其进行单元测试。

它不起作用的原因是translate管道与仍在检索值时发生的日志是异步的。

我假设您已经在测试床上提供了TranslateModule。

现在,我不确定这是否会100%奏效,所以也许你可以试试。但是,从理论上讲,您可以尝试使用async和whenStable()

  it(
    'should translate a string using the key value',
    async(() => {
      fixture = TestBed.createComponent(NavComponent);
      const title = fixture.nativeElement;

      fixture.whenStable().then(() => {
        fixture.detectChanges();
        console.log(title.querySelector('#header-title h1').innerHTML);
      });
    })
  );

祝你好运:)!