✅ Add a :ref test

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);

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');
 }

test/helpers/test_ref_button.js

@@ -0,0 +1,38 @@
+/**
+ * Test-ref-button custom element
+ *
+ * @author   Jelle De Loecker <[email protected]>
+ * @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 <[email protected]>
+ * @since    1.4.0
+ * @version  1.4.0
+ */
+TestRefButton.setTemplateFile('elements/test_ref_button');
+
+/**
+ * The span element
+ *
+ * @author   Jelle De Loecker <[email protected]>
+ * @since    1.4.0
+ * @version  1.4.0
+ */
+TestRefButton.defineStateVariable('span_element', {
+	type    : 'element',
+	default : null,
+});
+
+/**
+ * The message to render
+ *
+ * @author   Jelle De Loecker <[email protected]>
+ * @since    1.4.0
+ * @version  1.4.0
+ */
+TestRefButton.defineStateVariable('message');

test/templates/elements/test_ref_button.hwk

@@ -0,0 +1 @@
+<span :ref={% state:span_element %}>{{ state:message{:} }}</span>