mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
246 lines
8.9 KiB
JavaScript
246 lines
8.9 KiB
JavaScript
// Licensed to the Apache Software Foundation (ASF) under one
|
|
// or more contributor license agreements. See the NOTICE file
|
|
// distributed with this work for additional information
|
|
// regarding copyright ownership. The ASF licenses this file
|
|
// to you under the Apache License, Version 2.0 (the
|
|
// "License"); you may not use this file except in compliance
|
|
// with 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.
|
|
|
|
(function() {
|
|
var listView = function(args) {
|
|
var basicArgs = {
|
|
listView: {
|
|
fields: {},
|
|
dataProvider: function() {}
|
|
}
|
|
};
|
|
|
|
return $('<div>').listView(
|
|
$.extend(true, {}, basicArgs, args)
|
|
).find('.list-view');
|
|
};
|
|
|
|
module('List view', {
|
|
setup: function() {
|
|
window.pageSize = 20;
|
|
},
|
|
teardown: function() {
|
|
delete window.pageSize;
|
|
}
|
|
});
|
|
|
|
test('Basic', function() {
|
|
var $listView = listView();
|
|
var $toolbar = $listView.find('> .toolbar');
|
|
var $table = $listView.find('> .data-table');
|
|
|
|
equal($listView.size(), 1, 'List view present');
|
|
equal($toolbar.size(), 1, 'Toolbar present');
|
|
equal($table.size(), 1, 'Data table div present');
|
|
equal($table.find('> .fixed-header table thead tr').size(), 1, 'Fixed header present');
|
|
equal($table.find('> table.body tbody').size(), 1, 'Body table present');
|
|
});
|
|
|
|
test('Fields: basic', function() {
|
|
var $listView = listView({
|
|
listView: {
|
|
fields: {
|
|
fieldA: { label: 'TestFieldA' }
|
|
}
|
|
}
|
|
});
|
|
var $fields = $listView.find('.fixed-header table thead tr th');
|
|
|
|
equal($fields.size(), 1, 'Column present');
|
|
ok($fields.hasClass('fieldA'), 'Has ID as classname');
|
|
equal($fields.html(), 'TestFieldA', 'Has correct label');
|
|
});
|
|
|
|
test('Fields: n columns', function() {
|
|
var testFields = {
|
|
fieldA: { label: 'TestFieldA' },
|
|
fieldB: { label: 'TestFieldB' },
|
|
fieldC: { label: 'TestFieldC' }
|
|
};
|
|
|
|
var $listView = listView({
|
|
listView: {
|
|
fields: testFields
|
|
}
|
|
});
|
|
var $fields = $listView.find('.fixed-header table thead tr th');
|
|
|
|
$.each(testFields, function(k, v) {
|
|
var $field = $fields.filter('.' + k);
|
|
|
|
equal($field.size(), 1, k + '-> Column present');
|
|
equal($field.html(), v.label, k + '-> Has correct label');
|
|
});
|
|
});
|
|
|
|
test('Data loading state', function() {
|
|
var $listView = listView();
|
|
|
|
equal($listView.find('table.body tr.loading').size(), 1, 'Row has loading state');
|
|
equal($listView.find('table.body tr.loading td.loading.icon').size(), 1, 'Row cell has loading icon');
|
|
});
|
|
|
|
asyncTest('Data provider: basic', function() {
|
|
expect(3);
|
|
var $listView = listView({
|
|
listView: {
|
|
fields: {
|
|
fieldA: { label: 'TestFieldA' },
|
|
fieldB: { label: 'TestFieldB' }
|
|
},
|
|
dataProvider: function(args) {
|
|
args.response.success({ data: [] });
|
|
|
|
ok(true, 'Data provider called');
|
|
start();
|
|
}
|
|
}
|
|
});
|
|
|
|
equal($listView.find('.data-table table.body tbody tr.empty td').size(), 1, 'Body table has empty table row');
|
|
equal($listView.find('.data-table table.body tbody tr.empty td').html(), 'label.no.data', 'Empty contents notice displayed');
|
|
});
|
|
|
|
asyncTest('Data provider: load data', function() {
|
|
var $listView = listView({
|
|
listView: {
|
|
fields: {
|
|
fieldA: { label: 'TestFieldA' },
|
|
fieldB: { label: 'TestFieldB' }
|
|
},
|
|
dataProvider: function(args) {
|
|
args.response.success({
|
|
data: [
|
|
{ fieldA: 'FieldDataA', fieldB: 'FieldDataB' }
|
|
]
|
|
});
|
|
|
|
start();
|
|
}
|
|
}
|
|
});
|
|
|
|
equal($listView.find('table.body tbody tr').size(), 1, 'Body table has table row');
|
|
equal($listView.find('table.body tbody tr td').size(), 2, 'Body table has table cells');
|
|
equal($listView.find('table.body tbody tr td.fieldA > span').html(), 'FieldDataA', 'FieldDataA content present');
|
|
equal($listView.find('table.body tbody tr td.fieldB > span').html(), 'FieldDataB', 'FieldDataB content present');
|
|
});
|
|
|
|
asyncTest('Data provider: multiple rows of data', function() {
|
|
var testData = [
|
|
{ fieldA: 'FieldDataA1', fieldB: 'FieldDataB1' },
|
|
{ fieldA: 'FieldDataA2', fieldB: 'FieldDataB2' },
|
|
{ fieldA: 'FieldDataA3', fieldB: 'FieldDataB3' }
|
|
];
|
|
|
|
var $listView = listView({
|
|
listView: {
|
|
fields: {
|
|
fieldA: { label: 'TestFieldA' },
|
|
fieldB: { label: 'TestFieldB' }
|
|
},
|
|
dataProvider: function(args) {
|
|
args.response.success({
|
|
data: testData
|
|
});
|
|
|
|
start();
|
|
}
|
|
}
|
|
});
|
|
|
|
equal($listView.find('table.body tbody tr').size(), 3, 'Body table has correct # of table rows');
|
|
|
|
$(testData).map(function(index, data) {
|
|
var $tr = $listView.find('table.body tbody tr').filter(function() {
|
|
return $(this).index() === index;
|
|
});
|
|
|
|
equal($tr.find('td.fieldA > span').html(), 'FieldDataA' + (index + 1), 'FieldDataA' + (index + 1) + ' present');
|
|
equal($tr.find('td.fieldB > span').html(), 'FieldDataB' + (index + 1), 'FieldDataB' + (index + 1) + ' present');
|
|
});
|
|
});
|
|
|
|
test('Field pre-filter', function() {
|
|
var $listView = listView({
|
|
listView: {
|
|
fields: {
|
|
fieldA: { label: 'TestFieldA' },
|
|
fieldB: { label: 'TestFieldB' },
|
|
fieldHidden: { label: 'TestFieldHidden' }
|
|
},
|
|
preFilter: function(args) {
|
|
return ['fieldHidden'];
|
|
},
|
|
dataProvider: function(args) {
|
|
args.response.success({
|
|
data: [
|
|
{ fieldA: 'FieldDataA', fieldB: 'FieldDataB', fieldHidden: 'FieldDataHidden' }
|
|
]
|
|
});
|
|
|
|
start();
|
|
}
|
|
}
|
|
});
|
|
|
|
equal($listView.find('table tr th').size(), 2, 'Correct number of header columns present');
|
|
equal($listView.find('table.body tbody tr td').size(), 2, 'Correct number of data body columns present');
|
|
ok(!$listView.find('table.body tbody td.fieldHidden').size(), 'Hidden field not present');
|
|
});
|
|
|
|
test('Filter dropdown', function() {
|
|
var $listView = listView({
|
|
listView: {
|
|
fields: {
|
|
state: { label: 'State' }
|
|
},
|
|
filters: {
|
|
on: { label: 'FilterOnLabel' },
|
|
off: { label: 'FilterOffLabel' }
|
|
},
|
|
dataProvider: function(args) {
|
|
var filterBy = args.filterBy.kind;
|
|
var data = filterBy === 'on' ? [{ state: 'on' }] : [{ state: 'off' }];
|
|
|
|
args.response.success({
|
|
data: data
|
|
});
|
|
|
|
start();
|
|
}
|
|
}
|
|
});
|
|
|
|
var $filters = $listView.find('.filters select');
|
|
|
|
var testFilterDropdownContent = function() {
|
|
equal($filters.find('option').size(), 2, 'Correct # of filters present');
|
|
equal($filters.find('option:first').html(), 'FilterOnLabel', 'Filter on label present');
|
|
equal($filters.find('option:last').html(), 'FilterOffLabel', 'Filter off label present');
|
|
};
|
|
|
|
testFilterDropdownContent();
|
|
equal($filters.find('option').val(), 'on', 'Correct default filter active');
|
|
equal($listView.find('tbody td.state span').html(), 'on', '"on" data item visible');
|
|
ok($filters.val('off').trigger('change'), 'Change filter to "off"');
|
|
equal($listView.find('tbody td.state span').html(), 'off', '"off" data item visible');
|
|
equal($filters.val(), 'off', 'Correct filter active');
|
|
testFilterDropdownContent();
|
|
});
|
|
}());
|