Chat with Alloy models failing test

chat.js

exports.definition = {
	config: {
		columns: {
		    "content": "String",
		    "date": "String",
		    "author": "String"
		},
		adapter: {
			type: "properties",
			collection_name: "chat"
		}
	},
	extendModel: function(Model) {
		_.extend(Model.prototype, {
            transform: function transform() {
                var message = this.toJSON();
                return message;
            }
		});

		return Model;
	},
	extendCollection: function(Collection) {

		return Collection;
	}
};

index.js

var chat = Alloy.Collections.chat = Alloy.createCollection('chat');

function setTemplate(model) {
    var transform = model.toJSON();
    transform.template = (transform.author == "Auth1") ? "messageOnTheRight" : "messageOnTheLeft";

    return transform;
}

function send(e) {
    if (0 === $.typingArea.value.length) return;
    
    var message = Alloy.createModel('chat', {
         content: $.typingArea.value,
         author: "Auth1",
         date: new Date()
    });

	$.typingArea.value = "";
	chat.add(message);
};

$.win.addEventListener('close', function() {
    $.destroy();
});

$.win.open();

chat.fetch();

index.tss

"#container" : {
    height:          Ti.UI.FILL,
    width:           Ti.UI.FILL
}

// LISTVIEW = messages

"#listView" : {
    width:           Ti.UI.FILL,
    height:          Ti.UI.FILL,
    top:             0,
    separatorColor:  "transparent"
}

"ListItem[platform=ios]" : {
    height: Ti.UI.SIZE, 
    selectionStyle: Ti.UI.iPhone.ListViewCellSelectionStyle.NONE // prevent weird feature on iOS (background strech)
}

".listItem" : {
    width:  Ti.UI.FILL,
    height: Ti.UI.SIZE,
    layout: "vertical"
}

".message-row" : {
    width:  Ti.UI.FILL,
    height: Ti.UI.SIZE
} 

".message-box" : {
    width: "70%",
    height: Ti.UI.SIZE,
    borderRadius: 10,
    top: 3,
    bottom: 3
}

".left" : {
    left: 3,
    backgroundColor: "#ddd"
}

".right" : {
    right: 3,
    backgroundColor: "#bbb"
}

".message" : {
    top: 7,
    right: 7,
    bottom: 7,
    left: 7,
    width:  Ti.UI.FILL,
    height: Ti.UI.SIZE
}

".date" : {
    width:  Ti.UI.FILL,
    height: Ti.UI.SIZE,
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
    color: "#444",
    font: {
        fontSize: "10dp"
    }
}

// NEW MESSAGE TEXT FIELD

"#chatTextFieldContainer": {
    width:           Ti.UI.FILL,
    height:          Ti.UI.SIZE,
    bottom:          0,
    backgroundColor: "#eee"
}

"#subSeparator" : {
    width:  Ti.UI.FILL,
    height: Ti.UI.SIZE,
}

"TextArea" : {
    width:  Ti.UI.FILL,
    height: Ti.UI.SIZE,

    color: "#222",
    backgroundColor: "white",

    textAlign: Titanium.UI.TEXT_ALIGNMENT_LEFT,
    focused:   "false",

    left:  4,
    right: 58, // Since the 'send' button is 50 width, + margin 4, that's 58

    focused: "false"
}

"#btnWrapper" : {
    bottom: 0,
    right:  0,
    width:  58,
    height: 58
}

"Button" : {
    bottom: 4,
    right:  4,
    width:  50,
    height: 50,

    font: {
        fontSize: "16dp"
    },
    color: "white",

    borderRadius: 25,

    backgroundColor:         "#00AA00",
    backgroundFocusedColor:  "#33CC33",
    backgroundSelectedColor: "#33CC33"
}

index.xml

<Alloy>
    <Window id="win" title="Mensajes" layout="vertical">
    	<View id="chatWrapper">
		    <View id="container">
		        <ListView id="listView">
		            <Templates>
		                <ItemTemplate name="messageOnTheLeft">
		                    <View class="listItem">
		                        <View class="message-row">
		                            <View class="message-box left">
		                                <Label class="message" bindId="message" />
		                            </View>
		                        </View>
		                        <Label class="date" bindId="messageDate" />
		                    </View>
		                </ItemTemplate>
		
		                <ItemTemplate name="messageOnTheRight">
		                    <View class="listItem">
		                        <View class="message-row">
		                            <View class="message-box right">
		                                <Label class="message" bindId="message" />
		                            </View>
		                        </View>
		                        <Label class="date" bindId="messageDate" />
		                    </View>
		                </ItemTemplate>
		            </Templates>
		
		            <ListSection dataCollection="chat" dataFunction="renderMessages" dataTransform="setTemplate">
		                <ListItem template="{template}" message:text="{content}" messageDate:text="{date}" />
		            </ListSection>
		
		        </ListView>
		        <View id="chatTextFieldContainer">
		            <TextArea id="typingArea" />
		            <View id="btnWrapper">
		                <Button id="sendBtn" title=">" onClick="send" />
		            </View>
		        </View>
		    </View>
		</View>
    </Window>
</Alloy>