mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
711551e34f
Support dynamically updating context on detail view load, to support cases where certain context items are required by other elements loaded, but may not be present in the browser history.
796 lines
26 KiB
JavaScript
796 lines
26 KiB
JavaScript
// Copyright 2012 Citrix Systems, Inc. Licensed under the
|
|
// Apache License, Version 2.0 (the "License"); you may not use this
|
|
// file except in compliance with the License. Citrix Systems, Inc.
|
|
// reserves all rights not expressly granted by the License.
|
|
// You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
//
|
|
// Automatically generated by addcopyright.py at 04/03/2012
|
|
(function($) {
|
|
module('Detail view', {
|
|
setup: function() {
|
|
cloudStack.dialog.__confirm = cloudStack.dialog.confirm;
|
|
cloudStack.ui.notifications.__add = cloudStack.ui.notifications.add;
|
|
$.fn.__cloudBrowser = $.fn.cloudBrowser;
|
|
$.fn.__listView = $.fn.listView;
|
|
$.fn.__dataTable = $.fn.dataTable;
|
|
$.fn.__is = $.fn.is;
|
|
|
|
$.fn.is = function(args) {
|
|
if (args == ':visible')
|
|
return true; // No test elems will ever be shown, so just pretend they are visible
|
|
|
|
return true;
|
|
};
|
|
},
|
|
|
|
teardown: function() {
|
|
cloudStack.dialog.confirm = cloudStack.dialog.__confirm;
|
|
cloudStack.ui.notifications.add = cloudStack.ui.notifications.__add;
|
|
$.fn.cloudBrowser = $.fn.__cloudBrowser;
|
|
$.fn.listView = $.fn.__listView;
|
|
$.fn.dataTable = $.fn.__dataTable;
|
|
$.fn.is = $.fn.__is;
|
|
}
|
|
});
|
|
|
|
test('Basic', function() {
|
|
var detailView = {
|
|
tabs: {
|
|
tabA: {
|
|
title: 'tabA',
|
|
fields: [{}],
|
|
dataProvider: function() {}
|
|
},
|
|
tabB: {
|
|
title: 'tabB',
|
|
fields: [{}],
|
|
dataProvider: function() {}
|
|
}
|
|
}
|
|
};
|
|
|
|
var $detailView = $('<div>');
|
|
|
|
ok($detailView.detailView(detailView), 'Create detail view');
|
|
equal($detailView.find('.ui-tabs-nav li').size(), 2, 'Detail view has correct tab count');
|
|
equal($detailView.find('.ui-tabs-nav li:first a').html(), 'tabA', 'First tab has correct title');
|
|
equal($detailView.find('.ui-tabs-nav li:last a').html(), 'tabB', 'Last tab has correct title');
|
|
});
|
|
|
|
test('Data provider', function() {
|
|
var detailView = {
|
|
tabs: {
|
|
tabA: {
|
|
title: 'tabA',
|
|
fields: [{
|
|
fieldA: { label: 'fieldA' },
|
|
fieldB: { label: 'fieldB' }
|
|
}],
|
|
dataProvider: function(args) {
|
|
start();
|
|
ok(args.response.success({
|
|
data: {
|
|
fieldA: 'dataProviderFieldA',
|
|
fieldB: 'dataProviderFieldB'
|
|
}
|
|
}), 'Call success');
|
|
equal($detailView.find('tr').size(), 2, 'Correct fields rendered');
|
|
equal($detailView.find('tr:first td:first').html(), 'fieldA', 'First field has correct label');
|
|
equal($detailView.find('tr:first td:last').html(), 'dataProviderFieldA', 'First field has correct content');
|
|
equal($detailView.find('tr:last td:first').html(), 'fieldB', 'Last field has correct label');
|
|
equal($detailView.find('tr:last td:last').html(), 'dataProviderFieldB', 'Last field has correct content');
|
|
}
|
|
}
|
|
}
|
|
};
|
|
var $detailView = $('<div>');
|
|
|
|
stop();
|
|
|
|
// Test first tab
|
|
$detailView = $detailView.detailView(detailView);
|
|
|
|
// Test last tab
|
|
$detailView.find('.ui-tabs-nav li:last').click();
|
|
});
|
|
|
|
test('Data provider, multiple tabs', function() {
|
|
var detailView = {
|
|
tabs: {
|
|
tabA: {
|
|
title: 'tabA',
|
|
fields: [{
|
|
fieldA: { label: 'fieldA' },
|
|
fieldB: { label: 'fieldB' }
|
|
}],
|
|
dataProvider: function(args) {
|
|
start();
|
|
ok(args.response.success({
|
|
data: {
|
|
fieldA: 'dataProviderFieldA',
|
|
fieldB: 'dataProviderFieldB'
|
|
}
|
|
}), 'Call success');
|
|
equal($detailView.find('tr').size(), 2, 'Correct fields rendered');
|
|
equal($detailView.find('tr:first td:first').html(), 'fieldA', 'First field has correct label');
|
|
equal($detailView.find('tr:first td:last').html(), 'dataProviderFieldA', 'First field has correct content');
|
|
equal($detailView.find('tr:last td:first').html(), 'fieldB', 'Last field has correct label');
|
|
equal($detailView.find('tr:last td:last').html(), 'dataProviderFieldB', 'Last field has correct content');
|
|
}
|
|
},
|
|
|
|
tabB: {
|
|
title: 'tabB',
|
|
fields: [{
|
|
fieldC: { label: 'fieldC' },
|
|
fieldD: { label: 'fieldD' },
|
|
fieldC: { label: 'fieldE' },
|
|
fieldD: { label: 'fieldF' }
|
|
}],
|
|
dataProvider: function(args) {
|
|
start();
|
|
ok(args.response.success({
|
|
data: {
|
|
fieldC: 'dataProviderFieldC',
|
|
fieldD: 'dataProviderFieldD',
|
|
fieldE: 'dataProviderFieldE',
|
|
fieldF: 'dataProviderFieldF'
|
|
}
|
|
}), 'Call success');
|
|
equal($detailView.find('tr').size(), 4, 'Correct fields rendered');
|
|
equal($detailView.find('tr:first td:first').html(), 'fieldC', 'First field has correct label');
|
|
equal($detailView.find('tr:first td:last').html(), 'dataProviderFieldC', 'First field has correct content');
|
|
equal($detailView.find('tr:last td:first').html(), 'fieldF', 'Last field has correct label');
|
|
equal($detailView.find('tr:last td:last').html(), 'dataProviderFieldF', 'Last field has correct content');
|
|
}
|
|
}
|
|
}
|
|
};
|
|
var $detailView = $('<div>');
|
|
|
|
stop();
|
|
|
|
// Test first tab
|
|
$detailView = $detailView.detailView(detailView);
|
|
|
|
// Test last tab
|
|
$detailView.find('.ui-tabs-nav li:last').click();
|
|
});
|
|
|
|
test('Field pre-filter', function() {
|
|
var detailView = {
|
|
tabs: {
|
|
tabA: {
|
|
title: 'tabA',
|
|
fields: {
|
|
fieldA: { label: 'fieldA' },
|
|
fieldB: { label: 'fieldB' },
|
|
fieldC: { label: 'fieldC' },
|
|
fieldD: { label: 'fieldD' }
|
|
},
|
|
preFilter: function(args) {
|
|
return ['fieldB', 'fieldC'];
|
|
},
|
|
dataProvider: function (args) {
|
|
args.response.success({
|
|
data: {
|
|
fieldA: 'fieldAContent',
|
|
fieldB: 'fieldBContent',
|
|
fieldC: 'fieldCContent',
|
|
fieldD: 'fieldDContent'
|
|
}
|
|
});
|
|
|
|
start();
|
|
equal($detailView.find('tr').size(), 2, 'Correct fields rendered');
|
|
equal($detailView.find('tr:first td:first').html(), 'fieldA', 'First field has correct label');
|
|
equal($detailView.find('tr:first td:last').html(), 'fieldAContent', 'First field has correct content');
|
|
equal($detailView.find('tr:last td:first').html(), 'fieldD', 'Last field has correct label');
|
|
equal($detailView.find('tr:last td:last').html(), 'fieldDContent', 'Last field has correct content');
|
|
}
|
|
}
|
|
}
|
|
};
|
|
var $detailView = $('<div>');
|
|
|
|
stop();
|
|
|
|
$detailView.detailView(detailView);
|
|
});
|
|
|
|
test('Action', function() {
|
|
var detailView = {
|
|
actions: {
|
|
actionA: {
|
|
label: 'testActionA',
|
|
action: function(args) {
|
|
start();
|
|
ok(args.response.success(), 'Call success from action A');
|
|
},
|
|
messages: {
|
|
confirm: function() { return 'testActionAConfirm'; },
|
|
notification: function() { return 'testActionANotification'; }
|
|
}
|
|
},
|
|
actionB: {
|
|
label: 'testActionB',
|
|
action: function(args) {
|
|
start();
|
|
ok(args.response.success(), 'Call success from action B');
|
|
},
|
|
messages: {
|
|
confirm: function() { return 'testActionBConfirm'; },
|
|
notification: function() { return 'testActionBNotification'; }
|
|
},
|
|
notification: {
|
|
poll: function(args) {
|
|
start();
|
|
ok(args.complete(), 'Call complete from async action B');
|
|
}
|
|
}
|
|
}
|
|
},
|
|
tabs: {
|
|
tabA: {
|
|
title: 'tabA',
|
|
fields: {
|
|
fieldA: { label: 'fieldA' },
|
|
fieldB: { label: 'fieldB' }
|
|
},
|
|
dataProvider: function(args) {
|
|
args.response.success({
|
|
data: {
|
|
fieldA: 'fieldAContent',
|
|
fieldB: 'fieldBContent'
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
var $detailView = $('<div>');
|
|
|
|
$detailView.detailView(detailView).appendTo('#qunit-fixture');
|
|
|
|
equal($detailView.find('.detail-actions').size(), 1, 'Action container present');
|
|
equal($detailView.find('.detail-actions .action').size(), 2, 'Correct action count');
|
|
equal($detailView.find('.detail-actions .action.actionA').size(), 1, 'actionA present');
|
|
equal($detailView.find('.detail-actions .action.actionB').size(), 1, 'actionB present');
|
|
|
|
cloudStack.dialog.confirm = function(args) {
|
|
start();
|
|
equal(args.message, 'testActionAConfirm', 'Correct confirmation message for action A');
|
|
stop();
|
|
|
|
args.action(); // Perform action
|
|
};
|
|
|
|
cloudStack.ui.notifications.add = function(notification, success, successArgs) {
|
|
stop();
|
|
equal(notification.desc, 'testActionANotification', 'Correct notification message for action A');
|
|
start();
|
|
};
|
|
|
|
$detailView.find('.detail-actions .action.actionA a').click(); // <a> triggers action, not action's container
|
|
|
|
cloudStack.dialog.confirm = function(args) {
|
|
start();
|
|
equal(args.message, 'testActionBConfirm', 'Correct confirmation message for action B');
|
|
stop();
|
|
|
|
args.action(); // Perform action
|
|
};
|
|
|
|
cloudStack.ui.notifications.add = function(notification, success, successArgs) {
|
|
start();
|
|
equal(notification.desc, 'testActionBNotification', 'Correct notification message for action B');
|
|
stop();
|
|
notification.poll({ complete: function() { return true; } });
|
|
};
|
|
|
|
$detailView.find('.detail-actions .action.actionB a').click(); // <a> triggers action, not action's container
|
|
});
|
|
|
|
test('Action filter', function() {
|
|
var detailView = {
|
|
actions: {
|
|
actionA: {
|
|
label: 'testActionA',
|
|
action: function(args) {}
|
|
},
|
|
actionB: {
|
|
label: 'testActionB',
|
|
action: function(args) {}
|
|
}
|
|
},
|
|
tabs: {
|
|
tabA: {
|
|
title: 'tabA',
|
|
fields: {
|
|
fieldA: { label: 'fieldA' },
|
|
fieldB: { label: 'fieldB' }
|
|
},
|
|
dataProvider: function(args) {
|
|
args.response.success({
|
|
actionFilter: function() {
|
|
return ['actionA'];
|
|
},
|
|
data: {
|
|
fieldA: 'fieldAContent',
|
|
fieldB: 'fieldBContent'
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
var $detailView = $('<div>');
|
|
|
|
$detailView.detailView(detailView).appendTo('#qunit-fixture');
|
|
|
|
equal($detailView.find('.detail-actions .action').size(), 1, 'Correct action count');
|
|
equal($detailView.find('.detail-actions .action.actionA').size(), 1, 'actionA present');
|
|
notEqual($detailView.find('.detail-actions .action.actionB').size(), 1, 'actionB not present');
|
|
});
|
|
|
|
test('Refresh', function() {
|
|
var dataA = ['dataLoad1A', 'dataLoad2A'];
|
|
var dataB = ['dataLoad1B', 'dataLoad2B'];
|
|
var index = 0;
|
|
|
|
var detailView = {
|
|
tabs: {
|
|
tabA: {
|
|
title: 'tabA',
|
|
fields: {
|
|
fieldA: { label: 'fieldA' }
|
|
},
|
|
dataProvider: function(args) {
|
|
args.response.success({ data: { fieldA: dataA[index] }});
|
|
start();
|
|
equal($detailView.find('tr td:last').html(), dataA[index], 'Tab A data correct for load ' + (index + 1));
|
|
index++;
|
|
}
|
|
},
|
|
tabB: {
|
|
title: 'tabB',
|
|
fields: {
|
|
fieldB: { label: 'fieldB' }
|
|
},
|
|
dataProvider: function(args) {
|
|
args.response.success({ data: { fieldB: dataB[index] }});
|
|
start();
|
|
equal($detailView.find('tr td:last').html(), dataB[index], 'Tab B data correct for load ' + (index + 1));
|
|
index++;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
var $detailView = $('<div>');
|
|
|
|
stop();
|
|
$detailView.detailView(detailView).appendTo('#qunit-fixture');
|
|
|
|
stop();
|
|
$detailView.find('.button.refresh').click();
|
|
|
|
stop();
|
|
index = 0;
|
|
$detailView.find('.ui-tabs-nav li.last a').click();
|
|
|
|
stop();
|
|
$detailView.find('.button.refresh').click();
|
|
});
|
|
|
|
test('View all, 1 section', function() {
|
|
var $browser = $('<div>').appendTo('#qunit-fixture');
|
|
var detailView = {
|
|
$browser: $browser,
|
|
context: {},
|
|
viewAll: { label: 'testListView', path: 'testListView' },
|
|
tabs: {
|
|
tabA: {
|
|
title: 'tabA',
|
|
fields: [{ fieldA: { label: 'fieldA' }}],
|
|
dataProvider: function(args) { args.response.success({ data: { fieldA: 'fieldAContent' } }); start(); }
|
|
}
|
|
}
|
|
};
|
|
var testListView = {};
|
|
var $detailView = $('<div>').appendTo('#qunit-fixture');
|
|
|
|
$('<div>').attr('cloudStack-container', true).data('cloudStack-args', {
|
|
sections: {
|
|
testListView: testListView
|
|
}
|
|
}).appendTo('#qunit-fixture');
|
|
|
|
stop();
|
|
|
|
$.fn.cloudBrowser = function(cmd, args) {};
|
|
$browser.cloudBrowser();
|
|
$detailView.detailView(detailView);
|
|
|
|
equal($detailView.find('.detail-group.actions td.view-all').size(), 1, 'Detail view has view all button');
|
|
|
|
stop();
|
|
|
|
$.fn.listView = function(args, options) {
|
|
start();
|
|
ok(true, 'List view called');
|
|
equal(args, testListView, 'Correct list view passed');
|
|
ok(args.$browser.size(), 'Browser passed in args');
|
|
ok($.isPlainObject(args.ref), 'Ref passed in args');
|
|
equal(args.id, 'testListView', 'Correct section ID');
|
|
|
|
return this;
|
|
};
|
|
|
|
$.fn.cloudBrowser = function(cmd, args) {
|
|
start();
|
|
equal(cmd, 'addPanel', 'Browser add panel called');
|
|
stop();
|
|
args.complete($('<div>'));
|
|
};
|
|
|
|
$detailView.find('.view-all a').click();
|
|
});
|
|
|
|
test('View all, subsections', function() {
|
|
var $browser = $('<div>').appendTo('#qunit-fixture');
|
|
var detailView = {
|
|
$browser: $browser,
|
|
context: {},
|
|
viewAll: { label: 'testListView', path: 'testSection.listViewB' },
|
|
tabs: {
|
|
tabA: {
|
|
title: 'tabA',
|
|
fields: [{ fieldA: { label: 'fieldA' }}],
|
|
dataProvider: function(args) { args.response.success({ data: { fieldA: 'fieldAContent' } }); start(); }
|
|
}
|
|
}
|
|
};
|
|
var listViewA = {};
|
|
var listViewB = {};
|
|
var $detailView = $('<div>').appendTo('#qunit-fixture');
|
|
|
|
$('<div>').attr('cloudStack-container', true).data('cloudStack-args', {
|
|
sections: {
|
|
testSection: {
|
|
sections: {
|
|
listViewA: { listView: listViewA },
|
|
listViewB: { listView: listViewB }
|
|
}
|
|
}
|
|
}
|
|
}).appendTo('#qunit-fixture');
|
|
|
|
stop();
|
|
|
|
$.fn.cloudBrowser = function(cmd, args) {};
|
|
$browser.cloudBrowser();
|
|
$detailView.detailView(detailView);
|
|
|
|
equal($detailView.find('.detail-group.actions td.view-all').size(), 1, 'Detail view has view all button');
|
|
|
|
stop();
|
|
|
|
$.fn.listView = function(args, options) {
|
|
start();
|
|
ok(true, 'List view called');
|
|
equal(args.listView, listViewB, 'Correct list view passed');
|
|
ok(args.$browser.size(), 'Browser passed in args');
|
|
ok($.isPlainObject(args.ref), 'Ref passed in args');
|
|
equal(args.id, 'testSection', 'Correct section ID');
|
|
|
|
return this;
|
|
};
|
|
|
|
$.fn.cloudBrowser = function(cmd, args) {
|
|
start();
|
|
equal(cmd, 'addPanel', 'Browser add panel called');
|
|
stop();
|
|
args.complete($('<div>'));
|
|
};
|
|
|
|
$detailView.find('.view-all a').click();
|
|
});
|
|
|
|
test('Pre-action', function() {
|
|
var detailView = {
|
|
actions: {
|
|
test: {
|
|
label: 'test',
|
|
preAction: function() {
|
|
start();
|
|
ok(true, 'Pre-action called');
|
|
|
|
return false;
|
|
},
|
|
action: function() {
|
|
ok(false, 'Action called; pre-action should have blocked it');
|
|
},
|
|
messages: { notification: function() { return 'notification'; }}
|
|
}
|
|
},
|
|
tabs: {
|
|
test: {
|
|
title: 'test',
|
|
label: 'testAction',
|
|
fields: [{
|
|
fieldA: { label: 'fieldA' },
|
|
fieldB: { label: 'fieldB' }
|
|
}],
|
|
dataProvider: function(args) { args.response.success({ data: {} }); }
|
|
}
|
|
}
|
|
};
|
|
var $detailView = $('<div>');
|
|
|
|
stop();
|
|
$detailView.detailView(detailView);
|
|
$detailView.find('.action.test a').click();
|
|
});
|
|
|
|
test('Update data, from list view row', function() {
|
|
var detailView = {
|
|
section: 'testListView',
|
|
context: {
|
|
testListView: [{
|
|
fieldA: 'fieldA-1',
|
|
fieldB: 'fieldB-1',
|
|
fieldC: 'fieldC-1'
|
|
}]
|
|
},
|
|
actions: {
|
|
updateDataTestSync: {
|
|
label: 'updateDataTestSync',
|
|
preAction: function(args) { return true; },
|
|
action: function(args) {
|
|
args.response.success({
|
|
data: {
|
|
fieldA: 'fieldA-2',
|
|
fieldB: 'fieldB-2'
|
|
}
|
|
});
|
|
|
|
start();
|
|
equal($detailView.data('view-args').context.testListView[0].fieldA, 'fieldA-2', 'Correct context value for fieldA');
|
|
equal($detailView.data('view-args').context.testListView[0].fieldB, 'fieldB-2', 'Correct context value for fieldB');
|
|
equal($detailView.data('view-args').context.testListView[0].fieldC, 'fieldC-1', 'Correct context value for fieldC');
|
|
equal($detailView.find('tr.fieldA .value').html(), 'fieldA-2', 'Correct table value for fieldA');
|
|
equal($detailView.find('tr.fieldB .value').html(), 'fieldB-2', 'Correct table value for fieldB');
|
|
equal($detailView.find('tr.fieldC .value').html(), 'fieldC-1', 'Correct table value for fieldC');
|
|
},
|
|
messages: { notification: function() { return 'notification'; }}
|
|
}
|
|
},
|
|
tabs: {
|
|
test: {
|
|
title: 'test',
|
|
fields: [{
|
|
fieldA: { label: 'fieldA' },
|
|
fieldB: { label: 'fieldB' },
|
|
fieldC: { label: 'fieldC' }
|
|
}],
|
|
dataProvider: function(args) {
|
|
args.response.success({
|
|
data: args.context.testListView[0]
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
var $detailView = $('<div>');
|
|
var $listView = $('<div>').addClass('list-view');
|
|
var $listViewRow = $('<div>').data('json-obj', detailView.context.testListView[0]).appendTo($listView);
|
|
var $cloudStackContainer = $('<div>').attr('cloudStack-container', true).data('cloudStack-args', {
|
|
sections: {
|
|
testListView: {}
|
|
}
|
|
}).appendTo('#qunit-fixture');
|
|
|
|
$.fn.dataTable = function() { return this; };
|
|
$.fn.listView = function(args1, args2) {
|
|
if (args1 == 'replaceItem')
|
|
args2.after(args2.$row.data('json-obj', args2.data));
|
|
|
|
return this;
|
|
};
|
|
|
|
cloudStack.ui.notifications.add = function(notification, complete) {
|
|
complete();
|
|
};
|
|
cloudStack.dialog.confirm = function(args) {
|
|
args.action();
|
|
};
|
|
$detailView.data('list-view-row', $listViewRow);
|
|
$detailView.detailView(detailView);
|
|
|
|
stop();
|
|
$detailView.find('.action.updateDataTestSync a').click();
|
|
});
|
|
|
|
|
|
test('Update data async, from list view row', function() {
|
|
var detailView = {
|
|
section: 'testListView',
|
|
context: {
|
|
testListView: [{
|
|
fieldA: 'fieldA-1',
|
|
fieldB: 'fieldB-1',
|
|
fieldC: 'fieldC-1',
|
|
state: 'on'
|
|
}]
|
|
},
|
|
actions: {
|
|
updateDataTestAsync: {
|
|
label: 'updateDataTestAsync',
|
|
preAction: function(args) {
|
|
start();
|
|
ok(true, 'Pre-action called');
|
|
equal($detailView.data('view-args').context.testListView[0].fieldA, 'fieldA-1', 'Pre-action: Correct context value for fieldA');
|
|
equal($detailView.data('view-args').context.testListView[0].fieldB, 'fieldB-1', 'Pre-action: Correct context value for fieldB');
|
|
equal($detailView.data('view-args').context.testListView[0].fieldC, 'fieldC-1', 'Pre-action: Correct context value for fieldC');
|
|
stop();
|
|
|
|
return true;
|
|
},
|
|
action: function(args) {
|
|
args.response.success();
|
|
},
|
|
messages: { notification: function() { return 'notification'; }},
|
|
notification: {
|
|
poll: function(args) {
|
|
args.complete({
|
|
data: {
|
|
fieldA: 'fieldA-2',
|
|
fieldB: 'fieldB-2',
|
|
state: 'off'
|
|
}
|
|
});
|
|
|
|
start();
|
|
equal($detailView.data('view-args').context.testListView[0].fieldA, 'fieldA-2', 'Correct context value for fieldA');
|
|
equal($detailView.data('view-args').context.testListView[0].fieldB, 'fieldB-2', 'Correct context value for fieldB');
|
|
equal($detailView.data('view-args').context.testListView[0].fieldC, 'fieldC-1', 'Correct context value for fieldC');
|
|
equal($detailView.find('tr.fieldA .value').html(), 'fieldA-2', 'Correct table value for fieldA');
|
|
equal($detailView.find('tr.fieldB .value').html(), 'fieldB-2', 'Correct table value for fieldB');
|
|
equal($detailView.find('tr.fieldC .value').html(), 'fieldC-1', 'Correct table value for fieldC');
|
|
|
|
equal($detailView.find('.action').size(), 1, 'Correct action count');
|
|
equal($detailView.find('.action.updateDataTestAsync').size(), 1, 'updateDataTestAsync present');
|
|
equal($detailView.find('.action.filteredAction').size(), 0, 'filteredAction not present');
|
|
stop();
|
|
}
|
|
}
|
|
},
|
|
|
|
filteredAction: {
|
|
label: 'filteredAction',
|
|
action: function() {},
|
|
messages: { notification: function() { return 'notification'; } }
|
|
}
|
|
},
|
|
tabs: {
|
|
test: {
|
|
title: 'test',
|
|
fields: [{
|
|
fieldA: { label: 'fieldA' },
|
|
fieldB: { label: 'fieldB' },
|
|
fieldC: { label: 'fieldC' }
|
|
}],
|
|
dataProvider: function(args) {
|
|
args.response.success({
|
|
data: args.context.testListView[0],
|
|
actionFilter: function(args) {
|
|
if (args.context.testListView[0].state == 'on') {
|
|
return ['updateDataTestAsync', 'filteredAction'];
|
|
}
|
|
|
|
return ['updateDataTestAsync'];
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
var $detailView = $('<div>');
|
|
var $listView = $('<div>').addClass('list-view');
|
|
var $listViewRow = $('<div>').data('json-obj', detailView.context.testListView[0]).appendTo($listView);
|
|
var $cloudStackContainer = $('<div>').attr('cloudStack-container', true).data('cloudStack-args', {
|
|
sections: {
|
|
testListView: {}
|
|
}
|
|
}).appendTo('#qunit-fixture');
|
|
|
|
$.fn.dataTable = function() { return this; };
|
|
$.fn.listView = function(args1, args2) {
|
|
if (args1 == 'replaceItem')
|
|
args2.after(args2.$row.data('json-obj', args2.data));
|
|
|
|
return this;
|
|
};
|
|
|
|
cloudStack.ui.notifications.add = function(notification, complete) {
|
|
notification.poll({ complete: complete });
|
|
};
|
|
cloudStack.dialog.confirm = function(args) {
|
|
args.action();
|
|
};
|
|
$detailView.data('list-view-row', $listViewRow);
|
|
$detailView.detailView(detailView);
|
|
|
|
equal($detailView.find('.action').size(), 2, 'Correct action count');
|
|
equal($detailView.find('.action.updateDataTestAsync').size(), 1, 'updateDataTestAsync present');
|
|
equal($detailView.find('.action.filteredAction').size(), 1, 'filteredAction present');
|
|
|
|
stop();
|
|
$detailView.find('.action.updateDataTestAsync a').click();
|
|
$detailView.data('view-args').actions.updateDataTestAsync.preAction = function(args) {
|
|
start();
|
|
equal($detailView.data('view-args').context.testListView[0].fieldA, 'fieldA-2', 'Pre-action: Correct context value for fieldA');
|
|
equal($detailView.data('view-args').context.testListView[0].fieldB, 'fieldB-2', 'Pre-action: Correct context value for fieldB');
|
|
equal($detailView.data('view-args').context.testListView[0].fieldC, 'fieldC-1', 'Pre-action: Correct context value for fieldC');
|
|
ok(true, 'Pre-action called');
|
|
|
|
return false;
|
|
};
|
|
$detailView.find('.action.updateDataTestAsync a').click();
|
|
});
|
|
|
|
test('Update context', function() {
|
|
var detailView = {
|
|
context: {
|
|
listViewItemA: [
|
|
{ fieldA: 'fieldAContent' }
|
|
]
|
|
// listViewItemB [not stored yet]
|
|
},
|
|
|
|
tabFilter: function(args) {
|
|
start();
|
|
ok($.isArray(args.context.listViewItemB), 'updateContext called before tabFilter');
|
|
stop();
|
|
|
|
return [];
|
|
},
|
|
|
|
// updateContext is executed every time a data provider is called
|
|
updateContext: function(args) {
|
|
start();
|
|
ok(true, 'updateContext called');
|
|
equal(args.context.listViewItemA[0].fieldA, 'fieldAContent', 'updateContext: Item A present in context');
|
|
stop();
|
|
|
|
return {
|
|
listViewItemB: [
|
|
{ fieldB: 'fieldBContent' }
|
|
]
|
|
};
|
|
},
|
|
|
|
tabs: {
|
|
test: {
|
|
title: 'test',
|
|
fields: { fieldA: { label: 'fieldA'}, fieldB: { label: 'fieldB' }},
|
|
dataProvider: function(args) {
|
|
start();
|
|
equal(args.context.listViewItemA[0].fieldA, 'fieldAContent', 'dataProvider: Item A present in context');
|
|
equal(args.context.listViewItemB[0].fieldB, 'fieldBContent', 'dataProvider: Item B present in context');
|
|
}
|
|
}
|
|
}
|
|
};
|
|
var $detailView = $('<div></div>');
|
|
|
|
stop();
|
|
$detailView.detailView(detailView);
|
|
});
|
|
}(jQuery));
|