[UI Test] UI Test for ControlHTML

frappe/public/js/frappe/form/controls/html.js

@@ -2,7 +2,7 @@ frappe.ui.form.ControlHTML = frappe.ui.form.Control.extend({
 	make: function() {
 		this._super();
 		this.disp_area = this.wrapper;
-		this.frm.$wrapper.on('blur change', () => {
+		$(document).on('change', () => {
 			setTimeout(() => this.refresh_input(), 500);
 		});
 	},
@@ -12,7 +12,11 @@ frappe.ui.form.ControlHTML = frappe.ui.form.Control.extend({
 	},
 	get_content: function() {
 		var content = this.df.options || "";
-		return frappe.render(content, this);
+		try {
+			return frappe.render(content, this);
+		} catch (e) {
+			return content;
+		}
 	},
 	html: function(html) {
 		this.$wrapper.html(html || this.get_content());

frappe/tests/ui/test_control_html.js

@@ -0,0 +1,51 @@
+QUnit.module('controls');
+
+QUnit.test("Test ControlHTML", function(assert) {
+	assert.expect(3);
+	const random_name = frappe.utils.get_random(3).toLowerCase();
+
+	let done = assert.async();
+
+	frappe.run_serially([
+		() => {
+			return frappe.tests.make('Custom Field', [
+				{dt: 'ToDo'},
+				{fieldtype: 'HTML'},
+				{label: random_name},
+				{options: '<h3> Test </h3>'}
+			]);
+		},
+		() => {
+			return frappe.tests.make('Custom Field', [
+				{dt: 'ToDo'},
+				{fieldtype: 'HTML'},
+				{label: random_name + "_template"},
+				{options: '<h3> Test {%= doc.status %} </h3>'}
+			]);
+		},
+		() => frappe.set_route('List', 'ToDo'),
+		() => frappe.new_doc('ToDo'),
+		() => {
+			if (frappe.quick_entry)
+			{
+				frappe.quick_entry.dialog.$wrapper.find('.edit-full').click();
+				return frappe.timeout(1);
+			}
+		},
+		() => {
+			const control = $(`.frappe-control[data-fieldname="${random_name}"]`)[0];
+			return assert.ok(control.innerHTML === '<h3> Test </h3>');
+		},
+		() => {
+			const control = $(`.frappe-control[data-fieldname="${random_name}_template"]`)[0];
+			return assert.ok(control.innerHTML === '<h3> Test Open </h3>');
+		},
+		() => frappe.tests.set_control("status", "Closed"),
+		() => frappe.timeout(1),
+		() => {
+			const control = $(`.frappe-control[data-fieldname="${random_name}_template"]`)[0];
+			return assert.ok(control.innerHTML === '<h3> Test Closed </h3>');
+		},
+		() => done()
+	]);
+});

frappe/tests/ui/tests.txt

@@ -13,3 +13,4 @@ frappe/custom/doctype/customize_form/test_customize_form.js
 frappe/desk/doctype/event/test_event.js
 frappe/workflow/doctype/workflow/tests/test_workflow_create.js
 frappe/workflow/doctype/workflow/tests/test_workflow_test.js
+frappe/tests/ui/test_control_html.js