spec/frontend/language_switcher/components/app_spec.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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;
  });
});