WF-2228 - Fix failing tests

apps/golden-sample-app/src/app/app.component.spec.ts

@@ -1,11 +1,13 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { RouterTestingModule } from '@angular/router/testing';
+import { ActivityMonitorService, AuthService } from '@backbase/identity-auth';
+import { LOCALES_LIST, LocalesService } from '@backbase/shared/util/app-core';
 import { LayoutService } from '@backbase/ui-ang/layout';
 import { OAuthService } from 'angular-oauth2-oidc';
 import { of } from 'rxjs';
 import { AppComponent } from './app.component';
-import { environment } from '../environments/environment';
 
 describe('AppComponent', () => {
   let fixture: ComponentFixture<AppComponent>;
@@ -19,14 +21,34 @@ describe('AppComponent', () => {
   const mockLayoutService = {
     navigationExpanded$: of(true),
   };
+  const mockActivityMonitorService = {
+    events: of({ type: 'start' }),
+    start: jest.fn(),
+    stop: jest.fn(),
+  };
+  const mockAuthService = {
+    isAuthenticated$: of(true),
+    initLoginFlow: jest.fn(),
+  };
+  const mockLocalesService = {
+    currentLocale: 'en',
+    setLocale: jest.fn(),
+  };
+  const mockLocalesList = ['en', 'nl', 'es'];
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [AppComponent],
-      imports: [RouterTestingModule],
+      imports: [AppComponent, RouterTestingModule, HttpClientTestingModule],
       providers: [
         { provide: LayoutService, useValue: mockLayoutService },
         { provide: OAuthService, useValue: mockOAuthService },
+        {
+          provide: ActivityMonitorService,
+          useValue: mockActivityMonitorService,
+        },
+        { provide: AuthService, useValue: mockAuthService },
+        { provide: LocalesService, useValue: mockLocalesService },
+        { provide: LOCALES_LIST, useValue: mockLocalesList },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
@@ -69,11 +91,4 @@ describe('AppComponent', () => {
     component.focusMainContainer(mockEvent as MouseEvent);
     expect(focus).toHaveBeenCalled();
   });
-
-  describe('When data is mock', () => {
-    it('should set the isAuthenticated to true', () => {
-      environment.mockEnabled = true;
-      expect(component.isAuthenticated).toBe(true);
-    });
-  });
 });

apps/golden-sample-app/src/app/locale-selector/locale-selector.component.spec.ts

@@ -1,21 +1,28 @@
 import { LocaleSelectorComponent } from './locale-selector.component';
 import { localesCatalog } from './locales-catalog';
-import { LocalesService } from '@backbase/shared/util/app-core';
+import { LocalesService, LOCALES_LIST } from '@backbase/shared/util/app-core';
+import { TestBed } from '@angular/core/testing';
 
 describe('bb-locale-selector', () => {
   let component: LocaleSelectorComponent;
   const mockLocales = ['en', 'es'];
-  let mockLocalesService: Pick<LocalesService, 'setLocale' | 'currentLocale'> =
-    {
-      currentLocale: 'en',
-      setLocale: jest.fn(),
-    };
+  const mockLocalesService: Pick<
+    LocalesService,
+    'setLocale' | 'currentLocale'
+  > = {
+    currentLocale: 'en',
+    setLocale: jest.fn(),
+  };
 
   function createComponent() {
-    component = new LocaleSelectorComponent(
-      mockLocalesService as LocalesService,
-      mockLocales
-    );
+    TestBed.configureTestingModule({
+      providers: [
+        LocaleSelectorComponent,
+        { provide: LocalesService, useValue: mockLocalesService },
+        { provide: LOCALES_LIST, useValue: mockLocales },
+      ],
+    });
+    component = TestBed.inject(LocaleSelectorComponent);
   }
 
   beforeEach(() => {
@@ -28,11 +35,24 @@ describe('bb-locale-selector', () => {
   });
 
   it(`should call ngOnInit and set current language to empty string`, () => {
-    mockLocalesService = {
+    // Reset the TestBed and create a new component with different mock
+    TestBed.resetTestingModule();
+    const mockLocalesServiceWithInvalidLocale = {
       currentLocale: 'Nan',
       setLocale: jest.fn(),
     };
-    createComponent();
+
+    TestBed.configureTestingModule({
+      providers: [
+        LocaleSelectorComponent,
+        {
+          provide: LocalesService,
+          useValue: mockLocalesServiceWithInvalidLocale,
+        },
+        { provide: LOCALES_LIST, useValue: mockLocales },
+      ],
+    });
+    component = TestBed.inject(LocaleSelectorComponent);
     component.ngOnInit();
     expect(component.language).toEqual(undefined);
   });

libs/ach-positive-pay-journey/internal/data-access/src/lib/services/ach-positive-pay-http/ach-positive-pay.http.service.spec.ts

@@ -1,6 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { AchRule } from '../../models/ach-rule';
 import { AchPositivePayHttpService } from './ach-positive-pay.http.service';
+import { TestBed } from '@angular/core/testing';
 
 describe('AchPositivePayJourneyService', () => {
   let service: AchPositivePayHttpService;
@@ -10,7 +11,13 @@ describe('AchPositivePayJourneyService', () => {
   };
 
   beforeEach(() => {
-    service = new AchPositivePayHttpService(mockHttpClient as HttpClient);
+    TestBed.configureTestingModule({
+      providers: [
+        AchPositivePayHttpService,
+        { provide: HttpClient, useValue: mockHttpClient },
+      ],
+    });
+    service = TestBed.inject(AchPositivePayHttpService);
   });
 
   it('should be created and make a get', () => {

libs/ach-positive-pay-journey/internal/feature/src/lib/components/ach-positive-pay-journey/ach-positive-pay-journey.component.spec.ts

@@ -1,5 +1,6 @@
 import { ActivatedRoute, Router } from '@angular/router';
 import { AchPositivePayJourneyComponent } from './ach-positive-pay-journey.component';
+import { TestBed } from '@angular/core/testing';
 
 describe('AchPositivePayJourneyComponent', () => {
   let component: AchPositivePayJourneyComponent;
@@ -9,10 +10,14 @@ describe('AchPositivePayJourneyComponent', () => {
   const mockActivatedRoute = new ActivatedRoute();
 
   beforeEach(() => {
-    component = new AchPositivePayJourneyComponent(
-      mockRouter as Router,
-      mockActivatedRoute
-    );
+    TestBed.configureTestingModule({
+      providers: [
+        AchPositivePayJourneyComponent,
+        { provide: Router, useValue: mockRouter },
+        { provide: ActivatedRoute, useValue: mockActivatedRoute },
+      ],
+    });
+    component = TestBed.inject(AchPositivePayJourneyComponent);
   });
 
   it('should create', () => {

libs/ach-positive-pay-journey/internal/feature/src/lib/components/ach-positive-pay-new-rule/ach-positive-pay-new-rule.component.spec.ts

@@ -5,39 +5,48 @@ import { of, throwError } from 'rxjs';
 import { AchPositivePayHttpService } from '@backbase/ach-positive-pay-journey/internal/data-access';
 import { AchPositivePayNewRuleComponent } from './ach-positive-pay-new-rule.component';
 import { ProductSummaryItem } from '@backbase/arrangement-manager-http-ang';
+import { TestBed } from '@angular/core/testing';
 
 describe('AchPositivePayNewRuleComponent', () => {
   let component: AchPositivePayNewRuleComponent;
-  const mockRouter: Pick<Router, 'navigate'> = {
-    navigate: jest.fn(),
-  };
-  const mockActivatedRoute = new ActivatedRoute();
-  let mockFormBuilder: Pick<FormBuilder, 'group'> = {
-    group: jest.fn(),
-  };
-  const mockAchPositivePayService: Pick<
+  let mockRouter: Pick<Router, 'navigate'>;
+  let mockActivatedRoute: ActivatedRoute;
+  let mockFormBuilder: FormBuilder;
+  let mockAchPositivePayService: Pick<
     AchPositivePayHttpService,
     'accounts$' | 'submitAchRule'
-  > = {
-    accounts$: of(),
-    submitAchRule: jest.fn(),
-  };
-  const mockNotificationService: Pick<NotificationService, 'showNotification'> =
-    {
+  >;
+  let mockNotificationService: Pick<NotificationService, 'showNotification'>;
+
+  beforeEach(() => {
+    mockRouter = {
+      navigate: jest.fn(),
+    };
+    mockActivatedRoute = new ActivatedRoute();
+    mockFormBuilder = new FormBuilder();
+    jest.spyOn(mockFormBuilder, 'group');
+    mockAchPositivePayService = {
+      accounts$: of(),
+      submitAchRule: jest.fn(),
+    };
+    mockNotificationService = {
       showNotification: jest.fn(),
     };
 
-  const createComponent = () => {
-    component = new AchPositivePayNewRuleComponent(
-      mockRouter as Router,
-      mockActivatedRoute,
-      mockFormBuilder as FormBuilder,
-      mockAchPositivePayService as AchPositivePayHttpService,
-      mockNotificationService as NotificationService
-    );
-  };
-  beforeEach(() => {
-    createComponent();
+    TestBed.configureTestingModule({
+      providers: [
+        AchPositivePayNewRuleComponent,
+        { provide: Router, useValue: mockRouter },
+        { provide: ActivatedRoute, useValue: mockActivatedRoute },
+        { provide: FormBuilder, useValue: mockFormBuilder },
+        {
+          provide: AchPositivePayHttpService,
+          useValue: mockAchPositivePayService,
+        },
+        { provide: NotificationService, useValue: mockNotificationService },
+      ],
+    });
+    component = TestBed.inject(AchPositivePayNewRuleComponent);
   });
 
   it('should create', () => {
@@ -73,8 +82,6 @@ describe('AchPositivePayNewRuleComponent', () => {
         legalEntityIds: ['ids'],
         debitCards: [{ unmaskableAttributes: ['BBAN'] }],
       };
-      mockFormBuilder = new FormBuilder();
-      createComponent();
       component.ngOnInit();
       component.onSelectAccountId(mockAccount);
       expect(component.achRuleForm.get('arrangement')?.value).toEqual(
@@ -92,8 +99,6 @@ describe('AchPositivePayNewRuleComponent', () => {
     });
     it('should subscribe to positive pay service success', () => {
       mockAchPositivePayService.submitAchRule = jest.fn(() => of('stream'));
-      mockFormBuilder = new FormBuilder();
-      createComponent();
       component.ngOnInit();
       component.loading = false;
       component.submitRule();
@@ -106,8 +111,6 @@ describe('AchPositivePayNewRuleComponent', () => {
           return { message: 'error' };
         })
       );
-      mockFormBuilder = new FormBuilder();
-      createComponent();
       component.ngOnInit();
       component.loading = false;
       component.submitRule();

libs/journey-bundles/custom-payment/src/lib/components/initiator/initiator.service.spec.ts

@@ -2,6 +2,7 @@ import { ProductSummaryHttpService } from '@backbase/arrangement-manager-http-an
 import { of } from 'rxjs';
 import { AccountSelectorItems } from './initiator.model';
 import { InitiatorService } from './initiator.service';
+import { TestBed } from '@angular/core/testing';
 
 describe('InitiatorService', () => {
   let service: InitiatorService;
@@ -18,7 +19,16 @@ describe('InitiatorService', () => {
   } as unknown as ProductSummaryHttpService;
 
   beforeEach(() => {
-    service = new InitiatorService(mockProductSummaryService);
+    TestBed.configureTestingModule({
+      providers: [
+        InitiatorService,
+        {
+          provide: ProductSummaryHttpService,
+          useValue: mockProductSummaryService,
+        },
+      ],
+    });
+    service = TestBed.inject(InitiatorService);
   });
 
   it('should call product summary service to get arrangements', (done) => {

libs/shared/feature/auth/src/lib/activity-monitor/container/activity-monitor.component.spec.ts

@@ -12,6 +12,7 @@ import { OAuthService } from 'angular-oauth2-oidc';
 import { ReplaySubject } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
 import { ActivityMonitorComponent } from './activity-monitor.component';
+import { TestBed } from '@angular/core/testing';
 
 type WidePropertyTypes<T> = Partial<Record<keyof T, unknown>>;
 const mock = <T>(overrides?: WidePropertyTypes<T>) =>
@@ -34,11 +35,15 @@ describe('ActivityMonitorComponent', () => {
       isAuthenticated$,
       initLoginFlow: jest.fn(),
     });
-    const component = new ActivityMonitorComponent(
-      activityMonitorService,
-      oAuthService,
-      authService
-    );
+    TestBed.configureTestingModule({
+      providers: [
+        ActivityMonitorComponent,
+        { provide: ActivityMonitorService, useValue: activityMonitorService },
+        { provide: OAuthService, useValue: oAuthService },
+        { provide: AuthService, useValue: authService },
+      ],
+    });
+    const component = TestBed.inject(ActivityMonitorComponent);
     const scheduler = new TestScheduler((a, e) => expect(a).toEqual(e));
 
     return {

libs/shared/feature/auth/src/lib/auth-events-handler/auth-events-handler.service.spec.ts

@@ -6,6 +6,7 @@ import { AuthEventsHandlerService } from './auth-events-handler.service';
 import { AuthService } from '@backbase/identity-auth';
 import { LocalesService } from '@backbase/shared/util/app-core';
 import { TestScheduler } from 'rxjs/testing';
+import { TestBed } from '@angular/core/testing';
 
 export type WidePropertyTypes<T> = Partial<Record<keyof T, unknown>>;
 export const mock = <T>(overrides?: WidePropertyTypes<T>) =>
@@ -28,11 +29,15 @@ describe('AuthEventsHandlerService', () => {
       setLocale: jest.fn(),
       currentLocale: 'en',
     });
-    const service = new AuthEventsHandlerService(
-      oAuthService,
-      authService,
-      localeService
-    );
+    TestBed.configureTestingModule({
+      providers: [
+        AuthEventsHandlerService,
+        { provide: OAuthService, useValue: oAuthService },
+        { provide: AuthService, useValue: authService },
+        { provide: LocalesService, useValue: localeService },
+      ],
+    });
+    const service = TestBed.inject(AuthEventsHandlerService);
     const scheduler = new TestScheduler((a, e) => expect(a).toEqual(e));
 
     return {

libs/shared/feature/auth/src/lib/guard/auth.guard.spec.ts

@@ -4,7 +4,7 @@ import { AuthService } from '@backbase/identity-auth';
 import { ReplaySubject } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
 import { AuthGuard } from './auth.guard';
-import { Environment } from '@backbase/shared/util/config';
+import { TestBed } from '@angular/core/testing';
 
 export type WidePropertyTypes<T> = Partial<Record<keyof T, unknown>>;
 export const mock = <T>(overrides?: WidePropertyTypes<T>) =>
@@ -17,13 +17,10 @@ describe('AuthGuard', () => {
       isAuthenticated$: isAuthenticated$$.asObservable(),
       initLoginFlow: jest.fn(),
     });
-    const environment: Environment = {
-      production: false,
-      apiRoot: '',
-      locales: [],
-      common: { designSlimMode: false },
-    };
-    const guard = new AuthGuard(authService, environment);
+    TestBed.configureTestingModule({
+      providers: [AuthGuard, { provide: AuthService, useValue: authService }],
+    });
+    const guard = TestBed.inject(AuthGuard);
     const scheduler = new TestScheduler((a, e) => expect(a).toEqual(e));
 
     return { guard, authService, isAuthenticated$$, scheduler };