我对处理区域设置格式的非常具体的数字组件进行了多次测试。Karma 的测试很好,但是一旦我们将其更改为 Jest,这个错误就开始出现:
NoLocale: Missing locale info for 'de-DE' Solution: http://www.telerik.com/kendo-angular-ui/components/internationalization/troubleshooting/#toc-no-locale
我尝试了所附链接中的所有建议,但没有一个成功。
使用语言环境 idIntlService
进行初始化en-US
,因此我为每个测试更改了它,具体取决于我想要断言的格式(de-DE
或en-GB
)。
这些是 component.spec.ts 中的测试示例:
数字文本框.component.spec.ts
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NumericTextBoxComponent } from './numeric-textbox.component';
import { FormsModule } from '@angular/forms';
import { CldrIntlService, IntlModule, load } from '@progress/kendo-angular-intl';
describe('NumericTextBoxComponent', () => {
let component: NumericTextBoxComponent;
let fixture: ComponentFixture<NumericTextBoxComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ FormsModule, IntlModule ],
declarations: [ NumericTextBoxComponent ],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NumericTextBoxComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('User writes valid numbers with German/International notation', () => {
component.format = 'n2';
(<CldrIntlService>component.intlService).localeId = 'de-DE';
fixture.detectChanges();
const displayValueInput: HTMLInputElement = fixture.debugElement.nativeElement.querySelector('input');
// absolute integer
displayValueInput.value = '123456789';
displayValueInput.dispatchEvent(new Event('input'));
displayValueInput.dispatchEvent(new Event('focusout'));
expect(component.inputValue).toBe('123456789');
expect(component.displayValue).toBe('123.456.789,00');
});
it('displays the correct format when the control is created in english context', () => {
component.format = 'n2';
(<CldrIntlService>component.intlService).localeId = 'en-GB';
fixture.detectChanges();
const displayValueInput: HTMLInputElement = fixture.debugElement.nativeElement.querySelector('input');
displayValueInput.value = '123456789.12';
displayValueInput.dispatchEvent(new Event('input'));
displayValueInput.dispatchEvent(new Event('focusout'));
expect(component.inputValue).toBe('123456789.12');
expect(component.displayValue).toBe('123,456,789.12');
});
罕见的是“en-GB”语言环境被 Intl Service 识别(因此测试运行良好),但“de-DE”不是。
我的问题是:如何将de-DE
语言环境信息导入测试环境,以便 Intl Service 动态识别?
2019 年 5 月 10 日更新
fixture.whenStable().then(()=> {})
导致测试错误处理出现问题,因此将其删除。
作为附加信息,该focusout
事件触发组件中的以下方法:
数字文本框.component.ts
onFocusOut(first: boolean = false): void {
console.log("onFocusOut");
if (this.isReadOnly && !first && !this.isFocusIn) { return; }
this.isFocusIn = false;
// save the temporal the editable display value into the inputValue.
// if the escape key was pressed, then we undo the actual displayValue to the lastInputValue.
this.inputValue = !this.wasEscapePressed ? this.displayValue : this.lastInputValue;
this.wasEscapePressed = false;
// update the readable display value with the absolute value of the input value (or zero if it is null, zero or empty).
this.displayValue = this.formatDisplayValue(this.inputValue);
}
formatDisplayValue(input: string): string {
// single signs, nulls, empty and zeros are shown as zero
if (this.checkNullZeroOrEmpty(input) || this.isSignOnly(input)) {
input = NumericTextBoxComponent.ZERO;
} else if (this.IsPositiveValue(input) && input[0] === NumericTextBoxComponent.PLUS_SIGN) {
// positive signs at the beginning are trim
input = input.replace(NumericTextBoxComponent.PLUS_SIGN, '');
}
// display value are always the absolute value
const numberValue = Math.abs(this.getNumberValue(input));
// finally return the number formatted based in the locale.
return this.intlService.formatNumber(numberValue, this.format);
}
因此,当我将焦点移出输入 HTML 元素时,显示值的格式取决于语言环境。