module.exports = function(t) {
    t.count(5)

    var obj = new Button("Text");
    obj.on("click",function() {
        t.ok(true);
    })

    testUtils.demo("Button", obj)

    this.eq(obj.text, "Text")
    this.eq(obj.domNode.value, "Text")
    obj.text = "MOOOO"
    this.eq(obj.text, "MOOOO")
    this.eq(obj.domNode.value, "MOOOO")

    syn.click(obj.domNode)
};
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)

    })
};
Example #3
0
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')
    })
};