Add unit testing for browser language (#197)

* Add unit testing

* Update unit testing

* Update unit testing

* fix a big heap of formatting typo

.babelrc

@@ -0,0 +1,13 @@
+{
+    "presets": [[
+        "@babel/preset-env",
+        {
+            "corejs": "3",
+            "useBuiltIns": "usage"
+        }
+    ]],
+    "plugins": [
+        "@babel/plugin-transform-runtime",
+        "@babel/plugin-proposal-class-properties"
+    ]
+}

.eslintrc.js

@@ -28,4 +28,10 @@ module.exports = {
     'vue/no-unused-vars': 0,
     'vue/html-self-closing': 0,
   },
+  globals: {
+    'describe': true,
+    'expect': true,
+    'it': true,
+    'test': true,
+  },
 };

package.json

@@ -19,7 +19,8 @@
     "dev:tool": "vue-cli-service serve src/nginxconfig/mount.js",
     "analyze": "npm run build:tool -- --analyze",
     "deploy:spaces:comment": "do-vue comment nginxconfig",
-    "test": "npm run test:eslint && npm run test:sass-lint && npm run test:i18n-packs",
+    "test": "npm run test:eslint && npm run test:sass-lint && npm run test:i18n-packs && npm run test:jest",
+    "test:jest": "jest /test/.*.js?$",
     "test:fix": "npm run test:eslint:fix && npm run test:sass-lint:fix",
     "test:eslint": "eslint 'src/**/*.{js,vue}'",
     "test:eslint:fix": "npm run test:eslint -- --fix",
@@ -27,6 +28,9 @@
     "test:sass-lint:fix": "sass-lint-auto-fix 'src/**/*.scss'",
     "test:i18n-packs": "node -r esm src/nginxconfig/i18n/verify.js"
   },
+  "jest": {
+    "testRegex": "/test/.*.js?$"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/digitalocean/nginxconfig.io.git"
@@ -57,13 +61,19 @@
     "vue-select": "^3.10.8"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.11.5",
+    "@babel/preset-env": "^7.11.5",
+    "@babel/runtime": "^7.11.2",
     "@vue/cli-service": "^4.5.9",
     "babel-eslint": "^10.1.0",
     "chalk": "^4.1.0",
     "copyfiles": "^2.4.1",
+    "core-js": "^3.6.5",
     "duplicate-package-checker-webpack-plugin": "^3.0.0",
     "eslint": "^7.15.0",
     "eslint-plugin-vue": "^7.3.0",
+    "jest": "^26.6.3",
     "esm": "^3.2.25",
     "node-fetch": "^2.6.1",
     "sass": "^1.30.0",

src/nginxconfig/util/browser_language.js

@@ -38,7 +38,8 @@ export default () => {
         if (typeof window.navigator.language === 'string')
             userLocales.add(window.navigator.language);
         if (Intl && 'DateTimeFormat' in Intl)
-            userLocales.add(Intl.DateTimeFormat().resolvedOptions().locale);
+            if (Intl.DateTimeFormat().resolvedOptions().locale !== 'und')
+                userLocales.add(Intl.DateTimeFormat().resolvedOptions().locale);
 
         // Try to find an exact region/language match
         const i18nPackLocales = Object.keys(i18nPacks);
@@ -53,7 +54,9 @@ export default () => {
         }, {});
 
         // Try to match a user language to a pack language
-        const langMatch = [...userLocales.values()].find(x => i18nPackLanguages.includes(x.split('-')[0].toLowerCase()));
+        const langMatch = [...userLocales.values()].find(x => Object.keys(i18nPackLanguages).includes(x.split('-')[0].toLowerCase()));
         if (langMatch) return i18nPackLanguages[langMatch.split('-')[0].toLowerCase()];
+
+        return false;
     }
 };

test/testBrowserLanguage.js

@@ -0,0 +1,171 @@
+/*
+Copyright 2020 DigitalOcean
+
+This code is licensed under the MIT License.
+You may obtain a copy of the License at
+https://github.com/digitalocean/nginxconfig.io/blob/master/LICENSE or https://mit-license.org/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions :
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+import browserLanguage from '../src/nginxconfig/util/browser_language';
+
+class MockLocales {
+    static languages = [];
+
+    static language = null;
+
+    static IntlBackup = null;
+
+    static navigator = null;
+
+    static setNavigatorLanguages(langs) {
+        MockLocales.languages = langs;
+        return this;
+    }
+
+    static setNavigatorLanguage(lang) {
+        MockLocales.language = lang;
+        return this;
+    }
+
+    static setDateTimeLocale(locale) {
+        const newDateTimeFormat = new Intl.DateTimeFormat(locale);
+        MockLocales.IntlBackup = Intl;
+        if (!locale) {
+            // eslint-disable-next-line no-global-assign
+            Intl = undefined;
+            return this;
+        }
+
+        // eslint-disable-next-line no-global-assign
+        Intl = {
+            DateTimeFormat() {
+                return newDateTimeFormat;
+            },
+        };
+        return this;
+    }
+
+    static restoreDateTimeLocale() {
+        // eslint-disable-next-line no-global-assign
+        Intl = MockLocales.IntlBackup;
+        MockLocales.IntlBackup = null;
+        return this;
+    }
+
+    static setNavigator(navigator) {
+        MockLocales.navigator = window.navigator;
+        window.navigator = navigator;
+        return this;
+    }
+
+    static restoreNavigator() {
+        window.navigator = MockLocales.navigator;
+        MockLocales.navigator = null;
+        return this;
+    }
+}
+
+Object.defineProperty(window.navigator, 'languages', { get: () => {
+    return MockLocales.languages || [];
+}});
+
+Object.defineProperty(window.navigator, 'language', { get: () => {
+    return MockLocales.language || null;
+}});
+
+
+describe('browserLanguage', () => {
+    test('Selects the first available exact match for language/region', () => {
+        MockLocales.setDateTimeLocale(undefined);
+
+        MockLocales.setNavigatorLanguages(['zh-CN', 'zh','en-US','en']);
+        expect(browserLanguage()).toEqual('zhCN');
+
+        MockLocales.setNavigatorLanguages(['zh-TW','zh','en-US','en']);
+        expect(browserLanguage()).toEqual('zhTW');
+
+        MockLocales.setNavigatorLanguages(['zh', 'en-US', 'en']);
+        expect(browserLanguage()).toEqual('en');
+
+        MockLocales.restoreDateTimeLocale();
+    });
+
+    test('Selects the first available language match based on language/region',() => {
+        MockLocales.setDateTimeLocale(undefined);
+
+        MockLocales.setNavigatorLanguages(['ja-JP', 'ja', 'en-US']);
+        expect(browserLanguage()).toEqual('en');
+
+        MockLocales.restoreDateTimeLocale();
+    });
+
+    test('Selects the first available language match based on language alone',() => {
+        MockLocales.setDateTimeLocale(undefined);
+
+        MockLocales.setNavigatorLanguages(['ja-JP', 'ja', 'zh']);
+        expect(browserLanguage()).toEqual('zhCN');
+
+        MockLocales.restoreDateTimeLocale();
+    });
+
+    test('Returns false when there is no available match',() => {
+        MockLocales.setDateTimeLocale(undefined);
+
+        MockLocales.setNavigatorLanguages(['ja-JP','ja']);
+        expect(browserLanguage()).toBeFalsy();
+
+        MockLocales.restoreDateTimeLocale();
+    });
+
+    describe('Different sources for user locale', () => {
+        test('language, languages and and Intl locale are `undefined`',() => {
+            MockLocales.setNavigatorLanguages(undefined);
+            MockLocales.setNavigatorLanguage(undefined);
+            MockLocales.setDateTimeLocale(undefined);
+            expect(browserLanguage()).toBeFalsy();
+            MockLocales.restoreDateTimeLocale();
+        });
+
+        test('language is `en`, languages and Intl locale are `undefined`',() => {
+            MockLocales.setNavigatorLanguage('en');
+            MockLocales.setNavigatorLanguages(undefined);
+            MockLocales.setDateTimeLocale(undefined);
+            expect(browserLanguage()).toEqual('en');
+            MockLocales.restoreDateTimeLocale();
+        });
+
+        test('language and Intl locale are `undefined`, languages is `en-US, en`',() => {
+            MockLocales.setNavigatorLanguage(undefined);
+            MockLocales.setNavigatorLanguages(['en-US','en']);
+            MockLocales.setDateTimeLocale(undefined);
+            expect(browserLanguage()).toEqual('en');
+            MockLocales.restoreDateTimeLocale();
+        });
+
+        test('navigator is `undefined` and Intl locale is `en-US`',() => {
+            MockLocales.setNavigator(undefined);
+            MockLocales.setDateTimeLocale('en-US');
+            expect(browserLanguage()).toEqual('en');
+            MockLocales.restoreDateTimeLocale();
+            MockLocales.restoreNavigator();
+        });
+    });
+});