diff options
Diffstat (limited to 'src/ng/directive/input.js')
| -rw-r--r-- | src/ng/directive/input.js | 284 |
1 files changed, 173 insertions, 111 deletions
diff --git a/src/ng/directive/input.js b/src/ng/directive/input.js index 53a8ddd4..85d0f22d 100644 --- a/src/ng/directive/input.js +++ b/src/ng/directive/input.js @@ -62,29 +62,31 @@ var inputType = { <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/> </form> </doc:source> - <doc:scenario> + <doc:protractor> + var text = element(by.binding('text')); + var valid = element(by.binding('myForm.input.$valid')); + var input = element(by.model('text')); + it('should initialize to model', function() { - expect(binding('text')).toEqual('guest'); - expect(binding('myForm.input.$valid')).toEqual('true'); + expect(text.getText()).toContain('guest'); + expect(valid.getText()).toContain('true'); }); it('should be invalid if empty', function() { - input('text').enter(''); - expect(binding('text')).toEqual(''); - expect(binding('myForm.input.$valid')).toEqual('false'); + input.clear(); + input.sendKeys(''); + + expect(text.getText()).toEqual('text ='); + expect(valid.getText()).toContain('false'); }); it('should be invalid if multi word', function() { - input('text').enter('hello world'); - expect(binding('myForm.input.$valid')).toEqual('false'); - }); + input.clear(); + input.sendKeys('hello world'); - it('should not be trimmed', function() { - input('text').enter('untrimmed '); - expect(binding('text')).toEqual('untrimmed '); - expect(binding('myForm.input.$valid')).toEqual('true'); + expect(valid.getText()).toContain('false'); }); - </doc:scenario> + </doc:protractor> </doc:example> */ 'text': textInputType, @@ -138,24 +140,30 @@ var inputType = { <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/> </form> </doc:source> - <doc:scenario> + <doc:protractor> + var value = element(by.binding('value')); + var valid = element(by.binding('myForm.input.$valid')); + var input = element(by.model('value')); + it('should initialize to model', function() { - expect(binding('value')).toEqual('12'); - expect(binding('myForm.input.$valid')).toEqual('true'); + expect(value.getText()).toContain('12'); + expect(valid.getText()).toContain('true'); }); it('should be invalid if empty', function() { - input('value').enter(''); - expect(binding('value')).toEqual(''); - expect(binding('myForm.input.$valid')).toEqual('false'); + input.clear(); + input.sendKeys(''); + expect(value.getText()).toEqual('value ='); + expect(valid.getText()).toContain('false'); }); it('should be invalid if over max', function() { - input('value').enter('123'); - expect(binding('value')).toEqual(''); - expect(binding('myForm.input.$valid')).toEqual('false'); + input.clear(); + input.sendKeys('123'); + expect(value.getText()).toEqual('value ='); + expect(valid.getText()).toContain('false'); }); - </doc:scenario> + </doc:protractor> </doc:example> */ 'number': numberInputType, @@ -207,23 +215,31 @@ var inputType = { <tt>myForm.$error.url = {{!!myForm.$error.url}}</tt><br/> </form> </doc:source> - <doc:scenario> + <doc:protractor> + var text = element(by.binding('text')); + var valid = element(by.binding('myForm.input.$valid')); + var input = element(by.model('text')); + it('should initialize to model', function() { - expect(binding('text')).toEqual('http://google.com'); - expect(binding('myForm.input.$valid')).toEqual('true'); + expect(text.getText()).toContain('http://google.com'); + expect(valid.getText()).toContain('true'); }); it('should be invalid if empty', function() { - input('text').enter(''); - expect(binding('text')).toEqual(''); - expect(binding('myForm.input.$valid')).toEqual('false'); + input.clear(); + input.sendKeys(''); + + expect(text.getText()).toEqual('text ='); + expect(valid.getText()).toContain('false'); }); it('should be invalid if not url', function() { - input('text').enter('xxx'); - expect(binding('myForm.input.$valid')).toEqual('false'); + input.clear(); + input.sendKeys('box'); + + expect(valid.getText()).toContain('false'); }); - </doc:scenario> + </doc:protractor> </doc:example> */ 'url': urlInputType, @@ -275,23 +291,30 @@ var inputType = { <tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/> </form> </doc:source> - <doc:scenario> + <doc:protractor> + var text = element(by.binding('text')); + var valid = element(by.binding('myForm.input.$valid')); + var input = element(by.model('text')); + it('should initialize to model', function() { - expect(binding('text')).toEqual('me@example.com'); - expect(binding('myForm.input.$valid')).toEqual('true'); + expect(text.getText()).toContain('me@example.com'); + expect(valid.getText()).toContain('true'); }); it('should be invalid if empty', function() { - input('text').enter(''); - expect(binding('text')).toEqual(''); - expect(binding('myForm.input.$valid')).toEqual('false'); + input.clear(); + input.sendKeys(''); + expect(text.getText()).toEqual('text ='); + expect(valid.getText()).toContain('false'); }); it('should be invalid if not email', function() { - input('text').enter('xxx'); - expect(binding('myForm.input.$valid')).toEqual('false'); + input.clear(); + input.sendKeys('xxx'); + + expect(valid.getText()).toContain('false'); }); - </doc:scenario> + </doc:protractor> </doc:example> */ 'email': emailInputType, @@ -332,14 +355,17 @@ var inputType = { </form> Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`. </doc:source> - <doc:scenario> + <doc:protractor> it('should change state', function() { - expect(binding('color')).toEqual('"blue"'); + var color = element(by.binding('color')); + + expect(color.getText()).toContain('blue'); + + element.all(by.model('color')).get(0).click(); - input('color').select('red'); - expect(binding('color')).toEqual('"red"'); + expect(color.getText()).toContain('red'); }); - </doc:scenario> + </doc:protractor> </doc:example> */ 'radio': radioInputType, @@ -376,17 +402,21 @@ var inputType = { <tt>value2 = {{value2}}</tt><br/> </form> </doc:source> - <doc:scenario> + <doc:protractor> it('should change state', function() { - expect(binding('value1')).toEqual('true'); - expect(binding('value2')).toEqual('YES'); + var value1 = element(by.binding('value1')); + var value2 = element(by.binding('value2')); - input('value1').check(); - input('value2').check(); - expect(binding('value1')).toEqual('false'); - expect(binding('value2')).toEqual('NO'); + expect(value1.getText()).toContain('true'); + expect(value2.getText()).toContain('YES'); + + element(by.model('value1')).click(); + element(by.model('value2')).click(); + + expect(value1.getText()).toContain('false'); + expect(value2.getText()).toContain('NO'); }); - </doc:scenario> + </doc:protractor> </doc:example> */ 'checkbox': checkboxInputType, @@ -739,44 +769,59 @@ function checkboxInputType(scope, element, attr, ctrl) { <tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br> </div> </doc:source> - <doc:scenario> + <doc:protractor> + var user = element(by.binding('{{user}}')); + var userNameValid = element(by.binding('myForm.userName.$valid')); + var lastNameValid = element(by.binding('myForm.lastName.$valid')); + var lastNameError = element(by.binding('myForm.lastName.$error')); + var formValid = element(by.binding('myForm.$valid')); + var userNameInput = element(by.model('user.name')); + var userLastInput = element(by.model('user.last')); + it('should initialize to model', function() { - expect(binding('user')).toEqual('{"name":"guest","last":"visitor"}'); - expect(binding('myForm.userName.$valid')).toEqual('true'); - expect(binding('myForm.$valid')).toEqual('true'); + expect(user.getText()).toContain('{"name":"guest","last":"visitor"}'); + expect(userNameValid.getText()).toContain('true'); + expect(formValid.getText()).toContain('true'); }); it('should be invalid if empty when required', function() { - input('user.name').enter(''); - expect(binding('user')).toEqual('{"last":"visitor"}'); - expect(binding('myForm.userName.$valid')).toEqual('false'); - expect(binding('myForm.$valid')).toEqual('false'); + userNameInput.clear(); + userNameInput.sendKeys(''); + + expect(user.getText()).toContain('{"last":"visitor"}'); + expect(userNameValid.getText()).toContain('false'); + expect(formValid.getText()).toContain('false'); }); it('should be valid if empty when min length is set', function() { - input('user.last').enter(''); - expect(binding('user')).toEqual('{"name":"guest","last":""}'); - expect(binding('myForm.lastName.$valid')).toEqual('true'); - expect(binding('myForm.$valid')).toEqual('true'); + userLastInput.clear(); + userLastInput.sendKeys(''); + + expect(user.getText()).toContain('{"name":"guest","last":""}'); + expect(lastNameValid.getText()).toContain('true'); + expect(formValid.getText()).toContain('true'); }); it('should be invalid if less than required min length', function() { - input('user.last').enter('xx'); - expect(binding('user')).toEqual('{"name":"guest"}'); - expect(binding('myForm.lastName.$valid')).toEqual('false'); - expect(binding('myForm.lastName.$error')).toMatch(/minlength/); - expect(binding('myForm.$valid')).toEqual('false'); + userLastInput.clear(); + userLastInput.sendKeys('xx'); + + expect(user.getText()).toContain('{"name":"guest"}'); + expect(lastNameValid.getText()).toContain('false'); + expect(lastNameError.getText()).toContain('minlength'); + expect(formValid.getText()).toContain('false'); }); it('should be invalid if longer than max length', function() { - input('user.last').enter('some ridiculously long name'); - expect(binding('user')) - .toEqual('{"name":"guest"}'); - expect(binding('myForm.lastName.$valid')).toEqual('false'); - expect(binding('myForm.lastName.$error')).toMatch(/maxlength/); - expect(binding('myForm.$valid')).toEqual('false'); + userLastInput.clear(); + userLastInput.sendKeys('some ridiculously long name'); + + expect(user.getText()).toContain('{"name":"guest"}'); + expect(lastNameValid.getText()).toContain('false'); + expect(lastNameError.getText()).toContain('maxlength'); + expect(formValid.getText()).toContain('false'); }); - </doc:scenario> + </doc:protractor> </doc:example> */ var inputDirective = ['$browser', '$sniffer', function($browser, $sniffer) { @@ -908,14 +953,17 @@ var VALID_CLASS = 'ng-valid', <textarea ng-model="userContent"></textarea> </form> </file> - <file name="scenario.js"> + <file name="protractorTest.js"> it('should data-bind and become invalid', function() { - var contentEditable = element('[contenteditable]'); + var contentEditable = element(by.css('.doc-example-live [contenteditable]')); + + expect(contentEditable.getText()).toEqual('Change me!'); - expect(contentEditable.text()).toEqual('Change me!'); - input('userContent').enter(''); - expect(contentEditable.text()).toEqual(''); - expect(contentEditable.prop('className')).toMatch(/ng-invalid-required/); + contentEditable.clear(); + contentEditable.sendKeys(protractor.Key.BACK_SPACE); + + expect(contentEditable.getText()).toEqual(''); + expect(contentEditable.getAttribute('class')).toMatch(/ng-invalid-required/); }); </file> * </example> @@ -1222,24 +1270,30 @@ var ngModelDirective = function() { * <input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" /> * <input type="checkbox" ng-model="confirmed" id="ng-change-example2" /> * <label for="ng-change-example2">Confirmed</label><br /> - * debug = {{confirmed}}<br /> - * counter = {{counter}} + * <tt>debug = {{confirmed}}</tt><br/> + * <tt>counter = {{counter}}</tt><br/> * </div> * </doc:source> - * <doc:scenario> + * <doc:protractor> + * var counter = element(by.binding('counter')); + * var debug = element(by.binding('confirmed')); + * * it('should evaluate the expression if changing from view', function() { - * expect(binding('counter')).toEqual('0'); - * element('#ng-change-example1').click(); - * expect(binding('counter')).toEqual('1'); - * expect(binding('confirmed')).toEqual('true'); + * expect(counter.getText()).toContain('0'); + * + * element(by.id('ng-change-example1')).click(); + * + * expect(counter.getText()).toContain('1'); + * expect(debug.getText()).toContain('true'); * }); * * it('should not evaluate the expression if changing from model', function() { - * element('#ng-change-example2').click(); - * expect(binding('counter')).toEqual('0'); - * expect(binding('confirmed')).toEqual('true'); + * element(by.id('ng-change-example2')).click(); + + * expect(counter.getText()).toContain('0'); + * expect(debug.getText()).toContain('true'); * }); - * </doc:scenario> + * </doc:protractor> * </doc:example> */ var ngChangeDirective = valueFn({ @@ -1312,20 +1366,26 @@ var requiredDirective = function() { <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/> </form> </doc:source> - <doc:scenario> + <doc:protractor> + var listInput = element(by.model('names')); + var names = element(by.binding('{{names}}')); + var valid = element(by.binding('myForm.namesInput.$valid')); + var error = element(by.css('span.error')); + it('should initialize to model', function() { - expect(binding('names')).toEqual('["igor","misko","vojta"]'); - expect(binding('myForm.namesInput.$valid')).toEqual('true'); - expect(element('span.error').css('display')).toBe('none'); + expect(names.getText()).toContain('["igor","misko","vojta"]'); + expect(valid.getText()).toContain('true'); + expect(error.getCssValue('display')).toBe('none'); }); it('should be invalid if empty', function() { - input('names').enter(''); - expect(binding('names')).toEqual(''); - expect(binding('myForm.namesInput.$valid')).toEqual('false'); - expect(element('span.error').css('display')).not().toBe('none'); - }); - </doc:scenario> + listInput.clear(); + listInput.sendKeys(''); + + expect(names.getText()).toContain(''); + expect(valid.getText()).toContain('false'); + expect(error.getCssValue('display')).not.toBe('none'); }); + </doc:protractor> </doc:example> */ var ngListDirective = function() { @@ -1407,15 +1467,17 @@ var CONSTANT_VALUE_REGEXP = /^(true|false|\d+)$/; <div>You chose {{my.favorite}}</div> </form> </doc:source> - <doc:scenario> + <doc:protractor> + var favorite = element(by.binding('my.favorite')); + it('should initialize to model', function() { - expect(binding('my.favorite')).toEqual('unicorns'); + expect(favorite.getText()).toContain('unicorns'); }); it('should bind the values to the inputs', function() { - input('my.favorite').select('pizza'); - expect(binding('my.favorite')).toEqual('pizza'); + element.all(by.model('my.favorite')).get(0).click(); + expect(favorite.getText()).toContain('pizza'); }); - </doc:scenario> + </doc:protractor> </doc:example> */ var ngValueDirective = function() { |