import { GlButton } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import initCopyToClipboard from '~/behaviors/copy_to_clipboard';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';

describe('clipboard button', () => {
  let wrapper;

  const createWrapper = (propsData, options = {}) => {
    wrapper = mount(ClipboardButton, {
      propsData,
      ...options,
    });
  };

  const findButton = () => wrapper.find(GlButton);

  afterEach(() => {
    wrapper.destroy();
    wrapper = null;
  });

  describe('without gfm', () => {
    beforeEach(() => {
      createWrapper({
        text: 'copy me',
        title: 'Copy this value',
        cssClass: 'btn-danger',
      });
    });

    it('renders a button for clipboard', () => {
      expect(findButton().exists()).toBe(true);
      expect(wrapper.attributes('data-clipboard-text')).toBe('copy me');
    });

    it('should have a tooltip with default values', () => {
      expect(wrapper.attributes('title')).toBe('Copy this value');
    });

    it('should render provided classname', () => {
      expect(wrapper.classes()).toContain('btn-danger');
    });
  });

  describe('with gfm', () => {
    it('sets data-clipboard-text with gfm', () => {
      createWrapper({
        text: 'copy me',
        gfm: '`path/to/file`',
        title: 'Copy this value',
        cssClass: 'btn-danger',
      });

      expect(wrapper.attributes('data-clipboard-text')).toBe(
        '{"text":"copy me","gfm":"`path/to/file`"}',
      );
    });
  });

  it('renders default slot as button text', () => {
    createWrapper(
      {
        text: 'copy me',
        title: 'Copy this value',
      },
      {
        slots: {
          default: 'Foo bar',
        },
      },
    );

    expect(findButton().text()).toBe('Foo bar');
  });

  it('re-emits button events', () => {
    const onClick = jest.fn();
    createWrapper(
      {
        text: 'copy me',
        title: 'Copy this value',
      },
      { listeners: { click: onClick } },
    );

    findButton().trigger('click');

    expect(onClick).toHaveBeenCalled();
  });

  it('passes the category and variant props to the GlButton', () => {
    const category = 'tertiary';
    const variant = 'confirm';

    createWrapper({ title: '', text: '', category, variant });

    expect(findButton().props('category')).toBe(category);
    expect(findButton().props('variant')).toBe(variant);
  });

  describe('integration', () => {
    it('actually copies to clipboard', () => {
      initCopyToClipboard();

      document.execCommand = () => {};
      jest.spyOn(document, 'execCommand').mockImplementation(() => true);

      createWrapper(
        {
          text: 'copy me',
          title: 'Copy this value',
        },
        { attachTo: document.body },
      );

      findButton().trigger('click');

      expect(document.execCommand).toHaveBeenCalledWith('copy');
    });
  });
});