Make the FlotChart javascript code easier to test, and add an initial test suite.

django/website/hid/static/hid/widgets/chart.js

+FlotChart = {
+    models: [],
+    views: []
+};
 (function($) {
     /**
      * FlotChart model
@@ -6,7 +10,7 @@
      * single flot chart.
      *
      */
-    var FlotChart = Backbone.Model.extend({
+    FlotChart.model = Backbone.Model.extend({
         defaults: {
             data: [],
             options: {}
@@ -18,7 +22,7 @@
      *
      * Displays a single FlotChart model
      */
-    var FlotChartView = Backbone.View.extend({
+    FlotChart.view = Backbone.View.extend({
         /* Create the view */
         initialize: function(options) {
             this.chart = options.chart;
@@ -77,14 +81,17 @@
      *     data: flot data
      *     options: flot options
      */
-    $(document).ready(function() {
+    FlotChart.initialize = function() {
         $('.flot-chart').each(function() {
-            var flot_chart = new FlotChart($(this).data());
-            var flot_chart_view = new FlotChartView({
+            var flot_chart = new FlotChart.model($(this).data());
+            var flot_chart_view = new FlotChart.view({
                 el: this,
                 chart: flot_chart
             });
             flot_chart_view.render();
+            FlotChart.models.push(flot_chart);
+            FlotChart.views.push(flot_chart_view);
         });
-    });
+    };
 })(jQuery);
+jQuery(document).ready(FlotChart.initialize);

django/website/hid/templates/hid/tests/chart.html

+{% extends "djangojs/qunit-runner.html" %}
+{% block js_content %}
+    <script>
+        QUnit.test('Models and views are created', function(assert) {
+            assert.equal(1, FlotChart.models.length);
+            assert.equal(1, FlotChart.views.length);
+        });
+        QUnit.test('Model is created from the data attributes', function(assert) {
+            assert.deepEqual(FlotChart.models[0].get('data'), [[[0, 1], [2,3]]]);
+            assert.deepEqual(FlotChart.models[0].get('options'), {'a': 'b'});
+        });
+    </script>
+{% endblock %}
+{% block body_content %}
+    <div class='flot-chart' 
+         data-data='[[[0, 1], [2, 3]]]'
+         data-options='{"a":"b"}'
+         style='width:300px; height:300px'
+    ></div>
+{% endblock %}

django/website/hid/tests/chart_javascript_tests.py

+from djangojs.runners import QUnitSuite, JsTemplateTestCase
+
+
+class ChartJavascriptTest(QUnitSuite, JsTemplateTestCase):
+    template_name = 'hid/tests/chart.html'
+    js_files = (
+        'js/jquery.min.js',
+        'js/underscore.js',
+        'js/backbone.js',
+        'flot/jquery.flot.js',
+        'flot/jquery.flot.resize.js',
+        'hid/widgets/chart.js'
+    )