Question

如果它是静态测试，我可以得到值，但每当我试图获得翻译的值（使用ngx-translate）时，它都是空的。

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

此作品并返回Test

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

spec.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);
});

Answer 1

找到了在Unit Testing

中翻译密钥的解决方案

首先，检查您的textContent是否等于翻译密钥。然后为该键设置翻译并再次检查它是否已翻译：

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

Answer 2

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

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

我假设你已经在TestBed中提供了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);
      });
    })
  );

祝你好运:)！

ngx-translate：在单元测试中翻译字符串

2 个答案: