From ad9e73bb24bde109e4dd271c0e08c4884f8b847e Mon Sep 17 00:00:00 2001
From: Ken Sodemann <ken@ionic.io>
Date: Tue, 21 Nov 2017 09:36:20 -0600
Subject: [PATCH] feat(demo): test out the radio button group

---
 .../angular/demo/e2e/group-inputs.e2e-spec.ts | 37 +++++++++++++
 packages/angular/demo/e2e/group-inputs.po.ts  | 36 ++++++++++---
 packages/angular/demo/e2e/home.e2e-spec.ts    |  4 +-
 packages/angular/demo/e2e/home.po.ts          |  2 +-
 .../group-inputs-page.component.html          | 54 ++++++++++++++++---
 .../ion-select-value-accessor.directive.ts    |  2 +-
 6 files changed, 117 insertions(+), 18 deletions(-)

diff --git a/packages/angular/demo/e2e/group-inputs.e2e-spec.ts b/packages/angular/demo/e2e/group-inputs.e2e-spec.ts
index 9c1cb493cb..405dcc833e 100644
--- a/packages/angular/demo/e2e/group-inputs.e2e-spec.ts
+++ b/packages/angular/demo/e2e/group-inputs.e2e-spec.ts
@@ -13,4 +13,41 @@ describe('Group Inputs Page', () => {
     page.navigateTo();
     expect(page.getTitleText()).toEqual('Ionic Core Group Inputs Demo');
   });
+
+  describe('radio group', () => {
+    it('should have the proper initial value', () => {
+      page.navigateTo();
+      const el = page.getRaioGroup();
+      expect(el.getAttribute('value')).toEqual('tripe');
+    });
+
+    // This test is failing right now, you can also see this in the UI.
+    it('should check the proper initial radio button', () => {
+      page.navigateTo();
+      const btns = page.getGroupedRadioButtons();
+      expect(btns.tripe.getAttribute('checked')).toEqual('true');
+      expect(btns.beef.getAttribute('checked')).toEqual(null);
+      expect(btns.chicken.getAttribute('checked')).toEqual(null);
+      expect(btns.brains.getAttribute('checked')).toEqual(null);
+      expect(btns.tongue.getAttribute('checked')).toEqual(null);
+    });
+
+    it('should reflect back the changed value', () => {
+      page.navigateTo();
+      const btns = page.getGroupedRadioButtons();
+      btns.chicken.click();
+      expect(page.getRadioOutputText()).toEqual('chicken');
+    });
+
+    it('should check and uncheck the proper buttons on a changed value', () => {
+      page.navigateTo();
+      const btns = page.getGroupedRadioButtons();
+      btns.chicken.click();
+      expect(btns.chicken.getAttribute('checked')).toEqual('true');
+      expect(btns.beef.getAttribute('checked')).toEqual(null);
+      expect(btns.tripe.getAttribute('checked')).toEqual(null);
+      expect(btns.brains.getAttribute('checked')).toEqual(null);
+      expect(btns.tongue.getAttribute('checked')).toEqual(null);
+    });
+  });
 });
diff --git a/packages/angular/demo/e2e/group-inputs.po.ts b/packages/angular/demo/e2e/group-inputs.po.ts
index 564c1bf5fe..280e90cdea 100644
--- a/packages/angular/demo/e2e/group-inputs.po.ts
+++ b/packages/angular/demo/e2e/group-inputs.po.ts
@@ -5,15 +5,35 @@ export class GroupInputsPage {
     return browser.get('/group-inputs');
   }
 
-  getIonicCheckbox() {
-    return element(by.id('ionCheckbox'));
-  }
-
-  getCheckboxOutput() {
-    return element(by.id('checkboxOutput')).getText();
-  }
-
   getTitleText() {
     return element(by.css('.title')).getText();
   }
+
+  getRaioGroup() {
+    return element(by.id('radio-group'));
+  }
+
+  getGroupedRadioButtons() {
+    return {
+      beef: element(by.id('ion-grp-beef')),
+      tongue: element(by.id('ion-grp-tongue')),
+      brains: element(by.id('ion-grp-brains')),
+      tripe: element(by.id('ion-grp-tripe')),
+      chicken: element(by.id('ion-grp-chicken'))
+    };
+  }
+
+  getUngroupedRadioButtons() {
+    return {
+      beef: element(by.id('ion-beef')),
+      tongue: element(by.id('ion-tongue')),
+      brains: element(by.id('ion-brains')),
+      tripe: element(by.id('ion-tripe')),
+      chicken: element(by.id('ion-chicken'))
+    };
+  }
+
+  getRadioOutputText() {
+    return element(by.id('radioOutput')).getText();
+  }
 }
diff --git a/packages/angular/demo/e2e/home.e2e-spec.ts b/packages/angular/demo/e2e/home.e2e-spec.ts
index 184d26cf21..e17fba9a45 100644
--- a/packages/angular/demo/e2e/home.e2e-spec.ts
+++ b/packages/angular/demo/e2e/home.e2e-spec.ts
@@ -9,11 +9,11 @@ describe('Demo Home Page', () => {
 
   it('should display title', () => {
     page.navigateTo();
-    expect(page.getTitle()).toEqual('Ionic Core Angular Demo Application');
+    expect(page.getTitleText()).toEqual('Ionic Core Angular Demo Application');
   });
 
   it('should navigate to home for root', () => {
     page.navigateToRoot();
-    expect(page.getTitle()).toEqual('Ionic Core Angular Demo Application');
+    expect(page.getTitleText()).toEqual('Ionic Core Angular Demo Application');
   });
 });
diff --git a/packages/angular/demo/e2e/home.po.ts b/packages/angular/demo/e2e/home.po.ts
index 6e03ebf829..0a572b3e06 100644
--- a/packages/angular/demo/e2e/home.po.ts
+++ b/packages/angular/demo/e2e/home.po.ts
@@ -9,7 +9,7 @@ export class HomePage {
     return browser.get('/');
   }
 
-  getTitle() {
+  getTitleText() {
     return element(by.css('.title')).getText();
   }
 }
diff --git a/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.component.html b/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.component.html
index 004147961e..58ba058dd1 100644
--- a/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.component.html
+++ b/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.component.html
@@ -8,6 +8,11 @@
       <h2>Radio Buttons</h2>
     </ion-col>
   </ion-row>
+  <ion-row>
+    <ion-col>
+      <h3>Angular</h3>
+    </ion-col>
+  </ion-row>
   <ion-row>
     <ion-col>
       <input id="stdBeef" type="radio" value="beef" [(ngModel)]="radioValue" />
@@ -26,35 +31,72 @@
       <span id="radioOutput">{{radioValue}}</span>
     </ion-col>
   </ion-row>
+  <ion-row>
+    <ion-col>
+      <h3>Ionic With Radio Group</h3>
+    </ion-col>
+  </ion-row>
   <ion-row>
     <ion-col>
       <ion-list>
-        <ion-radio-group [{ngModel}]="radioValue">
+        <ion-radio-group id="radio-group" name="radio-group" [(ngModel)]="radioValue">
           <ion-item>
             <ion-label>Crarne Asada</ion-label>
-            <ion-radio value="beef"></ion-radio>
+            <ion-radio id="ion-grp-beef" name="ion-grp-beef" value="beef"></ion-radio>
           </ion-item>
           <ion-item>
             <ion-label>Lengua</ion-label>
-            <ion-radio value="tongue"></ion-radio>
+            <ion-radio id="ion-grp-tongue" name="ion-grp-tongue" value="tongue"></ion-radio>
           </ion-item>
           <ion-item>
             <ion-label>Sesos</ion-label>
-            <ion-radio value="brains"></ion-radio>
+            <ion-radio id="ion-grp-brains" name="ion-grp-brains" value="brains"></ion-radio>
           </ion-item>
           <ion-item>
             <ion-label>Tripa</ion-label>
-            <ion-radio value="tripe"></ion-radio>
+            <ion-radio id="ion-grp-tripe" name="ion-grp-tripe" value="tripe"></ion-radio>
           </ion-item>
           <ion-item>
             <ion-label>Pollo</ion-label>
-            <ion-radio value="chicken"></ion-radio>
+            <ion-radio id="ion-grp-chicken" name="ion-grp-chicken" value="chicken"></ion-radio>
           </ion-item>
         </ion-radio-group>
       </ion-list>
     </ion-col>
     <ion-col></ion-col>
   </ion-row>
+  <ion-row>
+    <ion-col>
+      <h3>Ionic Without Radio Group</h3>
+    </ion-col>
+  </ion-row>
+  <!-- <ion-row>
+    <ion-col>
+      <ion-list>
+        <ion-item>
+          <ion-label>Crarne Asada</ion-label>
+          <ion-radio value="beef" id="ion-beef" name="ion-beef" [(ngModel)]="radioValue"></ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-label>Lengua</ion-label>
+          <ion-radio value="tongue" id="ion-tongue" name="ion-tongue" [(ngModel)]="radioValue"></ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-label>Sesos</ion-label>
+          <ion-radio value="brains" id="ion-brains" name="ion-brains" [(ngModel)]="radioValue"></ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-label>Tripa</ion-label>
+          <ion-radio value="tripe" id="ion-tripe" name="ion-tripe" [(ngModel)]="radioValue"></ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-label>Pollo</ion-label>
+          <ion-radio value="chicken" id="ion-chicken" name="ion-chicken" [(ngModel)]="radioValue"></ion-radio>
+        </ion-item>
+      </ion-list>
+    </ion-col>
+    <ion-col></ion-col>
+  </ion-row> -->
 
 </ion-grid>
 <a href='home'>Home</a>
diff --git a/packages/angular/demo/src/app/shared/ion-select-value-accessor/ion-select-value-accessor.directive.ts b/packages/angular/demo/src/app/shared/ion-select-value-accessor/ion-select-value-accessor.directive.ts
index 39e18a63bc..09cd213dc8 100644
--- a/packages/angular/demo/src/app/shared/ion-select-value-accessor/ion-select-value-accessor.directive.ts
+++ b/packages/angular/demo/src/app/shared/ion-select-value-accessor/ion-select-value-accessor.directive.ts
@@ -6,7 +6,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 // https://github.com/angular/angular/blob/5.0.2/packages/forms/src/directives/select_control_value_accessor.ts#L28-L158
 @Directive({
   /* tslint:disable-next-line:directive-selector */
-  selector: 'ion-select,ion-radio-group',
+  selector: 'ion-select, ion-radio-group',
   providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonSelectValueAccessorDirective, multi: true }]
 })
 export class IonSelectValueAccessorDirective implements ControlValueAccessor {