mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-02-27 04:06:23 +00:00
296 lines
9.8 KiB
JavaScript
296 lines
9.8 KiB
JavaScript
describe('Text Field directives', function() {
|
|
beforeEach(module('material.components.textField'));
|
|
|
|
describe('- mdInputGroup', function() {
|
|
var scope;
|
|
|
|
beforeEach(function() {
|
|
scope = {
|
|
user : {
|
|
firstName: 'Thomas',
|
|
lastName: 'Burleson',
|
|
email: 'ThomasBurleson@gmail.com',
|
|
password: 'your password is incorrect'
|
|
}
|
|
};
|
|
});
|
|
|
|
it('should set input class for focus & blur', function() {
|
|
var expressions = {label:"Firstname", model:"user.firstName"},
|
|
el = setupInputGroup( expressions, scope),
|
|
input = el.find('input');
|
|
|
|
input.triggerHandler('focus');
|
|
expect(el.hasClass('md-input-focused')).toBe(true);
|
|
input.triggerHandler('blur');
|
|
expect(el.hasClass('md-input-focused')).toBe(false);
|
|
});
|
|
|
|
it('should set input class for input event', function() {
|
|
var expressions = {label:"email", model:"user.email", type:"email"},
|
|
el = setupInputGroup( expressions, scope),
|
|
input = el.find('input');
|
|
|
|
expect(el.hasClass('md-input-has-value')).toBe(true);
|
|
|
|
input.val('');
|
|
input.triggerHandler('input');
|
|
expect(el.hasClass('md-input-has-value')).toBe(false);
|
|
|
|
input.val('ThomasBurleson@gmail.com');
|
|
input.triggerHandler('input');
|
|
expect(el.hasClass('md-input-has-value')).toBe(true);
|
|
});
|
|
|
|
it('should set input class for ngModel render', function() {
|
|
var expressions = {label:"Firstname", model:"user.firstName"},
|
|
el = setupInputGroup( expressions, scope),
|
|
input = el.find('input');
|
|
|
|
expect(el.hasClass('md-input-has-value')).toBe(true);
|
|
|
|
input.scope().$apply('user.firstName = ""');
|
|
expect(el.hasClass('md-input-has-value')).toBe(false);
|
|
|
|
input.scope().$apply('user.firstName = "Thomas"');
|
|
expect(el.hasClass('md-input-has-value')).toBe(true);
|
|
});
|
|
|
|
});
|
|
|
|
describe(' - mdTextFloat', function() {
|
|
var model;
|
|
beforeEach(function() {
|
|
model = {
|
|
labels : {
|
|
firstName: 'FirstName',
|
|
lastName: 'LastName',
|
|
email: 'eMail',
|
|
password: 'Password'
|
|
},
|
|
user : {
|
|
firstName: 'Andrew',
|
|
lastName: 'Joslin',
|
|
email: 'AndrewJoslin@drifty.com',
|
|
password: 'public'
|
|
}
|
|
};
|
|
});
|
|
|
|
it('should set input type `password` properly', function() {
|
|
var el = setupTextFloat( { type:"password" }, model);
|
|
expect( el.find('input').attr('type')).toBe("password");
|
|
expect( el.find('input').val()).toBe("");
|
|
});
|
|
it('should set input type `email` properly', function() {
|
|
var el = setupTextFloat( { type:"email" }, model);
|
|
expect( el.find('input').attr('type')).toBe("email");
|
|
expect( el.find('input').val()).toBe("");
|
|
});
|
|
|
|
it('should set a static label properly', function() {
|
|
var el = setupTextFloat( { label:"motto" }, model);
|
|
expect( el.find('label').text() ).toBe("motto");
|
|
|
|
expect( el.find('input').attr('type')).toBe("text");
|
|
expect( el.find('input').val()).toBe("");
|
|
});
|
|
it('should update a label from model changes.', function() {
|
|
var markup ='<md-text-float ' +
|
|
' label="{{labels.firstName}}" ' +
|
|
' ng-model="user.firstName" >' +
|
|
'</md-text-float>';
|
|
var el = buildElement( markup, model);
|
|
|
|
expect( el.find('input').val() ).toBe("Andrew");
|
|
expect( el.find('label').text() ).toBe("FirstName");
|
|
|
|
// Change model value of the `firstName` [field] label
|
|
// then check if the dom is updated
|
|
|
|
var val2 = "Corporate Title:";
|
|
el.find('label').scope().$apply(function(){
|
|
model.labels.firstName = val2;
|
|
});
|
|
expect( el.find('label').text() ).toBe( val2 );
|
|
|
|
});
|
|
it('should update an input value from model changes.', function() {
|
|
var markup ='<md-text-float ' +
|
|
' label="{{labels.firstName}}" ' +
|
|
' ng-model="user.firstName" >' +
|
|
'</md-text-float>';
|
|
var el = buildElement( markup, model);
|
|
var input = el.find('input');
|
|
|
|
expect( input.val() ).toBe("Andrew");
|
|
|
|
var name = "AngularJS";
|
|
input.scope().$apply(function(){
|
|
model.user.firstName = name;
|
|
});
|
|
expect( input.val() ).toBe( name );
|
|
|
|
});
|
|
|
|
// Breaks on IE
|
|
xit('should update a model value from input changes.', function() {
|
|
var markup ='<md-text-float ' +
|
|
' label="{{labels.firstName}}" ' +
|
|
' ng-model="user.firstName" >' +
|
|
'</md-text-float>';
|
|
var el = buildElement( markup, model);
|
|
var input = el.find('input');
|
|
|
|
expect( input.val() ).toBe( model.user.firstName );
|
|
|
|
input.val( "AngularJS" );
|
|
input.triggerHandler('input');
|
|
expect( model.user.firstName ).toBe( "AngularJS" );
|
|
|
|
});
|
|
|
|
it('should set input class for focus & blur', function() {
|
|
var expressions = {label:"Firstname", model:"user.firstName"},
|
|
el = setupTextFloat( expressions, model),
|
|
input = el.find('input');
|
|
|
|
input.triggerHandler('focus');
|
|
expect(el.hasClass('md-input-focused')).toBe(true);
|
|
input.triggerHandler('blur');
|
|
expect(el.hasClass('md-input-focused')).toBe(false);
|
|
});
|
|
it('should set input class for input event', function() {
|
|
var expressions = {label:"password", model:"user.password", type:"password"},
|
|
el = setupTextFloat( expressions, model),
|
|
input = el.find('input');
|
|
|
|
expect(el.hasClass('md-input-has-value')).toBe(true);
|
|
|
|
input.val('');
|
|
input.triggerHandler('input');
|
|
expect(el.hasClass('md-input-has-value')).toBe(false);
|
|
|
|
input.val('ThomasBurleson@gmail.com');
|
|
input.triggerHandler('input');
|
|
expect(el.hasClass('md-input-has-value')).toBe(true);
|
|
});
|
|
it('should set input class for ngModel changes', function() {
|
|
var expressions = {label:"Password", model:"user.password", type:"password"},
|
|
el = setupTextFloat( expressions, model),
|
|
input = el.find('input');
|
|
|
|
expect(el.hasClass('md-input-has-value')).toBe(true);
|
|
|
|
input.scope().$apply(function(){ model.user.password = ""; });
|
|
expect(el.hasClass('md-input-has-value')).toBe(false);
|
|
|
|
input.scope().$apply(function() { model.user.password = "hiddenValley"; });
|
|
expect(el.hasClass('md-input-has-value')).toBe(true);
|
|
});
|
|
|
|
it('should pair input and label for accessibility.', function() {
|
|
var markup ='<md-text-float ' +
|
|
' md-fid="093" ' +
|
|
' label="{{labels.firstName}}" ' +
|
|
' ng-model="user.firstName" >' +
|
|
'</md-text-float>';
|
|
var el = buildElement( markup, model);
|
|
var input = el.find('input');
|
|
var label = el.find('label');
|
|
|
|
expect( label.attr('for') ).toBe( "093" );
|
|
expect( input.attr('id') ).toBe( label.attr('for') );
|
|
});
|
|
|
|
it('should auto-pair input and label for accessibility.', function() {
|
|
var markup ='<md-text-float ' +
|
|
' label="{{labels.firstName}}" ' +
|
|
' ng-model="user.firstName" >' +
|
|
'</md-text-float>';
|
|
var el = buildElement( markup, model);
|
|
var input = el.find('input');
|
|
var label = el.find('label');
|
|
|
|
expect( label.attr('for') == "" ).toBe( false );
|
|
expect( input.attr('id') ).toBe( label.attr('for') );
|
|
});
|
|
|
|
it('should add an ARIA attribute for disabled inputs', function() {
|
|
var markup ='<md-text-float ng-disabled="true" ' +
|
|
' label="{{labels.firstName}}" ' +
|
|
' ng-model="user.firstName" >' +
|
|
'</md-text-float>';
|
|
var el = buildElement( markup, model);
|
|
var input = el.find('input');
|
|
|
|
expect( input.attr('aria-disabled') ).toBe( 'true' );
|
|
});
|
|
});
|
|
|
|
// ****************************************************************
|
|
// Utility `setup` methods
|
|
// ****************************************************************
|
|
|
|
var templates = {
|
|
md_text_float : '<md-text-float ' +
|
|
' type="{{type}}" ' +
|
|
' label="{{label}}" ' +
|
|
' ng-model="{{model}}" >' +
|
|
'</md-text-float>',
|
|
|
|
md_input_group: '<div class="md-input-group" tabindex="-1">' +
|
|
' <label>{{label}}</label>' +
|
|
' <md-input id="{{id}}" type="{{type}}" ng-model="{{model}}"></md-input>' +
|
|
'</div>'
|
|
};
|
|
|
|
/**
|
|
* Build a text float group using the `<md-input-group />` markup template
|
|
*/
|
|
function setupInputGroup(expressions, values) {
|
|
values = angular.extend({},{type:"text", id:''},values||{});
|
|
|
|
return buildElement( templates.md_input_group, values, angular.extend({}, expressions||{}));
|
|
}
|
|
|
|
/**
|
|
* Build a text float group using the `<md-text-float />` markup template
|
|
*/
|
|
function setupTextFloat(expressions, values) {
|
|
values = angular.extend({ modelValue:"",type:'text' }, values || {});
|
|
|
|
var defaults = {model:"modelValue", label:""};
|
|
var tokens = angular.extend({}, defaults, expressions||{} );
|
|
|
|
return buildElement( templates.md_text_float, values, tokens );
|
|
}
|
|
|
|
/**
|
|
* Use the specified template markup, $compile to the DOM build
|
|
* and link both the bindings and attribute assignments.
|
|
* @returns {*} DOM Element
|
|
*/
|
|
function buildElement( template, scope, interpolationScope ) {
|
|
var el;
|
|
|
|
inject(function($compile, $interpolate, $rootScope) {
|
|
scope = angular.extend( $rootScope.$new(), scope || {});
|
|
|
|
// First substitute interpolation values into the template... if any
|
|
if ( interpolationScope ) {
|
|
template = $interpolate( template )( interpolationScope );
|
|
}
|
|
|
|
// Compile the template using the scope model(s)
|
|
el = $compile( template )( scope );
|
|
$rootScope.$apply();
|
|
|
|
});
|
|
return el;
|
|
}
|
|
|
|
});
|
|
|
|
|