added the following work

- Jasmine tests Setup
- proctored exam view jasmine tests

.gitignore

@@ -53,3 +53,4 @@ coverage/
 htmlcov/
 acceptance_tests/*.png
 
+node_modules/
\ No newline at end of file

.travis.yml

@@ -12,12 +12,14 @@ before_install:
 sudo: false
 
 install:
+    - npm install
     - "pip install -r requirements.txt"
     - "pip install -r test_requirements.txt"
     - "pip install coveralls"
 
 script:
     - coverage run ./manage.py test edx_proctoring
+    - gulp test
     - coverage report -m
     - pep8 edx_proctoring
     - pylint edx_proctoring --report=no

edx_proctoring/static/proctoring/js/vendor/i18n.js

+window.gettext = function(s){return s;};
+window.ngettext = function(singular, plural, num){ return num == 1 ? singular : plural }
+
+function interpolate(fmt, obj, named) {
+    if (named) {
+        return fmt.replace(/%\(\w+\)s/g, function(match){return String(obj[match.slice(2,-2)])});
+    } else {
+        return fmt.replace(/%s/g, function(match){return String(obj.shift())});
+    }
+}

edx_proctoring/static/proctoring/js/views/proctored_exam_view.js

@@ -95,6 +95,9 @@ var edx = edx || {};
             }
             return this;
         },
+        reloadPage: function () {
+          location.reload();
+        },
         unloadMessage: function  () {
             return gettext("Are you sure you want to leave this page? \n" +
                 "To pass your proctored exam you must submit your \n" +
@@ -122,7 +125,7 @@ var edx = edx || {};
                 clearInterval(self.timerId); // stop the timer once the time finishes.
                 $(window).unbind('beforeunload', this.unloadMessage);
                 // refresh the page when the timer expired
-                location.reload();
+                this.reloadPage()
             }
         }
     });

edx_proctoring/static/proctoring/spec/proctored_exam_spec.js

-define(['jquery', 'backbone', 'common/js/spec_helpers/template_helpers', 'js/courseware/base/models/proctored_exam_model', 'js/courseware/base/views/proctored_exam_view'
-], function($, Backbone, TemplateHelpers, ProctoredExamModel, ProctoredExamView) {
-    'use strict';
-
-    describe('Proctored Exam', function () {
-
-        beforeEach(function () {
-            this.model = new ProctoredExamModel();
-        });
-
-        it('model has properties', function () {
-            expect(this.model.get('in_timed_exam')).toBeDefined();
-            expect(this.model.get('is_proctored')).toBeDefined();
-            expect(this.model.get('exam_display_name')).toBeDefined();
-            expect(this.model.get('exam_url_path')).toBeDefined();
-            expect(this.model.get('time_remaining_seconds')).toBeDefined();
-            expect(this.model.get('low_threshold')).toBeDefined();
-            expect(this.model.get('critically_low_threshold')).toBeDefined();
-            expect(this.model.get('lastFetched')).toBeDefined();
+describe('ProctoredExamView', function () {
+    beforeEach(function () {
+        this.server = sinon.fakeServer.create();
+        jasmine.clock().install();
+        setFixtures(
+            '<div class="proctored_exam_status">' +
+            '<script type="text/template" id="proctored-exam-status-tpl">' +
+            '<div class="exam-timer">' +
+            '<%- gettext("You are taking") %>' +
+            '<a href="<%= exam_url_path %>"> <%= exam_display_name %> </a>' +
+            '<%- gettext(" exam as a proctored exam. Good Luck!") %>' +
+            '<span id="time_remaining_id" class="pull-right"> <b> </b> </span> </div>' +
+            '</script>'+
+            '</div>'
+        );
+        this.model = new ProctoredExamModel({
+            in_timed_exam: true,
+            is_proctored: true,
+            exam_display_name: 'Midterm',
+            taking_as_proctored: true,
+            exam_url_path: '/test_url',
+            time_remaining_seconds: 45, //2 * 60 + 15,
+            low_threshold_sec: 30,
+            attempt_id: 2,
+            critically_low_threshold_sec: 15,
+            lastFetched: new Date()
         });
 
+        this.proctored_exam_view = new edx.coursware.proctored_exam.ProctoredExamView(
+            {
+                model: this.model,
+                el: $(".proctored_exam_status"),
+                proctored_template: '#proctored-exam-status-tpl'
+            }
+        );
+        this.proctored_exam_view.render();
     });
 
-    describe('ProctoredExamView', function () {
-        beforeEach(function () {
-            TemplateHelpers.installTemplate('templates/courseware/proctored-exam-status', true, 'proctored-exam-status-tpl');
-            appendSetFixtures('<div class="proctored_exam_status"></div>');
-
-            this.model = new ProctoredExamModel({
-                in_timed_exam: true,
-                is_proctored: true,
-                exam_display_name: 'Midterm',
-                exam_url_path: '/test_url',
-                time_remaining_seconds: 45, //2 * 60 + 15,
-                low_threshold: 30,
-                critically_low_threshold: 15,
-                lastFetched: new Date()
-            });
+    afterEach(function() {
+        this.server.restore();
+        jasmine.clock().uninstall();
+    });
 
-            this.proctored_exam_view = new edx.coursware.proctored_exam.ProctoredExamView(
-                {
-                    model: this.model,
-                    el: $(".proctored_exam_status"),
-                    proctored_template: '#proctored-exam-status-tpl'
-                }
-            );
-            this.proctored_exam_view.render();
+    it('renders items correctly', function () {
+        expect(this.proctored_exam_view.$el.find('a')).toHaveAttr('href',  this.model.get("exam_url_path"));
+        expect(this.proctored_exam_view.$el.find('a')).toContainHtml(this.model.get('exam_display_name'));
+    });
+    it('changes behavior when clock time decreases low threshold', function () {
+        spyOn(this.model, 'getRemainingSeconds').and.callFake(function() {
+            return 25;
         });
+        expect(this.model.getRemainingSeconds()).toEqual(25);
+        expect(this.proctored_exam_view.$el.find('div.exam-timer')).not.toHaveClass('low-time warning');
+        this.proctored_exam_view.render();
 
-        it('renders items correctly', function () {
-            expect(this.proctored_exam_view.$el.find('a')).toHaveAttr('href',  this.model.get("exam_url_path"));
-            expect(this.proctored_exam_view.$el.find('a')).toContainHtml(this.model.get('exam_display_name'));
-        });
-        it('changes behavior when clock time decreases low threshold', function () {
-            spyOn(this.model, 'getRemainingSeconds').andCallFake(function () {
-                return 25;
-            });
-            expect(this.model.getRemainingSeconds()).toEqual(25);
-            expect(this.proctored_exam_view.$el.find('div.exam-timer')).not.toHaveClass('low-time warning');
-            this.proctored_exam_view.render();
-            expect(this.proctored_exam_view.$el.find('div.exam-timer')).toHaveClass('low-time warning');
+        expect(this.proctored_exam_view.$el.find('div.exam-timer')).toHaveClass('low-time warning');
+    });
+    it('changes behavior when clock time decreases critically low threshold', function () {
+        spyOn(this.model, 'getRemainingSeconds').and.callFake(function () {
+            return 5;
         });
-        it('changes behavior when clock time decreases critically low threshold', function () {
-            spyOn(this.model, 'getRemainingSeconds').andCallFake(function () {
-                return 5;
-            });
-            expect(this.model.getRemainingSeconds()).toEqual(5);
-            expect(this.proctored_exam_view.$el.find('div.exam-timer')).not.toHaveClass('low-time critical');
-            this.proctored_exam_view.render();
-            expect(this.proctored_exam_view.$el.find('div.exam-timer')).toHaveClass('low-time critical');
+        expect(this.model.getRemainingSeconds()).toEqual(5);
+        expect(this.proctored_exam_view.$el.find('div.exam-timer')).not.toHaveClass('low-time critical');
+        this.proctored_exam_view.render();
+        expect(this.proctored_exam_view.$el.find('div.exam-timer')).toHaveClass('low-time critical');
+    });
+    it("reload the page when the exam time finishes", function(){
+        spyOn(this.model, 'getRemainingSeconds').and.callFake(function() {
+            return -10;
         });
+        expect(this.model.getRemainingSeconds()).toEqual(-10);
+        var reloadPage = spyOn(this.proctored_exam_view, 'reloadPage');
+        this.proctored_exam_view.render();
+        expect(reloadPage).toHaveBeenCalled();
     });
 });

gulpfile.js

+var gulp = require('gulp');
+var karma = require('karma').server;
+var coverageOnOff = 'coverage';
+
+/**
+ * Run test once and exit
+ */
+gulp.task('test', function (done) {
+  karma.start({
+    configFile: __dirname + '/karma.conf.js',
+    singleRun: true
+  }, done);
+});
+
+/**
+ * Watch for file changes and re-run tests on each change
+ */
+gulp.task('tdd', function (done) {
+  karma.start({
+    configFile: __dirname + '/karma.conf.js'
+  }, done);
+});
+
+gulp.task('default', ['tdd']);
+
+
+/**
+ * Run test in debug mode
+ */
+gulp.task('debug', function (done) {
+  karma.start({
+    configFile: __dirname + '/karma.conf.js',
+    singleRun: false
+  }, done);
+});
\ No newline at end of file

karma.conf.js

+
+//Add ability to turn coverage off when the tests are run in debug mode
+var sourcePreprocessors = 'coverage';
+
+function isDebug(argument) {
+    return argument === 'debug';
+}
+if (process.argv.some(isDebug)) {
+    sourcePreprocessors = [];
+}
+
+
+module.exports = function(config) {
+  config.set({
+
+    basePath: '',
+
+    //plugins required for running the karma tests
+    plugins:[
+        'karma-jasmine',
+        'karma-jasmine-jquery',
+        'karma-firefox-launcher',
+        'karma-phantomjs-launcher',
+        'karma-chrome-launcher',
+        'karma-coverage',
+        'karma-sinon'
+    ],
+
+    // start the browser
+    browsers: ['Firefox'],
+
+    //frameworks to use
+    frameworks: ['jasmine-jquery', 'jasmine', 'sinon'],
+
+    //patterns to load all files in child folders
+    files: [
+        'edx_proctoring/static/proctoring/js/vendor/i18n.js',
+        'edx_proctoring/static/proctoring/js/vendor/jquery.js',
+        'edx_proctoring/static/proctoring/js/vendor/underscore.js',
+        'edx_proctoring/static/proctoring/js/vendor/backbone.js',
+        'edx_proctoring/static/proctoring/js/vendor/date.js',
+        'edx_proctoring/static/proctoring/js/models/*.js',
+        'edx_proctoring/static/proctoring/js/collections/*.js',
+        'edx_proctoring/static/proctoring/js/views/*.js',
+        'edx_proctoring/static/proctoring/spec/*.js'
+    ],
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+        'edx_proctoring/static/proctoring/js/models/*.js': sourcePreprocessors,
+        'edx_proctoring/static/proctoring/js/collections/*.js': sourcePreprocessors,
+        'edx_proctoring/static/proctoring/js/views/*.js': sourcePreprocessors
+    },
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['progress', 'coverage'],
+
+    coverageReporter: {
+        dir:'build', subdir: 'coverage-js',
+        reporters:[
+            {type: 'html', subdir: 'coverage-js/html'},
+            {type: 'cobertura', file: 'coverage.xml'},
+            {type: 'text-summary'}
+        ]
+    },
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+
+     // level of logging
+     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+     logLevel: config.LOG_INFO,
+
+
+     // enable / disable watching file and executing tests whenever any file changes
+     autoWatch: true,
+
+     captureTimeout: 60000,
+
+     // Continuous Integration mode
+     // if true, Karma captures browsers, runs the tests and exits
+     singleRun: false
+
+  });
+};
+
+

package.json

+{
+  "name": "edx-proctoring",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/edx/edx-proctoring"
+  },
+  "devDependencies": {
+    "gulp": "latest",
+    "gulp-karma": "latest",
+    "karma": "latest",
+    "karma-chrome-launcher": "latest",
+    "karma-coverage": "latest",
+    "karma-firefox-launcher": "latest",
+    "karma-jasmine": "latest",
+    "karma-jasmine-jquery": "latest",
+    "karma-phantomjs-launcher": "latest",
+    "karma-sinon": "latest",
+    "karma-spec-reporter": "latest"
+  }
+}