diff --git a/packages/angular/demo/README.md b/packages/angular/demo/README.md index 0c59189058..5edd031912 100644 --- a/packages/angular/demo/README.md +++ b/packages/angular/demo/README.md @@ -1,27 +1,21 @@ # Demo -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.5.0. +The purpose of this application is to provide an Angular CLI application where Ionic Core components can be tested in a simple manner. This application allows the developer to experiment with interactions between Angular and Ionic in an easy and safe manner. -## Development server +## Getting started -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. +From this directory: -## Code scaffolding +- `npm i` +- `npm start` - to serve the application +- `npm test` - to run the unit tests +- `npm run e2e` - to run the end to end tests -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +See the `package.json` file for a complete list of script. The above are just the most common. -## Build +## Running the Angular CLI -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build. +This application installs the Angular CLI locally so you do not need to have it installed globally. You can use `npm` to run any of the `ng` commands. For example: -## Running unit tests - -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). - -## Running end-to-end tests - -Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). - -## Further help - -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). +- `npm run ng build -- --prod` - run a production build +- `npm run ng g component my-cool-thing` diff --git a/packages/angular/demo/e2e/inputs.e2e-spec.ts b/packages/angular/demo/e2e/inputs.e2e-spec.ts index 780a3df9cc..64623f8529 100644 --- a/packages/angular/demo/e2e/inputs.e2e-spec.ts +++ b/packages/angular/demo/e2e/inputs.e2e-spec.ts @@ -18,7 +18,7 @@ describe('Demo Inputs Page', () => { it('should display the starting text', () => { page.navigateTo(); const el = page.getIonicTextInput(); - expect(el.getAttribute('value')).toEqual('This is the Ionic Text Input'); + expect(el.getAttribute('value')).toEqual('This is the Text Input'); }); it('should reflect back the entered data', () => { @@ -26,7 +26,7 @@ describe('Demo Inputs Page', () => { const el = page.getIonicTextInputEditable(); el.clear(); el.sendKeys('I am new text'); - expect(page.getIonicTextInputOutputText()).toEqual('I am new text'); + expect(page.getTextOutput()).toEqual('I am new text'); }); it('should trigger validation errors', () => { @@ -46,7 +46,7 @@ describe('Demo Inputs Page', () => { it('should display the starting text', () => { page.navigateTo(); const el = page.getIonicTextareaInput(); - expect(el.getAttribute('value')).toEqual('This is the Ionic Textarea Input'); + expect(el.getAttribute('value')).toEqual('This is the Textarea Input'); }); it('should reflect back the entered data', () => { @@ -54,7 +54,7 @@ describe('Demo Inputs Page', () => { const el = page.getIonicTextareaInputEditable(); el.clear(); el.sendKeys('I am new text'); - expect(page.getIonicTextareaInputOutputText()).toEqual('I am new text'); + expect(page.getTextareaOutput()).toEqual('I am new text'); }); it('should trigger validation errors', () => { @@ -81,7 +81,7 @@ describe('Demo Inputs Page', () => { page.navigateTo(); const el = page.getIonicCheckbox(); el.click(); - expect(page.getIonicCheckboxOutputText()).toEqual('false'); + expect(page.getCheckboxOutput()).toEqual('false'); }); }); @@ -96,7 +96,7 @@ describe('Demo Inputs Page', () => { page.navigateTo(); const el = page.getIonicToggle(); el.click(); - expect(page.getIonicToggleOutputText()).toEqual('true'); + expect(page.getToggleOutput()).toEqual('true'); }); }); diff --git a/packages/angular/demo/e2e/inputs.po.ts b/packages/angular/demo/e2e/inputs.po.ts index 7ad749d1fb..a8df5fa661 100644 --- a/packages/angular/demo/e2e/inputs.po.ts +++ b/packages/angular/demo/e2e/inputs.po.ts @@ -9,16 +9,16 @@ export class InputsPage { return element(by.id('ionCheckbox')); } - getIonicCheckboxOutputText() { - return element(by.id('ionCheckboxOutput')).getText(); + getCheckboxOutput() { + return element(by.id('checkboxOutput')).getText(); } getIonicToggle() { return element(by.id('ionToggle')); } - getIonicToggleOutputText() { - return element(by.id('ionToggleOutput')).getText(); + getToggleOutput() { + return element(by.id('toggleOutput')).getText(); } getTitleText() { @@ -34,8 +34,8 @@ export class InputsPage { return parent.all(by.css('textarea')).first(); } - getIonicTextareaInputOutputText() { - return element(by.id('ionTextareaInputOutput')).getText(); + getTextareaOutput() { + return element(by.id('textareaOutput')).getText(); } getIonicTextInput() { @@ -47,7 +47,7 @@ export class InputsPage { return parent.all(by.css('input')).first(); } - getIonicTextInputOutputText() { - return element(by.id('ionTextInputOutput')).getText(); + getTextOutput() { + return element(by.id('textOutput')).getText(); } } diff --git a/packages/angular/demo/src/app/inputs/inputs-test-page.component.html b/packages/angular/demo/src/app/inputs/inputs-test-page.component.html index c93a41876d..d02397e5de 100644 --- a/packages/angular/demo/src/app/inputs/inputs-test-page.component.html +++ b/packages/angular/demo/src/app/inputs/inputs-test-page.component.html @@ -6,81 +6,105 @@ -

Text Inputs

+

Text Input

- + - Standard Text Input: - {{stdTextInput}} + Value: + {{textValue}} Ionic Text Input - + - Ionic Text Input: - {{ionTextInput}} - - - - - - Ionic Text Area Input - - - - - Ionic Text Input: - {{ionTextareaInput}} -

Boolean Inputs

+

Textarea Input

+
+
+ + + + + + + Value: + {{textareaValue}} + + + + + + Ionic Textarea Input + + + + + + + + + +

Checkbox

- + - Standard Checkbox: - {{stdCheckbox}} + Value: + {{checkboxValue}} Ionic Checkbox - + - Ionic Checkbox: - {{ionCheckbox}} + + + + + +

Toggle

+
+
+ + + + + + + Value: + {{toggleValue}} Ionic Toggle - + - Ionic Toggle: - {{ionToggle}} diff --git a/packages/angular/demo/src/app/inputs/inputs-test-page.component.ts b/packages/angular/demo/src/app/inputs/inputs-test-page.component.ts index 5178455886..8b183d030d 100644 --- a/packages/angular/demo/src/app/inputs/inputs-test-page.component.ts +++ b/packages/angular/demo/src/app/inputs/inputs-test-page.component.ts @@ -7,14 +7,11 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; encapsulation: ViewEncapsulation.None }) export class InputsTestPageComponent implements OnInit { - ionTextareaInput = 'This is the Ionic Textarea Input'; - ionTextInput = 'This is the Ionic Text Input'; - stdTextInput = 'This is the HTML Text Input'; + textareaValue = 'This is the Textarea Input'; + textValue = 'This is the Text Input'; - ionCheckbox = true; - stdCheckbox = true; - - ionToggle = false; + checkboxValue = true; + toggleValue = false; constructor() {}