test: UI with form validation

cypress/fixtures/data_field_validation_doctype.js

@@ -0,0 +1,57 @@
+export default {
+	name: 'Validation Test',
+	custom: 1,
+	actions: [],
+	creation: '2019-03-15 06:29:07.215072',
+	doctype: 'DocType',
+	editable_grid: 1,
+	engine: 'InnoDB',
+	fields: [
+		{
+			fieldname: 'email',
+			fieldtype: 'Data',
+			label: 'Email',
+            options: 'Email'
+		},
+		{
+			fieldname: 'URL',
+			fieldtype: 'Data',
+			label: 'URL',
+            options: 'URL'
+		},
+		{
+			fieldname: 'Phone',
+			fieldtype: 'Data',
+			label: 'Phone',
+			options: 'Phone'
+		},
+		{
+			fieldname: 'person_name',
+			fieldtype: 'Data',
+			label: 'Person Name',
+			options: 'Name'
+		}
+	],
+	issingle: 1,
+	links: [],
+	modified: '2021-04-19 14:40:53.127615',
+	modified_by: 'Administrator',
+	module: 'Custom',
+	owner: 'Administrator',
+	permissions: [
+		{
+			create: 1,
+			delete: 1,
+			email: 1,
+			print: 1,
+			read: 1,
+			role: 'System Manager',
+			share: 1,
+			write: 1
+		}
+	],
+	quick_entry: 1,
+	sort_field: 'modified',
+	sort_order: 'ASC',
+	track_changes: 1
+};

cypress/integration/data_field_form_validation.js

@@ -0,0 +1,39 @@
+import data_field_validation_doctype from '../fixtures/data_field_validation_doctype';
+const doctype_name = data_field_validation_doctype.name;
+
+
+context('Data Field Input Validation in New Form', () => {
+	before(() => {
+		cy.login();
+		cy.visit('/app/website');
+		return cy.insert_doc('DocType', data_field_validation_doctype, true);
+	});
+
+	function validateField(fieldname, invalid_value, valid_value) {
+		// Invalid, should have has-error class
+		cy.get_field(fieldname).type(invalid_value).blur();
+		cy.get(`.frappe-control[data-fieldname="${fieldname}"]`).should('have.class', 'has-error');
+		// Valid value, should not have has-error class
+		cy.get_field(fieldname).clear().type(valid_value);
+		cy.get(`.frappe-control[data-fieldname="${fieldname}"]`).should('not.have.class', 'has-error');
+	}
+
+    describe('Data Field Options', () => {
+		it('should validate email address', () => {
+			cy.new_form(doctype_name);
+			validateField('email', 'captian', 'hello@test.com');
+		});
+
+		it('should validate URL', () => {
+			validateField('url', 'jkl', 'https://frappe.io');
+		});
+
+		it('should validate phone number', () => {
+			validateField('phone', 'america', '89787878');
+		});
+
+		it('should validate name', () => {
+			validateField('person_name', ' 777Hello', 'James Bond');
+		});
+    });
+});