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

import MetricsDateRange from '.';

describe('MetricsDateRange', () => {
  const node = mount(<MetricsDateRange>Hello, world.</MetricsDateRange>);

  it('displays the <MetricsDateRange> element', () => {
    expect(node.getDOMNode().classList).toContain('MetricsDateRange');
  });

  it('updates dates on click', () => {
    const $toggle = node.find('.Dropdown-toggle');
    const $optMonth = node.find('.MetricsDateRange-quickSet').at(1);

    $toggle.simulate('click');
    $optMonth.simulate('click');

    const text = node.find('.MetricsDateRange[type="button"]').first().text().trim();
    expect(text).toBe('week');
  });

  describe('paywalled MetricsDateRange', () => {
    const paywalledNode = mount(<MetricsDateRange paywalled={true} timeAgo={7} />);

    it('should always initialize state to day if paywalled', () => {
      const text = paywalledNode.find('.MetricsDateRange[type="button"]').first().text().trim();
      expect(text).toBe('day');
    });

    it('should not allow state changes if paywalled', () => {
      const $toggle = paywalledNode.find('.Dropdown-toggle');
      const $optMonth = paywalledNode.find('.MetricsDateRange-quickSet--paywall').at(0);

      $toggle.simulate('click');
      $optMonth.simulate('click');

      const text = paywalledNode.find('.MetricsDateRange[type="button"]').first().text().trim();
      expect(text).toBe('day');
    });
  });
});
