Added Jasmine testing functionality to ecommerce

.gitignore

@@ -39,6 +39,7 @@ htmlcov
 .tox
 nosetests.xml
 unittests.xml
+coverage/
 
 ### Internationalization artifacts
 *.mo

Makefile

@@ -20,6 +20,7 @@ help:
 	@echo '    make fake_translations            install fake translations                      '
 	@echo '    make pull_translations            pull translations from Transifex               '
 	@echo '    make update_translations          install new translations from Transifex        '
+	@echo '    make test_javascript              run javascript unit tests				       	'
 	@echo '                                                                                     '
 
 requirements.js:
@@ -41,6 +42,9 @@ clean:
 	coverage erase
 	rm -rf assets/ ecommerce/static/build
 
+test_javascript:
+	gulp test
+
 test_python: clean
 	python manage.py compress --settings=ecommerce.settings.test
 	DISABLE_MIGRATIONS=True coverage run --branch --source=ecommerce ./manage.py test ecommerce \
@@ -51,7 +55,7 @@ quality:
 	pep8 --config=.pep8 ecommerce acceptance_tests
 	pylint --rcfile=pylintrc ecommerce acceptance_tests
 
-validate: test_python quality
+validate: test_python quality test_javascript
 
 static:
 	$(NODE_BIN)/r.js -o build.js
@@ -82,5 +86,5 @@ pull_translations:
 update_translations: pull_translations generate_fake_translations
 
 # Targets in a Makefile which do not produce an output file with the same name as the target name
-.PHONY: help requirements migrate serve clean test_python quality validate html_coverage accept \
+.PHONY: help requirements migrate serve clean test_python quality test_javascript validate html_coverage accept \
 	extract_translations dummy_translations compile_translations fake_translations pull_translations update_translations

README.rst

@@ -26,7 +26,7 @@ Most commands necessary to run and develop the ecommerce service can be found in
 Note: If you want to install only the production requirements run ``pip install -r requirements/production.txt``.
 
 2. Setup the database::
-    
+
     $ make migrate
 
 3. Populate the countries tables (used for storing addresses)::
@@ -104,6 +104,32 @@ To run the unit test suite followed by quality checks, run::
 
     $ make validate
 
+To run only Python unit tests, run:
+
+::
+
+    $ make test_python
+
+To run only JavaScript unit tests, run:
+
+::
+
+    $ make test_javascript
+
+JavaScript Unit Testing
+~~~~~~~~~~~~~~~~~~~~~~~
+
+JavaScript is unit tested using the Jasmine framework and should follow the `Jasmine 2.3 API
+specifications <http://jasmine.github.io/2.3/introduction.html>`__.
+Tests should be placed in the ecommerce/static/js/test/specs directory, and suffixed with _spec
+(e.g. ecommerce/static/js/test/specs/course_list_view_spec.js).
+
+Tests can be run with the following command:
+
+::
+
+    $ make test_javascript
+
 Acceptance Testing
 ~~~~~~~~~~~~~~~~~~
 
@@ -112,7 +138,7 @@ README file located in the `acceptance tests README`_.
 
 .. _acceptance tests README: acceptance_tests/README.rst
 
-Documentation |ReadtheDocs|_ 
+Documentation |ReadtheDocs|_
 ----------------------------
 .. |ReadtheDocs| image:: https://readthedocs.org/projects/edx-ecommerce/badge/?version=latest
 .. _ReadtheDocs: http://edx-ecommerce.readthedocs.org/en/latest/

ecommerce/static/js/test/spec-runner.js

+/**
+ * This is where your tests go.  It should happen automatically when you
+ * add files to the karma configuration.
+ */
+
+var isBrowser = window.__karma__ === undefined,
+    specs = [],
+    config = {};
+
+// Two execution paths: browser or gulp
+if (isBrowser) {
+    // The browser cannot read directories, so all files must be enumerated below.
+    specs = [
+        config.baseUrl + 'js/test/specs/test_spec.js'
+    ];
+} else {
+    // the E-Commerce application loads gettext identity library via django, thus
+    // components reference gettext globally so a shim is added here to reflect
+    // the text so tests can be run if modules reference gettext
+    if (!window.gettext) {
+        window.gettext = function(text) {
+            'use strict';
+            return text;
+        };
+    }
+
+    // you can automatically get the test files using karma's configs
+    for (var file in window.__karma__.files) {
+        if (/spec\.js$/.test(file)) {
+            specs.push(file);
+        }
+    }
+
+    // This is where karma puts the files
+    config.baseUrl = '/base/ecommerce/static/';
+
+    // Karma lets you list the test files here
+    config.deps = specs;
+    config.callback = window.__karma__.start;
+}
+
+requirejs.config(config);
+
+// the browser needs to kick off jasmine.  The gulp task does it through
+// node
+if (isBrowser) {
+    // jasmine 2.0 needs boot.js to run, which loads on a window load, so this is
+    // a hack
+    // http://stackoverflow.com/questions/19240302/does-jasmine-2-0-really-not-work-with-require-js
+    require(['boot'], function () {
+        'use strict';
+        require(specs,
+            function () {
+                window.onload();
+            });
+    });
+}

ecommerce/static/js/test/specs/course_list_view_spec.js

+define([
+        'jquery',
+        'views/course_list_view',
+        'collections/course_collection'
+       ],
+       function ($, CourseListView, CourseCollection) {
+
+           describe('course list view', function () {
+
+                var view,
+                    collection,
+                    defaultCourses,
+                    renderInterval;
+
+                beforeEach(function (done) {
+
+                    defaultCourses = {
+                        "id": "edX/DemoX.1/2014",
+                        "name": "DemoX",
+                        "last_edited": "2015-06-16T19:14:34Z"
+                    },
+                    {
+                        "id": "edX/victor101/Victor_s_Test_Course",
+                        "name": "Victor's Test Course",
+                        "last_edited": "2015-06-16T19:42:55Z"
+                    };
+
+                    collection = new CourseCollection();
+
+                    spyOn(collection, 'fetch').and.callFake(function () {
+                        collection.set(defaultCourses);
+                    });
+
+                    // Set up the environment
+                    setFixtures('<div id="course-list-view"></div>');
+
+                    view = new CourseListView({
+                        collection: collection
+                    });
+
+                    // Wait till the DOM is rendered before continuing
+                    renderInterval = setInterval(function () {
+                        if (view.$el.html()) {
+                            clearInterval(renderInterval);
+                            done();
+                        }
+                    }, 100);
+
+                });
+
+                it('should change the default filter placeholder to a custom string', function () {
+                    expect(view.$el.find('#courseTable_filter input').attr('placeholder')).toBe('Filter by org or course ID');
+                });
+
+                it('should adjust the style of the filter textbox', function () {
+
+                    var $tableInput = view.$el.find('#courseTable_filter input');
+
+                    expect($tableInput.hasClass('field-input input-text')).toBeTruthy();
+                    expect($tableInput.hasClass('form-control input-sm')).toBeFalsy();
+
+                });
+
+                it('should populate the table based on the course collection', function () {
+
+                    var table = $('#courseTable').DataTable();
+                        tableData = table.data();
+
+                        expect(tableData.data().length).toBe(collection.length);
+
+                });
+
+            });
+    }
+);

gulpfile.js

+var gulp = require('gulp'),
+    KarmaServer = require('karma').Server,
+    path = require('path');
+
+gulp.task('test', function (cb) {
+    new KarmaServer({
+        configFile: path.resolve('karma.conf.js'),
+    }, cb).start();
+});
+
+gulp.task('default', ['test']);

karma.conf.js

+// Karma configuration
+// Generated on Tue Jul 21 2015 10:10:16 GMT-0400 (EDT)
+
+module.exports = function(config) {
+  config.set({
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['jasmine', 'requirejs', 'sinon'],
+
+
+    // list of files / patterns to load in the browser
+	files: [
+      {pattern: 'ecommerce/static/vendor/**/*.js', included: false},
+      {pattern: 'ecommerce/static/bower_components/**/*.js', included: false},
+      {pattern: 'ecommerce/static/js/models/**/*.js', included: false},
+      {pattern: 'ecommerce/static/js/views/**/*.js', included: false},
+      {pattern: 'ecommerce/static/js/collections/**/*.js', included: false},
+      {pattern: 'ecommerce/static/js/test/specs/*.js', included: false},
+      {pattern: 'ecommerce/static/templates/**/*.html', included: false},
+      'ecommerce/static/js/config.js',
+      'ecommerce/static/js/test/spec-runner.js'
+    ],
+
+    // list of files to exclude
+    exclude: [
+    ],
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+        'ecommerce/static/js/views/**/*.js': ['coverage'],
+        'ecommerce/static/js/models/**/*.js': ['coverage'],
+        'ecommerce/static/js/collections/**/*.js': ['coverage']
+    },
+
+    // enabled plugins
+    plugins:[
+       'karma-jasmine',
+       'karma-requirejs',
+       'karma-jasmine-jquery',
+       'karma-firefox-launcher',
+       'karma-coverage',
+       'karma-spec-reporter',
+       'karma-sinon'
+   ],
+
+    // Karma coverage config
+    coverageReporter: {
+        type : 'text'
+    },
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['spec', 'coverage'],
+
+    // frameworks to use
+    frameworks: ['jasmine-jquery', 'jasmine', 'requirejs'],
+
+    // web server port
+    port: 9876,
+
+
+    // 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: false,
+
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['Firefox'],
+
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: true
+  })
+}

package.json

@@ -7,5 +7,19 @@
   "dependencies": {
     "bower": "^1.4.1",
     "requirejs": "^2.1.18"
+  },
+  "devDependencies": {
+    "gulp": "^3.9.0",
+    "jasmine-core": "^2.3.4",
+    "karma": "^0.13.2",
+    "karma-coverage": "^0.4.2",
+    "karma-firefox-launcher": "^0.1.6",
+    "karma-jasmine": "^0.3.6",
+    "karma-jasmine-jquery": "^0.1.1",
+    "karma-requirejs": "^0.2.2",
+    "karma-sinon": "^1.0.4",
+    "karma-spec-reporter": "0.0.20",
+    "phantomjs": "^1.9.17",
+    "sinon": "^1.15.4"
   }
 }

test-main.js

+var allTestFiles = [];
+var TEST_REGEXP = /(spec|test)\.js$/i;
+
+// Get a list of all the test files to include
+Object.keys(window.__karma__.files).forEach(function(file) {
+  if (TEST_REGEXP.test(file)) {
+    // Normalize paths to RequireJS module names.
+    // If you require sub-dependencies of test files to be loaded as-is (requiring file extension)
+    // then do not normalize the paths
+    var normalizedTestModule = file.replace(/^\/base\/|\.js$/g, '');
+    allTestFiles.push(normalizedTestModule);
+  }
+});
+
+require.config({
+  // Karma serves files under /base, which is the basePath from your config file
+  baseUrl: '/base',
+
+  // dynamically load all test files
+  deps: allTestFiles,
+
+  // we have to kickoff jasmine, as it is asynchronous
+  callback: window.__karma__.start
+});