refactor(components/forms)!: update checked and radioType input types (#742)

Author: Blackbaud-CoreyArcher

libs/components/forms/src/index.ts

@@ -17,6 +17,7 @@ export * from './lib/modules/input-box/input-box-host.service';
 export * from './lib/modules/input-box/input-box-populate-args';
 
 export * from './lib/modules/radio/types/radio-change';
+export * from './lib/modules/radio/types/radio-type';
 export * from './lib/modules/radio/radio.module';
 
 export * from './lib/modules/selection-box/types/selection-box-grid-align-items';

libs/components/forms/src/lib/modules/radio/fixtures/radio-single.component.fixture.ts

@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
 
+import { SkyRadioType } from '../types/radio-type';
+
 @Component({
   templateUrl: './radio-single.component.fixture.html',
 })
 export class SkySingleRadioComponent {
   public icon = 'bold';
-  public radioType: string | undefined;
+  public radioType: SkyRadioType | undefined;
 }

libs/components/forms/src/lib/modules/radio/radio-group.component.ts

@@ -220,7 +220,7 @@ export class SkyRadioGroupComponent
     }
   }
 
-  public watchForSelections() {
+  public watchForSelections(): void {
     /* istanbul ignore else */
     if (this.radios) {
       this.radios.forEach((radio) => {
@@ -238,7 +238,7 @@ export class SkyRadioGroupComponent
     }
   }
 
-  public ngOnDestroy() {
+  public ngOnDestroy(): void {
     this.#ngUnsubscribe.next();
     this.#ngUnsubscribe.complete();
   }
@@ -257,7 +257,7 @@ export class SkyRadioGroupComponent
    * @internal
    * Indicates whether to disable the control. Implemented as a part of ControlValueAccessor.
    */
-  public setDisabledState(isDisabled: boolean) {
+  public setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
   }
 

libs/components/forms/src/lib/modules/radio/radio.component.spec.ts

@@ -18,9 +18,6 @@ import { SkyRadioLabelComponent } from './radio-label.component';
 import { SkyRadioComponent } from './radio.component';
 
 describe('Radio component', function () {
-  let fixture: ComponentFixture<any>;
-  let componentInstance: any;
-
   beforeEach(function () {
     TestBed.configureTestingModule({
       imports: [SkyRadioFixturesModule],
@@ -32,35 +29,29 @@ describe('Radio component', function () {
     spyOn(idSvc, 'generateId').and.callFake(() => `MOCK_ID_${++uniqueId}`);
   });
 
-  afterEach(function () {
-    if (fixture) {
-      fixture.destroy();
-    }
-  });
-
   describe('Standard radio component', () => {
-    let testComponent: SkyRadioTestComponent;
+    let fixture: ComponentFixture<SkyRadioTestComponent>;
+    let componentInstance: SkyRadioTestComponent;
 
     beforeEach(fakeAsync(() => {
       fixture = TestBed.createComponent(SkyRadioTestComponent);
 
       componentInstance = fixture.componentInstance;
-      testComponent = fixture.debugElement.componentInstance;
 
       fixture.detectChanges();
       tick();
     }));
 
     it('should emit the new disabled value when it is modified', () => {
-      const onDisabledChangeSpy = spyOn(testComponent, 'onDisabledChange');
+      const onDisabledChangeSpy = spyOn(componentInstance, 'onDisabledChange');
       expect(onDisabledChangeSpy).toHaveBeenCalledTimes(0);
-      testComponent.disabled1 = true;
+      componentInstance.disabled1 = true;
       fixture.detectChanges();
       expect(onDisabledChangeSpy).toHaveBeenCalledTimes(1);
     });
 
     it('should emit when radio is checked', async () => {
-      const onCheckedChangeSpy = spyOn(testComponent, 'onCheckedChange');
+      const onCheckedChangeSpy = spyOn(componentInstance, 'onCheckedChange');
       const radios: NodeListOf<HTMLInputElement> =
         fixture.nativeElement.querySelectorAll('input');
 
@@ -224,7 +215,7 @@ describe('Radio component', function () {
     }));
 
     it('should pass a tabindex when specified', fakeAsync(function () {
-      componentInstance.tabindex2 = '3';
+      componentInstance.tabindex2 = 3;
       fixture.detectChanges();
       tick();
 
@@ -286,6 +277,7 @@ describe('Radio component', function () {
 
   describe('Radio icon component', () => {
     let debugElement: DebugElement;
+    let fixture: ComponentFixture<SkySingleRadioComponent>;
 
     beforeEach(() => {
       fixture = TestBed.createComponent(SkySingleRadioComponent);
@@ -344,6 +336,9 @@ describe('Radio component', function () {
   });
 
   describe('Radio component with a consumer using OnPush change detection', () => {
+    let fixture: ComponentFixture<SkyRadioOnPushTestComponent>;
+    let componentInstance: SkyRadioOnPushTestComponent;
+
     beforeEach(function () {
       fixture = TestBed.createComponent(SkyRadioOnPushTestComponent);
 

libs/components/forms/src/lib/modules/radio/radio.component.ts

@@ -19,6 +19,7 @@ import { SkyFormsUtility } from '../shared/forms-utility';
 
 import { SkyRadioGroupIdService } from './radio-group-id.service';
 import { SkyRadioChange } from './types/radio-change';
+import { SkyRadioType } from './types/radio-type';
 
 /**
  * Provider Expression that allows sky-radio to register as a ControlValueAccessor.
@@ -53,7 +54,7 @@ export class SkyRadioComponent implements OnDestroy, ControlValueAccessor {
    * @default false
    */
   @Input()
-  public set checked(value: boolean) {
+  public set checked(value: boolean | undefined) {
     const newCheckedState = !!value;
 
     if (this.#_checked !== newCheckedState) {
@@ -214,15 +215,11 @@ export class SkyRadioComponent implements OnDestroy, ControlValueAccessor {
    * @default "info"
    */
   @Input()
-  public get radioType(): string {
+  public get radioType(): SkyRadioType {
     return this.#_radioType;
   }
-  public set radioType(value: string | undefined) {
-    if (value) {
-      this.#_radioType = value.toLocaleLowerCase();
-    } else {
-      this.#_radioType = 'info';
-    }
+  public set radioType(value: SkyRadioType | undefined) {
+    this.#_radioType = value ?? 'info';
   }
 
   /**
@@ -262,7 +259,7 @@ export class SkyRadioComponent implements OnDestroy, ControlValueAccessor {
   #_checked = false;
   #_disabled = false;
   #_name: string | undefined;
-  #_radioType = 'info';
+  #_radioType: SkyRadioType = 'info';
   #_selectedValue: unknown;
   #_tabindex = 0;
   #_value: any;

libs/components/forms/src/lib/modules/radio/types/radio-type.ts

@@ -0,0 +1 @@
+export type SkyRadioType = 'danger' | 'info' | 'success' | 'warning';