From 039759815f647e80199148f3d175191d4101e8bb Mon Sep 17 00:00:00 2001 From: Ken Sodemann Date: Wed, 15 Nov 2017 20:41:35 -0600 Subject: [PATCH] feat(demo): unit test the ngModel binding --- .../angular/demo/e2e/group-inputs.e2e-spec.ts | 37 ++++++++++++++++++- packages/angular/demo/karma.conf.js | 11 ++++-- .../basic-inputs-page.component.spec.ts | 23 ++++++++++++ .../group-inputs-page.component.spec.ts | 3 ++ 4 files changed, 69 insertions(+), 5 deletions(-) diff --git a/packages/angular/demo/e2e/group-inputs.e2e-spec.ts b/packages/angular/demo/e2e/group-inputs.e2e-spec.ts index 405dcc833e..1766482616 100644 --- a/packages/angular/demo/e2e/group-inputs.e2e-spec.ts +++ b/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); + }); + }); + }); }); diff --git a/packages/angular/demo/karma.conf.js b/packages/angular/demo/karma.conf.js index af139fada3..4602e0040f 100644 --- a/packages/angular/demo/karma.conf.js +++ b/packages/angular/demo/karma.conf.js @@ -1,7 +1,7 @@ // Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.html -module.exports = function (config) { +module.exports = function(config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular/cli'], @@ -12,16 +12,21 @@ module.exports = function (config) { require('karma-coverage-istanbul-reporter'), require('@angular/cli/plugins/karma') ], - client:{ + client: { clearContext: false // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { - reports: [ 'html', 'lcovonly' ], + reports: ['html', 'lcovonly'], fixWebpackSourcePaths: true }, 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, diff --git a/packages/angular/demo/src/app/basic-inputs-page/basic-inputs-page.component.spec.ts b/packages/angular/demo/src/app/basic-inputs-page/basic-inputs-page.component.spec.ts index a3ae0561e7..8bef4571e6 100644 --- a/packages/angular/demo/src/app/basic-inputs-page/basic-inputs-page.component.spec.ts +++ b/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'); + }); + }); }); diff --git a/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.component.spec.ts b/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.component.spec.ts index 8a929e04af..9e106f05cc 100644 --- a/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.component.spec.ts +++ b/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();