WEB-341 Add Integration Tests for CreateClientComponent

jest.config.ts

@@ -1,4 +1,5 @@
 /**
+ * Jest configuration in TypeScript with full type safety
  * For a detailed explanation regarding each configuration property, visit:
  * https://jestjs.io/docs/configuration
  */
@@ -6,15 +7,6 @@
 import type { Config } from 'jest';
 
 const config: Config = {
-  // All imported modules in your tests should be mocked automatically
-  // automock: false,
-
-  // Stop running tests after `n` failures
-  // bail: 0,
-
-  // The directory where Jest should store its cached dependency information
-  // cacheDirectory: "C:\\Users\\felix\\AppData\\Local\\Temp\\jest",
-
   // Automatically clear mock calls, instances, contexts and results before every test
   clearMocks: true,
 
@@ -22,178 +14,73 @@ const config: Config = {
   collectCoverage: true,
 
   // An array of glob patterns indicating a set of files for which coverage information should be collected
-  // collectCoverageFrom: undefined,
+  collectCoverageFrom: [
+    'src/app/**/*.ts',
+    '!src/app/**/*.spec.ts',
+    '!src/app/**/*.module.ts',
+    '!src/app/**/*.interface.ts',
+    '!src/app/**/*.model.ts'
+  ],
 
   // The directory where Jest should output its coverage files
   coverageDirectory: 'coverage',
 
-  // An array of regexp pattern strings used to skip coverage collection
-  // coveragePathIgnorePatterns: [
-  //   "\\\\node_modules\\\\"
-  // ],
-
   // Indicates which provider should be used to instrument code for coverage
   coverageProvider: 'v8',
 
-  // A list of reporter names that Jest uses when writing coverage reports
-  // coverageReporters: [
-  //   "json",
-  //   "text",
-  //   "lcov",
-  //   "clover"
-  // ],
-
-  // An object that configures minimum threshold enforcement for coverage results
-  // coverageThreshold: undefined,
-
-  // A path to a custom dependency extractor
-  // dependencyExtractor: undefined,
-
-  // Make calling deprecated APIs throw helpful error messages
-  // errorOnDeprecated: false,
-
-  // The default configuration for fake timers
-  // fakeTimers: {
-  //   "enableGlobally": false
-  // },
-
-  // Force coverage collection from ignored files using an array of glob patterns
-  // forceCoverageMatch: [],
-
   // A path to a module which exports an async function that is triggered once before all test suites
-  // globalSetup: undefined,
+  globalSetup: 'jest-preset-angular/global-setup',
-
-  // A path to a module which exports an async function that is triggered once after all test suites
-  // globalTeardown: undefined,
-
-  // A set of global variables that need to be available in all test environments
-  // globals: {},
-
-  // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
-  // maxWorkers: "50%",
-
-  // An array of directory names to be searched recursively up from the requiring module's location
-  // moduleDirectories: [
-  //   "node_modules"
-  // ],
-
-  // An array of file extensions your modules use
-  // moduleFileExtensions: [
-  //   "js",
-  //   "mjs",
-  //   "cjs",
-  //   "jsx",
-  //   "ts",
-  //   "tsx",
-  //   "json",
-  //   "node"
-  // ],
 
   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
-  // moduleNameMapper: {},
+  moduleNameMapper: {
+    '^app/(.*)$': '<rootDir>/src/app/$1',
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '^@pipes/(.*)$': '<rootDir>/src/app/pipes/$1'
+  },
 
-  // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
+  // An array of directory names to be searched recursively up from the requiring module's location
-  // modulePathIgnorePatterns: [],
+  moduleDirectories: [
+    'node_modules',
+    'src'
+  ],
 
-  // Activates notifications for test results
+  // An array of file extensions your modules use
-  // notify: false,
+  moduleFileExtensions: [
-
+    'ts',
-  // An enum that specifies notification mode. Requires { notify: true }
+    'html',
-  // notifyMode: "failure-change",
+    'js',
+    'json',
+    'mjs'
+  ],
 
   // A preset that is used as a base for Jest's configuration
-  // preset: undefined,
+  preset: 'jest-preset-angular',
-
-  // Run tests from one or more projects
-  // projects: undefined,
-
-  // Use this configuration option to add custom reporters to Jest
-  // reporters: undefined,
-
-  // Automatically reset mock state before every test
-  // resetMocks: false,
-
-  // Reset the module registry before running each individual test
-  // resetModules: false,
-
-  // A path to a custom resolver
-  // resolver: undefined,
-
-  // Automatically restore mock state and implementation before every test
-  // restoreMocks: false,
-
-  // The root directory that Jest should scan for tests and modules within
-  // rootDir: undefined,
-
-  // A list of paths to directories that Jest should use to search for files in
-  // roots: [
-  //   "<rootDir>"
-  // ],
-
-  // Allows you to use a custom runner instead of Jest's default test runner
-  // runner: "jest-runner",
-
-  // The paths to modules that run some code to configure or set up the testing environment before each test
-  // setupFiles: [],
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
-  // setupFilesAfterEnv: [],
+  setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
-
-  // The number of seconds after which a test is considered as slow and reported as such in the results.
-  // slowTestThreshold: 5,
-
-  // A list of paths to snapshot serializer modules Jest should use for snapshot testing
-  // snapshotSerializers: [],
 
   // The test environment that will be used for testing
-  testEnvironment: 'jsdom'
+  testEnvironment: 'jsdom',
-
-  // Options that will be passed to the testEnvironment
-  // testEnvironmentOptions: {},
-
-  // Adds a location field to test results
-  // testLocationInResults: false,
 
   // The glob patterns Jest uses to detect test files
-  // testMatch: [
+  testMatch: [
-  //   "**/__tests__/**/*.[jt]s?(x)",
+    '<rootDir>/src/app/**/*.spec.ts',
-  //   "**/?(*.)+(spec|test).[tj]s?(x)"
+    '<rootDir>/src/app/**/*.test.ts'
-  // ],
+  ],
-
-  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
-  // testPathIgnorePatterns: [
-  //   "\\\\node_modules\\\\"
-  // ],
-
-  // The regexp pattern or array of patterns that Jest uses to detect test files
-  // testRegex: [],
-
-  // This option allows the use of a custom results processor
-  // testResultsProcessor: undefined,
-
-  // This option allows use of a custom test runner
-  // testRunner: "jest-circus/runner",
 
   // A map from regular expressions to paths to transformers
-  // transform: undefined,
+  transform: {
+    '^.+\\.(ts|js|mjs|html|svg)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/src/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$'
+      }
+    ]
+  },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  // transformIgnorePatterns: [
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$|@angular|@fortawesome)']
-  //   "\\\\node_modules\\\\",
-  //   "\\.pnp\\.[^\\\\]+$"
-  // ],
-
-  // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
-  // unmockedModulePathPatterns: undefined,
-
-  // Indicates whether each individual test should be reported during the run
-  // verbose: undefined,
-
-  // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
-  // watchPathIgnorePatterns: [],
-
-  // Whether to use watchman for file crawling
-  // watchman: true,
 };
 
 export default config;

package.json

@@ -19,9 +19,10 @@
     "serve:dev": "npm run env -s && ng serve --source-map",
     "serve:sw": "npm run build -s && npx http-server ./dist -p 4200",
     "lint": "eslint . && stylelint \"src/**/*.scss\" && prettier . --check && htmlhint \"src\" --config .htmlhintrc",
-    "test": "jest",
+    "test": "jest --config jest.config.ts",
-    "test:ci": "npm run env -s && npm run lint -s && ng test --code-coverage --watch=false",
+    "test:watch": "jest --config jest.config.ts --watch",
-    "test:watch": "ng test --watch",
+    "test:coverage": "jest --config jest.config.ts --coverage",
+    "test:ci": "jest --config jest.config.ts --ci --coverage --watchAll=false",
     "e2e": "ng e2e",
     "translations:extract": "ngx-translate-extract --input ./src --output ./src/translations/template.json --format=json --clean -sort --marker extract",
     "env": "node version.js",
@@ -111,7 +112,7 @@
     "stylelint-config-standard": "^36.0.1",
     "stylelint-scss": "^6.8.1",
     "tailwindcss": "^3.3.3",
-    "ts-node": "8.2.0",
+    "ts-node": "^10.9.2",
     "typescript": "^5.4.5"
   },
   "repository": {

src/app/clients/create-client/create-client.component.spec.ts

@@ -0,0 +1,552 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Router } from '@angular/router';
+import { of, BehaviorSubject } from 'rxjs';
+import { CreateClientComponent } from './create-client.component';
+import { ClientsService } from '../clients.service';
+import { SettingsService } from '../../settings/settings.service';
+import { DatePipe, DecimalPipe } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { provideNativeDateAdapter } from '@angular/material/core';
+import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
+import * as solidIcons from '@fortawesome/free-solid-svg-icons';
+import { describe, it, expect, jest, beforeEach } from '@jest/globals';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+
+describe('CreateClientComponent - Integration Tests', () => {
+  let component: CreateClientComponent;
+  let fixture: ComponentFixture<CreateClientComponent>;
+  let mockRouter: jest.Mocked<Router>;
+  let mockClientsService: jest.Mocked<ClientsService>;
+  let mockSettingsService: jest.Mocked<SettingsService>;
+  let routeDataSubject: BehaviorSubject<any>;
+
+  const mockClientTemplate: any = {
+    isAddressEnabled: true,
+    datatables: [
+      {
+        registeredTableName: 'PersonDatatable',
+        entitySubType: 'person',
+        columnHeaderData: [] as any[]
+      },
+      {
+        registeredTableName: 'EntityDatatable',
+        entitySubType: 'entity',
+        columnHeaderData: [] as any[]
+      }
+    ],
+    officeOptions: [
+      { id: 1, name: 'Head Office' }],
+    staffOptions: [
+      { id: 1, displayName: 'John Doe' }],
+    savingsProductOptions: [] as any[],
+    genderOptions: [] as any[],
+    clientTypeOptions: [] as any[],
+    clientClassificationOptions: [] as any[],
+    clientNonPersonConstitutionOptions: [] as any[],
+    clientNonPersonMainBusinessLineOptions: [] as any[],
+    clientLegalFormOptions: [
+      { id: 1, value: 'Person' },
+      { id: 2, value: 'Entity' }
+    ]
+  };
+
+  const mockAddressConfig = {
+    addressTypeIdOptions: [
+      { id: 1, name: 'Home' }]
+  };
+
+  beforeEach(async () => {
+    mockRouter = {
+      navigate: jest.fn()
+    } as any;
+
+    routeDataSubject = new BehaviorSubject({
+      clientTemplate: { ...mockClientTemplate },
+      clientAddressFieldConfig: { ...mockAddressConfig }
+    });
+
+    mockClientsService = {
+      createClient: jest.fn(() => of({ resourceId: 123, clientId: 123 }))
+    } as unknown as jest.Mocked<ClientsService>;
+
+    mockSettingsService = {
+      language: { code: 'en' },
+      dateFormat: 'dd MMMM yyyy'
+    } as unknown as jest.Mocked<SettingsService>;
+
+    await TestBed.configureTestingModule({
+      imports: [
+        CreateClientComponent,
+        TranslateModule.forRoot()
+      ],
+      providers: [
+        { provide: Router, useValue: mockRouter },
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            data: routeDataSubject.asObservable(),
+            snapshot: { data: routeDataSubject.value }
+          }
+        },
+        { provide: ClientsService, useValue: mockClientsService },
+        { provide: SettingsService, useValue: mockSettingsService },
+        DatePipe,
+        DecimalPipe,
+        provideNativeDateAdapter(),
+        provideAnimationsAsync()
+
+      ]
+    }).compileComponents();
+
+    // Add all FontAwesome solid icons to handle all child component icon requirements
+    const faIconLibrary = TestBed.inject(FaIconLibrary);
+    const iconList = Object.keys(solidIcons)
+      .filter((key) => key !== 'fas' && key !== 'prefix' && key.startsWith('fa'))
+      .map((icon) => (solidIcons as any)[icon]);
+    faIconLibrary.addIcons(...iconList);
+
+    fixture = TestBed.createComponent(CreateClientComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe('Component Initialization', () => {
+    it('should create the component', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default legal form type as Person (1)', () => {
+      expect(component.legalFormType).toBe(1);
+    });
+
+    it('should load client template and address config from route resolver', () => {
+      expect(component.clientTemplate).toEqual(mockClientTemplate);
+      expect(component.clientAddressFieldConfig).toEqual(mockAddressConfig);
+    });
+
+    it('should filter datatables based on initial legal form type', () => {
+      expect(component.datatables).toHaveLength(1);
+      expect(component.datatables[0].entitySubType).toBe('person');
+    });
+  });
+
+  describe('Legal Form Type Changes', () => {
+    it('should update legal form type when changed to Entity', () => {
+      component.legalFormChange({ legalForm: 2 });
+      expect(component.legalFormType).toBe(2);
+    });
+
+    it('should filter datatables for Entity when legal form is Entity', () => {
+      component.legalFormChange({ legalForm: 2 });
+      expect(component.datatables).toHaveLength(1);
+      expect(component.datatables[0].entitySubType).toBe('entity');
+      expect(component.datatables[0].registeredTableName).toBe('EntityDatatable');
+    });
+
+    it('should filter datatables for Person when legal form is Person', () => {
+      component.legalFormChange({ legalForm: 1 });
+      expect(component.datatables).toHaveLength(1);
+      expect(component.datatables[0].entitySubType).toBe('person');
+      expect(component.datatables[0].registeredTableName).toBe('PersonDatatable');
+    });
+
+    it('should handle no datatables when template has none', () => {
+      routeDataSubject.next({
+        clientTemplate: { ...mockClientTemplate, datatables: [] },
+        clientAddressFieldConfig: mockAddressConfig
+      });
+
+      component.legalFormChange({ legalForm: 2 });
+      expect(component.datatables).toHaveLength(0);
+    });
+
+    it('should re-filter datatables when switching between Person and Entity multiple times', () => {
+      component.legalFormChange({ legalForm: 2 });
+      expect(component.datatables[0].entitySubType).toBe('entity');
+
+      component.legalFormChange({ legalForm: 1 });
+      expect(component.datatables[0].entitySubType).toBe('person');
+
+      component.legalFormChange({ legalForm: 2 });
+      expect(component.datatables[0].entitySubType).toBe('entity');
+    });
+  });
+
+  describe('Client Data Aggregation', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+    it('should aggregate client data from general and family steps when address is disabled', () => {
+      routeDataSubject.next({
+        clientTemplate: { ...mockClientTemplate, isAddressEnabled: false },
+        clientAddressFieldConfig: mockAddressConfig
+      });
+
+      // Mock the getter methods on child components
+      if (component.clientGeneralStep) {
+        Object.defineProperty(component.clientGeneralStep, 'clientGeneralDetails', {
+          get: jest.fn(() => ({
+            firstname: 'John',
+            lastname: 'Doe',
+            officeId: 1,
+            active: true
+          })),
+          configurable: true
+        });
+      }
+
+      if (component.clientFamilyMembersStep) {
+        Object.defineProperty(component.clientFamilyMembersStep, 'familyMembers', {
+          get: jest.fn(() => ({
+            familyMembers: [
+              { firstName: 'Jane', relationship: 'Spouse' }]
+          })),
+          configurable: true
+        });
+      }
+
+      const clientData = component.client;
+      expect(clientData.firstname).toBe('John');
+      expect(clientData.lastname).toBe('Doe');
+      expect(clientData.familyMembers).toBeDefined();
+    });
+
+    it('should aggregate client data including address when address is enabled', () => {
+      // Mock the getter methods on child components
+      if (component.clientGeneralStep) {
+        Object.defineProperty(component.clientGeneralStep, 'clientGeneralDetails', {
+          get: jest.fn(() => ({
+            firstname: 'John',
+            lastname: 'Doe',
+            officeId: 1,
+            active: true
+          })),
+          configurable: true
+        });
+      }
+
+      if (component.clientFamilyMembersStep) {
+        Object.defineProperty(component.clientFamilyMembersStep, 'familyMembers', {
+          get: jest.fn(() => ({
+            familyMembers: [
+              { firstName: 'Jane', relationship: 'Spouse' }]
+          })),
+          configurable: true
+        });
+      }
+
+      if (component.clientAddressStep) {
+        Object.defineProperty(component.clientAddressStep, 'address', {
+          get: jest.fn(() => ({
+            address: [
+              { addressTypeId: 1, street: '123 Main St' }]
+          })),
+          configurable: true
+        });
+      }
+
+      const clientData = component.client;
+      expect(clientData.firstname).toBe('John');
+      expect(clientData.address).toBeDefined();
+    });
+  });
+
+  describe('Form Validation', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+    it('should validate that general form is required', () => {
+      if (component.clientGeneralStep && component.clientGeneralStep.createClientForm) {
+        jest.spyOn(component.clientGeneralForm, 'valid', 'get').mockReturnValue(false);
+        expect(component.areFormvalids()).toBe(false);
+      }
+    });
+
+    it('should require address when address is enabled', () => {
+      component.clientTemplate.isAddressEnabled = true;
+
+      if (component.clientGeneralStep && component.clientGeneralStep.createClientForm) {
+        jest.spyOn(component.clientGeneralForm, 'valid', 'get').mockReturnValue(true);
+      }
+
+      if (component.clientAddressStep) {
+        Object.defineProperty(component.clientAddressStep, 'address', {
+          get: jest.fn(() => ({ address: [] })),
+          configurable: true
+        });
+        expect(component.areFormvalids()).toBe(false);
+      }
+    });
+
+    it('should validate all datatable forms when datatables exist', () => {
+      component.clientTemplate.datatables = mockClientTemplate.datatables;
+      component.clientTemplate.isAddressEnabled = false; // Disable address to simplify test
+      component.setDatatables();
+
+      if (component.clientGeneralStep && component.clientGeneralStep.createClientForm) {
+        jest.spyOn(component.clientGeneralForm, 'valid', 'get').mockReturnValue(true);
+      }
+
+      // When there are no clientDatatables ViewChildren, validation should pass
+      expect(component.areFormvalids()).toBe(true);
+    });
+
+    it('should pass validation when all forms are valid', () => {
+      component.clientTemplate.isAddressEnabled = false;
+
+      if (component.clientGeneralStep && component.clientGeneralStep.createClientForm) {
+        jest.spyOn(component.clientGeneralForm, 'valid', 'get').mockReturnValue(true);
+      }
+
+      expect(component.areFormvalids()).toBe(true);
+    });
+  });
+
+  describe('Client Submission', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+
+      // Mock child component getters
+      if (component.clientGeneralStep) {
+        Object.defineProperty(component.clientGeneralStep, 'clientGeneralDetails', {
+          get: jest.fn(() => ({
+            firstname: 'John',
+            lastname: 'Doe',
+            officeId: 1,
+            active: true,
+            externalId: 'EXT-001',
+            dateFormat: 'dd MMMM yyyy',
+            locale: 'en'
+          })),
+          configurable: true
+        });
+      }
+
+      if (component.clientFamilyMembersStep) {
+        Object.defineProperty(component.clientFamilyMembersStep, 'familyMembers', {
+          get: jest.fn(() => ({
+            familyMembers: []
+          })),
+          configurable: true
+        });
+      }
+    });
+
+    it('should submit client with locale and dateFormat from settings', () => {
+      component.submit();
+
+      expect(mockClientsService.createClient).toHaveBeenCalledWith(
+        expect.objectContaining({
+          dateFormat: 'dd MMMM yyyy',
+          locale: 'en'
+        })
+      );
+    });
+
+    it('should navigate to client detail page after successful creation', () => {
+      const mockActivatedRoute = TestBed.inject(ActivatedRoute);
+
+      component.submit();
+
+      expect(mockClientsService.createClient).toHaveBeenCalled();
+      expect(mockRouter.navigate).toHaveBeenCalledWith(
+        [
+          '../',
+          123
+        ],
+        { relativeTo: mockActivatedRoute }
+      );
+    });
+
+    it('should include address data in submission when address is enabled', () => {
+      component.clientTemplate.isAddressEnabled = true;
+
+      if (component.clientAddressStep) {
+        Object.defineProperty(component.clientAddressStep, 'address', {
+          get: jest.fn(() => ({
+            address: [
+              { addressTypeId: 1, street: '123 Main St', city: 'New York' }]
+          })),
+          configurable: true
+        });
+      }
+
+      component.submit();
+
+      expect(mockClientsService.createClient).toHaveBeenCalledWith(
+        expect.objectContaining({
+          address: expect.arrayContaining([
+            expect.objectContaining({ street: '123 Main St' })
+          ])
+        })
+      );
+    });
+
+    it('should submit without address when address is disabled', () => {
+      component.clientTemplate.isAddressEnabled = false;
+
+      component.submit();
+
+      const callArgs = mockClientsService.createClient.mock.calls[0][0];
+      expect(callArgs.address).toBeUndefined();
+    });
+
+    it('should include datatable data when datatables exist', () => {
+      component.clientTemplate.datatables = mockClientTemplate.datatables;
+      component.setDatatables();
+
+      // Note: In real scenario, clientDatatables would be populated by ViewChildren
+      // This test verifies the logic flow
+      component.submit();
+
+      expect(mockClientsService.createClient).toHaveBeenCalled();
+    });
+
+    it('should handle client creation with all data types', () => {
+      component.clientTemplate.isAddressEnabled = true;
+      component.clientTemplate.datatables = mockClientTemplate.datatables;
+
+      if (component.clientAddressStep) {
+        Object.defineProperty(component.clientAddressStep, 'address', {
+          get: jest.fn(() => ({
+            address: [{ addressTypeId: 1, street: 'Test St' }]
+          })),
+          configurable: true
+        });
+      }
+
+      component.submit();
+
+      expect(mockClientsService.createClient).toHaveBeenCalledWith(
+        expect.objectContaining({
+          firstname: 'John',
+          lastname: 'Doe',
+          officeId: 1,
+          dateFormat: 'dd MMMM yyyy',
+          locale: 'en'
+        })
+      );
+    });
+  });
+
+  describe('Edge Cases and Error Handling', () => {
+    it('should handle missing client template gracefully', () => {
+      routeDataSubject.next({
+        clientTemplate: null,
+        clientAddressFieldConfig: mockAddressConfig
+      });
+
+      // The component doesn't currently handle null template, which is actually a bug
+      // But this test documents the current behavior
+      expect(component.clientTemplate).toBeNull();
+    });
+
+    it('should handle undefined datatables in template', () => {
+      routeDataSubject.next({
+        clientTemplate: { ...mockClientTemplate, datatables: undefined },
+        clientAddressFieldConfig: mockAddressConfig
+      });
+
+      component.setDatatables();
+      expect(component.datatables).toEqual([]);
+    });
+
+    it('should handle datatables with case-insensitive entitySubType', () => {
+      routeDataSubject.next({
+        clientTemplate: {
+          ...mockClientTemplate,
+          datatables: [
+            { registeredTableName: 'Test1', entitySubType: 'PERSON' },
+            { registeredTableName: 'Test2', entitySubType: 'Person' },
+            { registeredTableName: 'Test3', entitySubType: 'person' }
+          ]
+        },
+        clientAddressFieldConfig: mockAddressConfig
+      });
+
+      component.legalFormChange({ legalForm: 1 });
+      expect(component.datatables).toHaveLength(3);
+    });
+
+    it('should properly update when route data changes', () => {
+      const newTemplate = {
+        ...mockClientTemplate,
+        isAddressEnabled: false
+      };
+
+      routeDataSubject.next({
+        clientTemplate: newTemplate,
+        clientAddressFieldConfig: mockAddressConfig
+      });
+
+      expect(component.clientTemplate.isAddressEnabled).toBe(false);
+    });
+  });
+
+  describe('Integration Flow - Complete Client Creation', () => {
+    it('should complete full client creation workflow', () => {
+      // 1. Component initializes
+      fixture.detectChanges();
+      expect(component).toBeTruthy();
+      expect(component.clientTemplate).toBeDefined();
+
+      // 2. User fills general information
+      if (component.clientGeneralStep) {
+        Object.defineProperty(component.clientGeneralStep, 'clientGeneralDetails', {
+          get: jest.fn(() => ({
+            firstname: 'Jane',
+            lastname: 'Smith',
+            officeId: 1,
+            active: true,
+            dateFormat: 'dd MMMM yyyy',
+            locale: 'en'
+          })),
+          configurable: true
+        });
+      }
+
+      // 3. User adds family members
+      if (component.clientFamilyMembersStep) {
+        Object.defineProperty(component.clientFamilyMembersStep, 'familyMembers', {
+          get: jest.fn(() => ({
+            familyMembers: [
+              { firstName: 'John', relationship: 'Spouse' }]
+          })),
+          configurable: true
+        });
+      }
+
+      // 4. User adds address
+      if (component.clientAddressStep) {
+        Object.defineProperty(component.clientAddressStep, 'address', {
+          get: jest.fn(() => ({
+            address: [
+              { addressTypeId: 1, street: '456 Oak Ave', city: 'Boston' }]
+          })),
+          configurable: true
+        });
+      }
+
+      // 5. Form validation passes
+      if (component.clientGeneralStep && component.clientGeneralStep.createClientForm) {
+        jest.spyOn(component.clientGeneralForm, 'valid', 'get').mockReturnValue(true);
+      }
+
+      // 6. User submits
+      component.submit();
+
+      // 7. Client is created
+      expect(mockClientsService.createClient).toHaveBeenCalled();
+
+      // 8. Navigation occurs
+      expect(mockRouter.navigate).toHaveBeenCalledWith(
+        expect.arrayContaining([
+          '../',
+          123
+        ]),
+        expect.any(Object)
+      );
+    });
+  });
+});

src/setup-jest.ts

@@ -0,0 +1,64 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv();
+
+// Global test setup
+Object.defineProperty(window, 'getComputedStyle', {
+  value: () => ({
+    getPropertyValue: () => ''
+  })
+});
+
+// Mock localStorage
+const localStorageMock = {
+  getItem: jest.fn(),
+  setItem: jest.fn(),
+  removeItem: jest.fn(),
+  clear: jest.fn(),
+  length: 0,
+  key: jest.fn()
+};
+
+Object.defineProperty(window, 'localStorage', {
+  value: localStorageMock
+});
+
+// Mock sessionStorage
+Object.defineProperty(window, 'sessionStorage', {
+  value: localStorageMock
+});
+
+// Mock matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn()
+  }))
+});
+
+// Mock CSS.supports
+Object.defineProperty(window, 'CSS', {
+  value: {
+    supports: jest.fn().mockReturnValue(false)
+  }
+});
+
+// Mock window.env for environment configuration
+Object.defineProperty(window, 'env', {
+  value: {
+    oidcServerEnabled: false,
+    oidcBaseUrl: '',
+    oidcClientId: '',
+    oidcApiUrl: '',
+    apiUrl: 'http://localhost:8080',
+    tenantIdentifier: 'default'
+  },
+  writable: true
+});

src/tsconfig.spec.json

@@ -2,9 +2,13 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
-    "baseUrl": "./",
+    "baseUrl": "../",
+    "paths": {
+      "@pipes/*": ["src/app/pipes/*"],
+      "app/*": ["src/app/*"]
+    },
     "types": [
-      "jasmine",
+      "jest",
       "node"
     ]
   },
@@ -14,6 +18,7 @@
   ],
   "include": [
     "**/*.spec.ts",
+    "**/*.test.ts",
     "**/*.mock.ts",
     "**/*.d.ts"
   ]