import React from 'react';
import {shallow} from 'enzyme';
import {HighlightComponent} from 'app/components/highlight';

describe('Highlight', function() {
  it('highlights text', function() {
    // shallow because `mount` and React Fragments don't work when accessing children
    // it will only return first child
    const wrapper = shallow(
      <HighlightComponent text="ILL">billy@sentry.io</HighlightComponent>,
      TestStubs.routerContext()
    );
    expect(
      wrapper
        .children()
        .at(0)
        .text()
    ).toBe('b');
    expect(wrapper.find('span').text()).toBe('ill');
    expect(
      wrapper
        .children()
        .at(2)
        .text()
    ).toBe('y@sentry.io');
  });

  it('does not have highlighted text if `text` prop is not found in main text', function() {
    // shallow because `mount` and React Fragments don't work when accessing children
    // it will only return first child
    const wrapper = shallow(
      <HighlightComponent text="invalid">billy@sentry.io</HighlightComponent>,
      TestStubs.routerContext()
    );

    expect(wrapper.text()).toBe('billy@sentry.io');
  });

  it('does not have highlighted text if `text` prop is empty', function() {
    // shallow because `mount` and React Fragments don't work when accessing children
    // it will only return first child
    const wrapper = shallow(
      <HighlightComponent text="">billy@sentry.io</HighlightComponent>,
      TestStubs.routerContext()
    );

    expect(wrapper.text()).toBe('billy@sentry.io');
  });

  it('does not have highlighted text if `disabled` prop is true', function() {
    // shallow because `mount` and React Fragments don't work when accessing children
    // it will only return first child
    const wrapper = shallow(
      <HighlightComponent text="">billy@sentry.io</HighlightComponent>,
      TestStubs.routerContext()
    );

    expect(wrapper.text()).toBe('billy@sentry.io');
  });
});