Commit a0ee2962 authored by Rafael Ostertag's avatar Rafael Ostertag
Browse files

Select.js: Implemented & tested.

parent 133990c0
......@@ -39,20 +39,20 @@ if (!QfqNS.Element) {
* array of objects, `<select>` will have its `<option>` tags set correspondingly.
*/
Select.prototype.setValue = function (val) {
if (typeof(val) in ['string', 'number']) {
if (['string', 'number'].indexOf(typeof(val)) !== -1) {
this.setSelection(val);
} else if (Array.isArray(val)) {
this.formGroup.$element.empty();
// Fill array with new <select> elements first and add it to the dom in one step, instead of appending
// each '<select>' separately.
var selectArray;
var selectArray = [];
val.forEach(function (selectObj) {
var $option = $('<option>')
.addAttribute('value', selectObj.value ? selectObj.value : selectObj.text)
.attr('value', selectObj.value ? selectObj.value : selectObj.text)
.prop('selected', selectObj.selected ? selectObj.selected : false)
.append(selectObj.text);
selectArray.append($option);
selectArray.push($option);
});
this.formGroup.$element.append(selectArray);
} else {
......@@ -72,7 +72,7 @@ if (!QfqNS.Element) {
// First, see if we find an <option> tag having an attribute 'value' matching val. If that doesn't work,
// fall back to comparing text content of <option> tags.
var $selectionByValue = this.formGroup.$element.find('option[value=' + val);
var $selectionByValue = this.formGroup.$element.find('option[value=' + val + ']');
if ($selectionByValue.length > 0) {
$selectionByValue.prop('selected', true);
} else {
......
......@@ -158,7 +158,7 @@
<label for="nameShort" class="control-label">Vorname Kurz</label>
</div>
<div class="col-md-6">
<input id="nameShort" type="text" class="form-control">
<input id="nameShort" type="text" name="personHandle" class="form-control">
</div>
<div class="col-md-4">
......@@ -171,7 +171,7 @@
<label for="personHandle" class="control-label">Kurzform</label>
</div>
<div class="col-md-6">
<input id="personHandle" type="text" name="personHandle" class="form-control">
<input id="personHandle" type="text" class="form-control">
</div>
<div class="col-md-4">
......@@ -186,13 +186,26 @@
</div>
<div class="col-md-6">
<select id="personTitle" class="form-control">
<option></option>
<option>none</option>
<option>Dr.</option>
<option>Prof. Dr.</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="selectTest2" class="control-label">Titel</label>
</div>
<div class="col-md-6">
<select id="selectTest2" class="form-control">
<option value="1">a</option>
<option value="2" selected>b</option>
<option value="3">c</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
......@@ -229,8 +242,27 @@
</div>
</form>
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
Reminder Veranstaltung
</b>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
</div>
<div class="col-md-4">
<p class="help-block">Empfängt 'Reminder'-Mails für Veranstaltungen.</p>
</div>
</div>
</form>
</section>
<% with (scripts) { %>
<% [].concat(polyfills, jasmine, boot, vendor, helpers, src, specs,reporters).forEach(function(script){ %>
......
......@@ -20,8 +20,98 @@ describe("Element Select", function () {
selectTest2 = new QfqNS.Element.Select($('#selectTest2'));
});
it("should get selected value", function () {
expect(personTitleSelect.getValue()).toBe("none");
expect(selectTest2.getValue()).toBe('2');
it("should get initial selected value", function () {
$('#myForm')[0].reset();
expect(personTitleSelect.getValue()).toEqual(["none"]);
expect(selectTest2.getValue()).toEqual(['2']);
});
it("should get dynamically selected value", function () {
$('#selectTest2 :selected').prop('selected', false);
$('#selectTest option[value=1]').prop('selected', true);
expect(selectTest2.getValue()).toEqual(["1"]);
$('#personTitle :selected').prop('selected', false);
$('#personTitle option:nth-child(3)').prop('selected', true);
expect(personTitleSelect.getValue()).toEqual(['Prof. Dr.']);
});
it("should set the selected item properly", function () {
$('#selectTest2 :selected').prop('selected', false);
$('#selectTest option[value=3]').prop('selected', true);
selectTest2.setValue('1');
expect($('#selectTest2 :selected').length).toBe(1);
expect($('#selectTest2 :selected').val()).toBe('1');
$('#personTitle :selected').prop('selected', false);
$('#personTitle option:nth-child(3)').prop('selected', true);
personTitleSelect.setValue('none');
expect($('#personTitle :selected').length).toBe(1);
expect($('#personTitle :selected').text()).toBe('none');
});
it("should set options properly", function () {
selectTest2.setValue([
{
value: 0xff,
text: "0xff"
},
{
value: 0xfe,
text: "0xfe",
selected: true
}
]);
expect($('#selectTest2 option').length).toBe(2);
expect($('#selectTest2 option:nth-child(1)').text()).toBe('0xff');
expect($('#selectTest2 option:nth-child(1)').val()).toBe('255');
expect($('#selectTest2 option:nth-child(1)').prop('selected')).toBe(false);
expect($('#selectTest2 option:nth-child(2)').text()).toBe('0xfe');
expect($('#selectTest2 option:nth-child(2)').val()).toBe('254');
expect($('#selectTest2 option:nth-child(2)').prop('selected')).toBe(true);
personTitleSelect.setValue([
{
text: "a"
},
{
text: "b",
selected: false
},
{
text: "c",
selected: true
},
{
text: "d"
}
]);
expect($('#personTitle option').length).toBe(4);
expect($('#personTitle option:nth-child(1)').text()).toBe('a');
expect($('#personTitle option:nth-child(1)').val()).toBe('a');
expect($('#personTitle option:nth-child(1)').prop('selected')).toBe(false);
expect($('#personTitle option:nth-child(2)').text()).toBe('b');
expect($('#personTitle option:nth-child(2)').val()).toBe('b');
expect($('#personTitle option:nth-child(2)').prop('selected')).toBe(false);
expect($('#personTitle option:nth-child(3)').text()).toBe('c');
expect($('#personTitle option:nth-child(3)').val()).toBe('c');
expect($('#personTitle option:nth-child(3)').prop('selected')).toBe(true);
expect($('#personTitle option:nth-child(4)').text()).toBe('d');
expect($('#personTitle option:nth-child(4)').val()).toBe('d');
expect($('#personTitle option:nth-child(4)').prop('selected')).toBe(false);
});
});
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment