test deeply nested bindings

test/compiler/component-binding-nested/Bar.html

@@ -0,0 +1,12 @@
+<button class='bar' on:click='set({ x: "q" })'>bar</button>
+<p>bar x: {{x}}</p>
+
+<Baz bind:x/>
+
+<script>
+	import Baz from './Baz.html';
+
+	export default {
+		components: { Baz }
+	};
+</script>

test/compiler/component-binding-nested/Baz.html

@@ -0,0 +1,2 @@
+<button class='baz' on:click='set({ x: "r" })'>baz</button>
+<p>baz x: {{x}}</p>

test/compiler/component-binding-nested/Foo.html

@@ -0,0 +1,12 @@
+<button class='foo' on:click='set({ x: "p" })'>foo</button>
+<p>foo x: {{x}}</p>
+
+<Bar bind:x/>
+
+<script>
+	import Bar from './Bar.html';
+
+	export default {
+		components: { Bar }
+	};
+</script>

test/compiler/component-binding-nested/_config.js

@@ -0,0 +1,59 @@
+export default {
+	data: {
+		x: 'initial'
+	},
+
+	html: `
+		<p>x: initial</p>
+		<button class="foo">foo</button>
+		<p>foo x: initial</p>
+		<button class="bar">bar</button>
+		<p>bar x: initial</p>
+		<button class="baz">baz</button>
+		<p>baz x: initial</p>
+	`,
+
+	test ( assert, component, target, window ) {
+		const click = new window.MouseEvent( 'click' );
+		const buttons = [ ...target.querySelectorAll( 'button' ) ];
+
+		buttons[0].dispatchEvent( click );
+
+		assert.equal( component.get( 'x' ), 'p' );
+		assert.htmlEqual( target.innerHTML, `
+			<p>x: p</p>
+			<button class="foo">foo</button>
+			<p>foo x: p</p>
+			<button class="bar">bar</button>
+			<p>bar x: p</p>
+			<button class="baz">baz</button>
+			<p>baz x: p</p>
+		` );
+
+		buttons[1].dispatchEvent( click );
+
+		assert.equal( component.get( 'x' ), 'q' );
+		assert.htmlEqual( target.innerHTML, `
+			<p>x: q</p>
+			<button class="foo">foo</button>
+			<p>foo x: q</p>
+			<button class="bar">bar</button>
+			<p>bar x: q</p>
+			<button class="baz">baz</button>
+			<p>baz x: q</p>
+		` );
+
+		buttons[2].dispatchEvent( click );
+
+		assert.equal( component.get( 'x' ), 'r' );
+		assert.htmlEqual( target.innerHTML, `
+			<p>x: r</p>
+			<button class="foo">foo</button>
+			<p>foo x: r</p>
+			<button class="bar">bar</button>
+			<p>bar x: r</p>
+			<button class="baz">baz</button>
+			<p>baz x: r</p>
+		` );
+	}
+};

test/compiler/component-binding-nested/main.html

@@ -0,0 +1,11 @@
+<p>x: {{x}}</p>
+
+<Foo bind:x/>
+
+<script>
+	import Foo from './Foo.html';
+
+	export default {
+		components: { Foo }
+	};
+</script>