Updated and added more tests

kriszyp · kriszyp · commit c601dc268988 · 2013-07-23T09:05:16.000-06:00
diff --git a/test/component.css b/test/component.css
@@ -0,0 +1,25 @@
+popup-message = {
+	label = var: 'More information';
+	content: Here is more information;
+	
+	popup-model = module('xstyle/test/popup-model');
+	=>
+		button (label) {
+			on-click: popup-model/toggle();
+		},
+		div (content) {
+			position: absolute;
+			background-color: #aaa;
+		};
+}
+
+body {
+	=>
+		popup-message {
+			label: Another Popup;
+			content: Contents of another popup;
+		}
+		popup-message 
+			span 'Contents with a '
+			a[href=somepage] 'link';
+}
diff --git a/test/contacts.js b/test/contacts.js
@@ -1,24 +1,31 @@
 define(['dojo/store/Memory', 'dojo/store/Observable', 'dbind/bind', 'dbind/navigation'], function(Memory, Observable, bind, navigation){
+	// create an observable memory store with our test data 
 	contactStore = new Observable(new Memory({data:[
 		{id:1, firstName: 'Jimi', lastName:'Hendrix', email:'jimi@hendrix.com'},
 		{id:2, firstName: 'Janis', lastName:'Joplin', email:'janis@fulltilt.com'},		
 		{id:3, firstName: 'Jim', lastName:'Morrison', email:'jm@thedoors.com'},		
 		{id:4, firstName: 'Kurt', lastName:'Cobain', email:'cobain@nirvana.org'},		
 		{id:5, firstName: 'Amy', lastName:'Winehouse', email:'amy@wh.com'},			
 	]}));
+	// create a base binding, that we can set properties on
 	contacts = bind({});
 	contacts.set('list', contactStore.query({}));
 	contacts.set('select', function(item){
 		contacts.set('selected', item);
 	});
 	contacts.set('selected', {firstName: '', lastName: '', id:''});
+	var firstName = contacts.get('selected').get('firstName');
+	firstName.receive(function(value){
+		firstName.set('error', value && value.length < 3 ? 'Name must be at least three characters' : '');
+	});
 	contacts.set('save', function(selected){
 		contactStore.put(selected);
 	});
 	var nextId = 3;
 	contacts.set('create', function(selected){
 		contacts.set('selected', {firstName:'', lastName: '', email: '', id: nextId++});
 	});
+	// add navigation support
 	navigation(contacts.get('selected'), {
 		store: contactStore
 	});
diff --git a/test/content.css b/test/content.css
@@ -0,0 +1,16 @@
+test-component {
+	=>
+		h1 'header' { color: red}
+		p (content)
+};
+body {
+	=>
+		test-component {
+			=>
+				div.nested 'nested'
+		}
+		test-component div.inline 'inline'
+		test-component {
+			content: 'as property';
+		};
+}
diff --git a/test/test.html b/test/test.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+	<meta charset="UTF-8">
+	<title>Test Xstyle Functionality</title>
+	<script>
+		document.write('<link rel="stylesheet" href="' + location.search.slice(1) + '.css" />');
+	</script>
+	<script src="../../dojo/dojo.js" data-dojo-config="async:true, deps:['xstyle/main']"></script>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/test/tutorial.css b/test/tutorial.css
@@ -17,6 +17,7 @@ body {
 				h2 (selected/firstName + ' ' + selected/lastName),
 				label.start-row 'First Name:',
 				input[type=text] (selected/firstName),
+				span.error (selected/firstName/error)
 				label.start-row 'Last Name:',
 				input[type=text] (selected/lastName),
 				label.start-row 'Email:',
@@ -38,3 +39,6 @@ body {
 h2 {
 	margin-top: 0;
 }
+.error {
+	color: red;
+}
