Fix Bug 1513203, add Jest and True, and initial tests

.eslintrc.js

@@ -1,8 +1,15 @@
 module.exports = {
     'env': {
         'browser': true,
-        'jquery': true
+        'es6': true,
+        "jest/globals": true,
+        'jquery': true,
+        "node": true
     },
+    'parserOptions': {
+        'ecmaVersion': 6
+    },
+    "plugins": ["jest"],
     'extends': 'eslint:recommended',
     'rules': {
         'no-global-assign': 'error',

__tests__/payments-handler-utils.test.js

@@ -0,0 +1,27 @@
+const paymentsHandlerUtils = require('../kuma/static/js/components/payments/payments-handler-utils.js');
+
+describe('addCurrencyPrefix', function() {
+    it('returns an empty string for non numerals and values less that 1', function() {
+        expect(paymentsHandlerUtils.addCurrencyPrefix(0.5)).toEqual('');
+        expect(paymentsHandlerUtils.addCurrencyPrefix('ten')).toEqual('');
+    });
+
+    it('returns a dollar amount as a string for values greater than 1', function() {
+        expect(paymentsHandlerUtils.addCurrencyPrefix(1)).toEqual('$1');
+        expect(paymentsHandlerUtils.addCurrencyPrefix('10')).toEqual('$10');
+    });
+});
+
+describe('getSelectedAmount', function() {
+    it('returns an integer for whole numbers', function() {
+        expect(paymentsHandlerUtils.getSelectedAmount(1)).toEqual(1);
+        expect(paymentsHandlerUtils.getSelectedAmount('2')).toEqual(2);
+        expect(typeof 10).toEqual(typeof paymentsHandlerUtils.getSelectedAmount('10'));
+    });
+
+    it('returns a floating point number as a string, limited to two decimal places for decimal values', function() {
+        expect(paymentsHandlerUtils.getSelectedAmount(1.2345)).toEqual('1.23');
+        expect(paymentsHandlerUtils.getSelectedAmount(1.2)).toEqual('1.20');
+        expect(paymentsHandlerUtils.getSelectedAmount('10.9')).toEqual('10.90');
+    });
+});

__tests__/sass/mdn/_typography-mixin-test.scss

@@ -0,0 +1,37 @@
+@include describe('-remify') {
+    @include it('Converts pixel based units to rem units') {
+        $expect: .88889rem; /* stylelint-disable number-leading-zero */
+
+        /* Docs: http://oddbird.net/true/docs/api-assert-values.html#mixin--assert-equal */
+        @include assert-equal(-remify(16px), $expect, null, true);
+    }
+}
+
+@include describe('set-font-size') {
+    @include it(
+        'Returns a rem based font-size declaration, and a pixel based fallback'
+    ) {
+        @include assert {
+            @include output {
+                @include set-font-size(16px);
+            }
+
+            @include expect {
+                font-size: 16px;
+                font-size: 0.88889rem;
+            }
+        }
+    }
+
+    @include it('Returns only a rem based font-size declaration') {
+        @include assert {
+            @include output {
+                @include set-font-size(2rem);
+            }
+
+            @include expect {
+                font-size: 2rem;
+            }
+        }
+    }
+}

__tests__/sass/test-sass.js

@@ -0,0 +1,5 @@
+var path = require('path');
+var sassTrue = require('sass-true');
+
+var sassFile = path.join(__dirname, 'test.scss');
+sassTrue.runSass({file: sassFile}, describe, it);

__tests__/sass/test.scss

@@ -0,0 +1,7 @@
+/* Requirements */
+@import '../../node_modules/sass-true/sass/true';
+@import '../../kuma/static/styles/includes/vars';
+@import '../../kuma/static/styles/includes/mixins';
+
+/* Tests */
+@import 'mdn/typography-mixin-test';

jest.config.js

@@ -0,0 +1,180 @@
+// For a detailed explanation regarding each configuration property, visit:
+// https://jestjs.io/docs/en/configuration.html
+
+module.exports = {
+    // All imported modules in your tests should be mocked automatically
+    // automock: false,
+
+    // Stop running tests after the first failure
+    // bail: false,
+
+    // Respect "browser" field in package.json when resolving modules
+    // browser: false,
+
+    // The directory where Jest should store its cached dependency information
+    // cacheDirectory: "/var/folders/l1/mjqxjq7j08jb6z6_f7j5wcgw0000gn/T/jest_dx",
+
+    // Automatically clear mock calls and instances between every test
+    clearMocks: true,
+
+    // Indicates whether the coverage information should be collected while executing the test
+    // collectCoverage: false,
+
+    // An array of glob patterns indicating a set of files for which coverage information should be collected
+    // collectCoverageFrom: null,
+
+    // The directory where Jest should output its coverage files
+    coverageDirectory: 'coverage'
+
+    // An array of regexp pattern strings used to skip coverage collection
+    // coveragePathIgnorePatterns: [
+    //   "/node_modules/"
+    // ],
+
+    // A list of reporter names that Jest uses when writing coverage reports
+    // coverageReporters: [
+    //   "json",
+    //   "text",
+    //   "lcov",
+    //   "clover"
+    // ],
+
+    // An object that configures minimum threshold enforcement for coverage results
+    // coverageThreshold: null,
+
+    // Make calling deprecated APIs throw helpful error messages
+    // errorOnDeprecated: false,
+
+    // Force coverage collection from ignored files usin a array of glob patterns
+    // forceCoverageMatch: [],
+
+    // A path to a module which exports an async function that is triggered once before all test suites
+    // globalSetup: null,
+
+    // A path to a module which exports an async function that is triggered once after all test suites
+    // globalTeardown: null,
+
+    // A set of global variables that need to be available in all test environments
+    // globals: {},
+
+    // An array of directory names to be searched recursively up from the requiring module's location
+    // moduleDirectories: [
+    //   "node_modules"
+    // ],
+
+    // An array of file extensions your modules use
+    // moduleFileExtensions: [
+    //   "js",
+    //   "json",
+    //   "jsx",
+    //   "node"
+    // ],
+
+    // A map from regular expressions to module names that allow to stub out resources with a single module
+    // moduleNameMapper: {},
+
+    // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
+    // modulePathIgnorePatterns: [],
+
+    // Activates notifications for test results
+    // notify: false,
+
+    // An enum that specifies notification mode. Requires { notify: true }
+    // notifyMode: "always",
+
+    // A preset that is used as a base for Jest's configuration
+    // preset: null,
+
+    // Run tests from one or more projects
+    // projects: null,
+
+    // Use this configuration option to add custom reporters to Jest
+    // reporters: undefined,
+
+    // Automatically reset mock state between every test
+    // resetMocks: false,
+
+    // Reset the module registry before running each individual test
+    // resetModules: false,
+
+    // A path to a custom resolver
+    // resolver: null,
+
+    // Automatically restore mock state between every test
+    // restoreMocks: false,
+
+    // The root directory that Jest should scan for tests and modules within
+    // rootDir: null,
+
+    // A list of paths to directories that Jest should use to search for files in
+    // roots: [
+    //   "<rootDir>"
+    // ],
+
+    // Allows you to use a custom runner instead of Jest's default test runner
+    // runner: "jest-runner",
+
+    // The paths to modules that run some code to configure or set up the testing environment before each test
+    // setupFiles: [],
+
+    // The path to a module that runs some code to configure or set up the testing framework before each test
+    // setupTestFrameworkScriptFile: null,
+
+    // A list of paths to snapshot serializer modules Jest should use for snapshot testing
+    // snapshotSerializers: [],
+
+    // The test environment that will be used for testing
+    // testEnvironment: "jest-environment-jsdom",
+
+    // Options that will be passed to the testEnvironment
+    // testEnvironmentOptions: {},
+
+    // Adds a location field to test results
+    // testLocationInResults: false,
+
+    // The glob patterns Jest uses to detect test files
+    // testMatch: [
+    //   "**/__tests__/**/*.js?(x)",
+    //   "**/?(*.)+(spec|test).js?(x)"
+    // ],
+
+    // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+    // testPathIgnorePatterns: [
+    //   "/node_modules/"
+    // ],
+
+    // The regexp pattern Jest uses to detect test files
+    // testRegex: "",
+
+    // This option allows the use of a custom results processor
+    // testResultsProcessor: null,
+
+    // This option allows use of a custom test runner
+    // testRunner: "jasmine2",
+
+    // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
+    // testURL: "http://localhost",
+
+    // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
+    // timers: "real",
+
+    // A map from regular expressions to paths to transformers
+    // transform: null,
+
+    // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+    // transformIgnorePatterns: [
+    //   "/node_modules/"
+    // ],
+
+    // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
+    // unmockedModulePathPatterns: undefined,
+
+    // Indicates whether each individual test should be reported during the run
+    // verbose: null,
+
+    // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
+    // watchPathIgnorePatterns: [],
+
+    // Whether to use watchman for file crawling
+    // watchman: true,
+};

kuma/settings/common.py

@@ -959,17 +959,18 @@ def pipeline_one_scss(slug, **kwargs):
     },
     'payments': {
         'source_filenames': (
-            'js/payments-handler.js',
-            'js/payments-faq.js',
+            'js/components/payments/payments-handler-utils.js',
+            'js/components/payments/payments-handler.js',
+            'js/components/payments/payments-faq.js',
             'js/tooltip.js',
-            'js/payments-manage.js',
+            'js/components/payments/payments-manage.js',
         ),
         'output_filename': 'build/js/payments.js',
     },
     'payments-confirmation': {
         'source_filenames': (
-            'js/payments-faq.js',
-            'js/payments-confirmation.js',
+            'js/components/payments/payments-faq.js',
+            'js/components/payments/payments-confirmation.js',
         ),
         'output_filename': 'build/js/payments-confirmation.js',
     },

kuma/static/js/components/payments/payments-handler-utils.js

@@ -0,0 +1,30 @@
+var mdn = window.mdn || {};
+var paymentsHandlerUtils = {
+    /**
+     * If the `selectedAmount` isNaN or less than 1, return and empty
+     * string else, prepend a dollar symbol and return.
+     * NOTE: This function relies on JavaScript's loose string-to-number conversions
+     * @param {String|Number} selectedAmount - The number to process
+     * @returns `selectedAmount` prefixed with a dollar symbol, or an empty string
+     */
+    addCurrencyPrefix: function(selectedAmount) {
+        'use strict';
+        return isNaN(selectedAmount) || selectedAmount < 1
+            ? ''
+            : '$' + selectedAmount;
+    },
+    getSelectedAmount: function(value) {
+        'use strict';
+        return value % 1 === 0 ? parseInt(value, 10) : parseFloat(value).toFixed(2);
+    }
+};
+
+/* First step towards using actual modules for our JS.
+   This will allow unit testing, and */
+if (typeof exports === 'object') {
+    module.exports = paymentsHandlerUtils;
+}
+
+/* this will ensure it also works in the browser,
+   without yet needing Babel */
+mdn.paymentsHandlerUtils = paymentsHandlerUtils;

kuma/static/js/payments-handler.js → kuma/static/js/components/payments/payments-handler.js

@@ -246,8 +246,8 @@
             form.find('input[type=\'radio\']:checked').prop('checked', false);
         }
 
-        selectedAmount = event.target.value % 1 === 0 ? parseInt(event.target.value) : parseFloat(event.target.value).toFixed(2);
-        var newValue = (selectedAmount < 1 || isNaN(selectedAmount)) ? '' : '$' + selectedAmount;
+        selectedAmount = mdn.paymentsHandlerUtils.getSelectedAmount(event.target.value);
+        var newValue = mdn.paymentsHandlerUtils.addCurrencyPrefix(selectedAmount);
         amountToUpdate.html(newValue);
 
         // Explicitly add `/month` on the payment button for the banner