[DEV-7060] Remove key sizzle calls from ElementStyler

See merge request floss/liza!90

package.json.in

@@ -21,7 +21,7 @@
   },
 
   "scripts": {
-    "postinstall": "./configure"
+    "postinstall": "./configure && mod_dir=node_modules; [ ! -d \"node_modules\" ] && mod_dir=..; if [ $(@NODE@ --version | sed 's/^v//' | cut -d. -f1) -ge \"12\" ]; then ln -s php-serialize ./$mod_dir/php; else rm -f $mod_dir/php; fi"
   },
 
   "dependencies": {

src/client/event/RateEventHandler.js

@@ -98,7 +98,7 @@ module.exports = Class( 'RateEventHandler' )
         var qstep = quote.getCurrentStepId();
 
         // arbitrary delay before rating (use as a last resort)
-        var delay = ( typeof +data.value === 'number' )
+        var delay = ( !isNaN( data.value ) )
             ? data.value * 1e3
             : 0;
 

src/server/request/UserSession.js

@@ -23,8 +23,7 @@
 
 // php compatibility
 var Class = require( 'easejs' ).Class,
-    phpS  = require('php-serialize');
-
+    php   = require( 'php' );
 
 /**
  * Stores/retrieves user PHP session data from memcached
@@ -235,7 +234,7 @@ module.exports = Class.extend( require( '../../events' ).EventEmitter,
 
             for ( var key in data )
             {
-                newdata += key + '|' + phpS.serialize( data[ key ] );
+                newdata += key + '|' + php.serialize( data[ key ] );
             }
 
             _self._memcache.set( _self._id, newdata, 0, function()
@@ -281,7 +280,7 @@ module.exports = Class.extend( require( '../../events' ).EventEmitter,
                         val = splits[ ++i ];
 
                     // the values are serialized PHP data; unserialize them
-                    val = phpS.unserialize( val );
+                    val = php.unserialize( val );
 
                     // add to the session data
                     session_data[ key ] = val;

src/ui/ElementStyler.js

@@ -20,7 +20,7 @@
  *
  * @needsLove
  *   - Everything!  This class exists from when the framework was barely
- *     more than a few prototypes and has rotted ever since with little else 
+ *     more than a few prototypes and has rotted ever since with little else
  *     but workarounds.
  * @end needsLove
  */
@@ -82,6 +82,18 @@ module.exports = Class( 'ElementStyler',
      */
     'private _$context': null,
 
+    /**
+     * jQuery Object
+     * @type {jQuery}
+     */
+    'private _jquery': null,
+
+    /**
+     * HTML Document
+     * @type {HTMLElement}
+     */
+    'private _document': null,
+
 
     _answerStyles: {
         'deductible': function( value, _, default_val  )
@@ -186,6 +198,8 @@ module.exports = Class( 'ElementStyler',
     __construct: function( jquery )
     {
         this._$context = jquery;
+        this._jquery = jquery;
+        this._document = jquery( 'body' ).context;
     },
 
 
@@ -802,28 +816,34 @@ module.exports = Class( 'ElementStyler',
      *
      * This allows for a simple mapping from bucket to UI.
      *
-     * @param {string}  name     element name (question name)
-     * @param {number=} index    index of element to retrieve (bucket index)
-     * @param {string=} filter   filter to apply to widgets
-     * @param {jQuery=} $context filtering context
+     * @param {string}      name     element name (question name)
+     * @param {number=}     index    index of element to retrieve (bucket index)
+     * @param {string=}     filter   filter to apply to widgets
+     * @param {HTMLElement} $context filtering context
      *
      * @return {jQuery} matches
      */
-    'public getWidgetByName': function( name, index, filter, $context )
+    'public getWidgetByName': function( name, index, filter, context )
     {
-        $context = $context || this._$context;
+        context = context || this._$context;
+
+        // Todo: Transitional step to remove jQuery
+        if ( context instanceof jQuery )
+        {
+            context = context[ 0 ];
+        }
 
         // find the field; note that we *skip* the index selection if we have
         // been notified---via a property on the context---that the content
         // should contain only the index we are looking for
-        var $results = this._getWidgetByNameQuick( name, index, $context );
+        var results = this._getWidgetByNameQuick( name, index, context );
 
         if ( filter )
         {
-            return $results.filter( filter );
+           throw new Error( 'Filter deprecated' );
         }
 
-        return $results;
+        return this._jquery( results );
     },
 
 
@@ -835,33 +855,31 @@ module.exports = Class( 'ElementStyler',
      * performed the check to begin with, so the idea is to find the id for as
      * many as possible.
      */
-    'private _getWidgetByNameQuick': function( name, index, $context )
+    'private _getWidgetByNameQuick': function( name, index, context )
     {
-        var hasindex = ( ( index !== undefined ) && !$context.singleIndex );
+        var hasindex = ( ( index !== undefined ) && !context.singleIndex );
 
         if ( hasindex )
         {
-            var id = this._getElementId( name, index, $context );
+            var id = this._getElementId( name, index );
 
             if ( id )
             {
-                $element = $context.find( '#' + id );
+                element = this._document.getElementById( id );
 
                 // let's hope for the best
-                if ( $element.length )
+                if ( element !== null )
                 {
-                    return $element;
+                    return element;
                 }
             }
+
+            // Fallback to the painfully slow method.
+            return context.querySelectorAll( '[data-field-name="' + name + '"]' )[ index ];
         }
 
-        // damnit. Fallback to the painfully slow method.
-        return $context.find( '[data-field-name="' + name + '"]' +
-            ( ( hasindex )
-                ? ':nth(' + +index + ')'
-                : ''
-            )
-        );
+        // If no index, return first element
+        return context.querySelector( '[data-field-name="' + name + '"]' );
     },
 
 
@@ -922,28 +940,32 @@ module.exports = Class( 'ElementStyler',
      * using NAME as an element id; otherwise, this acts just as
      * getElementByName.
      *
-     * @param {string}  name     element name (question name)
-     * @param {number=} index    index of element to retrieve (bucket index)
-     * @param {string=} filter   filter to apply to widgets
-     * @param {jQuery=} $context filtering context
+     * @param {string}      name     element name (question name)
+     * @param {number=}     index    index of element to retrieve (bucket index)
+     * @param {string=}     filter   filter to apply to widgets
+     * @param {HTMLElement} context filtering context
      *
      * @return {jQuery} matches
      */
     'public getElementByNameLax': function(
-        name, index, filter, $context
+        name, index, filter, context
     )
     {
-        $context = $context || this._$context;
+        context = context || this._$context;
+
+        // Todo: Transitional step to remove jQuery
+        if ( context instanceof jQuery )
+        {
+            context = context[ 0 ];
+        }
 
         if ( !( this.isAField( name ) ) )
         {
-            return $context.find(
-                '#' + name + ':nth(' + index + ')'
-            );
+            return this._jquery( context.querySelectorAll( '#' + name  )[ index ] );
         }
 
         return this.getElementByName(
-            name, index, filter, $context
+            name, index, filter, context
         );
     },
 
@@ -1030,11 +1052,25 @@ module.exports = Class( 'ElementStyler',
     },
 
 
-    'private _getElementId': function( name, index, $context )
+    /**
+     * Determines the id of an element based on the type
+     *
+     * @param {string} name  element name
+     * @param {number} index index of element to retrieve (bucket index)
+     *
+     * @return {string} element id
+     */
+    'private _getElementId': function( name, index )
     {
         switch ( this._getElementType( name ) )
         {
-            case 'radio': return '';
+            case 'radio':
+                return '';
+            case 'answer':
+                return name;
+            case 'checkbox':
+                name += '_n';
+                break;
             case 'noyes':
                 // append yes/no depending on whether or not the given index is
                 // even/odd
@@ -1042,13 +1078,11 @@ module.exports = Class( 'ElementStyler',
                     ? '_y'
                     : '_n';
 
-                index = index / 2;
-
-                /* fallthrough */
-
-            default:
-                return 'q_' + name + '_' + index;
+                index = Math.floor( index / 2 );
+                break;
         }
+
+        return 'q_' + name + '_' + index;
     },
 
 

test/client/event/RateEventHandlerTest.js

@@ -114,6 +114,181 @@ describe( 'RateEventHandler', () =>
         } )
     } );
 
+    describe( "Handles rating delay", () =>
+    {
+        it( "uses a number to determine rating delay", done =>
+        {
+            let set_timeout_called = false;
+            let actual_delay       = 0;
+
+            const delay          = '25';
+            const expected_delay = 25000;
+
+            const quote = {
+                getExplicitLockStep: () => 0,
+                setLastPremiumDate:  () => {},
+                setInitialRatedDate: () => {},
+                getCurrentStepId:    () => 1,
+                refreshData:         () => {},
+                isLocked:            () => {},
+                getId:               () => "111111"
+            };
+
+            const client = {
+                uiDialog: {
+                    showRatingInProgressDialog: () =>
+                    {
+                        return { close: () => {} }
+                    },
+                },
+                showRatingInProgressDialog: () => "Some Dialog",
+                getQuote: () => quote,
+                isSaving: () => false,
+                once:     ( _, __ ) => {},
+                getUi:    () =>
+                {
+                    return {
+                        getStep: ( _ ) =>
+                        {
+                            return { invalidate: () => {} }
+                        }
+                    }
+                },
+                getDataByName: ( name ) => { return [ 'foo' ]; },
+            };
+
+            const proxy = {
+                get: ( url, callback ) => callback(
+                    {
+                        content: {
+                            data:             "Some Data",
+                            initialRatedDate: 111,
+                            lastRatedDate:    222
+                        }
+                    },
+                    null
+                )
+            };
+
+            const sut = Sut( client, proxy );
+
+            const old_setTimeout = setTimeout;
+
+            setTimeout = ( callback, delay ) => {
+                set_timeout_called = true;
+                actual_delay       = delay;
+
+                callback.apply( this, arguments );
+            }
+
+            sut.handle(
+                "",
+                ( _, __ ) => {},
+                {
+                    indv:   'somerater',
+                    stepId: 1,
+                    value:  delay
+                }
+            );
+
+            setTimeout = old_setTimeout;
+
+            expect( set_timeout_called ).to.equal( true );
+            expect( actual_delay ).to.equal( expected_delay );
+            done();
+        } )
+
+
+        it( "rating delay defaults to zero", done =>
+        {
+            let set_timeout_called = false;
+            let actual_delay       = 0;
+
+            const delay          = 'foo';
+            const expected_delay = 0;
+
+            const quote = {
+                getExplicitLockStep: () => 0,
+                setLastPremiumDate:  () => {},
+                setInitialRatedDate: () => {},
+                getCurrentStepId:    () => 1,
+                refreshData:         () => {},
+                isLocked:            () => {},
+                getId:               () => "111111"
+            };
+
+            const client = {
+                uiDialog: {
+                    showRatingInProgressDialog: () =>
+                    {
+                        return { close: () => {} }
+                    },
+                },
+                showRatingInProgressDialog: () => "Some Dialog",
+                getQuote: () => quote,
+                isSaving: () => false,
+                once:     ( _, __ ) => {},
+                getUi:    () =>
+                {
+                    return {
+                        getStep: ( _ ) =>
+                        {
+                            return { invalidate: () => {} }
+                        }
+                    }
+                },
+            };
+
+            const proxy = {
+                get: ( url, callback ) => callback(
+                    {
+                        content: {
+                            data:             "Some Data",
+                            initialRatedDate: 111,
+                            lastRatedDate:    222
+                        }
+                    },
+                    null
+                )
+            };
+
+            const sut = Sut( client, proxy );
+
+            const old_setTimeout = setTimeout;
+
+            setTimeout = ( callback, delay ) => {
+                set_timeout_called = true;
+                actual_delay       = delay;
+
+                callback.apply( this, arguments );
+            }
+
+            // this is necessary because if something breaks here, setTimeout
+            // will not be restored and will yield a false negative on other
+            // tests
+            try {
+                sut.handle(
+                    "",
+                    ( _, __ ) => {},
+                    {
+                        indv:   'somerater',
+                        stepId: 1,
+                        value:  delay
+                    }
+                );
+            }
+            catch( e ) {}
+            finally
+            {
+                setTimeout = old_setTimeout;
+            }
+
+            expect( set_timeout_called ).to.equal( true );
+            expect( actual_delay ).to.equal( expected_delay );
+            done();
+        } )
+    } );
+
     describe( "Handle Rating Event with locked quote", () =>
     {
         it( "calls #handle to do the rating with a locked quote", done =>

test/ui/ElementStylerTest.js

@@ -0,0 +1,154 @@
+/**
+ * Test case for ElementStyler
+ *
+ *  Copyright (C) 2010-2020 R-T Specialty, LLC.
+ *
+ *  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.ElementStyler,
+    expect  = require( 'chai' ).expect,
+    sinon   = require( 'sinon' ),
+    Class   = require( 'easejs' ).Class;
+
+
+describe( 'ui.ElementStyler', () =>
+{
+    [
+        {
+            name:            'business_city',
+            css_class:       '',
+            index:           '0',
+            qtypes:          {
+                business_city: {
+                    type:  'text',
+                }
+            },
+            expected_id:     'q_business_city_0',
+        },
+
+        {
+            name:            'business_city',
+            css_class:       '',
+            index:           '1',
+            qtypes:          {
+                business_city: {
+                    type:  'text',
+                }
+            },
+            expected_id:    'q_business_city_1',
+        },
+
+        {
+            name:            'sgo_foo',
+            css_class:       'checkbox',
+            index:           '0',
+            qtypes:          {
+                sgo_foo: {
+                    type:  'checkbox',
+                }
+            },
+            expected_id:   'q_sgo_foo_n_0',
+        },
+
+        {
+            name:            'noyes_foo',
+            css_class:       'noyes',
+            index:           '0',
+            qtypes:          {
+                noyes_foo: {
+                    type:  'noyes',
+                }
+            },
+            expected_id:   'q_noyes_foo_n_0',
+        },
+
+        {
+            name:            'noyes_foo',
+            css_class:       'noyes',
+            index:           '1',
+            qtypes:          {
+                noyes_foo: {
+                    type:  'noyes',
+                }
+            },
+            expected_id:   'q_noyes_foo_y_0',
+        },
+
+        {
+            name:            'noyes_baz',
+            css_class:       'noyes',
+            index:           '4',
+            qtypes:          {
+                noyes_baz: {
+                    type:  'noyes',
+                }
+            },
+            expected_id:   'q_noyes_baz_n_2',
+        },
+
+        {
+            name:            'noyes_baz',
+            css_class:       'noyes',
+            index:           '5',
+            qtypes:          {
+                noyes_baz: {
+                    type:  'noyes',
+                }
+            },
+            expected_id:   'q_noyes_baz_y_2',
+        },
+    ].forEach( ( { name, css_class, qtypes, index, expected_id } ) =>
+    {
+        it( "determines the correct element id for " + name, () =>
+        {
+            // Stub document and jQuery calls
+            $      = sinon.stub();
+            jQuery = sinon.stub();
+
+            const document = {
+                getElementById: sinon.stub()
+            };
+
+            jQuery.withArgs( 'body' ).returns( { context: document } );
+
+            const sut = Sut( jQuery );
+
+            sut.setTypeData( qtypes );
+
+            const node = '<input id="' + expected_id
+                + '" class="' + css_class + '" name="' + name
+                + '[]" data-field-name="' + name
+                + '" data-index="' + index
+                + '"></input>';
+
+            const html = '<div class="foo">' + node +  '</div>';
+
+            const context = {
+                html: html,
+            };
+
+            document.getElementById.returns( node );
+
+            sut.getWidgetByName( name, index, null, context );
+
+            const actual_id = document.getElementById.getCall( 0 ).args[ 0 ];
+
+            expect( actual_id )
+                .to.equal( expected_id );
+        } );
+    } );
+} );