Merge pull request #740 from edx/andya/karma-debugging

Add ability to run individual Jasmine tests

Makefile

@@ -35,6 +35,10 @@ javascript:
 	node_modules/.bin/uglifyjs $(STATIC_JS)/src/oa_shared.js $(STATIC_JS)/src/*.js $(STATIC_JS)/src/studio/*.js > "$(STATIC_JS)/openassessment-studio.min.js"
 
 
+sass:
+	./scripts/sass.sh
+
+
 install-test:
 	pip install -q -r requirements/test.txt
 
@@ -44,7 +48,7 @@ install-dev:
 	gem install sass
 	pip install -q -r requirements/dev.txt
 
-install: install-wheels install-python install-js install-nltk-data install-test install-dev javascript
+install: install-wheels install-python install-js install-nltk-data install-test install-dev javascript sass
 
 quality:
 	jshint openassessment/xblock/static/js/src -c .jshintrc --verbose
@@ -52,11 +56,11 @@ quality:
 test: quality
 	./scripts/test.sh
 
-test-js:
+render-templates:
+	./scripts/render-templates.sh
+
+test-js: render-templates
 	./scripts/test-js.sh
 
-test-js-debug:
+test-js-debug: render-templates
 	./scripts/js-debugger.sh
-
-sass:
-	./scripts/sass.sh

karma.conf.js

@@ -8,16 +8,19 @@ module.exports = function(config) {
 
 
     plugins: [
-      'karma-coverage',
       'karma-jasmine',
+      'karma-jasmine-jquery',
       'karma-chrome-launcher',
       'karma-phantomjs-launcher',
+      'karma-coverage',
+      'karma-sinon',
+      'karma-jasmine-html-reporter',
       'karma-spec-reporter'
     ],
 
     // frameworks to use
     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['jasmine'],
+    frameworks: ['jasmine-jquery', 'jasmine', 'sinon'],
 
 
     // list of files / patterns to load in the browser

openassessment/xblock/static/js/spec/lms/oa_base.js

@@ -44,26 +44,6 @@ describe("OpenAssessment.BaseView", function() {
     var server = null;
     var view = null;
 
-    /**
-    Wait for subviews to load before executing callback.
-
-    Args:
-        callback (function): Function that takes no arguments.
-    **/
-    var loadSubviews = function(callback) {
-        runs(function() {
-            view.load();
-        });
-
-        waitsFor(function() {
-            return !$(".openassessment__steps__step").hasClass('is--loading');
-        });
-
-        runs(function() {
-            return callback();
-        });
-    };
-
     beforeEach(function() {
         // Load the DOM fixture
         loadFixtures('oa_base.html');
@@ -74,20 +54,19 @@ describe("OpenAssessment.BaseView", function() {
         // Create the object under test
         var el = $("#openassessment").get(0);
         view = new OpenAssessment.BaseView(runtime, el, server);
+        view.load();
+        expect($(".openassessment__steps__step").hasClass('is--loading')).toBeFalsy();
     });
 
     it("Loads each step", function() {
-        loadSubviews(function() {
         expect(server.fragmentsLoaded).toContain("submission");
         expect(server.fragmentsLoaded).toContain("student_training");
         expect(server.fragmentsLoaded).toContain("self_assessment");
         expect(server.fragmentsLoaded).toContain("peer_assessment");
         expect(server.fragmentsLoaded).toContain("grade");
     });
-    });
 
     it("Only load the peer section once on submit", function() {
-        loadSubviews(function() {
         // Simulate a server error
         view.peerView.peerAssess();
         var numPeerLoads = 0;
@@ -100,5 +79,4 @@ describe("OpenAssessment.BaseView", function() {
         // and again after the peer has been assessed.
         expect(numPeerLoads).toBe(2);
     });
-    });
 });

openassessment/xblock/static/js/spec/lms/oa_peer.js

@@ -59,7 +59,7 @@ describe("OpenAssessment.PeerView", function() {
     });
 
     it("Sends a peer assessment to the server", function() {
-        spyOn(server, 'peerAssess').andCallThrough();
+        spyOn(server, 'peerAssess').and.callThrough();
 
         // Select options in the rubric
         var optionsSelected = {};
@@ -90,7 +90,7 @@ describe("OpenAssessment.PeerView", function() {
 
     it("Re-enables the peer assess button on error", function() {
         // Simulate a server error
-        spyOn(server, 'peerAssess').andCallFake(function() {
+        spyOn(server, 'peerAssess').and.callFake(function() {
             expect(view.peerSubmitEnabled()).toBe(false);
             return $.Deferred(function(defer) {
                 defer.rejectWith(this, ['ENOUNKNOWN', 'Error occurred!']);
@@ -106,7 +106,7 @@ describe("OpenAssessment.PeerView", function() {
         jasmine.getFixtures().fixturesPath = 'base/fixtures';
         loadFixtures('oa_peer_complete.html');
         // Simulate a server error
-        spyOn(server, 'renderContinuedPeer').andCallFake(function() {
+        spyOn(server, 'renderContinuedPeer').and.callFake(function() {
             expect(view.continueAssessmentEnabled()).toBe(false);
             return $.Deferred(function(defer) {
                 defer.rejectWith(this, ['Error occurred!']);

openassessment/xblock/static/js/spec/lms/oa_response.js

@@ -114,7 +114,7 @@ describe("OpenAssessment.ResponseView", function() {
         // To instead simulate the user cancelling the submission,
         // set `stubConfirm` to false.
         setStubConfirm(true);
-        spyOn(view, 'confirmSubmission').andCallFake(function() {
+        spyOn(view, 'confirmSubmission').and.callFake(function() {
             return $.Deferred(function(defer) {
                 if (stubConfirm) { defer.resolve(); }
                 else { defer.reject(); }
@@ -125,6 +125,9 @@ describe("OpenAssessment.ResponseView", function() {
     afterEach(function() {
         // Disable autosave polling (if it was enabled)
         view.setAutoSaveEnabled(false);
+
+        // Disable the unsaved page warning (if set)
+        view.unsavedWarningEnabled(false);
     });
 
     it("updates and retrieves response text correctly", function() {
@@ -195,14 +198,14 @@ describe("OpenAssessment.ResponseView", function() {
     });
 
     it("sends the saved submission to the server", function() {
-        spyOn(server, 'save').andCallThrough();
+        spyOn(server, 'save').and.callThrough();
         view.response(['Test response 1', 'Test response 2']);
         view.save();
         expect(server.save).toHaveBeenCalledWith(['Test response 1', 'Test response 2']);
     });
 
     it("submits a response to the server", function() {
-        spyOn(server, 'submit').andCallThrough();
+        spyOn(server, 'submit').and.callThrough();
         view.response(['Test response 1', 'Test response 2']);
         view.submit();
         expect(server.submit).toHaveBeenCalledWith(['Test response 1', 'Test response 2']);
@@ -211,7 +214,7 @@ describe("OpenAssessment.ResponseView", function() {
     it("allows the user to cancel before submitting", function() {
         // Simulate the user cancelling the submission
         setStubConfirm(false);
-        spyOn(server, 'submit').andCallThrough();
+        spyOn(server, 'submit').and.callThrough();
 
         // Start a submission
         view.response(['Test response 1', 'Test response 2']);
@@ -224,7 +227,7 @@ describe("OpenAssessment.ResponseView", function() {
     it("disables the submit button on submission", function() {
         // Prevent the server's response from resolving,
         // so we can see what happens before view gets re-rendered.
-        spyOn(server, 'submit').andCallFake(function() {
+        spyOn(server, 'submit').and.callFake(function() {
             return $.Deferred(function(defer) {}).promise();
         });
 
@@ -235,7 +238,7 @@ describe("OpenAssessment.ResponseView", function() {
 
     it("re-enables the submit button on submission error", function() {
         // Simulate a server error
-        spyOn(server, 'submit').andCallFake(function() {
+        spyOn(server, 'submit').and.callFake(function() {
             return $.Deferred(function(defer) {
                 defer.rejectWith(this, ['ENOUNKNOWN', 'Error occurred!']);
             }).promise();
@@ -251,7 +254,7 @@ describe("OpenAssessment.ResponseView", function() {
     it("re-enables the submit button after cancelling", function() {
         // Simulate the user cancelling the submission
         setStubConfirm(false);
-        spyOn(server, 'submit').andCallThrough();
+        spyOn(server, 'submit').and.callThrough();
 
         // Start a submission
         view.response(['Test response 1', 'Test response 2']);
@@ -263,7 +266,7 @@ describe("OpenAssessment.ResponseView", function() {
 
     it("moves to the next step on duplicate submission error", function() {
         // Simulate a "multiple submissions" server error
-        spyOn(server, 'submit').andCallFake(function() {
+        spyOn(server, 'submit').and.callFake(function() {
             return $.Deferred(function(defer) {
                 defer.rejectWith(this, ['ENOMULTI', 'Multiple submissions error']);
             }).promise();
@@ -313,6 +316,15 @@ describe("OpenAssessment.ResponseView", function() {
         expect(view.unsavedWarningEnabled()).toBe(false);
     });
 
+    describe("auto save", function() {
+       beforeEach(function() {
+          jasmine.clock().install();
+       });
+
+        afterEach(function() {
+            jasmine.clock().uninstall();
+        });
+
         it("autosaves after a user changes a response", function() {
             // Disable the autosave delay after changing/saving a response
             view.AUTO_SAVE_WAIT = -1;
@@ -337,19 +349,16 @@ describe("OpenAssessment.ResponseView", function() {
         });
 
         it("schedules autosave polling", function() {
-        runs(function() {
             // Spy on the autosave call
-            spyOn(view, 'autoSave').andCallThrough();
+            spyOn(view, 'autoSave').and.callThrough();
 
             // Enable autosave with a short poll interval
             view.AUTO_SAVE_POLL_INTERVAL = 1;
             view.setAutoSaveEnabled(true);
-        });
 
-        // Wait for autosave to be called
-        waitsFor(function() {
-            return view.autoSave.callCount > 0;
-        }, "AutoSave should have been called", 5000);
+            // Expect that auto save has happened after the poll interval
+            jasmine.clock().tick(10);
+            expect(view.autoSave.calls.count() > 0).toBeTruthy();
         });
 
         it("stops autosaving after a save error", function() {
@@ -360,7 +369,7 @@ describe("OpenAssessment.ResponseView", function() {
             var errorPromise = $.Deferred(function(defer) {
                 defer.rejectWith(this, ["This response could not be saved"]);
             }).promise();
-        spyOn(server, 'save').andCallFake(function() { return errorPromise; });
+            spyOn(server, 'save').and.callFake(function() { return errorPromise; });
 
             // Change the response and save it
             view.response(['Lorem ipsum 1', 'Lorem ipsum 2']);
@@ -374,9 +383,9 @@ describe("OpenAssessment.ResponseView", function() {
             // that for testing purposes).
             view.autoSave();
 
-        // The server save shoulde have been called just once
+            // The server save should have been called just once
             // (autosave didn't call it).
-        expect(server.save.callCount).toEqual(1);
+            expect(server.save.calls.count()).toEqual(1);
         });
 
         it("waits after user changes a response to autosave", function() {
@@ -406,15 +415,17 @@ describe("OpenAssessment.ResponseView", function() {
             expect(view.saveStatus()).toContain('not been saved');
         });
 
+    });
+
     it("selects too large of a file", function() {
-        spyOn(baseView, 'toggleActionError').andCallThrough();
+        spyOn(baseView, 'toggleActionError').and.callThrough();
         var files = [{type: 'image/jpg', size: 6000000, name: 'huge-picture.jpg', data: ''}];
         view.prepareUpload(files);
         expect(baseView.toggleActionError).toHaveBeenCalledWith('upload', 'File size must be 5MB or less.');
     });
 
     it("selects the wrong file type", function() {
-        spyOn(baseView, 'toggleActionError').andCallThrough();
+        spyOn(baseView, 'toggleActionError').and.callThrough();
         var files = [{type: 'bogus/jpg', size: 1024, name: 'picture.exe', data: ''}];
         view.prepareUpload(files);
         expect(baseView.toggleActionError).toHaveBeenCalledWith('upload', 'File must be an image.');
@@ -431,7 +442,7 @@ describe("OpenAssessment.ResponseView", function() {
     it("displays an error if a one-time file upload URL cannot be retrieved", function() {
         // Configure the server to fail when retrieving the one-time URL
         server.uploadUrlError = true;
-        spyOn(baseView, 'toggleActionError').andCallThrough();
+        spyOn(baseView, 'toggleActionError').and.callThrough();
 
         // Attempt to upload a file
         var files = [{type: 'image/jpg', size: 1024, name: 'picture.jpg', data: ''}];
@@ -445,7 +456,7 @@ describe("OpenAssessment.ResponseView", function() {
     it("displays an error if a file could not be uploaded", function() {
         // Configure the file upload server to return an error
         fileUploader.uploadError = true;
-        spyOn(baseView, 'toggleActionError').andCallThrough();
+        spyOn(baseView, 'toggleActionError').and.callThrough();
 
         // Attempt to upload a file
         var files = [{type: 'image/jpg', size: 1024, name: 'picture.jpg', data: ''}];

openassessment/xblock/static/js/spec/lms/oa_self.js

@@ -54,7 +54,7 @@ describe("OpenAssessment.SelfView", function() {
     });
 
     it("Sends a self assessment to the server", function() {
-        spyOn(server, 'selfAssess').andCallThrough();
+        spyOn(server, 'selfAssess').and.callThrough();
 
         // Select options in the rubric
         var optionsSelected = {};
@@ -81,7 +81,7 @@ describe("OpenAssessment.SelfView", function() {
 
     it("Re-enables the self assess button on error", function() {
         // Simulate a server error
-        spyOn(server, 'selfAssess').andCallFake(function() {
+        spyOn(server, 'selfAssess').and.callFake(function() {
             expect(view.selfSubmitEnabled()).toBe(false);
             return $.Deferred(function(defer) {
                 defer.rejectWith(this, ['ENOUNKNOWN', 'Error occurred!']);

openassessment/xblock/static/js/spec/lms/oa_staff_info.js

@@ -90,7 +90,7 @@ describe("OpenAssessment.StaffInfoView", function() {
             "workflow_uuid": "abc123",
             "msg": "Great success."
         };
-        spyOn(server, 'scheduleTraining').andCallThrough();
+        spyOn(server, 'scheduleTraining').and.callThrough();
 
         // Load the fixture
         loadFixtures('oa_base.html');
@@ -131,7 +131,7 @@ describe("OpenAssessment.StaffInfoView", function() {
         var view = new OpenAssessment.StaffInfoView(el, server, baseView);
         view.load();
 
-        spyOn(server, 'rescheduleUnfinishedTasks').andCallThrough();
+        spyOn(server, 'rescheduleUnfinishedTasks').and.callThrough();
 
         // Test the Rescheduling
         view.rescheduleUnfinishedTasks();
@@ -151,7 +151,7 @@ describe("OpenAssessment.StaffInfoView", function() {
         var view = new OpenAssessment.StaffInfoView(el, server, baseView);
         view.load();
 
-        spyOn(server, 'rescheduleUnfinishedTasks').andCallThrough();
+        spyOn(server, 'rescheduleUnfinishedTasks').and.callThrough();
 
         // Test the Rescheduling
         view.rescheduleUnfinishedTasks();
@@ -163,7 +163,7 @@ describe("OpenAssessment.StaffInfoView", function() {
     it("updates submission cancellation button when comments changes", function() {
         // Prevent the server's response from resolving,
         // so we can see what happens before view gets re-rendered.
-        spyOn(server, 'cancelSubmission').andCallFake(function() {
+        spyOn(server, 'cancelSubmission').and.callFake(function() {
             return $.Deferred(function(defer) {}).promise();
         });
 
@@ -190,7 +190,7 @@ describe("OpenAssessment.StaffInfoView", function() {
     });
 
     it("submits the cancel submission comments to the server", function() {
-        spyOn(server, 'cancelSubmission').andCallThrough();
+        spyOn(server, 'cancelSubmission').and.callThrough();
 
         // Load the fixture
         loadFixtures('oa_student_info.html');

openassessment/xblock/static/js/spec/lms/oa_training.js

@@ -65,7 +65,7 @@ describe("OpenAssessment.StudentTrainingView", function() {
             "Criterion 2": "Poor",
             "Criterion 3": "Fair"
         };
-        spyOn(server, 'trainingAssess').andCallThrough();
+        spyOn(server, 'trainingAssess').and.callThrough();
 
         // Select rubric options
         var optionsSelected = {};
@@ -111,8 +111,8 @@ describe("OpenAssessment.StudentTrainingView", function() {
     it("reloads the assessment steps when the user submits an assessment", function() {
         // Simulate that the user answered the problem correctly, so there are no corrections
         server.corrections = {};
-        spyOn(server, 'trainingAssess').andCallThrough();
-        spyOn(baseView, 'loadAssessmentModules').andCallThrough();
+        spyOn(server, 'trainingAssess').and.callThrough();
+        spyOn(baseView, 'loadAssessmentModules').and.callThrough();
 
         // Select rubric options
         var optionsSelected = {};

openassessment/xblock/static/js/spec/oa_file_upload.js

@@ -18,7 +18,7 @@ describe("OpenAssessment.FileUploader", function() {
         var successPromise = $.Deferred(
             function(defer) { defer.resolve(); }
         ).promise();
-        spyOn($, 'ajax').andReturn(successPromise);
+        spyOn($, 'ajax').and.returnValue(successPromise);
 
         // Stub the event logger
         spyOn(Logger, 'log');

openassessment/xblock/static/js/spec/oa_server.js

@@ -24,7 +24,7 @@ describe("OpenAssessment.Server", function() {
             call completes successfully.
     **/
     var stubAjax = function(success, responseData) {
-        spyOn($, 'ajax').andReturn(
+        spyOn($, 'ajax').and.returnValue(
             $.Deferred(function(defer) {
                 if (success) { defer.resolveWith(this, [responseData]); }
                 else { defer.reject(); }

openassessment/xblock/static/js/spec/studio/oa_edit.js

@@ -175,7 +175,7 @@ describe("OpenAssessment.StudioView", function() {
         server.isReleased = true;
 
         // Stub the confirmation step (avoid showing the dialog)
-        spyOn(view, 'confirmPostReleaseUpdate').andCallFake(
+        spyOn(view, 'confirmPostReleaseUpdate').and.callFake(
             function(onConfirm) { onConfirm(); }
         );
 

openassessment/xblock/static/js/spec/studio/oa_edit_settings.js

@@ -210,7 +210,7 @@ describe("OpenAssessment.EditSettingsView", function() {
 
         // Spy on the assessment view's validate() method so we can
         // verify that it doesn't get called (thus marking the DOM)
-        spyOn(assessmentViews[PEER], 'validate').andCallThrough();
+        spyOn(assessmentViews[PEER], 'validate').and.callThrough();
 
         // Expect that the parent view is still valid
         expect(view.validate()).toBe(true);

package.json

@@ -3,12 +3,18 @@
   "version": "0.0.1",
   "repository": "https://github.com/edx/edx-ora2.git",
   "devDependencies": {
-    "karma": "~0.12",
-    "karma-chrome-launcher": "0.1.3",
+    "karma": "^0.12.16",
     "karma-coverage": "^0.2.6",
-    "karma-jasmine": "0.1.5",
+    "karma-jasmine": "^0.3.6",
+    "karma-jasmine-jquery": "^0.1.1",
+    "karma-chrome-launcher": "^0.1.4",
     "karma-phantomjs-launcher": "^0.1.4",
+    "karma-sinon": "^1.0.3",
+    "karma-jasmine-html-reporter": "~0.1",
     "karma-spec-reporter": "^0.0.20",
+    "jasmine": "^2.3.0",
+    "phantomjs": "^1.9.11",
+    "sinon": "^1.10.3",
     "uglify-js": "2.3.6",
     "jshint": "2.8.0"
   },

scripts/js-debugger.sh

 #!/usr/bin/env bash
 
 cd `dirname $BASH_SOURCE` && cd ..
-./scripts/install.sh test
 
 echo "Starting JavaScript tests in a browser..."
-./node_modules/karma/bin/karma start --single-run=false --browsers Chrome
+./node_modules/karma/bin/karma start --single-run=false --browsers Chrome --reporters=html --autoWatch
+

scripts/render-templates.sh

+#!/usr/bin/env bash
+
+cd `dirname $BASH_SOURCE` && cd ..
+
+echo "Generating HTML fixtures for JavaScript tests..."
+export DJANGO_SETTINGS_MODULE=${DJANGO_SETTINGS_MODULE:-"settings.test"}
+./scripts/render_templates.py openassessment/xblock/static/js/fixtures/templates.json

scripts/test-js.sh

@@ -2,9 +2,5 @@
 
 cd `dirname $BASH_SOURCE` && cd ..
 
-echo "Generating HTML fixtures for JavaScript tests..."
-export DJANGO_SETTINGS_MODULE=${DJANGO_SETTINGS_MODULE:-"settings.test"}
-./scripts/render_templates.py openassessment/xblock/static/js/fixtures/templates.json
-
 echo "Running JavaScript tests..."
 npm test

scripts/test.sh

@@ -6,5 +6,6 @@ set -e
 cd `dirname $BASH_SOURCE` && cd ..
 export DJANGO_SETTINGS_MODULE=${DJANGO_SETTINGS_MODULE:-"settings.test_with_coverage"}
 ./scripts/test-python.sh $1
+./scripts/render-templates.sh
 ./scripts/test-js.sh
 ./scripts/build-docs.sh