feat(demo): unit test the ngModel binding

packages/angular/demo/e2e/group-inputs.e2e-spec.ts

@@ -1,4 +1,4 @@
-import { ElementFinder, promise } from 'protractor/built';
+import { browser, ElementFinder, promise } from 'protractor/built';
 
 import { GroupInputsPage } from './group-inputs.po';
 
@@ -21,7 +21,6 @@ describe('Group Inputs Page', () => {
       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();
@@ -50,4 +49,38 @@ describe('Group Inputs Page', () => {
       expect(btns.tongue.getAttribute('checked')).toEqual(null);
     });
   });
+
+  describe('non-grouped radios', () => {
+    it('should check the proper initial radio button', () => {
+      page.navigateTo();
+      const btns = page.getUngroupedRadioButtons();
+      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();
+      return browser.executeScript('window.scrollTo(0, 500);').then(function() {
+        const btns = page.getUngroupedRadioButtons();
+        btns.chicken.click();
+        expect(page.getRadioOutputText()).toEqual('chicken');
+      });
+    });
+
+    it('should check and uncheck the proper buttons on a changed value', () => {
+      page.navigateTo();
+      return browser.executeScript('window.scrollTo(0, 500);').then(function() {
+        const btns = page.getUngroupedRadioButtons();
+        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);
+      });
+    });
+  });
 });

packages/angular/demo/karma.conf.js

@@ -22,6 +22,11 @@ module.exports = function (config) {
     angularCli: {
       environment: 'dev'
     },
+    files: [
+      // TODO: I have not fully worked out how this will work.
+      //       Perhaps just the base include with a plugin?
+      { pattern: '../node_modules/@ionic/core/dist/ionic.js', watched: false, served: false, nocache: true, included: true }
+    ],
     reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,

packages/angular/demo/src/app/basic-inputs-page/basic-inputs-page.component.spec.ts

@@ -29,4 +29,27 @@ describe('InputsTestPageComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('testInputOne binding', () => {
+    let input;
+    beforeEach(
+      fakeAsync(() => {
+        component.ngOnInit();
+        fixture.detectChanges();
+        tick();
+        input = fixture.debugElement.query(By.css('#stdTextInput')).nativeElement;
+        // This is what I ultimtely want to test...
+        //
+        // const ionInput = fixture.debugElement.query(By.css('#ionTextInput'));
+        // input = ionInput.query(By.css('input')).nativeElement;
+      })
+    );
+
+    it('should reflect changes to the input', () => {
+      expect(input).toBeTruthy();
+      input.value = 'Frank';
+      input.dispatchEvent(new Event('input'));
+      expect(component.textValue).toEqual('Frank');
+    });
+  });
 });

packages/angular/demo/src/app/group-inputs-page/group-inputs-page.component.spec.ts

@@ -1,7 +1,9 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
 
 import { GroupInputsPageComponent } from './group-inputs-page.component';
+import { SharedModule } from '../shared/shared.module';
 
 describe('GroupInputsPageComponent', () => {
   let component: GroupInputsPageComponent;
@@ -10,6 +12,7 @@ describe('GroupInputsPageComponent', () => {
   beforeEach(
     async(() => {
       TestBed.configureTestingModule({
+        imports: [FormsModule, SharedModule],
         declarations: [GroupInputsPageComponent],
         schemas: [CUSTOM_ELEMENTS_SCHEMA]
       }).compileComponents();