Add more runtime tests.

Author: jacwright

test/js/samples/behavior/expected-bundle.js renamed to test/js/samples/trait/expected-bundle.js

@@ -0,0 +1,46 @@
+<button with:tooltip="t('perform_action')">action</button>
+
+<script>
+	const translations = {
+		perform_action: 'Perform an Action'
+	};
+
+	function t(key) {
+		return translations[key] || `{{${key}}}`;
+	}
+
+	export default {
+		data() {
+			return { t };
+		},
+
+		traits: {
+			tooltip(node, text) {
+				let tooltip = null;
+
+				function onMouseEnter() {
+					tooltip = document.createElement('div');
+					tooltip.classList.add('tooltip');
+					tooltip.textContent = text;
+					node.parentNode.appendChild(tooltip);
+				}
+
+				function onMouseLeave() {
+					if (!tooltip) return;
+					tooltip.remove();
+					tooltip = null;
+				}
+
+				node.addEventListener('mouseenter', onMouseEnter);
+				node.addEventListener('mouseleave', onMouseLeave);
+				
+				return {
+					destroy() {
+						node.removeEventListener('mouseenter', onMouseEnter);
+						node.removeEventListener('mouseleave', onMouseLeave);
+					}
+				}
+			}
+		}
+	}
+</script>

test/js/samples/behavior/expected.js renamed to test/js/samples/trait/expected.js

@@ -0,0 +1,29 @@
+export default {
+	html: `
+		<button>action</button>
+	`,
+
+	test ( assert, component, target, window ) {
+		const button = target.querySelector( 'button' );
+		const eventEnter = new window.MouseEvent( 'mouseenter' );
+		const eventLeave = new window.MouseEvent( 'mouseleave' );
+		const ctrlPress = new window.KeyboardEvent( 'keydown', { ctrlKey: true } );
+
+		button.dispatchEvent( eventEnter );
+		assert.htmlEqual( target.innerHTML, `
+		<button>action</button>
+		<div class="tooltip">Perform an Action</div>
+		` );
+
+		window.dispatchEvent( ctrlPress );
+		assert.htmlEqual( target.innerHTML, `
+		<button>action</button>
+		<div class="tooltip">Perform an augmented Action</div>
+		` );
+
+		button.dispatchEvent( eventLeave );
+		assert.htmlEqual( target.innerHTML, `
+			<button>action</button>
+		` );
+	}
+};

test/js/samples/behavior/input.html renamed to test/js/samples/trait/input.html

@@ -0,0 +1,52 @@
+<button with:tooltip="tooltip">action</button>
+<:Window on:keydown="checkForCtrl(event)" on:keyup="checkForCtrl(event)"/>
+
+<script>
+	export default {
+		data() {
+			return { tooltip: 'Perform an Action' };
+		},
+
+		methods: {
+			checkForCtrl(event) {
+				if (event.ctrlKey) {
+					this.set({ tooltip: 'Perform an augmented Action' });
+				} else {
+					this.set({ tooltip: 'Perform an Action' });
+				}
+			}
+		},
+
+		traits: {
+			tooltip(node, text) {
+				let tooltip = null;
+
+				function onMouseEnter() {
+					tooltip = document.createElement('div');
+					tooltip.classList.add('tooltip');
+					tooltip.textContent = text;
+					node.parentNode.appendChild(tooltip);
+				}
+
+				function onMouseLeave() {
+					if (!tooltip) return;
+					tooltip.remove();
+					tooltip = null;
+				}
+
+				node.addEventListener('mouseenter', onMouseEnter);
+				node.addEventListener('mouseleave', onMouseLeave);
+				
+				return {
+					update(text) {
+						if (tooltip) tooltip.textContent = text;
+					},
+					destroy() {
+						node.removeEventListener('mouseenter', onMouseEnter);
+						node.removeEventListener('mouseleave', onMouseLeave);
+					}
+				}
+			}
+		}
+	}
+</script>

test/runtime/samples/behavior/_config.js renamed to test/runtime/samples/trait-function/_config.js

@@ -0,0 +1,22 @@
+export default {
+	html: `
+		<button>action</button>
+	`,
+
+	test ( assert, component, target, window ) {
+		const button = target.querySelector( 'button' );
+		const eventEnter = new window.MouseEvent( 'mouseenter' );
+		const eventLeave = new window.MouseEvent( 'mouseleave' );
+
+		button.dispatchEvent( eventEnter );
+		assert.htmlEqual( target.innerHTML, `
+			<button>action</button>
+			<div class="tooltip">Perform an Action</div>
+		` );
+
+		button.dispatchEvent( eventLeave );
+		assert.htmlEqual( target.innerHTML, `
+			<button>action</button>
+		` );
+	}
+};