fix(RadioGroup): visual radios now dispatch change event

ISSUES CLOSED: #1549
GetTerminus · Jul 8, 2019 · 3feec6a · 3feec6a
1 parent e6bca65
commit 3feec6a
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 40 deletions.
diff --git a/demo/app/components/radio/radio.component.html b/demo/app/components/radio/radio.component.html
@@ -40,6 +40,7 @@ <h3 tsCardTitle tsVerticalSpacing>
       [formatModelValueFn]="modelFormatter"
       [formControl]="myForm.get('myRadioGroup2')"
       [options]="items2$ | async"
+      (change)="selected($event)"
     ></ts-radio-group>
 
     Selected value: {{ myForm.get('myRadioGroup2')?.value }}
@@ -58,6 +59,7 @@ <h3 tsCardTitle tsVerticalSpacing>
       [formatModelValueFn]="modelFormatter"
       [formControl]="myForm.get('myRadioGroup2')"
       [options]="items2$ | async"
+      (change)="selected($event)"
     ></ts-radio-group>
 
     Selected value: {{ myForm.get('myRadioGroup2')?.value }}
@@ -76,6 +78,7 @@ <h3 tsCardTitle tsVerticalSpacing>
       [formatModelValueFn]="modelFormatter"
       [formControl]="myForm.get('myRadioGroup2')"
       [options]="items2$ | async"
+      (change)="selected($event)"
     ></ts-radio-group>
 
     Selected value: {{ myForm.get('myRadioGroup2')?.value }}

diff --git a/demo/app/components/radio/radio.component.ts b/demo/app/components/radio/radio.component.ts
@@ -1,8 +1,4 @@
-import {
-  Component,
-  TemplateRef,
-  ViewChild,
-} from '@angular/core';
+import { Component } from '@angular/core';
 import {
   FormBuilder,
   FormGroup,

diff --git a/terminus-ui/radio-group/src/radio-group.component.html b/terminus-ui/radio-group/src/radio-group.component.html
@@ -15,7 +15,7 @@
         [value]="retrieveValue(option, formatModelValueFn)"
         [disabled]="option.disabled"
         [name]="id"
-        (change)="change.emit($event)"
+        (change)="radioGroupChange($event)"
         #radio="matRadioButton"
       >
         {{ retrieveValue(option, formatUILabelFn) }}
@@ -57,7 +57,7 @@
         <label
           class="c-radio__control qa-radio-control"
           [class.c-radio__control--disabled]="isDisabled || option.disabled"
-          (click)="labelClick(option)"
+          (click)="radioGroupChange($event)"
         >
           <input
             type="radio"

diff --git a/terminus-ui/radio-group/src/radio-group.component.spec.ts b/terminus-ui/radio-group/src/radio-group.component.spec.ts
@@ -1,13 +1,28 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  ViewChild,
+} from '@angular/core';
+import { ComponentFixture } from '@angular/core/testing';
 import {
   FormControl,
   Validators,
 } from '@angular/forms';
-import { ChangeDetectorRefMock } from '@terminus/ngx-tools/testing';
+import {
+  ChangeDetectorRefMock,
+  createComponent,
+} from '@terminus/ngx-tools/testing';
+import {
+  selectStandardRadio,
+  selectVisualRadio,
+} from '@terminus/ui/radio-group/testing';
+
 import {
   TsRadioFormatFn,
   TsRadioGroupComponent,
   TsRadioOption,
 } from './radio-group.component';
+import { TsRadioGroupModule } from './radio-group.module';
 
 
 const SVG = `
@@ -20,6 +35,64 @@ class DomSanitizerMock {
   public bypassSecurityTrustHtml = jest.fn().mockReturnValue(SVG);
 }
 
+@Component({
+  template: `
+  <ts-radio-group
+    [isVisual]="isVisual"
+    [formatUILabelFn]="uiFormatter"
+    [formatModelValueFn]="modelFormatter"
+    [formControl]="control"
+    [options]="optionsArray"
+    (change)="change($event)"
+  ></ts-radio-group>
+  `,
+})
+class TestHostComponent {
+  private control: FormControl | undefined = new FormControl();
+  public isVisual = false;
+  public optionsArray: TsRadioOption[] = [
+    {
+      foo: 'bar',
+      bar: 'baz',
+    },
+  ];
+
+  @ViewChild(TsRadioGroupComponent, {static: true})
+  public component: TsRadioGroupComponent;
+
+  public change = jest.fn();
+  private uiFormatter: TsRadioFormatFn = optionsArray => optionsArray.bar;
+  private modelFormatter: TsRadioFormatFn = optionsArray => optionsArray.foo;
+}
+
+describe('TsRadioGroupComponent INT test', function() {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(() => {
+    fixture = createComponent(TestHostComponent, [], [TsRadioGroupModule]);
+    fixture.detectChanges();
+  });
+
+  describe(`change`, () => {
+
+    test(`should emit change for non-isVisual radios`, () => {
+      selectStandardRadio(fixture, 'baz');
+
+      expect(fixture.componentInstance.change).toHaveBeenCalled();
+    });
+
+    test(`should emit change for isVisual radios`, () => {
+      fixture.componentInstance.component.isVisual = true;
+      fixture.detectChanges();
+      selectVisualRadio(fixture, 'baz');
+
+      expect(fixture.componentInstance.change).toHaveBeenCalled();
+    });
+
+  });
+
+});
+
 describe('TsRadioGroupComponent', function() {
   let component: TsRadioGroupComponent;
   let options: TsRadioOption[];
@@ -234,7 +307,6 @@ describe('TsRadioGroupComponent', function() {
 
   });
 
-
   describe(`retrieveValue`, () => {
 
     test(`should use a formatter to return a value`, () => {
@@ -255,25 +327,6 @@ describe('TsRadioGroupComponent', function() {
   });
 
 
-  describe(`labelClick()`, () => {
-
-    test(`should set the value`, () => {
-      const myFn = (v: any) => v.foo;
-      component.formatModelValueFn = myFn;
-      component.labelClick(options[2]);
-      expect(component.value).toEqual(options[2].foo);
-    });
-
-    test(`should return if disabled`, () => {
-      const myFn = (v: any) => v.foo;
-      component.formatModelValueFn = myFn;
-      component.labelClick(options[1]);
-      expect(component.value).toEqual('');
-    });
-
-  });
-
-
   describe(`id`, () => {
 
     test(`should default to the uid`, () => {

diff --git a/terminus-ui/radio-group/src/radio-group.component.ts b/terminus-ui/radio-group/src/radio-group.component.ts
@@ -12,7 +12,6 @@ import {
   Output,
   ViewEncapsulation,
 } from '@angular/core';
-import { MatRadioChange } from '@angular/material/radio';
 import { DomSanitizer } from '@angular/platform-browser';
 import {
   hasRequiredControl,
@@ -46,10 +45,17 @@ export interface TsRadioOption {
 
 
 /**
- * Expose the MatRadioChange event as TsRadioChange. Used by {@link TsRadioGroupComponent}
+ * The change event as TsRadioChange. Used by {@link TsRadioGroupComponent}
  */
-export class TsRadioChange extends MatRadioChange {}
-
+export class TsRadioChange {
+  constructor(
+    // The group that emit the change event
+    public source: TsRadioGroupComponent,
+    // The value of the TsRadioButton
+    // tslint:disable-next-line:no-any
+    public value: any,
+  ) {}
+}
 
 /**
  * Expose the formatter function type used by {@link TsRadioGroupComponent}
@@ -318,18 +324,13 @@ export class TsRadioGroupComponent extends TsReactiveFormBaseComponent implement
     return (formatter && formatter(option)) ? formatter(option) : option;
   }
 
-
   /**
-   * Handle clicks on labels
+   * Handle changes
    *
    * @param option - The selected option
    */
-  public labelClick(option: TsRadioOption): void {
-    if (this.isDisabled || (option && option.disabled)) {
-      return;
-    }
-    const value = this.retrieveValue(option, this.formatModelValueFn);
-    this.value = value;
+  public radioGroupChange(option: TsRadioOption): void {
+    this.change.emit(new TsRadioChange(this, option));
     this.changeDetectorRef.markForCheck();
   }
 

diff --git a/terminus-ui/radio-group/testing/src/test-helpers.ts b/terminus-ui/radio-group/testing/src/test-helpers.ts
@@ -71,6 +71,8 @@ export function selectStandardRadio(fixture: ComponentFixture<any>, radioValue:
 
     if (labelTextElement.textContent.trim() === radioValue) {
       labelDebugEl.nativeElement.click();
+      fixture.detectChanges();
+      return fixture.whenStable();
     }
   });