fix get language locale from map provider (#891)

- `getLanguageForProvider` was using an undefined variable supportedLocalesforProvider. Updated function to 
get provider instance based on given provider name, and check if the given locale is within the list of provider's supported locales.

J=TECHOPS-1288
TEST=manual

used client experience that uses locale en_GB and see that map is loaded on page
added jest test for getLanguageForProvider()

static/js/theme-map/ThemeMap.js

@@ -5,10 +5,7 @@ import { RendererOptions } from './Renderer/Renderer.js';
 import { PinProperties } from './Maps/PinProperties.js';
 import { PinClustererOptions } from './PinClusterer/PinClusterer.js';
 import { transformDataToUniversalData, transformDataToVerticalData } from './Util/transformers.js';
-import { getEncodedSvg } from './Util/helpers.js';
-
-import { GoogleMaps } from './Maps/Providers/Google.js';
-import { MapboxMaps } from './Maps/Providers/Mapbox.js';
+import { getEncodedSvg, getMapProvider } from './Util/helpers.js';
 
 import ThemeMapConfig from './ThemeMapConfig.js'
 import StorageKeys from '../constants/storage-keys.js';
@@ -106,7 +103,7 @@ class ThemeMap extends ANSWERS.Component {
    * Load the map provider scripts and initialize the map with the configuration options
    */
   async loadAndInitializeMap () {
-    const mapProviderImpl = (this.config.mapProvider === 'google') ? GoogleMaps : MapboxMaps;
+    const mapProviderImpl = getMapProvider(this.config.mapProvider);
     await mapProviderImpl.load(this.config.apiKey, {
       client: this.config.clientId,
       language: this.config.language,

static/js/theme-map/Util/helpers.js

@@ -1,28 +1,48 @@
+import { GoogleMaps } from '../Maps/Providers/Google.js';
+import { MapboxMaps } from '../Maps/Providers/Mapbox.js';
+
 /**
  * Gets the language locale according to specific fallback logic
  * 1. The user-specified locale to the component
  * 2. If invalid, try using only the first two characters
  * 3. If still invalid, providers fallback to en
  *
  * @param {string} localeStr The user-defined locale string
- * @param {string[]} supportedLocales The locales supported by the current map provider
+ * @param {string} mapProvider name of the current map provider
  * @return {string} The language locale for the map
  */
-const getLanguageForProvider = (localeStr, supportedLocales) => {
+const getLanguageForProvider = (localeStr, mapProvider) => {
   if (localeStr.length == 2) {
     return localeStr;
   } 
 
   if (localeStr.length > 2) {
-    if (supportedLocalesForProvider.includes(localeStr)) {
-      return localeStr;
-    } 
+    const provider = getMapProvider(mapProvider);
+    const formattedLocaleStr = localeStr.replace('_', '-');
+    if (provider.getSupportedLocales().includes(formattedLocaleStr)) {
+      return formattedLocaleStr;
+    }
     return localeStr.substring(0, 2);
   }
-
   return 'en';
 };
 
+/**
+ * Returns the corresponding MapProvider instance (Default to MapBox)
+ * 
+ * @param {string} mapProvider
+ * @return {MapProvider}
+ */
+const getMapProvider = (mapProvider) => {
+  if (mapProvider === 'google') {
+    return GoogleMaps;
+  }
+  if (mapProvider === 'mapbox') {
+    return MapboxMaps;
+  }
+  return MapboxMaps;
+}
+
 /**
  * Returns a utf-8 encoding of an SVG
  *
@@ -124,6 +144,7 @@ const removeElement = (element) => {
 
 export {
   getLanguageForProvider,
+  getMapProvider,
   getEncodedSvg,
   getNormalizedLongitude,
   isViewableWithinContainer,

tests/static/js/theme-map/Util/helpers.js

@@ -1,4 +1,7 @@
-import { getNormalizedLongitude } from 'static/js/theme-map/Util/helpers.js';
+import { getNormalizedLongitude, getLanguageForProvider, getMapProvider } from 'static/js/theme-map/Util/helpers.js';
+import { GoogleMaps } from 'static/js/theme-map/Maps/Providers/Google.js';
+import { MapboxMaps } from 'static/js/theme-map//Maps/Providers/Mapbox.js';
+
 
 describe('getNormalizedLongitude', () => {
   describe('it works within normal longitude bounds', () => {
@@ -52,3 +55,32 @@ describe('getNormalizedLongitude', () => {
     });
   });
 });
+
+describe('getMapProvider', () => {
+  it('returns the right mapProvider instance', () => {
+      expect(getMapProvider('google')).toEqual(GoogleMaps);
+      expect(getMapProvider('mapbox')).toEqual(MapboxMaps);
+  }); 
+
+  it('returns MapBox on unsupported mapProvider name', () => {
+    expect(getMapProvider('unknown')).toEqual(MapboxMaps);
+  });
+});
+
+describe('getLanguageForProvider', () => {
+  describe('it works with different language/locale pairs', () => {
+    it('works with map provider google', () => {
+      expect(getLanguageForProvider('en', 'google')).toEqual('en');
+      expect(getLanguageForProvider('a', 'google')).toEqual('en');
+      expect(getLanguageForProvider('en-IDK', 'google')).toEqual('en');
+      expect(getLanguageForProvider('en-GB', 'google')).toEqual('en-GB');
+      expect(getLanguageForProvider('en_GB', 'google')).toEqual('en-GB');
+    });
+
+    it('works with map provider mapbox', () => {
+      expect(getLanguageForProvider('a', 'mapbox')).toEqual('en');
+      expect(getLanguageForProvider('fr', 'mapbox')).toEqual('fr');
+      expect(getLanguageForProvider('fr-CA', 'mapbox')).toEqual('fr');
+    });
+  });
+});