import { render, screen } from '@testing-library/react';
import { getCountries } from '@theorchard/countries';
import { CountriesSelect } from './CountriesSelect';

describe('<CountriesSelect>', () => {
    it('should render placeholder', () => {
        const placeholder = 'Select country';
        render(<CountriesSelect placeholder={placeholder} />);

        expect(screen.getByText(placeholder)).toBeVisible();
    });

    it('should render countries', () => {
        const countries = getCountries({ includeGlobal: false });
        render(<CountriesSelect />);

        countries.forEach(country => {
            expect(screen.getByText(country.name)).toBeVisible();
        });
    });

    describe('when "lang" is provided', () => {
        it('should render countries', () => {
            const countries = getCountries({
                includeGlobal: false,
                locale: 'fr',
            });
            render(<CountriesSelect lang="fr" />);

            countries.forEach(country => {
                expect(screen.getByText(country.label)).toBeVisible();
            });
        });
    });
});