Incremental step toward removing answer stylers
The VFormat system fulfills the same purpose. This is a small step toward removing that system; it will first attempt formatting, and fall back to any available answer stylers. The validator/formatters will be extracted into liza.master
commit
30b33e56c9
|
@ -20,6 +20,7 @@
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"chai": ">=1.9.1",
|
"chai": ">=1.9.1",
|
||||||
"mocha": ">=1.18.2",
|
"mocha": ">=1.18.2",
|
||||||
|
"sinon": ">=1.17.4",
|
||||||
"es6-promise": "~3"
|
"es6-promise": "~3"
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -84,44 +84,6 @@ module.exports = Class( 'ElementStyler',
|
||||||
|
|
||||||
|
|
||||||
_answerStyles: {
|
_answerStyles: {
|
||||||
'currency': function( value )
|
|
||||||
{
|
|
||||||
var pre = '$';
|
|
||||||
|
|
||||||
if ( !value )
|
|
||||||
{
|
|
||||||
value = 0;
|
|
||||||
}
|
|
||||||
else if ( value < 0 )
|
|
||||||
{
|
|
||||||
value *= -1;
|
|
||||||
pre = '-$';
|
|
||||||
}
|
|
||||||
|
|
||||||
var formatter = this._getAnswerStyler( 'number' );
|
|
||||||
|
|
||||||
return pre + formatter.call( this, ( +value ).toFixed( 2 ) );
|
|
||||||
},
|
|
||||||
|
|
||||||
'dollars': function( value )
|
|
||||||
{
|
|
||||||
var formatter = this._getAnswerStyler( 'currency' );
|
|
||||||
|
|
||||||
return formatter.call( this, ( +value ).toFixed( 0 ) );
|
|
||||||
},
|
|
||||||
|
|
||||||
'float': function( value )
|
|
||||||
{
|
|
||||||
if ( !value )
|
|
||||||
{
|
|
||||||
value = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
var formatter = this._getAnswerStyler( 'number' );
|
|
||||||
|
|
||||||
return formatter.call( this, ( +value ).toFixed( 2 ) );
|
|
||||||
},
|
|
||||||
|
|
||||||
'limit': function( value, _, default_val )
|
'limit': function( value, _, default_val )
|
||||||
{
|
{
|
||||||
value = ( value + '' ).replace( ',', '' );
|
value = ( value + '' ).replace( ',', '' );
|
||||||
|
@ -254,7 +216,6 @@ module.exports = Class( 'ElementStyler',
|
||||||
return ret;
|
return ret;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
'includeExclude': function( value, _, default_val )
|
'includeExclude': function( value, _, default_val )
|
||||||
{
|
{
|
||||||
// use the default if no value
|
// use the default if no value
|
||||||
|
@ -268,7 +229,6 @@ module.exports = Class( 'ElementStyler',
|
||||||
: 'Included';
|
: 'Included';
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* display as a limit, rejected or default if available
|
* display as a limit, rejected or default if available
|
||||||
*/
|
*/
|
||||||
|
@ -298,31 +258,6 @@ module.exports = Class( 'ElementStyler',
|
||||||
return ret;
|
return ret;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* format thousands
|
|
||||||
*/
|
|
||||||
'number': function( value )
|
|
||||||
{
|
|
||||||
var str = value.toString().split( '.' );
|
|
||||||
var len = str[0].length,
|
|
||||||
ret = '';
|
|
||||||
|
|
||||||
for ( var i = 0; i < len; i++ )
|
|
||||||
{
|
|
||||||
ret += str[0].charAt( i );
|
|
||||||
|
|
||||||
if ( ( ( len - i ) % 3 ) === 1 )
|
|
||||||
{
|
|
||||||
ret += ',';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
str[0] = ret.replace( /,$/, '' );
|
|
||||||
|
|
||||||
return str.join( '.' )
|
|
||||||
},
|
|
||||||
|
|
||||||
'state': function( value )
|
'state': function( value )
|
||||||
{
|
{
|
||||||
return State.getName( value );
|
return State.getName( value );
|
||||||
|
@ -367,27 +302,6 @@ module.exports = Class( 'ElementStyler',
|
||||||
: val;
|
: val;
|
||||||
},
|
},
|
||||||
|
|
||||||
'manualDate': function( value )
|
|
||||||
{
|
|
||||||
if( value.replace )
|
|
||||||
{
|
|
||||||
return value.replace(
|
|
||||||
/^([0-9]{4})-([0-9]+)-([0-9]+)$/,
|
|
||||||
'$2/$3/$1'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
|
|
||||||
'date': function( value )
|
|
||||||
{
|
|
||||||
var data = value.split( '-' );
|
|
||||||
|
|
||||||
// m/d/y
|
|
||||||
return data[1] + '/' + data[2] + '/' + data[0];
|
|
||||||
},
|
|
||||||
|
|
||||||
'dateTime': function( value )
|
'dateTime': function( value )
|
||||||
{
|
{
|
||||||
var ret_val = new Date( ( +value ) * 1000 );
|
var ret_val = new Date( ( +value ) * 1000 );
|
||||||
|
|
|
@ -407,14 +407,7 @@ module.exports = Class( 'StepUi' )
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// give the UI a chance to update the DOM; otherwise, the
|
_self.answerDataUpdate( data );
|
||||||
// answer elements we update may no longer be used (this also
|
|
||||||
// has performance benefits since it allows repainting before
|
|
||||||
// potentially heavy processing)
|
|
||||||
setTimeout( function()
|
|
||||||
{
|
|
||||||
_self._updateAnswerFieldData( data );
|
|
||||||
}, 25 );
|
|
||||||
} );
|
} );
|
||||||
|
|
||||||
doUpdate( bucket.getData() );
|
doUpdate( bucket.getData() );
|
||||||
|
@ -442,6 +435,43 @@ module.exports = Class( 'StepUi' )
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update and style answer field data
|
||||||
|
*
|
||||||
|
* @param {Object} data key-value diff
|
||||||
|
*
|
||||||
|
* @return {undefined}
|
||||||
|
*/
|
||||||
|
'virtual protected answerDataUpdate': function( data )
|
||||||
|
{
|
||||||
|
var _self = this;
|
||||||
|
|
||||||
|
var data_fmt = _self._formatter.format( data );
|
||||||
|
|
||||||
|
// give the UI a chance to update the DOM; otherwise, the
|
||||||
|
// answer elements we update may no longer be used (this also
|
||||||
|
// has performance benefits since it allows repainting before
|
||||||
|
// potentially heavy processing)
|
||||||
|
setTimeout( function()
|
||||||
|
{
|
||||||
|
_self._updateAnswerFieldData( data_fmt );
|
||||||
|
}, 25 );
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Retrieve answer DOM context
|
||||||
|
*
|
||||||
|
* @param {string} name field name
|
||||||
|
*
|
||||||
|
* @return {jQuery} DOM context
|
||||||
|
*/
|
||||||
|
'virtual protected getAnswerContext': function( name )
|
||||||
|
{
|
||||||
|
return this._answerContext[ name ];
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Update DOM answer fields with respective datum in diff DATA
|
* Update DOM answer fields with respective datum in diff DATA
|
||||||
*
|
*
|
||||||
|
@ -458,7 +488,7 @@ module.exports = Class( 'StepUi' )
|
||||||
// changed
|
// changed
|
||||||
for ( var name in data )
|
for ( var name in data )
|
||||||
{
|
{
|
||||||
if ( !( this._answerContext[ name ] ) )
|
if ( !( this.getAnswerContext( name ) ) )
|
||||||
{
|
{
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
@ -473,7 +503,7 @@ module.exports = Class( 'StepUi' )
|
||||||
// update every index on the DOM
|
// update every index on the DOM
|
||||||
i = this.styler.getAnswerElementByName(
|
i = this.styler.getAnswerElementByName(
|
||||||
name, undefined, undefined,
|
name, undefined, undefined,
|
||||||
this._answerContext[ name ]
|
this.getAnswerContext( name )
|
||||||
).length;
|
).length;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -515,7 +545,7 @@ module.exports = Class( 'StepUi' )
|
||||||
// if we've already found an element for this ref, then it is
|
// if we've already found an element for this ref, then it is
|
||||||
// referenced in multiple places; simply store the context as the
|
// referenced in multiple places; simply store the context as the
|
||||||
// entire step
|
// entire step
|
||||||
if ( _self._answerContext[ ref_id ] )
|
if ( _self.getAnswerContext( ref_id ) )
|
||||||
{
|
{
|
||||||
_self._answerContext[ ref_id ] = _self.$content;
|
_self._answerContext[ ref_id ] = _self.$content;
|
||||||
return;
|
return;
|
||||||
|
@ -545,7 +575,7 @@ module.exports = Class( 'StepUi' )
|
||||||
'private _updateAnswer': function( name, index, value )
|
'private _updateAnswer': function( name, index, value )
|
||||||
{
|
{
|
||||||
var $element = this.styler.getAnswerElementByName(
|
var $element = this.styler.getAnswerElementByName(
|
||||||
name, index, null, ( this._answerContext[ name ] || this.$content )
|
name, index, null, ( this.getAnswerContext( name ) || this.$content )
|
||||||
);
|
);
|
||||||
|
|
||||||
var i = $element.length;
|
var i = $element.length;
|
||||||
|
|
|
@ -0,0 +1,138 @@
|
||||||
|
/**
|
||||||
|
* Test case for GeneralStepUi
|
||||||
|
*
|
||||||
|
* Copyright (C) 2016 LoVullo Associates, Inc.
|
||||||
|
*
|
||||||
|
* This file is part of the Liza Data Collection Framework
|
||||||
|
*
|
||||||
|
* Liza is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
var Sut = require( '../../../' ).ui.step.GeneralStepUi,
|
||||||
|
expect = require( 'chai' ).expect,
|
||||||
|
sinon = require( 'sinon' ),
|
||||||
|
Class = require( 'easejs' ).Class;
|
||||||
|
|
||||||
|
|
||||||
|
describe( 'ui.GeneralStepUi', function()
|
||||||
|
{
|
||||||
|
describe( 'on answer data change', function()
|
||||||
|
{
|
||||||
|
it( 'will attempt pre-style with formatter', function( done )
|
||||||
|
{
|
||||||
|
var orig_data = {
|
||||||
|
foo: [ "orig" ],
|
||||||
|
},
|
||||||
|
fmt_data = {
|
||||||
|
foo: [ "formatted" ],
|
||||||
|
};
|
||||||
|
|
||||||
|
var formatter = createFormatter(),
|
||||||
|
mock_fmt = sinon.mock( formatter );
|
||||||
|
|
||||||
|
mock_fmt.expects( 'format' )
|
||||||
|
.once()
|
||||||
|
.withExactArgs( orig_data )
|
||||||
|
.returns( fmt_data );
|
||||||
|
|
||||||
|
createSut( formatter, function( name, value )
|
||||||
|
{
|
||||||
|
// by the time the answer data makes its way to the
|
||||||
|
// element styler, it should have already been
|
||||||
|
// formatted
|
||||||
|
expect( name ).to.equal( 'foo' );
|
||||||
|
expect( value ).to.equal( fmt_data.foo[ 0 ] );
|
||||||
|
|
||||||
|
mock_fmt.verify();
|
||||||
|
done();
|
||||||
|
} ).answerDataUpdate( orig_data );
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create new SUT with formatter FORMATTER and generated element
|
||||||
|
* styler
|
||||||
|
*
|
||||||
|
* @param {Object} formatter validator/formatter mock
|
||||||
|
* @param {function(string,*)} style_callback styler styleAnswer method dfn
|
||||||
|
*
|
||||||
|
* @return {Sut}
|
||||||
|
*/
|
||||||
|
function createSut( formatter, style_callback )
|
||||||
|
{
|
||||||
|
return Sut.extend(
|
||||||
|
{
|
||||||
|
// visibility escalation
|
||||||
|
'override answerDataUpdate': function( data )
|
||||||
|
{
|
||||||
|
return this.__super( data );
|
||||||
|
},
|
||||||
|
|
||||||
|
'override getAnswerContext': function( name )
|
||||||
|
{
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
} )(
|
||||||
|
{},
|
||||||
|
createElementStyler( style_callback ),
|
||||||
|
formatter
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create mock ElementStyler
|
||||||
|
*
|
||||||
|
* styleAnswer method is defined by STYLE_CALLBACK
|
||||||
|
*
|
||||||
|
* @return {Object} ElementStyler mock
|
||||||
|
*/
|
||||||
|
function createElementStyler( style_callback )
|
||||||
|
{
|
||||||
|
return {
|
||||||
|
getAnswerElementByName: function()
|
||||||
|
{
|
||||||
|
// jQuery element
|
||||||
|
return {
|
||||||
|
attributes: [],
|
||||||
|
length: 1,
|
||||||
|
|
||||||
|
text: function() {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
styleAnswer: style_callback,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create mock validator/formatter
|
||||||
|
*
|
||||||
|
* The only method provided is `format', which contains no definition;
|
||||||
|
* it is expected to be mocked by the caller.
|
||||||
|
*
|
||||||
|
* @param {Object}
|
||||||
|
*/
|
||||||
|
function createFormatter( expected, return_data )
|
||||||
|
{
|
||||||
|
return {
|
||||||
|
format: function()
|
||||||
|
{
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue