add validation meta

src/widget-core/meta/InputValidity.ts

@@ -0,0 +1,25 @@
+import Base from './Base';
+
+export class InputValidity extends Base {
+	get(key: string | number, value: string) {
+		const node = this.getNode(key) as HTMLFormElement | undefined;
+
+		if (!node) {
+			return { valid: undefined, message: '' };
+		}
+
+		if (value !== node.value) {
+			// if the vdom is out of sync with the real dom our
+			// validation check will be one render behind.
+			// Call invalidate on the next loop.
+			setTimeout(() => this.invalidate());
+		}
+
+		return {
+			valid: node.validity.valid,
+			message: node.validationMessage
+		};
+	}
+}
+
+export default InputValidity;

tests/widget-core/unit/meta/InputValidity.ts

@@ -0,0 +1,86 @@
+const { registerSuite } = intern.getPlugin('jsdom');
+const { assert } = intern.getPlugin('chai');
+import { createSandbox, SinonStub } from 'sinon';
+import InputValidity from '../../../../src/widget-core/meta/InputValidity';
+
+import NodeHandler from '../../../../src/widget-core/NodeHandler';
+import WidgetBase from '../../../../src/widget-core/WidgetBase';
+
+const sandbox = createSandbox();
+let bindInstance: WidgetBase;
+let invalidateStub: SinonStub;
+let nodeHandler: NodeHandler;
+
+registerSuite('meta - InputValidity', {
+	async before() {
+		bindInstance = new WidgetBase();
+	},
+
+	beforeEach() {
+		invalidateStub = sandbox.stub();
+		nodeHandler = new NodeHandler();
+	},
+
+	afterEach() {
+		sandbox.restore();
+	},
+
+	tests: {
+		'returns default values when node is not found'() {
+			sandbox.stub(nodeHandler, 'get').returns(undefined);
+			const validity = new InputValidity({
+				invalidate: invalidateStub,
+				nodeHandler,
+				bind: bindInstance
+			});
+
+			const { message, valid } = validity.get('test', 'testValue');
+			assert.strictEqual(message, '');
+			assert.isUndefined(valid);
+		},
+
+		'returns the validity and message for the element'() {
+			sandbox.stub(nodeHandler, 'get').returns({
+				validity: { valid: false },
+				value: 'testValue',
+				validationMessage: 'test validation message'
+			});
+			const validity = new InputValidity({
+				invalidate: invalidateStub,
+				nodeHandler,
+				bind: bindInstance
+			});
+
+			const { message, valid } = validity.get('test', 'testValue');
+			assert.strictEqual(message, 'test validation message');
+			assert.isFalse(valid);
+		},
+
+		async 'calls invalidate if node values do not match'() {
+			const nodeHandler = new NodeHandler();
+			const nodeStub = sandbox
+				.stub(nodeHandler, 'get')
+				.withArgs('input')
+				.returns({
+					validity: { valid: true },
+					value: 'test1',
+					validationMessage: ''
+				});
+
+			const validity = new InputValidity({
+				invalidate: invalidateStub,
+				nodeHandler,
+				bind: bindInstance
+			});
+
+			validity.get('input', 'test2');
+			return new Promise((resolve) => {
+				setTimeout(() => {
+					assert.isTrue(invalidateStub.calledOnce);
+					nodeStub.reset();
+					resolve();
+				}, 10);
+			});
+		}
+	}
+});

tests/widget-core/unit/meta/all.ts

@@ -3,6 +3,7 @@ import './meta';
 import './Dimensions';
 import './Drag';
 import './Focus';
+import './InputValidity';
 import './Intersection';
 import './Resize';
 import './WebAnimation';