fix(toggle-button): allow reset values as radio values (#176)

allianz · Jan 11, 2021 · c2720b9 · c2720b9
1 parent 923c224
commit c2720b9
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 8 deletions.
diff --git a/projects/ng-aquila/src/radio-toggle/radio-toggle.component.spec.ts b/projects/ng-aquila/src/radio-toggle/radio-toggle.component.spec.ts
@@ -5,7 +5,7 @@ import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core
 import {FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
 import * as axe from 'axe-core';
 
-import { NxRadioToggleComponent } from './radio-toggle.component';
+import { NxRadioToggleComponent, RESET_VALUES } from './radio-toggle.component';
 import { NxRadioToggleModule } from './radio-toggle.module';
 
 // We can safely ignore some conventions in our specs
@@ -163,6 +163,44 @@ describe('NxRadioToggleComponent', () => {
     }));
   });
 
+  describe('reset values', () => {
+    RESET_VALUES.forEach((resetValue, index) => {
+      it(`should deselect all when no matching button with "${resetValue}" value present`, fakeAsync(() => {
+        createTestComponent(LoopedRadioToggle);
+        const testInstance = fixture.componentInstance as LoopedRadioToggle;
+        testInstance.value = 'A';
+        fixture.detectChanges();
+        tick();
+        const toggleButtons = fixture.debugElement.queryAll(By.directive(NxRadioToggleButtonComponent));
+        expect((toggleButtons[0].componentInstance).selected).toBe(true);
+        expect((toggleButtons[1].componentInstance).selected).toBe(false);
+        expect((toggleButtons[2].componentInstance).selected).toBe(false);
+        testInstance.value = resetValue;
+        fixture.detectChanges();
+        tick();
+        expect((toggleButtons[0].componentInstance).selected).toBe(false);
+        expect((toggleButtons[1].componentInstance).selected).toBe(false);
+        expect((toggleButtons[2].componentInstance).selected).toBe(false);
+      }));
+
+      it(`should select respective button for value "${resetValue}" if present`, fakeAsync(() => {
+        createTestComponent(LoopedRadioToggle);
+        const testInstance = fixture.componentInstance as LoopedRadioToggle;
+        testInstance.data = RESET_VALUES;
+        testInstance.value = 'some_value'; // HINT: it you let value empty, 'undefined' button is pre-selected.
+        fixture.detectChanges();
+        tick();
+        testInstance.value = resetValue;
+        fixture.detectChanges();
+        tick();
+        const toggleButtons = fixture.debugElement.queryAll(By.directive(NxRadioToggleButtonComponent));
+        RESET_VALUES.forEach((_, i) => {
+          expect((toggleButtons[i].componentInstance).selected).toBe(i === index);
+        });
+      }));
+    });
+  });
+
   describe('disabling', () => {
 
     it('should support disabling of a single option', () => {

diff --git a/projects/ng-aquila/src/radio-toggle/radio-toggle.component.ts b/projects/ng-aquila/src/radio-toggle/radio-toggle.component.ts
@@ -28,6 +28,8 @@ const MAPPING = {
   'small': 'nx-radio-toggle--small',
 };
 
+export const RESET_VALUES = [null, undefined, ''];
+
 @Component({
   selector: 'nx-radio-toggle',
   templateUrl: 'radio-toggle.component.html',
@@ -164,14 +166,14 @@ export class NxRadioToggleComponent implements ControlValueAccessor, AfterViewIn
   @Input('nxSelection')
   writeValue(value: any): void {
     this._selection = value;
-    if (value === null || value === undefined || value === '') {
+    const correspondingButton =
+      this.toggleButtons.find((button: NxRadioToggleButtonComponent) => button.value === this._selection);
+    if (correspondingButton) {
+      (correspondingButton as NxRadioToggleButtonComponent).select();
+      return;
+    }
+    if (RESET_VALUES.indexOf(value) > -1) {
       this.toggleButtons.map((button: NxRadioToggleButtonComponent) => button.deselect());
-    } else {
-      const correspondingButton =
-        this.toggleButtons.find((button: NxRadioToggleButtonComponent) => button.value === this._selection);
-      if (correspondingButton) {
-        (correspondingButton as NxRadioToggleButtonComponent).select();
-      }
     }
   }