2 files changed, 88 insertions, 0 deletions
diff --git a/spec/frontend/language_switcher/components/app_spec.js b/spec/frontend/language_switcher/components/app_spec.js
new file mode 100644
index 00000000000..6a1b94cd813
--- /dev/null
+++ b/spec/frontend/language_switcher/components/app_spec.js
@@ -0,0 +1,62 @@
+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 * as utils from '~/lib/utils/common_utils';
+import { locales, ES, EN } from '../mock_data';
+
+jest.mock('~/lib/utils/common_utils');
+
+describe('<LanguageSwitcher />', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = mountExtended(LanguageSwitcherApp, {
+      provide: {
+        locales,
+        preferredLocale: EN,
+        ...props,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const getPreferredLanguage = () => wrapper.find('.gl-dropdown-button-text').text();
+  const findLanguageDropdownItem = (code) => wrapper.findByTestId(`language_switcher_lang_${code}`);
+
+  it('preferred language', () => {
+    expect(getPreferredLanguage()).toBe(EN.text);
+
+    createComponent({
+      preferredLocale: ES,
+    });
+
+    expect(getPreferredLanguage()).toBe(ES.text);
+  });
+
+  it('switches language', async () => {
+    // because window.location is **READ ONLY** we cannot simply use
+    // jest.spyOn to mock it.
+    const originalLocation = window.location;
+    delete window.location;
+    window.location = {};
+    window.location.reload = jest.fn();
+    const reloadSpy = window.location.reload;
+    expect(reloadSpy).not.toHaveBeenCalled();
+    expect(utils.setCookie).not.toHaveBeenCalled();
+
+    const es = findLanguageDropdownItem(ES.value);
+
+    await es.trigger('click');
+
+    expect(reloadSpy).toHaveBeenCalled();
+    expect(utils.setCookie).toHaveBeenCalledWith(PREFERRED_LANGUAGE_COOKIE_KEY, ES.value);
+    window.location = originalLocation;
+  });
+});
diff --git a/spec/frontend/language_switcher/mock_data.js b/spec/frontend/language_switcher/mock_data.js
new file mode 100644
index 00000000000..548bddf0173
--- /dev/null
+++ b/spec/frontend/language_switcher/mock_data.js
@@ -0,0 +1,26 @@
+export const EN = {
+  value: 'en',
+  text: 'English',
+};
+
+export const ZH_CN = {
+  value: 'zh_CN',
+  text: '简体中文',
+};
+
+export const ES = {
+  value: 'es',
+  text: 'Espanol',
+};
+
+export const ZH_HK = {
+  value: 'zh_HK',
+  text: '繁体中文（香港）',
+};
+
+export const ZH_TW = {
+  value: 'zh_TW',
+  text: '繁体中文（台湾）',
+};
+
+export const locales = [EN, ZH_CN, ES, ZH_HK, ZH_TW];