Etemplate: Some more tests for readonly

api/js/etemplate/Et2Date/test/Et2Date.test.ts

@@ -5,15 +5,12 @@ import {assert, elementUpdated, fixture} from '@open-wc/testing';
 import {Et2Date} from "../Et2Date";
 import {html} from "lit-element";
 import * as sinon from 'sinon';
+import {inputBasicTests} from "../../Et2InputWidget/test/InputBasicTests";
 
-describe("Date widget", () =>
+let element : Et2Date;
+
+async function before()
 {
-	// Reference to component under test
-	let element : Et2Date;
-
-	// Setup run before each test
-	beforeEach(async() =>
-	{
 	// Create an element to test with, and wait until it's ready
 	// @ts-ignore
 	element = await fixture<Et2Date>(html`
@@ -32,7 +29,14 @@ describe("Date widget", () =>
 	window.egw = {
 		preference: () => 'Y-m-d'
 	};
-	});
+
+	return element;
+};
+
+describe("Date widget", () =>
+{
+	// Setup run before each test
+	beforeEach(before);
 
 	// Make sure it works
 	it('is defined', () =>
@@ -47,25 +51,6 @@ describe("Date widget", () =>
 		assert.equal(element.querySelector("[slot='label']").textContent, "Label set");
 	})
 
-	it('Readonly does not return a value', async() =>
-	{
-		element.readOnly = true;
-		let test_time_string = '2008-09-22T12:00:00.000Z';
-
-		element.set_value(test_time_string);
-
-
-		// wait for asychronous changes to the DOM
-		await elementUpdated(element);
-		// Read-only widget returns null
-		assert.equal(element.getValue(), null);
-	});
-
-	it('No value shows no value', () =>
-	{
-		assert.equal(element.querySelector("input").textContent, "");
-		assert.equal(element.get_value(), null);
-	});
 
 	it("'0' shows no value", async() =>
 	{
@@ -123,3 +108,4 @@ describe("Date widget", () =>
 		});
 	}
 });
+inputBasicTests(before, "2008-09-22T00:00:00.000Z", "input");

api/js/etemplate/Et2InputWidget/Et2InputWidget.ts

@@ -25,6 +25,8 @@ export declare class Et2InputWidgetInterface
 
 	public getValue() : any;
 
+	public set_readonly(boolean) : void;
+
 	public isDirty() : boolean;
 
 	public resetDirty() : void;

api/js/etemplate/Et2InputWidget/test/InputBasicTests.ts

@@ -0,0 +1,101 @@
+import {Et2InputWidgetInterface} from "../Et2InputWidget";
+import {assert, elementUpdated} from "@open-wc/testing";
+
+
+/**
+ * Some basic, common tests that any decent input widget should pass
+ *
+ * Have your widget creation in a separate function, and pass it in along with a "good" value.
+ * Checking "bad" values and error conditions are widget-specific, so you have to handle those in your own tests.
+ * This is just a starting point, and to make sure that if a widget doesn't pass these, there's something
+ * wrong.
+ *
+ * @example
+ * async function before()
+ * {
+ * 	// Create an element to test with, and wait until it's ready
+ * 	// @ts-ignore
+ * 	element = await fixture<Et2Date>(html`
+ *         <et2-date label="I'm a date"></et2-date>
+ * 	`);
+ * 	}
+ * inputBasicTests(before, "2008-09-22T00:00:00.000Z", "input");
+ *
+ * @param {Function} beforeEach function to create / setup the widget
+ * @param {string} test_value A "good" value
+ * @param {string} value_selector Passed to document.querySelector() to check that the value is displayed
+ */
+
+// Widget used in each test
+let element : Et2InputWidgetInterface;
+
+export function inputBasicTests(before : Function, test_value : string, value_selector : string)
+{
+	describe("Readonly tests", () =>
+	{
+		beforeEach(async() =>
+		{
+			element = await before();
+		});
+
+		it('Does not return a value (via attribute)', async() =>
+		{
+			element.readOnly = true;
+
+			element.set_value(test_value);
+
+			// wait for asychronous changes to the DOM
+			await elementUpdated(<Element><unknown>element);
+			// Read-only widget returns null
+			assert.equal(element.getValue(), null);
+		});
+
+		it('Does not return a value (via method)', async() =>
+		{
+			(<Et2InputWidgetInterface>element).set_readonly(true);
+
+			element.set_value(test_value);
+
+			// wait for asychronous changes to the DOM
+			await elementUpdated(<Element><unknown>element);
+			// Read-only widget returns null
+			assert.equal(element.getValue(), null);
+		});
+
+		it('Does not return a value if it goes readonly after having a value', async() =>
+		{
+			element.set_value(test_value);
+
+			element.set_readonly(true);
+
+			// wait for asychronous changes to the DOM
+			await elementUpdated(<Element><unknown>element);
+			// Read-only widget returns null
+			assert.equal(element.getValue(), null);
+		});
+	});
+
+	describe("In/Out value tests", () =>
+	{
+		beforeEach(async() =>
+		{
+			element = await before();
+		});
+		it('No value shows no value', () =>
+		{
+			assert.equal((<Element><unknown>element).querySelector(value_selector).textContent, "");
+			assert.equal(element.get_value(), null);
+		});
+
+		it('Value out matches value in', async() =>
+		{
+			element.set_value(test_value);
+
+			// wait for asychronous changes to the DOM
+			await elementUpdated(<Element><unknown>element);
+
+			// widget returns what we gave it
+			assert.equal(element.get_value(), test_value);
+		});
+	})
+}