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
2023-10-16 12:19:28 -05:00 · 2023-10-16 12:19:28 -05:00 · 166678d98b
--- a/.eslintrc.js
+++ b/.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,
--- a/.gitignore
+++ b/.gitignore
@ -60,3 +60,4 @@ tests/unit/coverage
 Thumbs.db
 tmp/*
 venv
+tests/unit/dist/
--- a/.prettierignore
+++ b/.prettierignore
@ -9,6 +9,7 @@ static
 static_build
 static_final
 venv
+tests/unit/dist

 # Ignore external JS libraries
 media/js/libs/**/
--- a/docs/testing.rst
+++ b/docs/testing.rst
@ -9,15 +9,18 @@ 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
 ------------
@ -25,8 +28,39 @@ 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
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -40,12 +40,7 @@
    "eslint": "^8.51.0",
    "eslint-config-prettier": "^9.0.0",
    "jasmine-core": "^5.0.1",
-    "karma": "^6.4.2",
-    "karma-chrome-launcher": "^3.2.0",
-    "karma-firefox-launcher": "^2.1.2",
-    "karma-jasmine": "^5.1.0",
-    "karma-sourcemap-loader": "^0.4.0",
-    "karma-webpack": "^5.0.0",
+    "jasmine-browser-runner": "^2.3.0",
    "prettier": "^3.0.3",
    "sinon": "^15.2.0",
    "stylelint": "^15.10.3",
@ -58,11 +53,12 @@
    "prestart": "npm run glean",
    "start": "concurrently --kill-others \"python manage.py runserver 0.0.0.0:8080\" \"npm run watch\"",
    "in-pocket-mode": "SITE_MODE=Pocket npm start",
-    "lint-js": "./node_modules/.bin/eslint \"media/js/**/*.js\" \"tests/unit/spec/**/*.js\" webpack.config.js webpack.static.config.js",
+    "lint-js": "./node_modules/.bin/eslint \"media/js/**/*.js\" \"tests/unit/spec/**/*.js\" webpack.config.js webpack.test.config.js webpack.static.config.js",
    "lint-css": "./node_modules/.bin/stylelint \"media/css/**/*.{css,scss}\"",
    "lint": "npm run lint-js && npm run lint-css && npm run prettier-check",
-    "test": "npm run glean && npm run lint && npm run karma",
-    "karma": "./node_modules/.bin/karma start ./tests/unit/karma.conf.js",
+    "test-build": "webpack --config webpack.test.config.js --mode=development",
+    "jasmine": "npm run test-build && ./node_modules/jasmine-browser-runner/bin/jasmine-browser-runner runSpecs --config=tests/unit/jasmine-browser.json && ./node_modules/jasmine-browser-runner/bin/jasmine-browser-runner runSpecs --browser=chrome --config=tests/unit/jasmine-browser.json",
+    "test": "npm run glean && npm run lint && npm run jasmine",
    "static": "webpack --config webpack.static.config.js --mode=production --bail",
    "prebuild": "npm run glean && npm run static",
    "build": "webpack --mode=production --bail",
--- a/tests/unit/jasmine-browser.json
+++ b/tests/unit/jasmine-browser.json
@ -0,0 +1,20 @@
+{
+  "srcDir": "tests/unit/dist",
+  "srcFiles": [
+    "test-deps.js"
+  ],
+  "specDir": "tests/unit/dist",
+  "specFiles": [
+    "test.js"
+  ],
+  "helpers": [],
+  "env": {
+    "stopSpecOnExpectationFailure": false,
+    "stopOnSpecFailure": false,
+    "random": true
+  },
+  "browser": {
+    "name": "firefox"
+  },
+  "port": 9876
+}
--- a/tests/unit/karma.conf.js
+++ b/tests/unit/karma.conf.js
@ -1,173 +0,0 @@
-/*
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at https://mozilla.org/MPL/2.0/.
- */
-
-module.exports = function (config) {
-    config.set({
-        // Karma configuration
-
-        // base path, that will be used to resolve files and exclude
-        basePath: '../../',
-
-        frameworks: ['jasmine', 'webpack'],
-
-        // list of files / patterns to load in the browser
-        files: [
-            // begin common dependencies.
-            'media/js/base/site.js',
-            'media/js/base/mozilla-utils.js',
-            'media/js/base/mozilla-client.js',
-            'media/js/base/search-params.js',
-            'media/js/base/mozilla-cookie-helper.js',
-            // end common dependencies.
-            'media/js/base/banners/mozilla-banner.js',
-            'media/js/base/mozilla-run.js',
-            'media/js/base/core-datalayer-page-id.js',
-            'media/js/base/core-datalayer.js',
-            'media/js/base/experiment-utils.es6.js',
-            'media/js/base/mozilla-fxa.js',
-            'media/js/base/mozilla-smoothscroll.js',
-            'media/js/base/stub-attribution.js',
-            'media/js/firefox/all/all-downloads-unified.js',
-            'media/js/firefox/new/common/thanks.js',
-            'media/js/firefox/family/fx-is-default.es6.js',
-            'media/js/pocket/analytics.es6.js',
-            'media/js/pocket/mobile-nav.es6.js',
-            'media/js/products/shared/affiliate-attribution.es6.js',
-            'media/js/newsletter/form-utils.es6.js',
-            'media/js/newsletter/recovery.es6.js',
-            'tests/unit/spec/base/core-datalayer-page-id.js',
-            'tests/unit/spec/base/core-datalayer.js',
-            'tests/unit/spec/base/datalayer-begincheckout.js',
-            'tests/unit/spec/base/datalayer-productdownload.js',
-            'tests/unit/spec/base/experiment-utils.js',
-            'tests/unit/spec/base/fxa-form.js',
-            'tests/unit/spec/base/fxa-link.js',
-            'tests/unit/spec/base/fxa-attribution.js',
-            'tests/unit/spec/base/mozilla-banner.js',
-            'tests/unit/spec/base/mozilla-client.js',
-            'tests/unit/spec/base/fxa-product-button.js',
-            'tests/unit/spec/base/mozilla-fxa.js',
-            'tests/unit/spec/base/mozilla-run.js',
-            'tests/unit/spec/base/mozilla-smoothscroll.js',
-            'tests/unit/spec/base/mozilla-utils.js',
-            'tests/unit/spec/base/search-params.js',
-            'tests/unit/spec/base/send-to-device.js',
-            'tests/unit/spec/base/site.js',
-            'tests/unit/spec/base/stub-attribution.js',
-            'tests/unit/spec/careers/filters.js',
-            'tests/unit/spec/careers/params.js',
-            'tests/unit/spec/firefox/all/all-downloads-unified.js',
-            'tests/unit/spec/firefox/new/common/thanks.js',
-            'tests/unit/spec/firefox/family/fx-is-default.js',
-            'tests/unit/spec/pocket/analytics.js',
-            'tests/unit/spec/pocket/mobile-nav.js',
-            'tests/unit/spec/pocket/updates-signup.js',
-            'tests/unit/spec/glean/elements.js',
-            'tests/unit/spec/glean/page.js',
-            'tests/unit/spec/glean/utils.js',
-            'tests/unit/spec/products/vpn/invite.js',
-            'tests/unit/spec/products/shared/affiliate-attribution.js',
-            'tests/unit/spec/newsletter/country.js',
-            'tests/unit/spec/newsletter/form-utils.js',
-            'tests/unit/spec/newsletter/management.js',
-            'tests/unit/spec/newsletter/newsletter.js',
-            'tests/unit/spec/newsletter/recovery.js',
-            'tests/unit/spec/newsletter/unsubscribed.js',
-            'tests/unit/spec/privacy/data-preferences-cookie.js',
-            {
-                pattern: 'node_modules/sinon/pkg/sinon.js',
-                watched: false,
-                included: true
-            },
-            {
-                pattern: 'tests/unit/img/*',
-                included: false,
-                served: true
-            }
-        ],
-
-        preprocessors: {
-            'media/js/**/*.js': ['webpack', 'sourcemap'],
-            'tests/unit/**/*.js': ['webpack', 'sourcemap']
-        },
-
-        webpack: {
-            devtool: 'inline-source-map',
-            module: {
-                rules: [
-                    {
-                        test: /\.es6\.js$/,
-                        exclude: /node_modules/,
-                        use: {
-                            loader: 'babel-loader',
-                            options: {
-                                presets: [
-                                    [
-                                        '@babel/preset-env',
-                                        {
-                                            targets: {
-                                                ie: '10'
-                                            }
-                                        }
-                                    ]
-                                ]
-                            }
-                        }
-                    }
-                ]
-            }
-        },
-
-        proxies: {
-            '/img/': '/base/tests/unit/img/'
-        },
-
-        // list of files to exclude
-        exclude: [],
-
-        // test results reporter to use
-        // possible values: 'dots', 'progress', 'junit', 'coverage'
-        reporters: ['progress'],
-
-        // web server port
-        port: 9876,
-
-        // cli runner port
-        runnerPort: 9100,
-
-        // enable / disable colors in the output (reporters and logs)
-        colors: true,
-
-        // level of logging
-        // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
-        //logLevel: console.LOG_INFO,
-
-        // enable / disable watching file and executing tests whenever any file changes
-        autoWatch: false,
-
-        // Start these browsers, currently available:
-        // - Chrome
-        // - ChromeCanary
-        // - Firefox
-        // - Opera
-        // - Safari (only Mac)
-        // - PhantomJS
-        // - IE (only Windows)
-        browsers: ['Firefox', 'Chrome'],
-
-        // If browser does not capture in given timeout [ms], kill it
-        captureTimeout: 60000,
-
-        // Supress console logs triggered in code.
-        client: {
-            captureConsole: false
-        },
-
-        // Continuous Integration mode
-        // if true, it capture browsers, run tests and exit
-        singleRun: true
-    });
-};
--- a/webpack.test.config.js
+++ b/webpack.test.config.js
@ -0,0 +1,73 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+'use strict';
+
+const path = require('path');
+const glob = require('glob');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+module.exports = {
+    entry: {
+        test: glob.sync('tests/unit/spec/**/*.js'),
+        'test-deps': [
+            'media/js/base/site.js',
+            'media/js/base/mozilla-utils.js',
+            'media/js/base/mozilla-client.js',
+            'media/js/base/search-params.js',
+            'media/js/base/mozilla-cookie-helper.js',
+            'media/js/base/banners/mozilla-banner.js',
+            'media/js/base/mozilla-run.js',
+            'media/js/base/core-datalayer-page-id.js',
+            'media/js/base/core-datalayer.js',
+            'media/js/base/experiment-utils.es6.js',
+            'media/js/base/mozilla-fxa.js',
+            'media/js/base/mozilla-smoothscroll.js',
+            'media/js/base/stub-attribution.js',
+            'media/js/firefox/all/all-downloads-unified.js',
+            'media/js/firefox/new/common/thanks.js',
+            'media/js/firefox/family/fx-is-default.es6.js',
+            'media/js/pocket/analytics.es6.js',
+            'media/js/pocket/mobile-nav.es6.js',
+            'media/js/products/shared/affiliate-attribution.es6.js',
+            'media/js/newsletter/form-utils.es6.js',
+            'media/js/newsletter/recovery.es6.js',
+            'node_modules/sinon/pkg/sinon.js'
+        ]
+    },
+    output: {
+        filename: '[name].js',
+        path: path.resolve(__dirname, 'tests/unit/dist')
+    },
+    plugins: [new CleanWebpackPlugin()],
+    resolve: {
+        modules: [__dirname, 'src', 'node_modules'],
+        extensions: ['*', '.js']
+    },
+    module: {
+        rules: [
+            {
+                test: /\.es6\.js$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: [
+                            [
+                                '@babel/preset-env',
+                                {
+                                    targets: {
+                                        ie: '10'
+                                    }
+                                }
+                            ]
+                        ]
+                    }
+                }
+            }
+        ]
+    }
+};