How to test the

2 Answers 42 Views
Localization
serge
Top achievements
Rank 2
Bronze
Iron
Iron
serge asked on 23 Nov 2022, 01:20 PM | edited on 23 Nov 2022, 01:59 PM

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

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();

2 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 28 Nov 2022, 10:42 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

serge
Top achievements
Rank 2
Bronze
Iron
Iron
commented on 28 Nov 2022, 09:30 PM | edited

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...

0
serge
Top achievements
Rank 2
Bronze
Iron
Iron
answered on 30 Nov 2022, 04:54 PM

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';
Tags
Localization
Asked by
serge
Top achievements
Rank 2
Bronze
Iron
Iron
Answers by
Martin
Telerik team
serge
Top achievements
Rank 2
Bronze
Iron
Iron
Share this question
or