Add jasmine-browser-runner (#13765)

* Add jasmine-browser-runner tests

* Replace Karma with Jasmine Browser Runner

* Update test npm script

* Update jasmine webpack and test commands

* Update npm script and documentation

* PR revisions

* Add package lock

Author: nathan-barrett

.eslintrc.js

@@ -79,7 +79,7 @@ module.exports = {
             }
         },
         {
-            // JS Karma test files.
+            // JS Jasmine test files.
             files: ['tests/unit/**/*.js'],
             env: {
                 es2017: true,
@@ -97,7 +97,7 @@ module.exports = {
             files: [
                 'webpack.config.js',
                 'webpack.static.config.js',
-                'tests/unit/karma.conf.js'
+                'webpack.test.config.js'
             ],
             env: {
                 node: true,

.gitignore

@@ -60,3 +60,4 @@ tests/unit/coverage
 Thumbs.db
 tmp/*
 venv
+tests/unit/dist/

.prettierignore

@@ -9,6 +9,7 @@ static
 static_build
 static_final
 venv
+tests/unit/dist
 
 # Ignore external JS libraries
 media/js/libs/**/

docs/testing.rst

@@ -9,24 +9,58 @@ Front-end testing
 =================
 
 Bedrock runs a suite of front-end `Jasmine`_ behavioral/unit tests, which use
-`Karma`_ as a test runner. We also have a suite of functional tests using
+`Jasmine Browser Runner`_ as a test runner. We also have a suite of functional tests using
 `Selenium`_ and `pytest`_. This allows us to emulate users interacting with a
-real browser. All these test suites live in the ``tests`` directory.
+real browser. All these test suites live in the ``tests`` directory. To run the tests locally,
+you must also first download `geckodriver`_  and `chromedriver`_ and make it available
+in your system path. You can alternatively specify the path to geckodriver and chromedriver
+using the command line (see the `pytest-selenium documentation`_ for more information).
 
 The ``tests`` directory comprises of:
 
 * ``/functional`` contains pytest tests.
 * ``/pages`` contains Python page objects.
-* ``/unit`` contains the Jasmine tests and Karma config file.
+* ``/unit`` contains the Jasmine tests and Jasmine Browser Runner config file.
 
 Installation
 ------------
 
 First follow the :ref:`installation instructions for bedrock<install>`, which
 will install the dependencies required to run the various front-end test suites.
 
+To download geckodriver and chromedriver and have it ready to run in your system, there are a couple of ways:
 
-Running Jasmine tests using Karma
+- Download geckdriver's `latest release`_ and add it to your system path:
+
+        .. code-block:: bash
+
+            cd /path/to/your/downloaded/files/
+            mv geckodriver /usr/local/bin/
+
+- If you're on MacOS, download geckodriver directly using Homebrew, which automatically places it in your system path:
+
+        .. code-block:: bash
+
+            brew install geckodriver
+
+
+- Download chromedriver's `latest release <https://chromedriver.chromium.org/downloads>`_ and add it to your system path:
+
+        .. code-block:: bash
+
+            cd /path/to/your/downloaded/files/
+            mv chromedriver /usr/local/bin/
+
+- If you're on MacOS, download chromedriver directly using Homebrew/Cask, which automatically places it in your system path:
+
+        .. code-block:: bash
+
+            brew tap homebrew/cask
+
+            brew cask install chromedriver
+
+
+Running Jasmine tests using Jasmine Browser Runner
 ---------------------------------
 
 To perform a single run of the Jasmine test suite using Firefox and Chrome,
@@ -49,7 +83,7 @@ run:
 
 .. code-block:: bash
 
-    $ npm run karma
+    $ npm run test
 
 See the `Jasmine`_ documentation for tips on how to write JS behavioral or unit
 tests. We also use `Sinon`_ for creating test spies, stubs and mocks.
@@ -62,25 +96,7 @@ Running functional tests
   Before running the functional tests, please make sure to follow the bedrock
   :ref:`installation docs<install>`, including the database sync that is needed
   to pull in external data such as event/blog feeds etc. These are required for
-  some of the tests to pass. To run the tests using Firefox, you must also first
-  download `geckodriver`_ and make it available in your system path. You can
-  alternatively specify the path to geckodriver using the command line (see the
-  `pytest-selenium documentation`_ for more information).
-
-To download geckodriver and have it ready to run in your system, there are a couple of ways:
-
-- Download its `latest release`_ and add it to your system path:
-
-        .. code-block:: bash
-
-            cd /path/to/your/downloaded/files/
-            mv geckodriver /usr/local/bin/
-
-- If you're on MacOS, download it directly using Homebrew, which automatically places it in your system path:
-
-        .. code-block:: bash
-
-            brew install geckodriver
+  some of the tests to pass.
 
 To run the full functional test suite against your local bedrock instance in
 Mozorg mode:
@@ -320,7 +336,7 @@ These tests and are run as part of the pipeline to ensure that download links co
 via product details are well formed and return valid 200 responses.
 
 .. _Jasmine: https://jasmine.github.io/index.html
-.. _Karma: https://karma-runner.github.io/
+.. _Jasmine Browser Runner: https://jasmine.github.io/setup/browser.html
 .. _Sinon: http://sinonjs.org/
 .. _Selenium: http://docs.seleniumhq.org/
 .. _pytest: http://pytest.org/latest/
@@ -337,3 +353,4 @@ via product details are well formed and return valid 200 responses.
 .. _Basket: https://github.com/mozilla/basket
 .. _geckodriver: https://github.com/mozilla/geckodriver/releases/latest
 .. _latest release: https://github.com/mozilla/geckodriver/releases/
+.. _chromedriver: https://chromedriver.chromium.org/downloads