import { shallowMount } from '@vue/test-utils';
import { GlBanner } from '@gitlab/ui';
import MockAdapter from 'axios-mock-adapter';
import { mockTracking, unmockTracking, triggerEvent } from 'helpers/tracking_helper';
import CustomizeHomepageBanner from '~/pages/dashboard/projects/index/components/customize_homepage_banner.vue';
import axios from '~/lib/utils/axios_utils';

const svgPath = '/illustrations/background';
const provide = {
  svgPath,
  preferencesBehaviorPath: 'some/behavior/path',
  calloutsPath: 'call/out/path',
  calloutsFeatureId: 'some-feature-id',
  trackLabel: 'home_page',
};

const createComponent = () => {
  return shallowMount(CustomizeHomepageBanner, { provide, stubs: { GlBanner } });
};

describe('CustomizeHomepageBanner', () => {
  let trackingSpy;
  let mockAxios;
  let wrapper;

  beforeEach(() => {
    mockAxios = new MockAdapter(axios);
    document.body.dataset.page = 'some:page';
    trackingSpy = mockTracking('_category_', undefined, jest.spyOn);
    wrapper = createComponent();
  });

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

  it('should render the banner when not dismissed', () => {
    expect(wrapper.find(GlBanner).exists()).toBe(true);
  });

  it('should close the banner when dismiss is clicked', async () => {
    mockAxios.onPost(provide.calloutsPath).replyOnce(200);
    expect(wrapper.find(GlBanner).exists()).toBe(true);
    wrapper.find(GlBanner).vm.$emit('close');

    await wrapper.vm.$nextTick();
    expect(wrapper.find(GlBanner).exists()).toBe(false);
  });

  it('includes the body text from options', () => {
    expect(wrapper.html()).toContain(wrapper.vm.$options.i18n.body);
  });

  describe('tracking', () => {
    const preferencesTrackingEvent = 'click_go_to_preferences';
    const mockTrackingOnWrapper = () => {
      unmockTracking();
      trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
    };

    it('sets the needed data attributes for tracking button', async () => {
      await wrapper.vm.$nextTick();
      const button = wrapper.find(`[href='${wrapper.vm.preferencesBehaviorPath}']`);

      expect(button.attributes('data-track-event')).toEqual(preferencesTrackingEvent);
      expect(button.attributes('data-track-label')).toEqual(provide.trackLabel);
    });

    it('sends a tracking event when the banner is shown', () => {
      const trackCategory = undefined;
      const trackEvent = 'show_home_page_banner';

      expect(trackingSpy).toHaveBeenCalledWith(trackCategory, trackEvent, {
        label: provide.trackLabel,
      });
    });

    it('sends a tracking event when the banner is dismissed', async () => {
      mockTrackingOnWrapper();
      mockAxios.onPost(provide.calloutsPath).replyOnce(200);
      const trackCategory = undefined;
      const trackEvent = 'click_dismiss';

      wrapper.find(GlBanner).vm.$emit('close');

      await wrapper.vm.$nextTick();
      expect(trackingSpy).toHaveBeenCalledWith(trackCategory, trackEvent, {
        label: provide.trackLabel,
      });
    });

    it('sends a tracking event when the button is clicked', async () => {
      mockTrackingOnWrapper();
      mockAxios.onPost(provide.calloutsPath).replyOnce(200);
      const button = wrapper.find(`[href='${wrapper.vm.preferencesBehaviorPath}']`);

      triggerEvent(button.element);

      await wrapper.vm.$nextTick();
      expect(trackingSpy).toHaveBeenCalledWith('_category_', preferencesTrackingEvent, {
        label: provide.trackLabel,
      });
    });
  });
});
