twalpole · July 14, 2019 16:08
diff --git a/change_test.rb b/change_test.rb
 require 'bundler/inline'

 gemfile do
  source 'https://rubygems.org'
  gem 'selenium-webdriver', '3.142.3'
  gem 'webdrivers'
  gem 'capybara', '3.25.0'
  gem 'byebug'
  gem 'puma'
 end

 require 'webdrivers'
 require "capybara/dsl"

 html = DATA.read
 app = proc { |env| [200, { "Content-Type" => "text/html" }, [html] ] }

 sess = Capybara::Session.new(:selenium_chrome, app)
 # sess = Capybara::Session.new(:selenium, app)
 sess.visit('/')
 sess.fill_in("contact_email_instant_validation", with: "invalid.email").send_keys(:tab)
 sess.assert_selector("input[aria-invalid='true']")

 __END__

 <!DOCTYPE html>
 <html>
 <head>
 <title>UA</title>
 </head>
 <body>
  <label class="control-label email optional" for="check_sale_customer_contact_email">Contact email</label>
  <input
    aria-required="true"
    id="contact_email_instant_validation"
    class="form-control string tel optional"
    name="check_sale[customer][contact_email]"
    pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$"
    required="required"
    spellcheck="false"
    size="100"
    title="Customer contact email"
    type="email">

 <script>
  function addEvent(node, type, callback) {
    if (node.addEventListener) {
      node.addEventListener(type, function(e) {
        callback(e, e.target);
      }, false);
    } else if (node.attachEvent) {
      node.attachEvent('on' + type, function(e) {
        callback(e, e.srcElement);
      });
    }
  }

   function shouldBeValidated(field) {
    return (
      !(field.getAttribute("readonly") || field.readonly) &&
      !(field.getAttribute("disabled") || field.disabled) &&
      (field.getAttribute("pattern") || field.getAttribute("required"))
    );
  }

   function instantValidation(field) {
    if (shouldBeValidated(field)) {
      const invalid =
        (field.getAttribute("required") && !field.value) ||
        (field.getAttribute("pattern") && field.value && !new RegExp(field.getAttribute("pattern")).test(field.value));

       if (!invalid && field.getAttribute("aria-invalid")) {
        field.removeAttribute("aria-invalid");
      } else if (invalid && !field.getAttribute("aria-invalid")) {
        field.setAttribute("aria-invalid", "true");
      }
    }
  }

   const inputToValidate = document.getElementById("contact_email_instant_validation");

   document.addEventListener('DOMContentLoaded', (event) => {
    addEvent(inputToValidate, "change", function(e, target) {
      instantValidation(target);
    });
  })
 </script>
 </body>
 </html>
	require 'bundler/inline'

	gemfile do
	source 'https://rubygems.org'
	gem 'selenium-webdriver', '3.142.3'
	gem 'webdrivers'
	gem 'capybara', '3.25.0'
	gem 'byebug'
	gem 'puma'
	end

	require 'webdrivers'
	require "capybara/dsl"

	html = DATA.read
	app = proc { \|env\| [200, { "Content-Type" => "text/html" }, [html] ] }

	sess = Capybara::Session.new(:selenium_chrome, app)
	# sess = Capybara::Session.new(:selenium, app)
	sess.visit('/')
	sess.fill_in("contact_email_instant_validation", with: "invalid.email").send_keys(:tab)
	sess.assert_selector("input[aria-invalid='true']")

	__END__

	<!DOCTYPE html>
	<html>
	<head>
	<title>UA</title>
	</head>
	<body>
	<label class="control-label email optional" for="check_sale_customer_contact_email">Contact email</label>
	<input
	aria-required="true"
	id="contact_email_instant_validation"
	class="form-control string tel optional"
	name="check_sale[customer][contact_email]"
	pattern="^(([-\w\d]+)(\.[-\w\d]+)@([-\w\d]+)(\.[-\w\d]+)(\.([a-zA-Z]{2,5}\|[\d]{1,3})){1,2})$"
	required="required"
	spellcheck="false"
	size="100"
	title="Customer contact email"
	type="email">

	<script>
	function addEvent(node, type, callback) {
	if (node.addEventListener) {
	node.addEventListener(type, function(e) {
	callback(e, e.target);
	}, false);
	} else if (node.attachEvent) {
	node.attachEvent('on' + type, function(e) {
	callback(e, e.srcElement);
	});
	}
	}

	function shouldBeValidated(field) {
	return (
	!(field.getAttribute("readonly") \|\| field.readonly) &&
	!(field.getAttribute("disabled") \|\| field.disabled) &&
	(field.getAttribute("pattern") \|\| field.getAttribute("required"))
	);
	}

	function instantValidation(field) {
	if (shouldBeValidated(field)) {
	const invalid =
	(field.getAttribute("required") && !field.value) \|\|
	(field.getAttribute("pattern") && field.value && !new RegExp(field.getAttribute("pattern")).test(field.value));

	if (!invalid && field.getAttribute("aria-invalid")) {
	field.removeAttribute("aria-invalid");
	} else if (invalid && !field.getAttribute("aria-invalid")) {
	field.setAttribute("aria-invalid", "true");
	}
	}
	}

	const inputToValidate = document.getElementById("contact_email_instant_validation");

	document.addEventListener('DOMContentLoaded', (event) => {
	addEvent(inputToValidate, "change", function(e, target) {
	instantValidation(target);
	});
	})
	</script>
	</body>
	</html>