How to test the

[serge]

I have the following:

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss'],

  encapsulation: ViewEncapsulation.None,

})

export class AppComponent implements OnInit, OnDestroy {

  constructor(

  [...]

    private internationalization: IntlService,

    public translateService: TranslateService,

 

  ) {

    this.translateService.setDefaultLang('fr');

    (this.internationalizationasCldrIntlService).localeId = this.translateService.currentLang;

 

My question is how do I UNIT-TEST such a component, knowing that actually my test gives me the following

AppComponent > should create the app

TypeError: Cannot read properties of undefined (reading 'replace')

TypeError: Cannot read properties of undefined (reading 'replace') at CldrIntlService.set localeId [as localeId] (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@progress/kendo-angular-intl/__ivy_ngcc__/dist/fesm2015/index.js:196:30) at new AppComponent (http://localhost:9877/_karma_webpack_/webpack:/Client/app/app.component.ts:89:6) at NodeInjectorFactory.factory (ng:///AppComponent/ɵfac.js:4:10) at getNodeInjectable (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:3520:44) at instantiateRootComponent (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:12587:23) at createRootComponent (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:14090:23) at ComponentFactory.create (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2020/core.mjs:13967:25)

 

and the test is like this:

import { HttpClientTestingModule } from '@angular/common/http/testing';

import { TestBed } from '@angular/core/testing';

import { ReactiveFormsModule } from '@angular/forms';

import { NoopAnimationsModule } from '@angular/platform-browser/animations';

import { RouterTestingModule } from '@angular/router/testing';

import { LayoutModule } from '@progress/kendo-angular-layout';

import { HttpClient } from '@angular/common/http';

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { TranslateLoader, TranslateModule } from '@ngx-translate/core';

import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppComponent } from './app.component';

import { CoreModule } from './core/core.module';

import { KendoModule } from './shared/kendo.module';

import { AppModule } from './app.module';

import '@progress/kendo-angular-intl/locales/fr/all';

describe('AppComponent', () => {

  beforeEach(async () => {

    await TestBed.configureTestingModule({

      schemas: [CUSTOM_ELEMENTS_SCHEMA],

      imports: [

        HttpClientTestingModule,

        ReactiveFormsModule,

        RouterTestingModule,

        NoopAnimationsModule,

        CoreModule,

        LayoutModule,

        KendoModule,

        AppModule,

        TranslateModule.forRoot({

          loader: {

            provide: TranslateLoader,

            useFactory: (http: HttpClient) => new TranslateHttpLoader(http, '/assets/i18n/', `.json?v=${new Date().getTime()}`),

            deps: [HttpClient]

          }

        })        

      ],

      declarations: [

        AppComponent

      ],

    }).compileComponents();

  });

  it('should create the app', () => {

    const fixture = TestBed.createComponent(AppComponent);

    const app = fixture.componentInstance;

    expect(app).toBeTruthy();

  });

Similar question on SO

[Martin]

Hi Serge,

Thank you for the provided screenshot.

All Kendo UI for Angular components are thoroughly tested internally by our development team with both unit and e2e tests. However, if further tests are required to be made, the developer can see all of the implemented tests by obtaining the source code of any package - @progress/kendo-angular-intl for example.

Please check the following article:

https://www.telerik.com/kendo-angular-ui/components/installation/source-code/

Once you are able to check the source code of the package, search for the test folder and check the already implemented tests.

Regards,
Martin
Progress Telerik

[serge]

Thank you Martin. You suggest me to have a look on the kendo components tests. However I don't need to test kendo components, I need to test our own component, that uses Kendo ones. As you don't test components that uses Kendo ones, but you test the component itself, I am afraid I will not find a similar one... 

What about the code I posted I test setting default lang fr... and givig the error path, what should be the problem in this exact case?

Because I had a look on the component source as suggested in the artcle, however, I am not a super expert in tests so didn't get the problem from these ones...

[serge]

Finally put in the component's constructor the localeId a hardcoded value, and the test passed:

(this.internationalization as CldrIntlService).localeId = this.translate?.currentLang ?? 'fr-FR';