Merge pull request #4008 from edx/stv/jsinput

Fix Jasmine tests for JSInput

common/static/js/capa/fixtures/jsinput.html

+<div>
 <section
-  id="inputtype_1" 
+  id="inputtype_1"
   data="getGrade"
   data-stored="{&quot;answer&quot;:&quot;{\&quot;cylinder\&quot;:true,\&quot;cube\&quot;:true}&quot;,&quot;state&quot;:&quot;{\&quot;selectedObjects\&quot;:{\&quot;cylinder\&quot;:true,\&quot;cube\&quot;:true}}&quot;}"
   data-getstate="getState"
@@ -10,11 +11,11 @@
 
   <div class="script_placeholder"/>
     <iframe
-      name="iframe_1" 
-      sandbox="allow-scripts 
-        allow-popups 
-        allow-same-origin 
-        allow-forms 
+      name="iframe_1"
+      sandbox="allow-scripts
+        allow-popups
+        allow-same-origin
+        allow-forms
         allow-pointer-lock"
       height="500"
       width="500"
@@ -24,7 +25,7 @@
   </div>
 </section>
 <section
-  id="inputtype_2" 
+  id="inputtype_2"
   data="getGrade"
   data-stored="{&quot;answer&quot;:&quot;{\&quot;cylinder\&quot;:true,\&quot;cube\&quot;:true}&quot;,&quot;state&quot;:&quot;{\&quot;selectedObjects\&quot;:{\&quot;cylinder\&quot;:true,\&quot;cube\&quot;:true}}&quot;}"
   data-getstate="getState"
@@ -35,16 +36,18 @@
 
   <div class="script_placeholder"/>
     <iframe
-      name="iframe_2" 
-      sandbox="allow-scripts 
-        allow-popups 
-        allow-same-origin 
-        allow-forms 
+      name="iframe_2"
+      sandbox="allow-scripts
+        allow-popups
+        allow-same-origin
+        allow-forms
         allow-pointer-lock"
       height="500"
       width="500"
       src="https://studio.edx.org/c4x/edX/DemoX/asset/webGLDemo.html">
     </iframe>
-    <input type="hidden" name="input_2" id="input_1" waitfor value="{&quot;answer&quot;:&quot;{\&quot;cylinder\&quot;:true,\&quot;cube\&quot;:true}&quot;,&quot;state&quot;:&quot;{\&quot;selectedObjects\&quot;:{\&quot;cylinder\&quot;:true,\&quot;cube\&quot;:true}}&quot;}">
+    <input type="hidden" name="input_2" id="input_2" waitfor value="{&quot;answer&quot;:&quot;{\&quot;cylinder\&quot;:true,\&quot;cube\&quot;:true}&quot;,&quot;state&quot;:&quot;{\&quot;selectedObjects\&quot;:{\&quot;cylinder\&quot;:true,\&quot;cube\&quot;:true}}&quot;}">
   </div>
-</section>
\ No newline at end of file
+</section>
+</div>
+

common/static/js/capa/spec/jsinput_spec.js

-describe("JSInput", function() {
+describe("JSInput", function () {
+    var sections;
+    var inputFields;
+
     beforeEach(function () {
         loadFixtures('js/capa/fixtures/jsinput.html');
+        sections = $('section[id^="inputtype_"]');
+        inputFields = $('input[id^="input_"]');
+        JSInput.walkDOM();
     });
 
-    it('sets all data-processed attributes to true on first load', function() {
-        var sections = $(document).find('section[id="inputtype_"]');
-        JSInput.walkDOM();
-        sections.each(function(index, section) {
-            expect(section.attr('data-processed')).toEqual('true');
+    it('sets all data-processed attributes to true on first load', function () {
+        sections.each(function (index, item) {
+            expect(item).toHaveData('processed', true);
         });
     });
 
-    it('sets the data-processed attribute to true on subsequent load', function() {
-        var section1 = $(document).find('section[id="inputtype_1"]'),
-            section2 = $(document).find('section[id="inputtype_2"]');
-        section1.attr('data-processed', false);
-        JSInput.walkDOM();
-        expect(section1.attr('data-processed')).toEqual('true');
-        expect(section2.attr('data-processed')).toEqual('true');
+    it('sets the waitfor attribute to its update function', function () {
+        inputFields.each(function (index, item) {
+            expect(item).toHaveAttr('waitfor');
+        });
     });
 
-    it('sets the waitfor attribute to its update function', function() {
-        var inputFields = $(document).find('input[id="input_"]');
-        JSInput.walkDOM();
-        inputFields.each(function(index, inputField) {
-            expect(inputField.data('waitfor')).toBeDefined();
-        });
+    it('tests the correct number of sections', function () {
+        expect(sections.length).toEqual(2);
+        expect(sections.length).toEqual(inputFields.length);
     });
 });
+

common/static/js/capa/src/jsinput.js

@@ -181,19 +181,15 @@ var JSInput = (function ($, undefined) {
     }
 
     function walkDOM() {
-        var dataProcessed, all;
-
-        // Find all jsinput elements
-        allSections = $('section.jsinput');
-
+        var allSections = $('section.jsinput');
         // When a JSInput problem loads, its data-processed attribute is false,
         // so the jsconstructor will be called for it.
         // The constructor will not be called again on subsequent reruns of
         // this file by other JSInput. Only if it is reloaded, either with the
         // rest of the page or when it is submitted, will this constructor be
-        // called again. 
+        // called again.
         allSections.each(function(index, value) {
-            dataProcessed = ($(value).attr("data-processed") === "true");
+            var dataProcessed = ($(value).attr("data-processed") === "true");
             if (!dataProcessed) {
                 jsinputConstructor(value);
                 $(value).attr("data-processed", 'true');