Implement Angular Test with L10nTranslate

Question

I'm trying to implement tests with Karma in an Angular Application. I'm facing an issue beacuse my component uses L10nTranslate so i tried to import the module into my test file

My Component

@Component({
  selector: 'app-task',
  templateUrl: './task.component.html',
  styleUrls: ['./task.component.scss'],
  providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'fr-FR'},
  ],
})

export class TaskComponent implements OnInit, OnDestroy {

 
  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private taskService: TaskService,
    private taskListService: TaskListService,
    private taskListHasTaskService: TaskListHasTaskService,
    private projectService: ProjectService,
    private projectStoreService: ProjectStoreService,
    private commentService: CommentService,
    public sessionService: SessionService,
    public clipboard: Clipboard,
    public snackBar: MatSnackBar,
    private taskModalService: TaskModalService,
    public dialog: MatDialog,
    private errorService: ErrorService,
    private taskUpdateHandlerService: TaskUpdateHandlerService,
    private translation: L10nTranslationService,
    private attachmentService: AttachmentService,
    public userAuthorizationService: UserAuthorizationService,
    private sseService: SseService,
    private _location: Location,
    private translationService: L10nTranslationService,
    private flattenTasksPipe: FlattenTasksPipe
  ) {
  }



  ngOnInit(): void {

}

And My test file

describe('TaskComponent', () => {
    let component: TaskComponent;
    let fixture: ComponentFixture<TaskComponent>;
    let service: L10nTranslationService;

    beforeEach(async () => {
        await TestBed.configureTestingModule({
            declarations: [TaskComponent, MatMenu],
            imports: [MatDialogModule, MatMenuModule, L10nTranslationModule],
            providers: [
                {provide: ActivatedRoute, useValue: {}},
                {provide: L10nTranslationService, useValue: {}},
                {provide: MatSnackBar, useValue: {}},
                {provide: Router, useValue: {}},
                {provide: TaskService, useValue: {}},
                {provide: TaskListService, useValue: {}},
                {provide: TaskListHasTaskService, useValue: {}},
                {provide: ProjectService, useValue: {}},
                {provide: ProjectStoreService, useValue: {}},
                {provide: CommentService, useValue: {}},
                {provide: SessionService, useValue: {}},
                {provide: TaskModalService, useValue: {}},
                {provide: ErrorService, useValue: {}},
                {provide: TaskUpdateHandlerService, useValue: {}},
                {provide: AttachmentService, useValue: {}},
                {provide: UserAuthorizationService, useValue: {}},
                {provide: SseService, useValue: {}},
                {provide: Location, useValue: {}},
                {provide: FlattenTasksPipe, useValue: {}}
            ]
        })
            .compileComponents();

        fixture = TestBed.createComponent(TaskComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
        service = TestBed.inject(L10nTranslationService);
    });

    it('should return a string', () => {
            expect(component.dummyFunction(42)).toBe('42');
        });

    });

I always get the error : Chrome 119.0.0.0 (Mac OS 10.15.7) TaskComponent should return a string FAILED TypeError: this.translation.onChange is not a function at new L10nAsyncPipe (node_modules/angular-l10n/fesm2020/angular-l10n.mjs:678:43) at new L10nTranslateAsyncPipe (node_modules/angular-l10n/fesm2020/angular- l10n.mjs:1080:1) at L10nAsyncPipe_Factory (node_modules/angular-l10n/fesm2020/angular-l10n.mjs:687:19) at pipeFactory (node_modules/angular-l10n/fesm2020/angular-l10n.mjs:1087:138) at ɵɵpipe (node_modules/@angular/core/fesm2020/core.mjs:20735:30) at templateFn (ng:///TaskComponent.js:640:9) at executeTemplate (node_modules/@angular/core/fesm2020/core.mjs:10441:9) at renderView (node_modules/@angular/core/fesm2020/core.mjs:10263:13) at renderComponent (node_modules/@angular/core/fesm2020/core.mjs:11434:5) at renderChildComponents (node_modules/@angular/core/fesm2020/core.mjs:10122:9) Chrome 119.0.0.0 (Mac OS 10.15.7): Executed 5 of 5 (1 FAILED) (0.144 secs / 0.126 secs) TOTAL: 1 FAILED, 4 SUCCESS

I don't how to resolve this. All modules are correctly imported, everuthing is up to date so far ans i don't know how i can make the tests start.

Thanks for your help

I tried to import / declare all modules that are used in my component class. I tried several ways for injecting the L10nTranslationModule and/or L10nTranslationService

I always end up with an error

Answer 1

The issue is most likely this line:

{provide: L10nTranslationService, useValue: {}},

We are providing an empty object for L10nTranslationService and therefore there is no onChange method.

For a quick unblock, try this:

{provide: L10nTranslationService, useValue: { onChange: () => null }},

You most likely have to mock the other providers accurately as well and they can't be empty objects.

Here is a good write up on testing components with dependencies: https://testing-angular.com/testing-components-depending-on-services/#testing-components-depending-on-services.