Basic tests and bugfixes

Gruntfile.js

@@ -36,6 +36,10 @@ module.exports = function(grunt) {
             }
         },
 
+        qunit: {
+            files: ['test/**/*.html']
+        },
+
         watch: {
             options: {
                 livereload: true,
@@ -63,9 +67,12 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-contrib-uglify');
     grunt.loadNpmTasks('grunt-contrib-watch');
     grunt.loadNpmTasks('grunt-contrib-sass');
+    grunt.loadNpmTasks('grunt-contrib-qunit');
 
 
     // 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
-    grunt.registerTask('default', ['concat','uglify','sass']);
+    grunt.registerTask('default', ['compile','test']);
+    grunt.registerTask('compile', ['concat','uglify','sass']);
+    grunt.registerTask('test', ['qunit']);
 
 };

Readme.md

@@ -125,7 +125,7 @@ label-direction | string | "north"    | Marker label direction. Available direct
 You must have [npm](https://www.npmjs.com) and [grunt](http://gruntjs.com) installed.
 
 - `npm install`
-- `grunt`
+- `grunt` (this will also run tests)
 
 Note that the images in `src/img` are not auto-compiled - if they're changed, the SVG code will need to be copied into `pinpoint.js`.
 
@@ -142,8 +142,19 @@ The look of the map and its markers is mostly controlled with CSS/SASS. These fi
 
 To change the map's basemap/tilelayer, use the `basemap` configuration variable. See above for more details.
 
+## Running tests
+
+Tests are carried out with [QUnit](http://qunitjs.com). To run tests, either open the HTML files in the `test/` folder individually, or install NPM and Grunt (see above for details) and run `grunt test`.
+
 ## Changelog
 
+v1.0.1 (July 9, 2015)
+
+- Fix bug when no head or deck
+- Throw useful error if Leaflet is missing
+- Add basic tests
+
+
 v1.0.0
 
 - Initial release

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "pinpoint",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "authors": [
     "ejb <mail@elliotbentley.com>"
   ],

dist/pinpoint.js

@@ -4,6 +4,10 @@
 
 function Pinpoint(opts){
     'use strict';
+
+    if (window.L == null) {
+        throw("Leaflet.js not present on page.");
+    }
 
     var that = this;
     this.opts = opts;
@@ -257,7 +261,7 @@ Pinpoint.prototype.fillText = function(){
     } else {
         this.$el.find('.pinpoint-note').hide();
     }
-    this.$el.find('.pinpoint-hed:visible(), .pinpoint-dek:visible()').eq(0).addClass('pinpoint-topline');
+    this.$el.find('.pinpoint-hed:visible, .pinpoint-dek:visible').eq(0).addClass('pinpoint-topline');
 }
 
 Pinpoint.prototype.disableInteraction = function(){

package.json

@@ -2,8 +2,9 @@
   "devDependencies": {
     "grunt": "~0.4.1",
     "grunt-contrib-concat": "~0.3.0",
+    "grunt-contrib-qunit": "^0.7.0",
+    "grunt-contrib-sass": "~0.6.0",
     "grunt-contrib-uglify": "~0.2.7",
-    "grunt-contrib-watch": "~0.5.3",
-    "grunt-contrib-sass": "~0.6.0"
+    "grunt-contrib-watch": "~0.5.3"
   }
 }

src/js/pinpoint.js

@@ -4,6 +4,10 @@
 
 function Pinpoint(opts){
     'use strict';
+
+    if (window.L == null) {
+        throw("Leaflet.js not present on page.");
+    }
 
     var that = this;
     this.opts = opts;
@@ -257,7 +261,7 @@ Pinpoint.prototype.fillText = function(){
     } else {
         this.$el.find('.pinpoint-note').hide();
     }
-    this.$el.find('.pinpoint-hed:visible(), .pinpoint-dek:visible()').eq(0).addClass('pinpoint-topline');
+    this.$el.find('.pinpoint-hed:visible, .pinpoint-dek:visible').eq(0).addClass('pinpoint-topline');
 }
 
 Pinpoint.prototype.disableInteraction = function(){

test/bind-polyfill.js

@@ -0,0 +1,30 @@
+/*
+
+This is included because PhantomJS doesn't support .bind()
+
+*/
+
+if (!Function.prototype.bind) {
+  Function.prototype.bind = function(oThis) {
+    if (typeof this !== 'function') {
+      // closest thing possible to the ECMAScript 5
+      // internal IsCallable function
+      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
+    }
+
+    var aArgs   = Array.prototype.slice.call(arguments, 1),
+        fToBind = this,
+        fNOP    = function() {},
+        fBound  = function() {
+          return fToBind.apply(this instanceof fNOP
+                 ? this
+                 : oThis,
+                 aArgs.concat(Array.prototype.slice.call(arguments)));
+        };
+
+    fNOP.prototype = this.prototype;
+    fBound.prototype = new fNOP();
+
+    return fBound;
+  };
+}

test/pinpoint.no-leaflet.test.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test</title>
+  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.16.0.css">
+  <link rel="stylesheet" href="../dist/pinpoint.css">
+</head>
+<body>
+
+    <div class="test-map"></div>
+
+  <div id="qunit"></div>
+  <div id="qunit-fixture"></div>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+  <script src="http://code.jquery.com/qunit/qunit-1.16.0.js"></script>
+  <script src="bind-polyfill.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../dist/pinpoint.js" type="text/javascript" charset="utf-8"></script>
+
+  <script>
+
+  QUnit.test( "Basic map", function( assert ) { 
+
+      var data = {
+        "hed": "The U.K. and France",
+        "dek": "This is a test map.",
+        "lat": 51.5049378,
+        "lon": - 0.0870377,
+        "zoom": 4,
+        "minimap": false,
+        "aspect-ratio": "tall",
+        "minimap-zoom-offset": - 5,
+        "note": "This is a note.",
+        "markers": [{
+            "lat": 51.5049378,
+            "lon": - 0.0870377,
+            "text": "",
+            "icon": "square",
+            "label-direction": "north",
+            "labelDirection": "north",
+            "label": "plain"
+        }]
+      };
+
+      data.el = '.test-map';
+      assert.throws(function(){
+        var p = new Pinpoint(data);
+      }, /Leaflet/);
+    });
+  </script>
+
+</body>
+</html>

test/pinpoint.test.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test</title>
+  <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.16.0.css">
+  <link rel="stylesheet" href="../dist/pinpoint.css">
+</head>
+<body>
+
+    <div class="test-map"></div>
+
+  <div id="qunit"></div>
+  <div id="qunit-fixture"></div>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+  <script src="http://code.jquery.com/qunit/qunit-1.16.0.js"></script>
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
+  <script src="bind-polyfill.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../dist/pinpoint.js" type="text/javascript" charset="utf-8"></script>
+  <script src="pinpoint.test.js" type="text/javascript" charset="utf-8"></script>
+</body>
+</html>

test/pinpoint.test.js

@@ -0,0 +1,16 @@
+
+QUnit.test( "Most basic map", function( assert ) { 
+
+    var data = {
+      "lat": 51.5049378,
+      "lon": - 0.0870377,
+      "zoom": 4,
+      "aspect-ratio": "tall",
+      "markers": []
+    };
+
+    data.el = '.test-map';
+    var p = new Pinpoint(data);
+
+    assert.ok( p instanceof Pinpoint );
+});