test: Context passing to children

Author: ffriedl89

src/index.test.jsx

@@ -1,5 +1,6 @@
 import { assert } from '@open-wc/testing';
-import { h } from 'preact';
+import { h, createContext } from 'preact';
+import { useContext } from 'preact/hooks';
 import registerElement from './index';
 
 function Clock({ time }) {
@@ -113,3 +114,45 @@ it('handles kebab-case attributes with passthrough', () => {
 
 	document.body.removeChild(root);
 });
+
+const Theme = createContext('light');
+
+function DisplayTheme() {
+	const theme = useContext(Theme);
+	return <p>Active theme: {theme}</p>;
+}
+
+registerElement(DisplayTheme, 'x-display-theme', [], { shadow: true });
+
+function Parent({ children }) {
+	return (
+		<Theme.Provider value="dark">
+			<div class="children">{children}</div>
+		</Theme.Provider>
+	);
+}
+
+registerElement(Parent, 'x-parent', [], { shadow: true });
+
+it('passes down information using context over custom element boundaries', () => {
+	const root = document.createElement('div');
+	const el = document.createElement('x-parent');
+
+	const noSlot = document.createElement('x-display-theme');
+	el.appendChild(noSlot);
+
+	root.appendChild(el);
+	document.body.appendChild(root);
+
+	assert.equal(
+		root.innerHTML,
+		'<x-parent><x-display-theme></x-display-theme></x-parent>'
+	);
+
+	const shadowHTML = document.querySelector('x-display-theme').shadowRoot
+		.innerHTML;
+
+	assert.equal(shadowHTML, '<p>Active theme: dark</p>');
+
+	document.body.removeChild(root);
+});