Default to English the language switcher

Instead of crashing the language switcher componte when the cookie
doesn't contain a `preferred_language`, now it defaults to English.
Defensive programming.

app/assets/javascripts/language_switcher/components/app.vue

@@ -3,7 +3,7 @@ import { GlCollapsibleListbox, GlLink } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { setCookie } from '~/lib/utils/common_utils';
 import { helpPagePath } from '~/helpers/help_page_helper';
-import { PREFERRED_LANGUAGE_COOKIE_KEY } from '../constants';
+import { PREFERRED_LANGUAGE_COOKIE_KEY, EN } from '../constants';
 
 const HELP_TRANSLATE_MSG = __('Help translate to your language');
 const HELP_TRANSLATE_HREF = helpPagePath('/development/i18n/translation.md');
@@ -18,7 +18,7 @@ export default {
       default: [],
     },
     preferredLocale: {
-      default: {},
+      default: EN,
     },
   },
   data() {

app/assets/javascripts/language_switcher/constants.js

 export const PREFERRED_LANGUAGE_COOKIE_KEY = 'preferred_language';
+
+export const EN = {
+  value: 'en',
+  // eslint-disable-next-line @gitlab/require-i18n-strings
+  text: 'English',
+};

app/assets/javascripts/language_switcher/index.js

@@ -10,12 +10,14 @@ export const initLanguageSwitcher = () => {
   const preferredLangCode = getCookie(PREFERRED_LANGUAGE_COOKIE_KEY);
   const preferredLocale = locales.find((locale) => locale.value === preferredLangCode);
 
+  const provide = { locales };
+  if (preferredLocale) {
+    provide.preferredLocale = preferredLocale;
+  }
+
   return new Vue({
     el,
-    provide: {
-      locales,
-      preferredLocale,
-    },
+    provide,
     render(createElement) {
       return createElement(LanguageSwitcher);
     },

spec/frontend/language_switcher/components/app_spec.js

 import { GlLink } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import LanguageSwitcherApp from '~/language_switcher/components/app.vue';
-import { PREFERRED_LANGUAGE_COOKIE_KEY } from '~/language_switcher/constants';
+import { PREFERRED_LANGUAGE_COOKIE_KEY, EN } from '~/language_switcher/constants';
 import * as utils from '~/lib/utils/common_utils';
-import { locales, ES, EN } from '../mock_data';
+import { locales, ES } from '../mock_data';
 
 jest.mock('~/lib/utils/common_utils');
 
@@ -14,7 +14,6 @@ describe('<LanguageSwitcher />', () => {
     wrapper = mountExtended(LanguageSwitcherApp, {
       provide: {
         locales,
-        preferredLocale: EN,
         ...props,
       },
     });
@@ -28,9 +27,11 @@ describe('<LanguageSwitcher />', () => {
   const findLanguageDropdownItem = (code) => wrapper.findByTestId(`language_switcher_lang_${code}`);
   const findFooter = () => wrapper.findByTestId('footer');
 
-  it('preferred language', () => {
+  it('sets English as preferred language by default', () => {
     expect(getPreferredLanguage()).toBe(EN.text);
+  });
 
+  it('sets preferred locale when provided', () => {
     createComponent({
       preferredLocale: ES,
     });

spec/frontend/language_switcher/mock_data.js

-export const EN = {
-  value: 'en',
-  text: 'English',
-};
+import { EN } from '~/language_switcher/constants';
 
 export const ZH_CN = {
   value: 'zh_CN',