mirror of
https://github.com/YunoHost-Apps/limesurvey_ynh.git
synced 2024-09-03 19:36:32 +02:00
411 lines
20 KiB
HTML
411 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Bootstrap Multiselect Tests</title>
|
|
<meta name="robots" content="noindex, nofollow" />
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
|
<meta name="copyright" content="David Stutz" />
|
|
|
|
<link rel="stylesheet" href="css/bootstrap-3.0.0.min.css" type="text/css">
|
|
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css">
|
|
|
|
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
|
|
<script type="text/javascript" src="js/bootstrap-3.0.0.min.js"></script>
|
|
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
|
|
</head>
|
|
<body>
|
|
<a href="https://github.com/davidstutz/bootstrap-multiselect"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
|
|
<div class="container">
|
|
<div class="page-header">
|
|
<h1>Bootstrap Multiselect Tests</h1>
|
|
</div>
|
|
|
|
<table class="table table-striped table-hover">
|
|
<tbody>
|
|
<tr id="test-build-tr" class="success">
|
|
<th>Test build</th>
|
|
<td>
|
|
<select id="test-build-select" multiple="multiple">
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
</select>
|
|
</td>
|
|
<td>Everything fine.</td>
|
|
</tr>
|
|
<tr id="test-build-optgroups-tr" class="success">
|
|
<th>Test build with optgroups</th>
|
|
<td>
|
|
<select id="test-build-optgroups-select" multiple="multiple">
|
|
<optgroup label="1,2">
|
|
<option value="1" selected="selected">1</option>
|
|
<option value="2">2</option>
|
|
</optgroup>
|
|
<optgroup label="3,4,5">
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
</optgroup>
|
|
</select>
|
|
</td>
|
|
<td>Everything fine.</td>
|
|
</tr>
|
|
<tr id="test-build-selected-tr" class="success">
|
|
<th>Test build with selected options</th>
|
|
<td>
|
|
<select id="test-build-selected-select" multiple="multiple">
|
|
<option value="1" selected="selected">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
</select>
|
|
</td>
|
|
<td>Everything fine.</td>
|
|
</tr>
|
|
<tr id="test-build-select-all-tr" class="success">
|
|
<th>Test build with select all</th>
|
|
<td>
|
|
<select id="test-build-select-all-select" multiple="multiple">
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
</select>
|
|
</td>
|
|
<td>Everything fine.</td>
|
|
</tr>
|
|
<tr id="test-build-filter-tr" class="success">
|
|
<th>Test build with filter</th>
|
|
<td>
|
|
<select id="test-build-filter-select" multiple="multiple">
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
</select>
|
|
</td>
|
|
<td>Everything fine.</td>
|
|
</tr>
|
|
<tr id="test-select-tr" class="success">
|
|
<th>Test select</th>
|
|
<td>
|
|
<select id="test-select-select" multiple="multiple">
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
</select>
|
|
</td>
|
|
<td>Everything fine.</td>
|
|
</tr>
|
|
<tr id="test-deselect-tr" class="success">
|
|
<th>Test deselect</th>
|
|
<td>
|
|
<select id="test-deselect-select" multiple="multiple">
|
|
<option value="1" selected="selected">1</option>
|
|
<option value="2" selected="selected">2</option>
|
|
<option value="3" selected="selected">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
</select>
|
|
</td>
|
|
<td>Everything fine.</td>
|
|
</tr>
|
|
<tr id="test-max-height-tr" class="success">
|
|
<th>Test max height</th>
|
|
<td>
|
|
<select id="test-max-height-select" multiple="multiple">
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
<option value="6">6</option>
|
|
<option value="7">7</option>
|
|
<option value="8">8</option>
|
|
<option value="9">9</option>
|
|
<option value="10">10</option>
|
|
<option value="11">11</option>
|
|
<option value="12">12</option>
|
|
<option value="13">13</option>
|
|
</select>
|
|
</td>
|
|
<td>Everything fine.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
|
|
// Test build of multiselect.
|
|
var build = function(select, tr) {
|
|
select.multiselect();
|
|
|
|
if (select.length === 0) {
|
|
return 'Select not present anymore.';
|
|
}
|
|
|
|
if (select.css('display') !== 'none') {
|
|
return 'Select still visible (expected <code>display: none;</code>).';
|
|
}
|
|
|
|
if ($('button.multiselect', tr).length === 0) {
|
|
return 'Multiselect button not present.';
|
|
}
|
|
|
|
if ($('option', select).length !== 5) {
|
|
return 'Not all options present anymore.';
|
|
}
|
|
|
|
if ($('ul.multiselect-container', tr).length === 0) {
|
|
return 'Unordered list <code>.multiselect-container</code> not present.';
|
|
}
|
|
|
|
if ($('ul.multiselect-container li', tr).length !== 5) {
|
|
return 'No list item for each option present.';
|
|
}
|
|
|
|
if ($('ul.multiselect-container li a', tr).length !== 5) {
|
|
return 'Not all list items come with an anchor inside.';
|
|
}
|
|
|
|
return false;
|
|
}($('#test-build-select'), $('#test-build-tr'));
|
|
|
|
if (build) {
|
|
$('#test-build-tr').removeClass('success').addClass('danger');
|
|
$('#test-build-tr td').last().html(build);
|
|
}
|
|
|
|
// Test build with optgroups.
|
|
var buildOptgroups = function(select, tr) {
|
|
select.multiselect();
|
|
|
|
if ($('optgroup', select).length !== 2) {
|
|
return 'Optgroups not present anymore (2 expected).';
|
|
}
|
|
|
|
var first = $('optgroup', select).get(0);
|
|
var second = $('optgroup', select).get(1);
|
|
|
|
if ($('option', $(first)).length !== 2) {
|
|
return 'First optgroup does not have 2 options.';
|
|
}
|
|
|
|
if ($('option', $(second)).length !== 3) {
|
|
return 'Second optgroup does not have 3 options.';
|
|
}
|
|
|
|
// Check the corresponding labels.
|
|
if ($('label.multiselect-group', tr).length !== 2) {
|
|
return 'Expected 2 labels within the unordered list.';
|
|
}
|
|
|
|
// Check labeling of groups.
|
|
var firstLabel = $('label.multiselect-group', tr).get(0);
|
|
var secondLabel = $('label.multiselect-group', tr).get(1);
|
|
|
|
if ($(firstLabel).text() !== $(first).prop('label')) {
|
|
return 'First group labeled incorrectly.';
|
|
}
|
|
|
|
if ($(secondLabel).text() !== $(second).prop('label')) {
|
|
return 'Second group labeled incorrectly.';
|
|
}
|
|
|
|
return false;
|
|
}($('#test-build-optgroups-select'), $('#test-build-optgroups-tr'));
|
|
|
|
if (buildOptgroups) {
|
|
$('#test-build-optgroups-tr').removeClass('success').addClass('danger');
|
|
$('#test-build-optgroups-tr td').last().html(build);
|
|
}
|
|
|
|
var buildSelected = function(select, tr ) {
|
|
select.multiselect();
|
|
|
|
if ($('option:selected', select).length !== 1) {
|
|
return 'Multiselect did not adopt selected options (1 selected option).';
|
|
}
|
|
|
|
if ($('ul.multiselect-container li.active', tr).length !== 1) {
|
|
return 'Corresponding list item not set to <code>.active</code>.';
|
|
}
|
|
|
|
return false;
|
|
}($('#test-build-selected-select'), $('#test-build-selected-tr'));
|
|
|
|
if (buildSelected) {
|
|
$('#test-build-selected-tr').removeClass('success').addClass('danger');
|
|
$('#test-build-selected-tr td').last().html(buildSelected);
|
|
}
|
|
|
|
var buildSelectAll = function(select, tr ) {
|
|
var value = 'multiselect-select-all';
|
|
select.multiselect({
|
|
includeSelectAllOption: true,
|
|
selectAllValue: value
|
|
});
|
|
|
|
if ($('.multiselect-container input[value="' + value + '"]', tr).length !== 1) {
|
|
return 'Expected exactly one input with value ' + value + ' as select all option.';
|
|
}
|
|
|
|
return false;
|
|
}($('#test-build-select-all-select'), $('#test-build-select-all-tr'));
|
|
|
|
if (buildSelectAll) {
|
|
$('#test-build-select-all-tr').removeClass('success').addClass('danger');
|
|
$('#test-build-select-all-tr td').last().html(buildSelectAll);
|
|
}
|
|
|
|
var buildFilter = function(select, tr) {
|
|
select.multiselect({
|
|
enableFiltering: true
|
|
});
|
|
|
|
if ($('.multiselect-search', tr).length !== 1) {
|
|
return 'No search input present.';
|
|
}
|
|
|
|
}($('#test-build-filter-select'), $('#test-build-filter-tr'));
|
|
|
|
if (buildFilter) {
|
|
$('#test-build-filter-tr').removeClass('success').addClass('danger');
|
|
$('#test-build-filter-tr td').last().html(buildFilter);
|
|
}
|
|
|
|
// Test select.
|
|
var select = function(selectElement, tr) {
|
|
selectElement.multiselect();
|
|
|
|
// Check for no selected options and no active li's.
|
|
if ($('option:selected', selectElement).length > 0) {
|
|
return 'There are already selected options (0 expected).';
|
|
}
|
|
|
|
if ($('ul.multiselect-container li.active', tr).length > 0) {
|
|
return 'There are already active list items (0 expected).';
|
|
}
|
|
|
|
selectElement.multiselect('select', '1');
|
|
|
|
if ($('option:selected', selectElement).length !== 1) {
|
|
return 'Just selected an option - option not marked selected.';
|
|
}
|
|
|
|
if ($('ul.multiselect-container li.active', tr).length !== 1) {
|
|
return 'Just selected an option - list item not set active.';
|
|
}
|
|
|
|
if ($('option:selected', selectElement).first().val() !== '1') {
|
|
return 'Wrong option selected.';
|
|
}
|
|
|
|
selectElement.multiselect('select', ['2', '3']);
|
|
|
|
if ($('option:selected', selectElement).length !== 3) {
|
|
return 'Just selected two additional options - options not marked selected.';
|
|
}
|
|
|
|
if ($('ul.multiselect-container li.active', tr).length !== 3) {
|
|
return 'Just selected two additional options - list items not set active.';
|
|
}
|
|
|
|
var second = $('option:selected', selectElement).get(1),
|
|
third = $('option:selected', selectElement).get(2);
|
|
|
|
if (second === undefined || second.length === 0) {
|
|
return 'Could not get second option.';
|
|
}
|
|
|
|
if (third === undefined || third.length === 0) {
|
|
return 'Could not get third option.';
|
|
}
|
|
|
|
if ($(second).val() !== '2' || $(third).val() !== '3') {
|
|
return 'Wrong options selected.';
|
|
}
|
|
|
|
return false;
|
|
}($('#test-select-select'), $('#test-select-tr'));
|
|
|
|
if (select) {
|
|
$('#test-select-tr').removeClass('success').addClass('danger');
|
|
$('#test-select-tr td').last().html(select);
|
|
}
|
|
|
|
// Test deselect.
|
|
var deselect = function(select, tr) {
|
|
select.multiselect();
|
|
|
|
// Check for no selected options and no active li's.
|
|
if ($('option:selected', select).length !== 3) {
|
|
return 'There should be 3 options selected.';
|
|
}
|
|
|
|
if ($('ul.multiselect-container li.active', tr).length !== 3) {
|
|
return 'There should be 3 list items set to active.';
|
|
}
|
|
|
|
select.multiselect('deselect', '1');
|
|
|
|
if ($('option:selected', select).length !== 2) {
|
|
return 'Just deselected an option - option not marked deselected.';
|
|
}
|
|
|
|
if ($('ul.multiselect-container li.active', tr).length !== 2) {
|
|
return 'Just deselected an option - list item not set inactive.';
|
|
}
|
|
|
|
if ($('option:selected', select).first().val() !== '2') {
|
|
return 'Wrong option deselected.';
|
|
}
|
|
|
|
select.multiselect('deselect', ['2', '3']);
|
|
|
|
if ($('option:selected', select).length > 0) {
|
|
return 'Just deselected two additional options - options not marked deselected.';
|
|
}
|
|
|
|
if ($('ul.multiselect-container li.active', tr).length > 0) {
|
|
return 'Just deselected two additional options - list items not set unactive.';
|
|
}
|
|
|
|
return false;
|
|
}($('#test-deselect-select'), $('#test-deselect-tr'));
|
|
|
|
if (deselect) {
|
|
$('#test-deselect-tr').removeClass('success').addClass('danger');
|
|
$('#test-deselect-tr td').last().html(deselect);
|
|
}
|
|
|
|
var maxHeight = function(select, tr) {
|
|
|
|
select.multiselect({
|
|
maxHeight: 100
|
|
});
|
|
|
|
var height = $('.multiselect-container', tr).css('max-height');
|
|
if (height !== '100px') {
|
|
return 'Max height not set correctly (set: ' + height + ').';
|
|
}
|
|
|
|
return false;
|
|
}($('#test-max-height-select'), $('#test-max-height-tr'));
|
|
|
|
if (maxHeight) {
|
|
$('#test-max-height-tr').removeClass('success').addClass('danger');
|
|
$('#test-max-height-tr td').last().html(maxHeight);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|