[PR] Merge feature unit test from source branch

karma.conf.js

@@ -25,15 +25,23 @@ module.exports = function (config) {
       suppressAll: true // removes the duplicated traces
     },
     coverageReporter: {
-      dir: require('path').join(__dirname, './coverage/my-app'),
+      dir: require('path').join(__dirname, './coverage/test-suites-app'),
       subdir: '.',
       reporters: [
         { type: 'html' },
         { type: 'text-summary' }
-      ]
+      ],
+      check: {
+        global: {
+          statements: 50,
+          branches: 0,
+          functions: 50,
+          lines: 50,
+        },
+      },
     },
     reporters: ['progress', 'kjhtml'],
-    port: 9876,
+    port: 9700,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,

package.json

@@ -13,6 +13,7 @@
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "test:ci": "ng test --watch=false --browsers=ChromeHeadlessCustom",
+    "coverage": "ng test --watch=true --code-coverage=true",
     "build:ci": "ng build --configuration production"
   },
   "private": true,

src/app/app.component.spec.ts

@@ -1,35 +1,64 @@
-import { TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { LangService } from './core/lang/lang.service';
 
 describe('AppComponent', () => {
+  let component: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
+  let langService: LangService;
+
   beforeEach(async () => {
+
     await TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule
+        RouterTestingModule,
+        TranslateModule.forRoot(),
       ],
+      providers: [
+        LangService
+      ],      
       declarations: [
         AppComponent
       ],
     }).compileComponents();
+
   });
 
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AppComponent);
+    component = fixture.componentInstance;
+    langService = TestBed.inject(LangService);
+    fixture.detectChanges();
+  }); 
+
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'my-app'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    // expect(app.title).toEqual('my-app');
+  it('should call addCustomEvent on ngOnInit', () => {
+    spyOn(langService, 'addCustomEvent');
+    component.ngOnInit();
+    expect(langService.addCustomEvent).toHaveBeenCalled();
   });
 
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('my-app app is running!');
+  it('should call removeCustomEvent on ngOnDestroy', () => {
+    spyOn(langService, 'removeCustomEvent');
+    component.ngOnDestroy();
+    expect(langService.removeCustomEvent).toHaveBeenCalled(); 
+  });
+
+  it('should dispatch custom event with specified language', () => {
+    const param = 'en';
+    spyOn(window, 'dispatchEvent');
+    component.initCustomEvent(param);
+    expect(window.dispatchEvent).toHaveBeenCalled();
+    const expectedEvent = new CustomEvent("CHANGE_LANGUAGE", {
+      detail: { lang: param }
+    });
+    expect(window.dispatchEvent).toHaveBeenCalledWith(expectedEvent);
   });
 });

src/app/core/lang/lang.service.spec.ts

@@ -1,16 +1,67 @@
 import { TestBed } from '@angular/core/testing';
-
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { LangService } from './lang.service';
 
 describe('LangService', () => {
   let service: LangService;
+  let translateService: TranslateService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      providers: [LangService]
+    });
     service = TestBed.inject(LangService);
+    translateService = TestBed.inject(TranslateService);
   });
 
   it('should be created', () => {
     expect(service).toBeTruthy();
   });
-});
+
+  it('should set language', () => {
+    const addLangsSpy = spyOn(translateService, 'addLangs');
+    const setDefaultLangSpy = spyOn(translateService, 'setDefaultLang');
+    const useSpy = spyOn(translateService, 'use');
+
+    service.setLanguage();
+
+    expect(addLangsSpy).toHaveBeenCalledWith(['id_ID', 'en_US']);
+    expect(setDefaultLangSpy).toHaveBeenCalledWith('id_ID');
+    expect(useSpy).toHaveBeenCalledWith('id_ID');
+  });
+
+  it('should switch language', () => {
+    const useSpy = spyOn(translateService, 'use');
+
+    service.switchLang('en_US');
+
+    expect(useSpy).toHaveBeenCalledWith('en_US');
+  });
+
+  it('should add custom event', () => {
+    spyOn(window, 'addEventListener');
+
+    service.addCustomEvent();
+
+    expect(window.addEventListener).toHaveBeenCalled();
+  });
+
+  it('should remove custom event', () => {
+    spyOn(window, 'removeEventListener');
+
+    service.removeCustomEvent();
+
+    expect(window.removeEventListener).toHaveBeenCalled();
+  });
+
+  it('should listen for change language event', () => {
+    const event = new CustomEvent('CHANGE_LANGUAGE', { detail: { lang: 'en_US' } });
+    const translateServiceSpy = spyOn(translateService, 'use');
+
+    service.listenChangeLang(event, translateService);
+
+    expect(translateServiceSpy).toHaveBeenCalledWith('en_US');
+  });
+
+});

src/app/module/dashboard/dashboard-list/dashboard-list.component.spec.ts

@@ -1,25 +1,42 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { DashboardListComponent } from './dashboard-list.component';
+import { LangService } from 'src/app/core/lang/lang.service';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { DashboardService } from '../services/dashboard.service';
 
 describe('DashboardListComponent', () => {
   let component: DashboardListComponent;
   let fixture: ComponentFixture<DashboardListComponent>;
+  let langService: LangService;
+  let translateService: TranslateService;
+  let dashboardService: DashboardService;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ DashboardListComponent ]
-    })
-    .compileComponents();
+      declarations: [ DashboardListComponent ],
+      imports:[
+        TranslateModule.forRoot()
+      ],
+      providers: [ 
+        DashboardService,
+        TranslateService,
+        LangService
+      ]
+    }).compileComponents();
   });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DashboardListComponent);
-    component = fixture.componentInstance;
+    langService = TestBed.inject(LangService);
+    translateService = TestBed.inject(TranslateService);
+    dashboardService = TestBed.inject(DashboardService);
     fixture.detectChanges();
   });
-
-  it('should create', () => {
+
+  it('should create component dashboard', () => {
+    fixture = TestBed.createComponent(DashboardListComponent);
+    component = fixture.componentInstance;
     expect(component).toBeTruthy();
   });
-});
+
+});

src/app/module/dashboard/dashboard-list/dashboard-list.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { DashboardService } from '../services/dashboard.service';
 import { LangService } from 'src/app/core/lang/lang.service';
 import { TranslateService } from '@ngx-translate/core';
@@ -7,7 +7,7 @@ import { TranslateService } from '@ngx-translate/core';
   templateUrl: './dashboard-list.component.html',
   styleUrls: ['./dashboard-list.component.scss']
 })
-export class DashboardListComponent extends DashboardService implements AfterViewInit  {
+export class DashboardListComponent extends DashboardService implements OnInit  {
 
   title = 'angular-prime-template';
 
@@ -19,7 +19,8 @@ export class DashboardListComponent extends DashboardService implements AfterVie
     super(langService, translateService)
   }
 
-  ngAfterViewInit(): void {
-    this.dashboardService.initializeLang()
+  ngOnInit(): void {
+    this.dashboardService.initializeLang();
   }
+
 }

src/app/module/dashboard/i18n/en_US.json

@@ -1,3 +1,4 @@
 {
+  "module": "Dashboard Menu",
   "title" : "Welcome to angular template project build with prime"
 }

src/app/module/dashboard/i18n/id_ID.json

@@ -1,3 +1,4 @@
 {
+  "module": "Menu Dashboard",
   "title" : "Selamat Datang di sample angular template project build with prime."
 }

src/app/module/dashboard/services/dashboard.service.spec.ts

@@ -1,16 +1,58 @@
-/* tslint:disable:no-unused-variable */
-
-import { TestBed, inject } from '@angular/core/testing';
+import { TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { TranslateService, TranslateModule, TranslateStore, LangChangeEvent } from '@ngx-translate/core';
 import { DashboardService } from './dashboard.service';
+import { LangService } from 'src/app/core/lang/lang.service';
+import { BehaviorSubject } from 'rxjs';
+
+describe('DashboardService', () => {
+  let dashboardService: DashboardService;
+  let langService: LangService;
+  let translateService: TranslateService;
+
+  beforeEach(async() => {
+    const translateServiceStub = {
+      store: {
+        onLangChange: new BehaviorSubject<LangChangeEvent>({ 
+          lang: 'en',
+          translations: Object
+        })
+      }
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      providers: [
+        DashboardService,
+        LangService,
+        TranslateStore,
+        { provide: TranslateService, useValue: translateServiceStub },
+      ]
+    }).compileComponents();
 
-describe('Service: DashboardService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [DashboardService]
-    });
+    dashboardService = TestBed.inject(DashboardService);
+    langService = TestBed.inject(LangService);
+    translateService = TestBed.inject(TranslateService);
   });
 
-  it('should ...', inject([DashboardService], (service: DashboardService) => {
-    expect(service).toBeTruthy();
+  it('should initialize language', fakeAsync(() => {
+    spyOn(langService, 'setLanguage');
+    spyOn(langService, 'switchLang');
+    spyOn(langService, 'logLangSetting');
+
+    dashboardService.initializeLang();
+    tick();
+
+    expect(langService.setLanguage).toHaveBeenCalled();
+
+    const newLang: LangChangeEvent = {
+      lang: 'en',
+      translations: { } 
+    };
+
+    translateService.store.onLangChange.next(newLang);
+    tick();
+
+    expect(langService.switchLang).toHaveBeenCalledWith(newLang.lang);
+    expect(langService.logLangSetting).toHaveBeenCalledWith('Dashboard', newLang);
   }));
-});
+});

src/app/module/dashboard/services/dashboard.service.ts

@@ -1,30 +1,30 @@
-import { Injectable, OnInit } from '@angular/core';
+import { AfterContentInit, Injectable } from '@angular/core';
 import { LangChangeEvent, TranslateService } from '@ngx-translate/core';
+import { from, tap } from 'rxjs';
 import { LangService } from 'src/app/core/lang/lang.service';
 
 @Injectable({
   providedIn: 'root'
 })
-export class DashboardService implements OnInit {
+export class DashboardService implements AfterContentInit {
   constructor(
     private langService: LangService,
     private translateService: TranslateService
   ) {
   }
-  
-  ngOnInit(): void {
+
+  ngAfterContentInit(): void {
     this.initializeLang()
-  }
+  } 
 
   initializeLang() {
     this.langService.setLanguage()
-    this.translateService.store.onLangChange.subscribe(
-      (lang: LangChangeEvent) => {
+    from(this.translateService.store.onLangChange).pipe(
+      tap((lang: LangChangeEvent) => {
         this.langService.switchLang(lang.lang);
         this.langService.logLangSetting('Dashboard', lang);
-      }
-    );
+      })
+    ).subscribe();
   }
-
 }