import { GlFormRadio, GlIcon, GlFormRadioGroup, GlLink } from '@gitlab/ui';
import { mount, shallowMount } from '@vue/test-utils';
import SnippetVisibilityEdit from '~/snippets/components/snippet_visibility_edit.vue';
import {
  SNIPPET_VISIBILITY,
  SNIPPET_VISIBILITY_PRIVATE,
  SNIPPET_VISIBILITY_INTERNAL,
  SNIPPET_VISIBILITY_PUBLIC,
} from '~/snippets/constants';

describe('Snippet Visibility Edit component', () => {
  let wrapper;
  const defaultHelpLink = '/foo/bar';
  const defaultVisibilityLevel = 'private';

  function createComponent(propsData = {}, deep = false) {
    const method = deep ? mount : shallowMount;
    wrapper = method.call(this, SnippetVisibilityEdit, {
      propsData: {
        helpLink: defaultHelpLink,
        isProjectSnippet: false,
        value: defaultVisibilityLevel,
        ...propsData,
      },
    });
  }

  const findLabel = () => wrapper.find('label');
  const findRadios = () => wrapper.find(GlFormRadioGroup).findAll(GlFormRadio);
  const findRadiosData = () =>
    findRadios().wrappers.map(x => {
      return {
        value: x.find('input').attributes('value'),
        icon: x.find(GlIcon).props('name'),
        description: x.find('.help-text').text(),
        text: x.find('.js-visibility-option').text(),
      };
    });

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

  describe('rendering', () => {
    it('matches the snapshot', () => {
      createComponent();
      expect(wrapper.element).toMatchSnapshot();
    });

    it('renders visibility options', () => {
      createComponent({}, true);

      expect(findRadiosData()).toEqual([
        {
          value: SNIPPET_VISIBILITY_PRIVATE,
          icon: SNIPPET_VISIBILITY.private.icon,
          text: SNIPPET_VISIBILITY.private.label,
          description: SNIPPET_VISIBILITY.private.description,
        },
        {
          value: SNIPPET_VISIBILITY_INTERNAL,
          icon: SNIPPET_VISIBILITY.internal.icon,
          text: SNIPPET_VISIBILITY.internal.label,
          description: SNIPPET_VISIBILITY.internal.description,
        },
        {
          value: SNIPPET_VISIBILITY_PUBLIC,
          icon: SNIPPET_VISIBILITY.public.icon,
          text: SNIPPET_VISIBILITY.public.label,
          description: SNIPPET_VISIBILITY.public.description,
        },
      ]);
    });

    it('when project snippet, renders special private description', () => {
      createComponent({ isProjectSnippet: true }, true);

      expect(findRadiosData()[0]).toEqual({
        value: SNIPPET_VISIBILITY_PRIVATE,
        icon: SNIPPET_VISIBILITY.private.icon,
        text: SNIPPET_VISIBILITY.private.label,
        description: SNIPPET_VISIBILITY.private.description_project,
      });
    });

    it('renders label help link', () => {
      createComponent();

      expect(
        findLabel()
          .find(GlLink)
          .attributes('href'),
      ).toBe(defaultHelpLink);
    });

    it('when helpLink is not defined, does not render label help link', () => {
      createComponent({ helpLink: null });

      expect(
        findLabel()
          .find(GlLink)
          .exists(),
      ).toBe(false);
    });
  });

  describe('functionality', () => {
    it('pre-selects correct option in the list', () => {
      const value = SNIPPET_VISIBILITY_INTERNAL;

      createComponent({ value });

      expect(wrapper.find(GlFormRadioGroup).attributes('checked')).toBe(value);
    });
  });
});