Add unit tests.

common/lib/xmodule/xmodule/js/js_test.yml

@@ -36,6 +36,7 @@ lib_paths:
     - common_static/coffee/src/ajax_prefix.js
     - common_static/coffee/src/logger.js
     - common_static/js/vendor/jasmine-jquery.js
+    - common_static/js/vendor/jasmine-imagediff.js
     - common_static/js/vendor/require.js
     - RequireJS-namespace-undefine.js
     - common_static/js/vendor/jquery.min.js

common/lib/xmodule/xmodule/js/spec/capa/display_spec.coffee

@@ -303,6 +303,114 @@ describe 'Problem', ->
           expect($('input#1_2_1_choiceinput_2bc').attr('disabled')).not.toEqual('disabled')
           expect($('input#1_2_1').attr('disabled')).not.toEqual('disabled')
 
+      describe 'imageinput', ->
+        imageinput_html='''
+  <section class="problem">
+    <div class="imageinput capa_inputtype" id="inputtype_1_2_1">
+      <input class="imageinput" type="hidden" name="input_1_2_1" id="input_1_2_1">
+      <div style="position:relative;">
+        <div id="imageinput_1_2_1">test</div>
+        <div id="answer_1_2_1" data-width="100" data-height="100"></div>
+      </div>
+    </div>
+  </section>
+  '''
+        states = [
+          {
+            desc: 'rectangle is drawn correctly',
+            data: {'rectangle': '(10,10)-(30,30)'}
+          },
+          {
+            desc: 'region is drawn correctly',
+            data: {'regions': '[[10,10],[30,30],[70,30],[20,30]]'}
+          },
+          {
+            desc: 'mixed shapes are drawn correctly',
+            data: {
+              'rectangle': '(10,10)-(30,30);(5,5)-(20,20)',
+              'regions': '''[
+                [[50,50],[40,40],[70,30],[50,70]],
+                [[90,95],[95,95],[90,70],[70,70]]
+              ]'''
+            }
+          },
+        ]
+
+        beforeEach ->
+          @problem = new Problem($('.xblock-student_view'))
+          @problem.el.prepend imageinput_html
+
+        stubRequest = (data) =>
+          spyOn($, 'postWithPrefix').andCallFake (url, callback) ->
+              callback answers: "1_2_1": data
+
+        getImage = (coords, c_width, c_height) =>
+          types =
+            rectangle: (coords) =>
+              reg = /^\(([0-9]+),([0-9]+)\)-\(([0-9]+),([0-9]+)\)$/
+              rects = coords.replace(/\s*/g, '').split(/;/)
+
+              $.each rects, (index, rect) =>
+                abs = Math.abs
+                points = reg.exec(rect)
+                if points
+                  # width
+                  width = abs(points[3] - points[1])
+                  # height
+                  height = abs(points[4] - points[2])
+
+                  ctx.rect(points[1], points[2], width, height)
+
+              ctx.stroke()
+              ctx.fill()
+
+            regions: (coords) =>
+              parseCoords = (coords) =>
+                reg = JSON.parse(coords)
+
+                if typeof reg[0][0][0] == "undefined"
+                  reg = [reg]
+
+                return reg
+
+              $.each parseCoords(coords), (index, region) =>
+                ctx.beginPath()
+                $.each region, (index, point) =>
+                  if index is 0
+                    ctx.moveTo(point[0], point[1])
+                  else
+                    ctx.lineTo(point[0], point[1]);
+
+                ctx.closePath()
+                ctx.stroke()
+                ctx.fill()
+
+          canvas = document.createElement('canvas')
+          canvas.width = c_width or 100
+          canvas.height = c_height or 100
+
+          if canvas.getContext
+            ctx = canvas.getContext('2d')
+          else
+            return console.log 'Canvas is not supported.'
+
+          ctx.fillStyle = 'rgba(255,255,255,.3)';
+          ctx.strokeStyle = "#FF0000";
+          ctx.lineWidth = "2";
+
+          $.each coords, (key, value) =>
+            types[key](value) if types[key]?
+
+          return canvas
+
+        $.each states, (index, state) =>
+          it state.desc, ->
+            stubRequest(state.data)
+            @problem.show()
+            img = getImage(state.data)
+
+            expect(img).toImageDiffEqual($('canvas')[0])
+
     describe 'when the answers are already shown', ->
       beforeEach ->
         @problem.el.addClass 'showed'
@@ -409,4 +517,3 @@ describe 'Problem', ->
       expect(@problem.answers).toEqual "input_1_1=one&input_1_2=two"
 
 
-

common/lib/xmodule/xmodule/js/spec/helper.coffee

@@ -162,6 +162,8 @@ beforeEach ->
     toBeInArray: (array) ->
       return $.inArray(@.actual, array) > -1
 
+  @addMatchers imagediff.jasmine
+
 # Stub jQuery.cookie
 $.cookie = jasmine.createSpy('jQuery.cookie').andReturn '1.0'
 

common/lib/xmodule/xmodule/js/src/capa/display.coffee

@@ -506,18 +506,18 @@ class @Problem
           parseCoords = (coords) =>
             reg = JSON.parse(coords)
 
-            if typeof reg[0][0] is undefined
+            if typeof reg[0][0][0] == "undefined"
               reg = [reg]
 
             return reg
 
-          $.each parseCoords(coords), (index, regions) =>
+          $.each parseCoords(coords), (index, region) =>
             ctx.beginPath()
-            $.each regions, (index, points) =>
+            $.each region, (index, point) =>
               if index is 0
-                ctx.moveTo(points[0], points[1])
+                ctx.moveTo(point[0], point[1])
               else
-                ctx.lineTo(points[0], points[1]);
+                ctx.lineTo(point[0], point[1]);
 
             ctx.closePath()
             ctx.stroke()