CODEWITHSUNDEEP
angularngx-translateangular-test
kmansoor
kmansoor

Reputation: 4345

Angular 6 unit testing with ngx-translate dependency

I have an angular 6 application with ngx-translate/[email protected]. Trying to use a CustomLoader with hard-coded values. But something is not quite right.

Test

class CustomLoader implements TranslateLoader {
  getTranslation(lang: string): Observable<any> {
   return of({
      'DETAILS': {
        'PIN_ENTRY': {              
          'INPUT': {
            'ERRORS': {
              'INVALID': 'Blah',
              'INELIGIBLE': 'Blah Blah'
            }
          }
        }
      }
  });
 }
}

beforeEach(async(() => {
 TestBed.configureTestingModule({
  declarations: [ MyComponent ],
  imports: [
    ... // Elided for brevity
    TranslateModule.forRoot({
      loader: { provide: TranslateLoader, useClass: CustomLoader}
    })
  ],      
})
.compileComponents();
}));

Component

ngOnInit() {
  this.translateService.getTranslation('DETAILS.PIN_ENTRY.INPUT').pipe(first()).subscribe(translations => {      
    this.errorTranslations = translations['ERRORS'];
  });
}

The issue is, translate inside the subscribe is always 'DETAILS.PIN_ENTRY.INPUT'. I also added a logging statement in CustomLoader#getTranslation, to see if it was loaded, but couldn't see the output.

What is wrong with my set up?

Upvotes: 1

Views: 2480

Answers (1)

maxime1992
maxime1992

Reputation: 23813

When testing a component that has values inside an observable you should use either async or fakeAsync within your test.

I think that fakeAsync might be your best option:

describe('...', () => {
  it('...', () => {
    // create your component

    // move forward in time
    tick();

    expect(component.errorTranslations).toEqual(yourError);
  })
})

Upvotes: 1

Related Questions