title: Missing locale info for Kendo Intl Service when testing with Jest in Angular 7
body: <p>I had multiple tests for a very specific numeric component that handles locale formatting. The tests were fine with Karma, but once we changed it to Jest this error started to appear:</p>
  
  <p><code>NoLocale: Missing locale info for 'de-DE' Solution: http://www.telerik.com/kendo-angular-ui/components/internationalization/troubleshooting/#toc-no-locale</code></p>
  
  <p>I tried all the suggestion from the attached linked, but no one success.</p>
  
  <p>The <code>IntlService</code> is initialized with <code>en-US</code> locale id, so I changed it for each test, depending the format that I wanted to assert (<code>de-DE</code> or <code>en-GB</code>).</p>
  
  <p>These are the test examples in the component.spec.ts:</p>
  
  <h2>numeric-textbox.component.spec.ts</h2>
  
  <pre><code>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', () =&gt; {
    let component: NumericTextBoxComponent;
    let fixture: ComponentFixture&lt;NumericTextBoxComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        imports: [ FormsModule, IntlModule ],
        declarations: [ NumericTextBoxComponent ],
      })
      .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(NumericTextBoxComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  
    it('User writes valid numbers with German/International notation', () =&gt; {
      component.format = 'n2';
      (&lt;CldrIntlService&gt;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', () =&gt; {
      component.format = 'n2';
      (&lt;CldrIntlService&gt;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');
    });
  </code></pre>
  
  <p>The rare thing is 'en-GB' locale is recognised by the Intl Service (so the test is running fine), but 'de-DE' is not.</p>
  
  <p><strong>My question is: How do I import the <code>de-DE</code> locale information to the test environment, so that it can be recognised by the Intl Service dynamically?</strong></p>
  
  <h2>UPDATE May 10th '19</h2>
  
  <p>The <code>fixture.whenStable().then(()=&gt; {})</code> was causing an issue in the test error handling, so it was remove.</p>
  
  <hr>
  
  <p>As an additional information, the <code>focusout</code> event triggers the following method in the component:</p>
  
  <h2>numeric-textbox.component.ts</h2>
  
  <pre><code>onFocusOut(first: boolean = false): void {
        console.log("onFocusOut");
          if (this.isReadOnly &amp;&amp; !first &amp;&amp; !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) &amp;&amp; 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);
      }
  </code></pre>
  
  <p>So, when I made focus out of the input HTML element, the display value is formatted depending the locale.</p>