/**
 * @jest-environment jsdom
 */

import '@testing-library/jest-dom/extend-expect';

import { locale } from 'svelte-i18n';
import { act, render } from '@testing-library/svelte';
import userEvent from '@testing-library/user-event';
import '$lib/i18n';

import LanguageSelector from './language_selector.svelte';

const internals = {
  results: null
};

describe('Language Selector component', () => {

  beforeEach(() => {

    internals.results = render(LanguageSelector);
  });

  test('Should display languages in their own language', () => {

    expect(internals.results.getByText('English'))
      .toBeVisible();
    expect(internals.results.getByText('Español'))
      .toBeVisible();
  });

  test('Should change locale when a language is selected', async () => {

    locale.subscribe((localeValue) => {

      expect(localeValue).toBe('en');
    })();
    const spanish = internals.results.getByText('Español');
    await userEvent.selectOptions(spanish.closest('select'), spanish);
    await act();
    locale.subscribe((localeValue) => {

      expect(localeValue).toBe('es');
    })();
  });
});