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:
`,
- ]
+ ],
+ // :refs tests
+ [
+ // Prepare the state & variables
+ (vars) => {
+ state = {};
+ state.my_button = vars.set('my_button', Optional(null));
+ },
+ // Template
+ `
+
+ `,
+ // Expected result
+ `
+ test1
+ `,
+ () => {
+
+ const my_button = state.my_button.value;
+
+ if (!my_button) {
+ throw new Error('The `` 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');
+ },
+ `
+ test2
+ `,
+ ],
];
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
+ * @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
+ * @since 1.4.0
+ * @version 1.4.0
+ */
+TestRefButton.setTemplateFile('elements/test_ref_button');
+
+/**
+ * The span element
+ *
+ * @author Jelle De Loecker
+ * @since 1.4.0
+ * @version 1.4.0
+ */
+TestRefButton.defineStateVariable('span_element', {
+ type : 'element',
+ default : null,
+});
+
+/**
+ * The message to render
+ *
+ * @author Jelle De Loecker
+ * @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 @@
+{{ state:message{:} }}
\ No newline at end of file