Make test for native placeholder a service, better for unit testing

New placeholderSniffer service, modeled after $sniffer in angular
core. Override hasPlaceholder function to simulate lack of support
for placeholders. Also cleaned up package description.

README.md

@@ -1,8 +1,8 @@
 angular-shims-placeholder
 =========================
 
-Angular directive to emulate attribute `placeholder` in input fields of type text and of type password
-for all browsers, including IE9 and lower. Also works on textareas and html5 input types.
+Angular directive to emulate the `placeholder` attribute on text and password input fields for
+old browsers, such as IE9, IE8, and below. Also works on textareas and html5 input types.
 
 This directive works in both directions, which means that changing the value from inside the model 
 is honoured in the form.  

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-shims-placeholder",
-  "description": "Add Angular directive to emulate attribute ´placeholder´ in input fields of type text and password for old browsers, such as IE9 and below",
+  "description": "Angular directive to emulate the `placeholder` attribute on text and password input fields for old browsers, such as IE9, IE8, and below",
   "version": "0.3.0",
   "homepage": "https://github.com/jrief/angular-shims-placeholder",
   "authors": [{
@@ -24,6 +24,7 @@
   ],
   "ignore": [
     "**/.*",
+    "**/*.html",
     "Gruntfile.js",
     "lib",
     "package.json",

index.html

@@ -90,17 +90,20 @@ <h5>Pre-filled by model</h5>
 
 	<!-- Load angular.js from CDN if local copy is missing. http://stackoverflow.com/a/5531821/490592 -->
 	<script src="bower_components/angular/angular.js"></script>
-	<script>if (!window.angular && console) { console.info('Local angular.js unavailable. Will attempt to load from CDN.'); }</script>
+	<script>if (!window.angular && console) { console.log('Local angular.js unavailable. Will attempt to load from CDN.'); }</script>
 	<script>window.angular || document.write('<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js">\x3C/script>');</script>
 
 	<script src="lib/angular-placeholder.js"></script>
 	<script>
 		angular.module(['testApp'], ['ng.shims.placeholder'])
-		.run(function($rootScope){
+		.run(function($rootScope, placeholderSniffer){
 			$rootScope.test = {
 				text: 'hello',
 				password: 'secret'
 			};
+
+			// Force enable polyfill in all browsers for demo
+			placeholderSniffer.hasPlaceholder = function () { return false; };
 		});
 
 		var fillElements = function (str) {
@@ -110,10 +113,6 @@ <h5>Pre-filled by model</h5>
 				elem.val(str).triggerHandler('change');
 			}
 		}
-
-		// Force run in all browsers, not just IE
-		angular.mock = 1;
-
 	</script>
 </body>
 </html>

lib/angular-placeholder.js

@@ -12,13 +12,16 @@
 (function(angular, document, undefined) {
 'use strict';
 
-angular.module('ng.shims.placeholder', []).directive('placeholder', function($timeout) {
-	if (! angular.mock) {
-		// run unit tests, even if your browser supports the placeholder field
-		var test = document.createElement("input");
-		if (test.placeholder !== void 0)
-			return {};
-	}
+angular.module('ng.shims.placeholder', [])
+.service('placeholderSniffer', function($document){
+	this.hasPlaceholder = function() {
+		// test for native placeholder support
+		var test = $document[0].createElement("input");
+		return (test.placeholder !== void 0);
+	};
+})
+.directive('placeholder', function($timeout, placeholderSniffer) {
+	if (placeholderSniffer.hasPlaceholder()) return {};
 
 	// No native support for attribute placeholder
 	return {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-shims-placeholder",
-  "description": "Add Angular directive to emulate attribute ´placeholder´ in input fields of type text and password for old browsers, such as IE9 and below",
+  "description": "Angular directive to emulate the `placeholder` attribute on text and password input fields for old browsers, such as IE9, IE8, and below",
   "version": "0.3.0",
   "homepage": "https://github.com/jrief/angular-shims-placeholder",
   "author": {

test/unit/angular-placeholder-spec.js

@@ -2,7 +2,7 @@
 
 
 describe('placeholder', function() {
-	var scope, $compile;
+	var scope, $compile, placeholderSniffer;
 
 	function changeValue(elem, value) {
 		elem.val(value);
@@ -13,10 +13,15 @@ describe('placeholder', function() {
 		module('ng.shims.placeholder');
 	});
 
-	beforeEach(inject(function($injector) {
+	beforeEach(inject(function($injector, _placeholderSniffer_) {
+		placeholderSniffer = _placeholderSniffer_;
 		$compile = $injector.get('$compile');
 		scope = $injector.get('$rootScope');
 		scope.form = {};
+		// Force browser to report lack of placeholder support, so we can test the polyfill behavior
+		placeholderSniffer.hasPlaceholder = function() {
+			return false;
+		}
 	}));
 
 	describe('on an empty text input', function() {