I've been trying to test a feature module, but I'm facing some difficulties. The last test is failing because the spy isn't detecting that the method is being called, even when I move the
this.translate.use(this.currentLanguage.i18n)This is the code for the feature component:
export class LanguagesComponent implements OnDestroy, OnInit {
public languages = [
{
id: '0',
name: this.translate.stream('LANGUAGES.SWEDISH'),
i18n: 'sv',
flag: {
src: './assets/img/sv.svg'
}
},
{
id: '1',
name: this.translate.stream('LANGUAGES.ENGLISH'),
i18n: 'en',
flag: {
src: './assets/img/en.svg'
}
}
];
public currentLanguage: any;
private storageSubscription: Subscription;
constructor(
private cs: ClientStorage,
private notifications: NotificationsApi,
private router: Router,
private translate: TranslateService
) {}
ngOnInit() {
const storedLanguage: any = this.cs.getItem(AppConstants.currentLanguage);
this.currentLanguage = FindObjectByQuery(this.languages, 'i18n', storedLanguage);
// Listen for changes in language from sources other than this component
this.storageSubscription = this.cs.logger$
.filter(data => data && data.key === AppConstants.currentLanguage)
.subscribe((currentLanguage: any) => {
if (currentLanguage) {
this.currentLanguage = FindObjectByQuery(this.languages, 'i18n', currentLanguage.value);
// Set the current language to use
this.translate.use(this.currentLanguage.i18n);
}
}
);
}
ngOnDestroy() {
this.storageSubscription.unsubscribe();
}
selectLanguage(language: any): void {
this.cs.setItem(AppConstants.currentLanguage, language.i18n);
this.router.navigate(['dashboard']);
this.notifications.newNotification({message: this.translate.instant('NOTIFICATIONS.LANGUAGES.CHANGED'), theme: 'success'});
}
}
These are my current tests:
describe('[UNIT] LanguagesComponent', () => {
let component: LanguagesComponent;
let fixture: ComponentFixture<LanguagesComponent>;
let translate: Location;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
ModuleImports
],
providers: [
TranslateService
],
schemas: [NO_ERRORS_SCHEMA],
declarations: [LanguagesComponent, DummyComponent]
});
fixture = TestBed.createComponent(LanguagesComponent);
component = fixture.componentInstance;
translate = TestBed.get(TranslateService);
// Ensure ngOnInit runs
fixture.detectChanges();
});
it('should create the component', async(() => {
expect(component).toBeTruthy();
}));
it('should have a current language when the component has loaded', () => {
expect(component.currentLanguage).toBeTruthy();
});
it('should have the necessary properties in the current language object', () => {
const currentLanguage = component.currentLanguage;
expect(currentLanguage.id).toBeTruthy();
expect(currentLanguage.name).toBeTruthy();
expect(currentLanguage.i18n).toBeTruthy();
expect(currentLanguage.flag.src).toBeTruthy();
});
it('should trigger the use method of TranslateService with the current language i18n value', () => {
const spy = spyOn(translate, 'use').and.callThrough();
expect(spy).toHaveBeenCalledWith(component.currentLanguage.i18n);
});
});