exports.buildNestedStructure = function (nestings) {
var innerMost = Block()
var cur = innerMost
for(var n=0; n<nestings; n++) {
cur = Block('moose', [cur])
}
return {innerMost:innerMost, top: cur}
}
module.exports = function(t) {
var container = Block()
testUtils.demo("List", container)
this.test("simple creation - unordered", function() {
var list = List([Text('a'), Text('b'), Text('c')])
container.add(Text("list1"), list)
this.eq(list.children.length, 3)
this.ok(list.children[0] instanceof List.Item)
this.ok(list.children[1] instanceof List.Item)
this.ok(list.children[2] instanceof List.Item)
this.eq(list.domNode.nodeName, 'UL') // default is unordered list
var firstItem = $($(list.domNode).find("li")[0])[0]
this.eq(firstItem[domUtils.textProperty], 'a')
this.test("list constructed with raw strings instead of elements", function() {
var list = List(['a', 'b'])
container.add(Text("list2"), list)
this.eq(list.children.length, 2)
this.eq(list.children[0].domNode[domUtils.textProperty], 'a')
})
})
this.test("simple creation - ordered", function() {
var list = List(true, [Text('a'), Text('b'), Text('c')])
this.eq(list.domNode.nodeName, 'OL') // the true argument means ordered list
container.add(Text("olist"), list)
var list = List(false, [Text('a'), Text('b'), Text('c')])
this.eq(list.domNode.nodeName, 'UL') // false means unordered
})
this.test("individual item creation", function() {
var list = List()
this.eq(list.domNode.nodeName, 'UL') // default is unordered list
var item1 = list.item(Text('a'))
this.eq(list.children.length, 1)
var item2 = list.item(Text('B'))
this.eq(list.children.length, 2)
this.ok(list.children[0] instanceof List.Item)
this.ok(list.children[1] instanceof List.Item)
this.ok(list.children[0] === item1)
this.ok(list.children[1] === item2)
this.eq(list.children[0].children[0].text, 'a')
var firstItem = $($(list.domNode).find("li")[0])[0]
this.eq(firstItem[domUtils.textProperty], 'a')
this.test("items constructed with raw strings instead of elements", function() {
var list = List()
var item1 = list.item('a')
this.eq(list.children.length, 1)
this.eq(list.children[0].domNode[domUtils.textProperty], 'a')
})
this.test("ordering argument alone", function() {
var list = List(true)
this.eq(list.domNode.nodeName, 'OL')
var list2 = List(false)
this.eq(list2.domNode.nodeName, 'UL')
})
})
this.test("label arguments", function() {
var list1 = List('aLabel')
var list2 = List('aLabel2', ['a', 'b', 'c'])
this.eq(list1.label, 'aLabel')
this.eq(list2.label, 'aLabel2')
this.eq(list1.domNode.nodeName, 'UL')
this.eq(list2.domNode.nodeName, 'UL')
this.eq(list1.children.length, 0)
this.eq(list2.children.length, 3)
var item1 = list1.item('aLabel4', 'e')
this.eq(list1.children.length, 1)
this.eq(item1.label, 'aLabel4')
this.eq(item1.domNode[domUtils.textProperty], 'e')
var list3 = List('aLabel5', true)
this.eq(list3.label, 'aLabel5')
this.eq(list3.domNode.nodeName, 'OL')
this.eq(list3.children.length, 0)
var list4 = List('aLabel6', false)
this.eq(list4.label, 'aLabel6')
this.eq(list4.domNode.nodeName, 'UL')
this.eq(list4.children.length, 0)
var list5 = List('aLabel7', true, ['x'])
this.eq(list5.label, 'aLabel7')
this.eq(list5.domNode.nodeName, 'OL')
this.eq(list5.children.length, 1)
var list6 = List('aLabel8', false, ['y'])
this.eq(list6.label, 'aLabel8')
this.eq(list6.domNode.nodeName, 'UL')
this.eq(list6.children.length, 1)
})
};
module.exports = function() {
var container = Block()
testUtils.demo("Select", container)
this.test("basic usage", function(t) {
this.count(34)
var s1 = Select({4: 'Option 4', 5: "Option 5"})
container.add(Text("Select 1: "), s1)
this.eq(Object.keys(s1.options).length, 2)
this.eq(s1.options[4].val, "4")
this.eq(s1.options[5].val, "5")
this.eq(s1.val, "4") // selects first created option on creation
var option6 = s1.option(6, "Option 6")
this.eq(Object.keys(s1.options).length, 3)
this.eq(s1.options[6], option6)
this.test("events", function(t) {
this.count(27)
s1.on('change', function() {
event('change','s1')
})
s1.options[4].on('click', function() {
event('click', 'option4')
})
s1.options[4].on('change', function() {
event('change', 'option4')
})
s1.options[5].on('click', function() {
event('click', 'option57')
})
s1.options[5].on('change', function() {
event('change', 'option57')
})
option6.on('click', function() {
event('click', 'option6')
})
option6.on('change', function() {
event('change', 'option6')
})
var event = testUtils.seq(
// change 2
function(type, element) {
t.eq(type, 'change')
t.eq(element, 'option4')
},function(type, element) {
t.eq(type, 'change')
t.eq(element, 'option57')
},function(type, element) {
t.eq(type, 'change')
t.eq(element, 's1')
t.eq(s1.val, '5')
// change 3
},function(type, element) {
t.eq(type, 'change')
t.eq(element, 'option57')
t.eq(s1.options[7].selected, false)
},function(type, element) {
t.eq(type, 'change')
t.eq(element, 'option6')
t.eq(s1.options[6].selected, true)
},function(type, element) {
t.eq(type, 'change')
t.eq(element, 's1')
t.eq(s1.val,6)
// change 4
},function(type, element) {
t.eq(type, 'click')
t.eq(element, 'option6')
// change 5
},function(type, element) {
t.eq(type, 'change')
t.eq(element, 'option6')
},function(type, element) {
t.eq(type, 'change')
t.eq(element, 'option57')
},function(type, element) {
t.eq(type, 'change')
t.eq(element, 's1')
t.eq(s1.val, 7)
},function(type, element) {
t.eq(type, 'click')
t.eq(element, 'option57')
})
})
// change 1 - really no change because option4 is already selected
s1.options[4].selected = true
this.eq(s1.val, "4")
this.eq(s1.options[4].selected, true)
this.eq(s1.options[5].selected, false)
this.eq(s1.options[6].selected, false)
// change 2
s1.options[5].selected = true
this.eq(s1.val, "5")
this.eq(s1.options[4].selected, false)
this.eq(s1.options[5].selected, true)
this.eq(s1.options[6].selected, false)
// change option value
s1.options[5].val = 7
this.eq(s1.options[7].val, 7)
this.eq(s1.val, 7)
this.eq(s1.options[4].selected, false)
this.eq(s1.options[5], undefined) // moved to value 7
this.eq(s1.options[6].selected, false)
this.eq(s1.options[7].selected, true)
// change option text
s1.options[7].text = 'Option 7'
this.eq(s1.options[7].domNode[domUtils.textProperty], 'Option 7')
// change 3
// change the value of the select object directly
s1.val = 6
this.eq(s1.val, 6)
this.eq(s1.options[4].selected, false)
this.eq(s1.options[6].selected, true)
this.eq(s1.options[7].selected, false)
// select just one of the already selected options with a click
// change 4
syn.click(option6.domNode).then(function() {
t.eq(s1.val, 6)
t.eq(s1.options[4].selected, false)
t.eq(s1.options[6].selected, true)
t.eq(s1.options[7].selected, false)
// change 5
// click one that wasn't already selected
return syn.click(s1.options[7].domNode)
}).then(function(){
t.eq(s1.val, 7)
t.eq(s1.options[4].selected, false)
t.eq(s1.options[6].selected, false)
t.eq(s1.options[7].selected, true)
}).done()
})
// todo:
/*
this.test("test keyboard events", function() {
this.test("basic changing selected options with the keyboard", function(t) {
var select1 = Select({1: 'one', 2: 'two', 3: 'three'})
container.add(Text("Another Group: "), select1)
select1.focus()
syn.key(option1A.domNode, "[down]").then(function() {
t.eq(document.activeElement, option1B)
t.eq(select1.val, "2")
return syn.key(option1A.domNode, "[down]")
})/*.then(function() {
t.eq(document.activeElement, option1C)
t.eq(select1.val, "3")
return key(option1A.domNode, "[left]")
}).then(function() {
t.eq(document.activeElement, option1B)
t.eq(select1.val, "2")
return key(option1A.domNode, "[up]")
}).then(function() {
t.eq(document.activeElement, option1A)
t.eq(select1.val, "1")
// test looping
return key(option1A.domNode, "[up]")
}).then(function() {
t.eq(document.activeElement, option1C)
t.eq(select1.val, "3")
// test looping
return key(option1A.domNode, "[down]")
}).then(function() {
t.eq(document.activeElement, option1A)
t.eq(select1.val, "1")
}).done()
})
})
*/
this.test("labels", function(t) {
var s1 = Select("myLabel")
this.eq(s1.label, "myLabel")
this.eq(Object.keys(s1.options).length, 0)
var s2 = Select("myLabel2", {1: "one"})
this.eq(s2.label, "myLabel2")
this.eq(Object.keys(s2.options).length, 1)
var option = s1.option("myLabel3", "value", "text")
this.eq(option.label, "myLabel3")
this.eq(option.val, "value")
this.eq(option.text, "text")
})
this.test("remove", function(t) {
this.count(14)
var select = Select()
var option0 = select.option("option0", "zero"), option1 = select.option("option1", "one")
var option2 = select.option("option2", "two"), option3 = select.option("option3", 'three')
var option4 = select.option("option4", 'four'), option5 = select.option("option5", 'five')
option0.selected = true
select.on('change', function() {
event(select.val)
})
var event = testUtils.seq(function(value) {
t.eq(value, 'option2')
},function(value) {
t.eq(value, 'option3')
})
this.eq(option1.parent, select)
select.remove(1)
this.eq(select.val, 'option0')
this.eq(option1.parent, undefined)
this.eq(Object.keys(select.options).length, 5)
try {
select.val = "option1"
} catch(e) {
this.eq(e.message, "There is no Option in the Select with the value: 'option1'")
}
select.remove(option0) // a change event should be generated, since a selected value has been removed (and thus is no longer selected)
this.eq(select.val, 'option2')
this.eq(option0.group, undefined)
this.eq(Object.keys(select.options).length, 4)
try {
select.val = "option0"
} catch(e) {
this.eq(e.message, "There is no Option in the Select with the value: 'option0'")
}
select.remove([2, 3]) // these are option4 and option5
try {
select.val = "option4"
} catch(e) {
this.eq(e.message, "There is no Option in the Select with the value: 'option4'")
}
this.eq(Object.keys(select.options).length, 2)
select.remove([option2]) // should generate another change event
this.eq(Object.keys(select.options).length, 1)
})
// todo:
/*
this.test("addAt", function() { // adding options that have been removed from this or other Selects should still work (even tho thats kinda weird)
// note that testing addAt means add and addBefore should work too, because those methods use addAt under the hood
})
*/
this.test("errors", function() {
this.count(5)
var select = Select({1: "text"})
try {
select.option("1", 'text')
} catch(e) {
this.eq(e.message, "Can't give an Option the same value as another in the Select (value: '1')")
}
var optionB = select.option("2", 'text')
try {
optionB.val = "1"
} catch(e) {
this.eq(e.message, "Can't give an Option the same value as another in the Select or MultiSelect (value: \"1\")")
}
try {
select.val = "nonexistent"
} catch(e) {
this.eq(e.message, "There is no Option in the Select with the value: 'nonexistent'")
}
try {
select.remove(300)
} catch(e) {
this.eq(e.message, "There is no child at index 300")
}
var select2 = Select()
try {
select2.remove(optionB)
} catch(e) {
this.eq(e.message, "The Gem passed at argument index 0 is not a child of this Gem.")
}
})
};
module.exports = function(t) {
var container = Block()
testUtils.demo("Table", container)
this.test("simple creation", function() {
var table = Table([
[Text('a'), Text('b'), Text('c'), Text('d')],
[Text('A'), Text('B'), Text('C'), Text('D'), Text("E")],
[Text('AY'), Text('BEE'), Text('CEE'), Text('DEE'), Text("EEeeeeee")]
])
container.add(Text("table1"), table)
this.eq(table.children.length, 3)
this.ok(table.children[0] instanceof Table.Row)
this.ok(table.children[1] instanceof Table.Row)
this.ok(table.children[2] instanceof Table.Row)
this.eq(table.children[0].children.length, 4)
this.eq(table.children[1].children.length, 5)
this.eq(table.children[2].children.length, 5)
this.ok(table.children[0].children[0] instanceof Table.Cell)
this.eq(table.children[0].children[0].children[0].text, 'a')
var firstRow = $($(table.domNode).find("tr")[0])
this.eq(firstRow.find('td')[0][domUtils.textProperty], 'a')
this.ok(table.children[2].children[3] instanceof Table.Cell)
this.ok(table.children[2].children[3].children[0] instanceof Text)
this.eq(table.children[2].children[3].children[0].text, 'DEE')
this.eq(table.domNode.children[2].children[3].children[0][domUtils.textProperty], 'DEE')
var lastRow = $($(table.domNode).find("tr")[2])
this.eq(lastRow.find('td')[3][domUtils.textProperty], 'DEE')
this.test("tables constructed with raw strings instead of elements", function() {
var table = Table([
['a', 'b', 'c'],
['d', 'e', 'f']
])
container.add(Text("table2"), table)
this.eq(table.children.length, 2)
this.eq(table.children[0].children.length, 3)
this.eq(table.children[0].children[0].domNode[domUtils.textProperty], 'a')
this.eq(table.children[1].children.length, 3)
this.eq(table.children[1].children[2].domNode[domUtils.textProperty], 'f')
})
})
this.test("individual row creation", function() {
var table = Table()
var row1 = table.row([Text('a'), Text('b'), Text('c'), Text('d')])
this.eq(table.children.length, 1)
var row2 = table.row([Text('A'), Text('B'), Text('C'), Text('D'), Text("E")])
this.eq(table.children.length, 2)
this.ok(table.children[0] instanceof Table.Row)
this.ok(table.children[1] instanceof Table.Row)
this.eq(table.children[0], row1)
this.eq(table.children[1], row2)
this.eq(table.children[0].children.length, 4)
this.eq(table.children[1].children.length, 5)
this.ok(table.children[0].children[0] instanceof Table.Cell)
this.eq(table.children[0].children[0].children[0].text, 'a')
var firstRow = $($(table.domNode).find("tr")[0])
this.eq(firstRow.find('td')[0][domUtils.textProperty], 'a')
this.ok(table.children[1].children[3] instanceof Table.Cell)
this.eq(table.children[1].children[3].children[0].text, 'D')
this.eq(table.domNode.children[1].children[3][domUtils.textProperty], 'D')
var lastRow = $($(table.domNode).find("tr")[1])
this.eq(lastRow.find('td')[3][domUtils.textProperty], 'D')
this.test("rows constructed with raw strings instead of elements", function() {
var table = Table()
table.row(['a', 'b', 'c'])
table.row(['d', 'e', 'f'])
this.eq(table.children.length, 2)
this.eq(table.children[0].children.length, 3)
this.eq(table.children[0].children[0].domNode[domUtils.textProperty], 'a')
this.eq(table.children[1].children.length, 3)
this.eq(table.children[1].children[2].domNode[domUtils.textProperty], 'f')
})
})
// table headers are exactly the same as table rows, except... apply directly to the forehead
this.test("individual header creation", function() {
var table = Table()
var row1 = table.header([Text('a'), Text('b'), Text('c'), Text('d')])
this.eq(table.children.length, 1)
var row2 = table.header([Text('A'), Text('B'), Text('C'), Text('D'), Text("E")])
this.eq(table.children.length, 2)
this.ok(table.children[0] instanceof Table.Header)
this.ok(table.children[1] instanceof Table.Header)
this.eq(table.children[0], row1)
this.eq(table.children[1], row2)
this.eq(table.children[0].children.length, 4)
this.eq(table.children[1].children.length, 5)
this.ok(table.children[0].children[0] instanceof Table.Cell)
this.eq(table.children[0].children[0].children[0].text, 'a')
var firstRow = $($(table.domNode).find("th")[0])
this.eq(firstRow.find('td')[0][domUtils.textProperty], 'a')
this.ok(table.children[1].children[3] instanceof Table.Cell)
this.eq(table.children[1].children[3].children[0].text, 'D')
this.eq(table.domNode.children[1].children[3][domUtils.textProperty], 'D')
var lastRow = $($(table.domNode).find("th")[1])
this.eq(lastRow.find('td')[3][domUtils.textProperty], 'D')
this.test("rows constructed with raw strings instead of elements", function() {
var table = Table()
table.header(['a', 'b', 'c'])
table.header(['d', 'e', 'f'])
this.eq(table.children.length, 2)
this.eq(table.children[0].children.length, 3)
this.eq(table.children[0].children[0].domNode[domUtils.textProperty], 'a')
this.eq(table.children[1].children.length, 3)
this.eq(table.children[1].children[2].domNode[domUtils.textProperty], 'f')
})
})
this.test('individual cell creation', function() {
var table = Table()
container.add(Text("table3"), table)
var row1 = table.row()
var row2 = table.row()
var cell1 = row1.cell(Text('a'))
var cell2 = row2.cell(Text('A'))
var cell3 = row2.cell([Text('B')])
this.eq(table.children.length, 2)
this.eq(table.children[0], row1)
this.eq(table.children[1], row2)
this.eq(table.children[0].children.length, 1)
this.eq(table.children[1].children.length, 2)
this.ok(table.children[0].children[0] instanceof Table.Cell)
this.eq(table.children[0].children[0], cell1)
this.eq(table.children[0].children[0].children[0].text, 'a')
var firstRow = $($(table.domNode).find("tr")[0])
this.eq(firstRow.find('td')[0][domUtils.textProperty], 'a')
this.ok(table.children[1].children[1] instanceof Table.Cell)
this.eq(table.children[1].children[0], cell2)
this.eq(table.children[1].children[1], cell3)
this.eq(table.children[1].children[1].children[0].text, 'B')
this.eq(table.domNode.children[1].children[1][domUtils.textProperty], 'B')
var lastRow = $($(table.domNode).find("tr")[1])
this.eq(lastRow.find('td')[1][domUtils.textProperty], 'B')
this.test("colspan", function() {
cell1.colspan(2)
this.eq(cell1.attr('colspan'), '2')
})
this.test("cells constructed with raw strings instead of elements", function() {
var table = Table()
var row1 = table.row()
var row2 = table.row()
row1.cell('a')
row1.cell('b')
row1.cell('c')
row2.cell('d')
row2.cell('e')
row2.cell('f')
this.eq(table.children.length, 2)
this.eq(table.children[0].children.length, 3)
this.eq(table.children[0].children[0].domNode[domUtils.textProperty], 'a')
this.eq(table.children[1].children.length, 3)
this.eq(table.children[1].children[2].domNode[domUtils.textProperty], 'f')
})
})
this.test("label arguments", function() {
var table1 = Table('aLabel')
var table2 = Table('aLabel2', [['a', 'b'],['c', 'd'],['e']])
this.eq(table1.label, 'aLabel')
this.eq(table2.label, 'aLabel2')
this.eq(table2.children.length, 3)
var row1 = table1.row('aLabel3')
var row2 = table1.row('aLabel4', ['f','g'])
this.eq(row1.label, 'aLabel3')
this.eq(row2.label, 'aLabel4')
this.eq(table1.children.length, 2)
var cell1 = row1.cell('label5', 'value')
var cell2 = row1.cell('label6', undefined)
this.eq(cell1.label, 'label5')
this.eq(cell1.domNode[domUtils.textProperty], 'value')
this.eq(cell2.label, 'label6')
})
};