From 6740b2cfddd1937d0987856eb1c3ba155aea05c5 Mon Sep 17 00:00:00 2001
From: jdecroock <decroockjovi@gmail.com>
Date: Sun, 29 Dec 2024 11:43:18 +0100
Subject: [PATCH] Add ts test

---
 test/ts/custom-elements.tsx | 47 +++++++++++++++++++++++++++++++++----
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/test/ts/custom-elements.tsx b/test/ts/custom-elements.tsx
index c606d6a7f8..d28d4bebfa 100644
--- a/test/ts/custom-elements.tsx
+++ b/test/ts/custom-elements.tsx
@@ -41,7 +41,7 @@ interface WhateveElAttributes extends createElement.JSX.HTMLAttributes {
 }
 
 // Ensure context still works
-const { Provider, Consumer } = createContext({ contextValue: '' });
+const Ctx = createContext({ contextValue: '' });
 
 // Sample component that uses custom elements
 
@@ -50,7 +50,7 @@ class SimpleComponent extends Component {
 	render() {
 		// Render inside div to ensure standard JSX elements still work
 		return (
-			<Provider value={{ contextValue: 'value' }}>
+			<Ctx.Provider value={{ contextValue: 'value' }}>
 				<div>
 					<clickable-ce
 						onClick={e => {
@@ -73,11 +73,48 @@ class SimpleComponent extends Component {
 					></custom-whatever>
 
 					{/* Ensure context still works */}
-					<Consumer>
+					<Ctx.Consumer>
 						{({ contextValue }) => contextValue.toLowerCase()}
-					</Consumer>
+					</Ctx.Consumer>
 				</div>
-			</Provider>
+			</Ctx.Provider>
+		);
+	}
+}
+
+class SimpleComponentWithContextAsProvider extends Component {
+	componentProp = 'componentProp';
+	render() {
+		// Render inside div to ensure standard JSX elements still work
+		return (
+			<Ctx value={{ contextValue: 'value' }}>
+				<div>
+					<clickable-ce
+						onClick={e => {
+							// `this` should be instance of SimpleComponent since this is an
+							// arrow function
+							console.log(this.componentProp);
+
+							// Validate `currentTarget` is HTMLElement
+							console.log('clicked ', e.currentTarget.style.display);
+						}}
+					></clickable-ce>
+					<color-picker space="rgb" dir="rtl"></color-picker>
+					<custom-whatever
+						dir="auto" // Inherited prop from HTMLAttributes
+						someattribute="string"
+						onsomeevent={function (e) {
+							// Validate `this` and `e` are the right type
+							console.log('clicked', this.instanceProp, e.eventProp);
+						}}
+					></custom-whatever>
+
+					{/* Ensure context still works */}
+					<Ctx.Consumer>
+						{({ contextValue }) => contextValue.toLowerCase()}
+					</Ctx.Consumer>
+				</div>
+			</Ctx>
 		);
 	}
 }