From d310b3a1252f0e5d116c9cc176a72a7ddaeac8d6 Mon Sep 17 00:00:00 2001
From: Jovi De Croock <decroockjovi@gmail.com>
Date: Tue, 31 Dec 2024 10:11:17 +0100
Subject: [PATCH] add test

---
 src/create-context.js              |  2 +-
 test/browser/createContext.test.js | 34 ++++++++++++++++++++++++++++++
 test/ts/custom-elements.tsx        | 17 +++++++++++++++
 3 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/src/create-context.js b/src/create-context.js
index d9ec9904e8..8ecaec9ea5 100644
--- a/src/create-context.js
+++ b/src/create-context.js
@@ -3,7 +3,6 @@ import { enqueueRender } from './component';
 export let i = 0;
 
 export function createContext(defaultValue) {
-	/** @type {import('./internal').FunctionComponent} */
 	function Context(props) {
 		if (!this.getChildContext) {
 			/** @type {Set<import('./internal').Component> | null} */
@@ -18,6 +17,7 @@ export function createContext(defaultValue) {
 			};
 
 			this.shouldComponentUpdate = function (_props) {
+				// @ts-expect-error even
 				if (this.props.value !== _props.value) {
 					subs.forEach(c => {
 						c._force = true;
diff --git a/test/browser/createContext.test.js b/test/browser/createContext.test.js
index ca4f17cbbe..41850aad90 100644
--- a/test/browser/createContext.test.js
+++ b/test/browser/createContext.test.js
@@ -57,6 +57,40 @@ describe('createContext', () => {
 		expect(scratch.innerHTML).to.equal('<div><div>a</div></div>');
 	});
 
+	it('should pass context to a consumer (non-provider)', () => {
+		const Ctx = createContext(null);
+		const CONTEXT = { a: 'a' };
+
+		let receivedContext;
+
+		class Inner extends Component {
+			render(props) {
+				return <div>{props.a}</div>;
+			}
+		}
+
+		sinon.spy(Inner.prototype, 'render');
+
+		render(
+			<Ctx value={CONTEXT}>
+				<div>
+					<Ctx.Consumer>
+						{data => {
+							receivedContext = data;
+							return <Inner {...data} />;
+						}}
+					</Ctx.Consumer>
+				</div>
+			</Ctx>,
+			scratch
+		);
+
+		// initial render does not invoke anything but render():
+		expect(Inner.prototype.render).to.have.been.calledWithMatch(CONTEXT);
+		expect(receivedContext).to.equal(CONTEXT);
+		expect(scratch.innerHTML).to.equal('<div><div>a</div></div>');
+	});
+
 	// This optimization helps
 	// to prevent a Provider from rerendering the children, this means
 	// we only propagate to children.
diff --git a/test/ts/custom-elements.tsx b/test/ts/custom-elements.tsx
index 59775c1818..f943b7c930 100644
--- a/test/ts/custom-elements.tsx
+++ b/test/ts/custom-elements.tsx
@@ -83,3 +83,20 @@ class SimpleComponent extends Component {
 }
 
 const component = <SimpleComponent />;
+class SimpleComponentWithContextAsProvider extends Component {
+	componentProp = 'componentProp';
+	render() {
+		// Render inside div to ensure standard JSX elements still work
+		return (
+			<Ctx value={{ contextValue: 'value' }}>
+				<div>
+					{/* Ensure context still works */}
+					<Ctx.Consumer>
+						{({ contextValue }) => contextValue.toLowerCase()}
+					</Ctx.Consumer>
+				</div>
+			</Ctx>
+		);
+	}
+}
+const component2 = <SimpleComponentWithContextAsProvider />;