refactor: update onSearchChanged method to accept only string values across components

Author: TerranceKhumalo-absa

projects/composition/src/app/components/navigation-sidebar/navigation-sidebar.component.ts

@@ -168,8 +168,8 @@ export class NavigationSidebarComponent implements OnInit {
     this.filteredComponents = [...this._components];
   }
 
-  onSearchChanged(value: string | number) {
-    this._filterComponentsList(String(value));
+  onSearchChanged(value: string) {
+    this._filterComponentsList(value);
   }
 
   private _filterComponentsList(searchStr: string) {

projects/composition/src/app/pages/colors-page/colors-page/colors-page.component.ts

@@ -151,8 +151,8 @@ export class ColorsPageComponent implements OnInit {
     this.filteredColorsList = [...this.colorsList];
   }
 
-  onSearchChanged(value: string | number) {
-    this._filterColors(String(value));
+  onSearchChanged(value: string) {
+    this._filterColors(value);
   }
 
   private _filterColors(searchStr: string) {

projects/composition/src/app/pages/icons-page/icons-page/icons-page.component.ts

@@ -36,8 +36,8 @@ export class IconsPageComponent implements OnInit {
     this.filteredIconsList = iconNames;
   }
 
-  onSearchChanged(value: string | number) {
-    this._filterIcons(String(value));
+  onSearchChanged(value: string) {
+    this._filterIcons(value);
   }
 
   private _filterIcons(name: string) {

projects/cps-ui-kit/src/lib/components/cps-datepicker/cps-datepicker.component.ts

@@ -11,12 +11,12 @@ import {
   ViewChild
 } from '@angular/core';
 import { ControlValueAccessor, FormsModule, NgControl } from '@angular/forms';
-import { DatePickerModule } from 'primeng/datepicker';
+import { CpsInputComponent } from '../cps-input/cps-input.component';
 import { Subscription } from 'rxjs';
-import { CpsTooltipPosition } from '../../directives/cps-tooltip/cps-tooltip.directive';
 import { convertSize } from '../../utils/internal/size-utils';
-import { CpsInputComponent } from '../cps-input/cps-input.component';
+import { CpsTooltipPosition } from '../../directives/cps-tooltip/cps-tooltip.directive';
 import { CpsMenuComponent } from '../cps-menu/cps-menu.component';
+import { DatePickerModule } from 'primeng/datepicker';
 
 /**
  * CpsDatepickerAppearanceType is used to define the border of the datepicker input.
@@ -226,13 +226,13 @@ export class CpsDatepickerComponent
     this.onTouched = fn;
   }
 
-  onInputValueChanged(val: string | number) {
-    this.stringDate = String(val);
+  onInputValueChanged(val: string) {
+    this.stringDate = val;
     if (!val) {
       this._updateValue(null);
       return;
     }
-    const dt = this._stringToDate(String(val));
+    const dt = this._stringToDate(val);
     if (dt) this._updateValue(dt);
   }
 

projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.spec.ts

@@ -1,6 +1,6 @@
 import { ElementRef } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { CpsInputComponent } from './cps-input.component';
 
@@ -22,118 +22,7 @@ describe('CpsInputComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  describe('Zero Value Bug Tests', () => {
-    it('should display numeric zero value', () => {
-      component.writeValue(0);
-      fixture.detectChanges();
-
-      expect(component.value).toBe(0);
-      const inputElement = fixture.nativeElement.querySelector('input');
-      expect(inputElement.value).toBe('0');
-    });
-
-    it('should display string zero value', () => {
-      component.writeValue('0');
-      fixture.detectChanges();
-
-      expect(component.value).toBe('0');
-      const inputElement = fixture.nativeElement.querySelector('input');
-      expect(inputElement.value).toBe('0');
-    });
-
-    it('should handle zero in form control', () => {
-      const formControl = new FormControl<string | number>(0);
-      component.registerOnChange((value) => formControl.setValue(value));
-
-      component.writeValue(0);
-      fixture.detectChanges();
-
-      expect(component.value).toBe(0);
-    });
-
-    it('should emit zero value on change', () => {
-      const emitSpy = jest.spyOn(component.valueChanged, 'emit');
-
-      const inputElement = fixture.nativeElement.querySelector('input');
-      inputElement.value = '0';
-      inputElement.dispatchEvent(new Event('input'));
-      fixture.detectChanges();
-
-      expect(emitSpy).toHaveBeenCalledWith('0');
-    });
-
-    it('should handle zero with required validator', () => {
-      const formControl = new FormControl(0, Validators.required);
-      component.writeValue(0);
-      fixture.detectChanges();
-
-      expect(formControl.valid).toBe(true);
-      expect(component.value).toBe(0);
-    });
-
-    it('should distinguish between zero and empty string', () => {
-      // Test zero
-      component.writeValue(0);
-      fixture.detectChanges();
-      expect(component.value).toBe(0);
-
-      // Test empty string
-      component.writeValue('');
-      fixture.detectChanges();
-      expect(component.value).toBe('');
-
-      // They should be different
-      component.writeValue(0);
-      fixture.detectChanges();
-      const zeroValue = component.value;
-
-      component.writeValue('');
-      fixture.detectChanges();
-      const emptyValue = component.value;
-
-      expect(zeroValue).not.toBe(emptyValue);
-    });
-
-    it('should handle zero for numeric input type', () => {
-      component.type = 'number';
-      component.ngOnInit();
-      component.writeValue(0);
-      fixture.detectChanges();
-
-      expect(component.value).toBe(0);
-      const inputElement = fixture.nativeElement.querySelector('input');
-
-      expect(inputElement.type).toBe('number');
-      expect(inputElement.value).toBe('0');
-    });
-
-    it('should preserve zero when patching form value', () => {
-      const onChange = jest.fn();
-      component.registerOnChange(onChange);
-
-      component.writeValue(0);
-      fixture.detectChanges();
-
-      expect(component.value).toBe(0);
-      expect(onChange).toHaveBeenCalledWith(expect.anything());
-    });
-  });
-
   describe('Value Handling', () => {
-    it('should handle null value', () => {
-      component.writeValue(null);
-      fixture.detectChanges();
-
-      expect(component.value).toBe('');
-    });
-
-    it('should handle undefined value', () => {
-      component.writeValue(undefined);
-      fixture.detectChanges();
-
-      expect(component.value).toBe('');
-    });
-
     it('should handle empty string', () => {
       component.writeValue('');
       fixture.detectChanges();
@@ -149,24 +38,24 @@ describe('CpsInputComponent', () => {
     });
 
     it('should handle numeric values', () => {
-      component.writeValue(123);
+      component.writeValue('123');
       fixture.detectChanges();
 
-      expect(component.value).toBe(123);
+      expect(component.value).toBe('123');
     });
 
     it('should handle negative numbers', () => {
-      component.writeValue(-5);
+      component.writeValue('-5');
       fixture.detectChanges();
 
-      expect(component.value).toBe(-5);
+      expect(component.value).toBe('-5');
     });
 
     it('should handle decimal numbers', () => {
-      component.writeValue(3.14);
+      component.writeValue('3.14');
       fixture.detectChanges();
 
-      expect(component.value).toBe(3.14);
+      expect(component.value).toBe('3.14');
     });
   });
 
@@ -563,7 +452,7 @@ describe('CpsInputComponent', () => {
 
   describe('Edge Cases', () => {
     it('should handle rapid value changes', () => {
-      const values = [0, 1, 2, 3, 4, 5];
+      const values = ['0', '1', '2', '3', '4', '5'];
 
       values.forEach((val) => {
         component.writeValue(val);
@@ -573,7 +462,7 @@ describe('CpsInputComponent', () => {
     });
 
     it('should handle very large numbers', () => {
-      const largeNumber = 999999999999;
+      const largeNumber = '999999999999';
       component.writeValue(largeNumber);
       fixture.detectChanges();
 
@@ -608,11 +497,11 @@ describe('CpsInputComponent', () => {
   describe('Type Consistency', () => {
     it('should maintain number type for numeric input', () => {
       component.type = 'number';
-      component.writeValue(42);
+      component.writeValue('42');
       fixture.detectChanges();
 
-      expect(typeof component.value).toBe('number');
-      expect(component.value).toBe(42);
+      expect(typeof component.value).toBe('string');
+      expect(component.value).toBe('42');
     });
 
     it('should maintain string type for text input', () => {
@@ -623,15 +512,5 @@ describe('CpsInputComponent', () => {
       expect(typeof component.value).toBe('string');
       expect(component.value).toBe('text');
     });
-
-    it('should handle type conversion properly', () => {
-      // Write as number
-      component.writeValue(123);
-      expect(component.value).toBe(123);
-
-      // Write as string
-      component.writeValue('456');
-      expect(component.value).toBe('456');
-    });
   });
 });

projects/cps-ui-kit/src/lib/components/cps-input/cps-input.component.ts

@@ -14,16 +14,16 @@ import {
   ViewChild
 } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
-import { Subscription } from 'rxjs';
-import { CpsTooltipPosition } from '../../directives/cps-tooltip/cps-tooltip.directive';
-import { convertSize } from '../../utils/internal/size-utils';
 import {
   CpsIconComponent,
   IconType,
   iconSizeType
 } from '../cps-icon/cps-icon.component';
-import { CpsInfoCircleComponent } from '../cps-info-circle/cps-info-circle.component';
+import { Subscription } from 'rxjs';
+import { convertSize } from '../../utils/internal/size-utils';
 import { CpsProgressLinearComponent } from '../cps-progress-linear/cps-progress-linear.component';
+import { CpsInfoCircleComponent } from '../cps-info-circle/cps-info-circle.component';
+import { CpsTooltipPosition } from '../../directives/cps-tooltip/cps-tooltip.directive';
 
 /**
  * CpsInputAppearanceType is used to define the border of the input field.
@@ -192,22 +192,22 @@ export class CpsInputComponent
    * @default ''
    * @group Props
    */
-  @Input() set value(value: string | number) {
-    if (value === null || value === undefined) value = '';
+  @Input() set value(value: string) {
+    if (!value) value = '';
     this._value = value;
     this.onChange(value);
   }
 
-  get value(): string | number {
+  get value(): string {
     return this._value;
   }
 
   /**
    * Callback to invoke on value change.
-   * @param {string | number} value - value changed.
+   * @param {string} string - value changed.
    * @group Emits
    */
-  @Output() valueChanged = new EventEmitter<string | number>();
+  @Output() valueChanged = new EventEmitter<string>();
 
   /**
    * Callback to invoke when the component receives focus.
@@ -251,7 +251,7 @@ export class CpsInputComponent
   cvtWidth = '';
 
   private _statusChangesSubscription?: Subscription;
-  private _value: string | number = '';
+  private _value = '';
 
   constructor(
     @Self() @Optional() private _control: NgControl,
@@ -336,9 +336,8 @@ export class CpsInputComponent
     this.error = message || 'Unknown error';
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onChange = (value: string | number) => {};
-
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onChange = (event: any) => {};
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   onTouched = () => {};
 
@@ -347,24 +346,24 @@ export class CpsInputComponent
     this.enterClicked.emit();
   }
 
-  registerOnChange(fn: (value: string | number) => void) {
+  registerOnChange(fn: any) {
     this.onChange = fn;
   }
 
   registerOnTouched(fn: any) {
     this.onTouched = fn;
   }
 
-  writeValue(value: string | number | null | undefined) {
-    this.value = value ?? '';
+  writeValue(value: string) {
+    this.value = value;
   }
 
   updateValueEvent(event: any) {
-    const value = event?.target?.value ?? '';
+    const value = event?.target?.value || '';
     this._updateValue(value);
   }
 
-  private _updateValue(value: string | number) {
+  private _updateValue(value: string) {
     this.writeValue(value);
     this.onChange(value);
     this.valueChanged.emit(value);