TimeTrex/interface/html5/views/developer_tools/WidgetTestViewController.js

595 lines
22 KiB
JavaScript

import '@/global/widgets/filebrowser/TImage';
import '@/global/widgets/filebrowser/TImageAdvBrowser';
import '@/global/widgets/color-picker/TColorPicker';
import { SwitchButtonIcon } from '@/global/widgets/switch_button/SwitchButton';
export class WidgetTestViewController extends BaseViewController {
constructor( options = {} ) {
_.defaults( options, {
el: '#awesomebox_test_view_container',
// _required_files: [
// 'TColorPicker',
// 'TImage',
// 'TImageAdvBrowser'
// ],
user_api: null,
user_group_api: null,
company_api: null,
user_id_array: null
} );
super( options );
}
init( options ) {
this.edit_view_tpl = 'WidgetTestEditView.html';
this.permission_id = 'user';
this.viewId = 'WidgetTest';
this.script_name = 'WidgetTest';
this.table_name_key = 'awesomebox_test';
this.context_menu_name = $.i18n._( 'Widget Test' );
this.navigation_label = $.i18n._( 'Widget Test' );
this.api = TTAPI.APIUser;
this.select_company_id = LocalCacheData.getCurrentCompany().id;
this.user_group_api = TTAPI.APIUserGroup;
this.company_api = TTAPI.APICompany;
this.user_id_array = [];
this.render();
this.buildContextMenu();
this.initData();
}
setCurrentEditRecordData() {
this.collectUIDataToCurrentEditRecord();
this.setEditViewDataDone();
}
clearEditViewData() {
return false;
}
buildEditViewUI() {
var $this = this;
if( ContextMenuManager.getMenu( this.determineContextMenuMountAttributes().id ) === undefined ) {
this.buildContextMenu();
} else {
Debug.Warn( 'Context Menu ('+ this.determineContextMenuMountAttributes().id +') already exists for: '+ this.viewId, 'AwesomeBoxTestView.js', 'AwesomeBoxTestView', 'buildEditViewUI', 10 );
}
var tab_model = {
'tab_employee': { 'label': $.i18n._( 'Employee' ) },
};
this.setTabModel( tab_model );
//Tab 0 start
var tab_employee = this.edit_view_tab.find( '#tab_employee' );
var tab_employee_column1 = tab_employee.find( '.first-column' );
var tab_employee_column2 = tab_employee.find( '.second-column' );
this.edit_view_tabs[0] = [];
this.edit_view_tabs[0].push( tab_employee_column1 );
var form_item_input = Global.loadWidgetByName( FormItemType.SEPARATED_BOX );
form_item_input.SeparatedBox( { label: $.i18n._( 'Separated_box: if you see this, the test is passing.' ) } );
this.addEditFieldToColumn( null, form_item_input, tab_employee_column1 );
form_item_input = Global.loadWidgetByName( FormItemType.CHECKBOX );
form_item_input.TCheckbox( { field: 'checkbox' } );
this.addEditFieldToColumn( $.i18n._( 'TCheckbox' ), form_item_input, tab_employee_column1, '' );
form_item_input = Global.loadWidgetByName( FormItemType.COLOR_PICKER );
form_item_input.TColorPicker( { field: 'color_picker' } );
this.addEditFieldToColumn( $.i18n._( 'TColorPicker' ), form_item_input, tab_employee_column1 );
form_item_input = Global.loadWidgetByName( FormItemType.DATE_PICKER );
form_item_input.TDatePicker( { field: 'datepicker' } );
this.addEditFieldToColumn( $.i18n._( 'TDatePicker' ), form_item_input, tab_employee_column1, '', null );
form_item_input = Global.loadWidgetByName( FormItemType.DATE_PICKER );
form_item_input.TRangePicker( { field: 'daterange', validation_field: 'date_stamp' } );
this.addEditFieldToColumn( $.i18n._( 'TDateRange' ), form_item_input, tab_employee_column1, '', null, true );
form_item_input = Global.loadWidgetByName( FormItemType.TIME_PICKER );
form_item_input.TTimePicker( { field: 'timepicker' } );
this.addEditFieldToColumn( $.i18n._( 'TTimePicker' ), form_item_input, tab_employee_column1 );
form_item_input = Global.loadWidgetByName( FormItemType.IMAGE_AVD_BROWSER );
this.file_browser = form_item_input.TImageAdvBrowser( {
field: 'imagebrowser',
default_width: 128,
default_height: 128,
enable_delete: true,
callBack: function( form_data ) {
new ServiceCaller().uploadFile( form_data, 'object_type=user_photo&object_id=' + $this.current_edit_record.id, {
onResult: function( result ) {
if ( result.toLowerCase() === 'true' ) {
$this.file_browser.setImage( ServiceCaller.getURLByObjectType( 'user_photo' ) + '&object_id=' + $this.current_edit_record.id );
} else {
TAlertManager.showAlert( result, 'Error' );
}
}
} );
},
deleteImageHandler: function( e ) {
$this.onDeleteImage();
}
} );
this.addEditFieldToColumn( $.i18n._( 'TImageAdvBrowser' ), this.file_browser, tab_employee_column1, '', null, false, true );
Global.loadScript( 'global/widgets/formula_builder/FormulaBuilder.js', function() {
// Dynamic Field 11
form_item_input = Global.loadWidgetByName( FormItemType.FORMULA_BUILDER );
form_item_input.FormulaBuilder( {
field: 'formula', width: '100%', onFormulaBtnClick: function() {
var custom_column_api = TTAPI.APIReportCustomColumn;
custom_column_api.getOptions( 'formula_functions', {
onResult: function( fun_result ) {
var fun_res_data = fun_result.getResult();
$this.api.getOptions( 'formula_variables', { onResult: onColumnsResult } );
function onColumnsResult( col_result ) {
var col_res_data = col_result.getResult();
var default_args = {};
default_args.functions = Global.buildRecordArray( fun_res_data );
default_args.variables = Global.buildRecordArray( col_res_data );
default_args.formula = $this.current_edit_record.company_value1;
default_args.current_edit_record = Global.clone( $this.current_edit_record );
default_args.api = $this.api;
IndexViewController.openWizard( 'FormulaBuilderWizard', default_args, function( val ) {
$this.current_edit_record.company_value1 = val;
$this.edit_view_ui_dic.df_11.setValue( val );
} );
}
}
} );
}
} );
$this.detachElement( 'df_11' );
$this.addEditFieldToColumn( 'FormulaBuilder', form_item_input, tab_employee_column1, '', null, true );
form_item_input.parent().width( '45%' );
} );
//NO INSTANCES OF TList
//Create action switch buttons
var action_chooser_div = $( '.control-bar .action-chooser-div' );
this.all_employee_btn = action_chooser_div.find( '#all_employee' );
this.daily_totals_btn = action_chooser_div.find( '#daily_totals' );
this.weekly_totals_btn = action_chooser_div.find( '#weekly_totals' );
this.strict_range_btn = action_chooser_div.find( '#strict_range' );
this.all_employee_btn = this.all_employee_btn.SwitchButton( {
icon: SwitchButtonIcon.all_employee,
tooltip: $.i18n._( 'Show Unscheduled Employees' )
} );
this.daily_totals_btn = this.daily_totals_btn.SwitchButton( {
icon: SwitchButtonIcon.daily_total,
tooltip: $.i18n._( 'Daily Totals' )
} );
this.weekly_totals_btn = this.weekly_totals_btn.SwitchButton( {
icon: SwitchButtonIcon.weekly_total,
tooltip: $.i18n._( 'Weekly Totals' )
} );
this.strict_range_btn = this.strict_range_btn.SwitchButton( {
icon: SwitchButtonIcon.strict_range,
tooltip: $.i18n._( 'Strict Range' )
} );
this.all_employee_btn.click( function() {
// $this.onShowEmployeeClick();
} );
this.daily_totals_btn.click( function() {
// $this.onDailyTotalsClick();
} );
this.weekly_totals_btn.click( function() {
// $this.onWeeklyTotalClick();
} );
this.strict_range_btn.setValue( true );
this.strict_range_btn.click( function() {
// $this.onStrictRangeClick();
} );
this.toggle_button = $( this.el ).find( '.toggle-button-div' );
var data_provider = [
{ label: $.i18n._( 'Day' ), value: 'day' },
{ label: $.i18n._( 'Week' ), value: 'week' },
{ label: $.i18n._( 'Month' ), value: 'month' },
{ label: $.i18n._( 'Year' ), value: 'year' }
];
this.toggle_button = this.toggle_button.TToggleButton( { data_provider: data_provider } );
this.toggle_button.bind( 'change', function( e, result ) {
$this.scroll_position = 0;
$this.select_all_shifts_array = [];
$this.select_shifts_array = [];
$this.select_recurring_shifts_array = [];
} );
form_item_input = Global.loadWidgetByName( FormItemType.TAG_INPUT );
form_item_input.TTagInput( { field: 'tags', object_type_id: 930 } );
this.addEditFieldToColumn( $.i18n._( 'TTagInput' ), form_item_input, tab_employee_column2, '', null, null, true );
//requires width manipulation or intermittently won't show.
form_item_input = Global.loadWidgetByName( FormItemType.TEXT_INPUT );
form_item_input.TTextInput( { field: 'text', width: '100%' } );
this.addEditFieldToColumn( $.i18n._( 'TText' ), form_item_input, tab_employee_column2 );
form_item_input.parent().width( '45%' );
form_item_input = Global.loadWidgetByName( FormItemType.PASSWORD_INPUT );
form_item_input.TPasswordInput( { field: 'password', width: 200 } );
this.addEditFieldToColumn( $.i18n._( 'TPasswordInput' ), form_item_input, tab_employee_column2 );
form_item_input = Global.loadWidgetByName( FormItemType.TEXT_AREA );
form_item_input.TTextArea( { field: 'textarea' } );
this.addEditFieldToColumn( $.i18n._( 'TTextArea' ), form_item_input, tab_employee_column2, '', null, null, true );
}
buildSearchFields() {
super.buildSearchFields();
var $this = this;
this.search_fields = [];
}
getCustomContextMenuModel() {
var context_menu_model = {
exclude: ['default'],
include: [
'edit',
'cancel'
]
};
return context_menu_model;
}
//override that forces same data to grid at all times.
search() {
var $this = this;
this.api.getUser( {}, true, {
onResult: function( r ) {
var result_data = r.getResult();
$this.user_id_array = result_data;
result_data = $this.processResultData( result_data );
$this.grid.setData( result_data );
$this.grid.setGridColumnsWidth();
$this.onEditClick( result_data[0].id );
}
} );
}
setEditViewDataDone() {
var $this = this;
setTimeout( function() {
TAlertManager.showConfirmAlert( $.i18n._( 'Run tests?' ), null, function( result ) {
if ( result == true ) {
$this.runTests();
}
} );
$this.setTabOVisibility( true );
$( '.edit-view-tab-bar' ).css( 'opacity', 1 );
TTPromise.resolve( 'init', 'init' );
}, 2500 );
super.setEditViewDataDone();
}
runTests() {
var $this = this;
if ( $( '#qunit_script' ).length == 0 ) {
$( '<script id=\'qunit_script\' src=\'framework/qunit/qunit.js\'></script>' ).appendTo( 'head' );
$( '<link rel=\'stylesheet\' type=\'text/css\' href=\'framework/qunit/qunit.css\'>' ).appendTo( 'head' );
}
;
QUnit.config.autostart = false;
$( '#qunit_container' ).css( 'width', '100%' );
$( '#qunit_container' ).css( 'height', 'auto' );
$( '#qunit_container' ).css( 'overflow-y', 'scroll' );
$( '#qunit_container' ).css( 'top', '0px' );
$( '#qunit_container' ).css( 'left', '0px' );
$( '#qunit_container' ).css( 'z-index', '100' );
$( '#qunit_container' ).css( 'background', '#fff' );
$( '#qunit_container' ).show();
$( '#tt_debug_console' ).remove();
if ( !window.qunit_initiated ) {
window.qunit_initiated = true;
//QUnit.start(); //This causes a JavaScript exception, but does not seem to be required. Test ran without it.
}
//select an item by clicking a td in the last row
QUnit.module( 'Widgets' );
this.testCheckbox();
this.testColorPicker();
TTPromise.add( 'datetests', 'picker' );
TTPromise.add( 'datetests', 'range' );
this.testDatePicker();
this.testDateRange();
//as timepicker is a date picker with alt options enabled, it must be triggered after the date tests are done or the selectors will collide and possibly provide false positives
TTPromise.wait( 'datetests', null, function() {
$this.testTimePicker();
} );
TTPromise.add( 'wizardtests', 'imagebrowser' );
this.testImageBrowser();
TTPromise.wait( 'wizardtests', 'imagebrowser', function() {
$this.testFormulaBuilder();
} );
TTPromise.wait( 'null', 'null', function() {
$this.testTags();
} );
this.testButtons();
this.testText();
this.testPassword();
this.testTextarea();
//Extra tests that should be added to test non-form widgets
//todo: TAlert
//todo: inside_editor
//todo: error tips
//todo: test feedback widget
//todo: live_chat
//todo: paging
//todo: search_panel
//todo: top_notification
//todo: view_min_tab
}
testCheckbox() {
var $this = this;
QUnit.test( 'Checkbox tests', function( assert ) {
var cb = $this.edit_view_ui_dic.checkbox;
assert.ok( cb.getValue() == false, 'checkbox not checked' );
cb.setValue( true );
assert.ok( cb.getValue(), 'checkbox checked via code' );
cb.setValue( false );
assert.ok( cb.getValue() == false, 'checkbox unchecked via code' );
$( cb ).click();
assert.ok( cb.getValue(), 'checkbox checked via click' );
$( cb ).click();
assert.ok( cb.getValue() == false, 'checkbox unchecked via click' );
} );
}
testColorPicker() {
var $this = this;
QUnit.test( 'ColorPicker tests', function( assert ) {
var done_testing = assert.async();
var widget = $this.edit_view_ui_dic.color_picker;
assert.ok( widget.getValue() == '', 'widget empty' );
$( widget ).click();
setTimeout( function() {
$( '.cp-color-picker' ).hide();
assert.ok( widget.getValue() == 'FFFFFF', 'widget white after no select: ' + widget.getValue() );
widget.setValue( 'FF0000' );
assert.ok( widget.getValue() == 'FF0000', 'widget red after set value programatically' + widget.getValue() );
$( widget ).click();
//there's no color selection by click because it's based on mouseup and mousedown events which can't be simulated at specific coordinates
$( '.cp-color-picker' ).hide();
done_testing();
}, 1000 );
} );
}
testDatePicker() {
var $this = this;
QUnit.test( 'DatePicker tests', function( assert ) {
var done_testing = assert.async();
var widget = $this.edit_view_ui_dic.datepicker;
assert.ok( widget.getValue() == '', 'widget empty' );
setTimeout( function() {
widget.find( '#tDatePickerIcon' ).trigger( 'mouseup' );
assert.ok( ( $( '#ui-datepicker-div:visible' ).length > 0 ), 'calendar visible after click' );
$( $( '#ui-datepicker-div .ui-datepicker-calendar td' )[15] ).click();
setTimeout( function() {
assert.ok( ( $( '#ui-datepicker-div:visible' ).length == 0 ), 'calendar invisible after date selection' );
assert.ok( widget.getValue() != '', 'value is not blank' );
TTPromise.resolve( 'datetests', 'picker' );
done_testing();
}, 1000 );
}, 1000 );
} );
}
testDateRange() {
var $this = this;
QUnit.test( 'DateRange tests', function( assert ) {
var done_testing = assert.async();
var widget = $this.edit_view_ui_dic.daterange;
assert.ok( typeof widget.getValue() == 'undefined', 'widget empty ' + widget.getValue() );
widget.find( '#tDatePickerIcon' ).trigger( 'mouseup' );
setTimeout( function() {
assert.ok( ( $( '.t-range-picker-div:visible' ).length > 0 ), 'calendar visible after click' );
$( $( '.t-range-picker-div .end-picker td' )[15] ).click();
$( '.t-range-picker-div .close-icon' ).click();
setTimeout( function() {
assert.ok( ( $( '.t-range-picker-div:visible' ).length == 0 ), 'calendar invisible after closing' );
assert.ok( widget.getValue() != '', 'value is not blank' );
done_testing();
TTPromise.resolve( 'datetests', 'range' );
}, 1000 );
}, 1000 );
} );
}
testTimePicker() {
var $this = this;
QUnit.test( 'TimePicker tests', function( assert ) {
var widget = $this.edit_view_ui_dic.timepicker;
assert.ok( widget.getValue() == '', 'widget empty: ' + widget.getValue() );
widget.find( '#tTimePickerIcon' ).trigger( 'mouseup' );
assert.ok( ( $( '#ui-datepicker-div:visible' ).length > 0 ), 'timepicker widget visible after click' );
$( '#ui-datepicker-div:visible button[data-handler="today"]' ).click();
assert.ok( ( $( '#ui-datepicker-div:visible' ).length > 0 ), 'timepicker widget visible after now click' );
$( '#ui-datepicker-div:visible button[data-handler="hide"]' ).click();
assert.ok( ( $( '#ui-datepicker-div:visible' ).length == 0 ), 'timepicker widget gone clicking close button' );
assert.ok( widget.getValue() != '', 'value is not blank' );
} );
}
testImageBrowser() {
var $this = this;
TTPromise.add( '' );
QUnit.test( 'ImageBrowser tests', function( assert ) {
var done_testing = assert.async();
var widget = $this.edit_view_ui_dic.imagebrowser;
assert.ok( typeof widget.getValue() == 'undefined', 'widget empty: ' + widget.getValue() );
widget.find( '#upload_image' ).click();
setTimeout( function() {
assert.ok( $( '.wizard:visible' ).length > 0, 'wizard visible' );
$( '.wizard:visible .close-btn' ).click();
assert.ok( $( '.wizard:visible' ).length == 0, 'wizard invisible' );
done_testing();
TTPromise.resolve( 'wizardtests', 'imagebrowser' );
}, 1000 );
} );
}
testFormulaBuilder() {
var $this = this;
QUnit.test( 'FormulaBuilder tests', function( assert ) {
var done_testing = assert.async();
var widget = $this.edit_view_ui_dic.formula;
assert.ok( widget.getValue() == '', 'widget empty: ' + widget.getValue() );
widget.find( '.t-button.formula-btn' ).click();
setTimeout( function() {
assert.ok( $( '.wizard:visible' ).length > 0, 'wizard visible' );
$( '.wizard:visible .close-btn' ).click();
assert.ok( $( '.wizard:visible' ).length == 0, 'wizard invisible' );
done_testing();
}, 1000 );
} );
}
testButtons() {
var $this = this;
QUnit.test( 'TotalButtons tests', function( assert ) {
var done_testing = assert.async();
var all_employee_btn = $( '.control-bar .action-chooser-div #all_employee .all-employee' );
var daily_totals_btn = $( '.control-bar .action-chooser-div #daily_totals .daily' );
var weekly_totals_btn = $( '.control-bar .action-chooser-div #weekly_totals .weekly' );
var strict_range_btn = $( '.control-bar .action-chooser-div #strict_range .strict-range' );
assert.ok( strict_range_btn.hasClass( 'selected' ), 'strict range starts selected' );
assert.ok( daily_totals_btn.hasClass( 'selected' ) == false, 'daily totals starts unselected' );
assert.ok( weekly_totals_btn.hasClass( 'selected' ) == false, 'week total starts unselected' );
assert.ok( all_employee_btn.hasClass( 'selected' ) == false, 'all employees starts unselected' );
strict_range_btn.click();
setTimeout( function() {
assert.ok( strict_range_btn.hasClass( 'selected' ) == false, 'strict range unselects on click' );
daily_totals_btn.click();
setTimeout( function() {
assert.ok( daily_totals_btn.hasClass( 'selected' ), 'daily_totals_btn selects on click' );
weekly_totals_btn.click();
setTimeout( function() {
assert.ok( weekly_totals_btn.hasClass( 'selected' ), 'weekly_totals_btn selects on click' );
all_employee_btn.click();
setTimeout( function() {
assert.ok( all_employee_btn.hasClass( 'selected' ), 'all_employee_btn selects on click' );
strict_range_btn.click();
daily_totals_btn.click();
weekly_totals_btn.click();
all_employee_btn.click();
setTimeout( function() {
//back to initial state
assert.ok( strict_range_btn.hasClass( 'selected' ), 'strict range starts selected' );
assert.ok( daily_totals_btn.hasClass( 'selected' ) == false, 'daily totals starts unselected' );
assert.ok( weekly_totals_btn.hasClass( 'selected' ) == false, 'week total starts unselected' );
assert.ok( all_employee_btn.hasClass( 'selected' ) == false, 'all employees starts unselected' );
done_testing();
}, 1500 );
}, 1500 );
}, 1500 );
}, 1500 );
}, 1500 );
} );
}
testTags() {
var $this = this;
QUnit.test( 'Tags tests', function( assert ) {
var done_testing = assert.async();
var el = $this.edit_view_ui_dic.tags.find( 'input.add-tag-input' );
var val = $this.edit_view_ui_dic.tags.getValue();
assert.ok( val == '', 'starts empty ' + val );
el.focus();
$( el ).val( 'test1' );
$( el ).trigger( { type: 'keydown', which: 32, keyCode: 32 } );
$( el ).val( 'test2' );
$( el ).trigger( { type: 'keydown', which: 32, keyCode: 32 } );
setTimeout( function() {
var val = $this.edit_view_ui_dic.tags.getValue();
assert.ok( val == 'test1,test2', '2 tags entered and return in value: ' + val );
setTimeout( function() {
//click the x's to remove them
$( '.tag-span-div .close-btn' ).click();
setTimeout( function() {
var val = $this.edit_view_ui_dic.tags.getValue();
assert.ok( val == '-test1,-test2', '2 tags entered and return (subtracted) in value: ' + val );
done_testing();
}, 1000 );
}, 1000 );
}, 1000 );
} );
}
testText() {
var $this = this;
QUnit.test( 'Text test', function( assert ) {
//var done_testing = assert.async();
var textbox = $this.edit_view_ui_dic.text;
textbox.setValue( 'testing textbox' );
assert.ok( textbox.getValue() == 'testing textbox', 'accepts text and returns value' );
textbox.setValue( '' );
assert.ok( textbox.getValue() == '', 'returned value updates when text is updated' );
} );
}
testPassword() {
var $this = this;
QUnit.test( 'Password box test', function( assert ) {
//var done_testing = assert.async();
var textbox = $this.edit_view_ui_dic.password;
textbox.setValue( 'testing textbox' );
assert.ok( textbox.getValue() == 'testing textbox', 'accepts text and returns value' );
textbox.setValue( '' );
assert.ok( textbox.getValue() == '', 'returned value updates when text is updated' );
} );
}
testTextarea() {
var $this = this;
QUnit.test( 'Password box test', function( assert ) {
//var done_testing = assert.async();
var textbox = $this.edit_view_ui_dic.textarea;
textbox.setValue( 'testing textbox' );
assert.ok( textbox.getValue() == 'testing textbox', 'accepts text and returns value' );
textbox.setValue( '' );
assert.ok( textbox.getValue() == '', 'returned value updates when text is updated' );
} );
}
}