From 236ff2183498f616efd7efa8ffbff47b390cfb10 Mon Sep 17 00:00:00 2001
From: Jelle De Loecker <jelle@elevenways.be>
Date: Sat, 15 Jun 2024 12:33:06 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20Add=20a=20`:ref`=20test?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/10-expressions.js                      | 45 ++++++++++++++++++++-
 test/helpers/_load.js                       |  1 +
 test/helpers/test_ref_button.js             | 38 +++++++++++++++++
 test/templates/elements/test_ref_button.hwk |  1 +
 4 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 test/helpers/test_ref_button.js
 create mode 100644 test/templates/elements/test_ref_button.hwk

diff --git a/test/10-expressions.js b/test/10-expressions.js
index d4201d2..d29f5cc 100644
--- a/test/10-expressions.js
+++ b/test/10-expressions.js
@@ -1383,7 +1383,50 @@ This should be a converted variable:
 						<state-value-test id="two"><i id="itwo" result="1stchange"></i></state-value-test>
 					</div>
 				`,
-			]
+			],
+			// :refs tests
+			[
+				// Prepare the state & variables
+				(vars) => {
+					state = {};
+					state.my_button = vars.set('my_button', Optional(null));
+				},
+				// Template
+				`
+					<test-ref-button
+						id="one"
+						:ref={% my_button %}
+						state:message="test1"
+					></test-ref-button>
+				`,
+				// Expected result
+				`
+					<test-ref-button id="one"><span>test1</span></test-ref-button>
+				`,
+				() => {
+
+					const my_button = state.my_button.value;
+
+					if (!my_button) {
+						throw new Error('The `<test-ref-button>` element should have been stored in the `my_button` variable');
+					}
+
+					assert.strictEqual(my_button.id, 'one');
+
+					const span = my_button.getState('span_element');
+
+					if (!span) {
+						throw new Error('The span element should have been stored in the `span_element` state');
+					}
+
+					assert.strictEqual(span.textContent, 'test1');
+
+					my_button.setState('message', 'test2');
+				},
+				`
+					<test-ref-button id="one"><span>test2</span></test-ref-button>
+				`,
+			],
 		];
 
 		createReactiveTests(tests);
diff --git a/test/helpers/_load.js b/test/helpers/_load.js
index 8699b26..fa94b20 100644
--- a/test/helpers/_load.js
+++ b/test/helpers/_load.js
@@ -20,4 +20,5 @@ module.exports = function loadHawkejs(hawkejs) {
 	hawkejs.load(test_base + '/helpers/with_prepared_variables.js');
 	hawkejs.load(test_base + '/helpers/print_variables_element.js');
 	hawkejs.load(test_base + '/helpers/state_value_test.js');
+	hawkejs.load(test_base + '/helpers/test_ref_button.js');
 }
\ No newline at end of file
diff --git a/test/helpers/test_ref_button.js b/test/helpers/test_ref_button.js
new file mode 100644
index 0000000..e38abee
--- /dev/null
+++ b/test/helpers/test_ref_button.js
@@ -0,0 +1,38 @@
+/**
+ * Test-ref-button custom element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    1.4.0
+ * @version  1.4.0
+ */
+const TestRefButton = Blast.Bound.Function.inherits('Hawkejs.Element', 'TestRefButton');
+
+/**
+ * The template to use for the content of this element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    1.4.0
+ * @version  1.4.0
+ */
+TestRefButton.setTemplateFile('elements/test_ref_button');
+
+/**
+ * The span element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    1.4.0
+ * @version  1.4.0
+ */
+TestRefButton.defineStateVariable('span_element', {
+	type    : 'element',
+	default : null,
+});
+
+/**
+ * The message to render
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    1.4.0
+ * @version  1.4.0
+ */
+TestRefButton.defineStateVariable('message');
\ No newline at end of file
diff --git a/test/templates/elements/test_ref_button.hwk b/test/templates/elements/test_ref_button.hwk
new file mode 100644
index 0000000..aef2e15
--- /dev/null
+++ b/test/templates/elements/test_ref_button.hwk
@@ -0,0 +1 @@
+<span :ref={% state:span_element %}>{{ state:message{:} }}</span>
\ No newline at end of file