import React from 'react';
import { shallow } from 'enzyme';

import TimezonePicker from './TimezonePicker';
import CustomSelect from '../CustomSelect';
import './timezoneList';

/**
 * Returning a fake list just for the purpose of testing.
 */
jest.mock('./timezoneList', () => [
  {
    diff: 'GMT-11:00',
    id: 'Pacific/Midway',
    name: 'Midway',
    shortName: 'SST',
  },
  {
    diff: 'GMT-9:00',
    id: 'Pacific/Gambier',
    name: 'Gambier',
    shortName: 'GAMT',
  },
]);

describe('TimezonePicker', () => {
  it('renders a CustomSelect', () => {
    const component = shallow(<TimezonePicker />);
    expect(component.find(CustomSelect)).toHaveLength(1);
    expect(component).toMatchSnapshot();
  });

  it('contains the timezone options', () => {
    const component = shallow(<TimezonePicker />);
    expect(component.find(CustomSelect).props().options).toHaveLength(2);
  });

  it('renderes a custom timeZone list when provided', () => {
    const customTimezoneList = [
      {
        diff: 'GMT+1:00',
        id: 'Africa/Algiers',
        name: 'Algiers',
        shortName: 'CET',
      },
      {
        diff: 'GMT+3:00',
        id: 'Africa/Asmara',
        name: 'Asmara',
        shortName: 'EAT',
      },
    ];

    const component = shallow(<TimezonePicker timezoneList={customTimezoneList} />);
    expect(component.find(CustomSelect).props().options[0]).toEqual({
      text: 'Algiers',
      value: 'Africa/Algiers',
    });
  });

  it('renderes the default timezoneList when no timezoneList prop is provided ', () => {
    const component = shallow(<TimezonePicker />);
    expect(component.find(CustomSelect).props().options[0]).toEqual({
      text: 'Midway',
      value: 'Pacific/Midway',
    });
  });
});