import { GlAvatarLabeled, GlBadge, GlIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';

import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import AdminUserAvatar from '~/admin/users/components/user_avatar.vue';
import { LENGTH_OF_USER_NOTE_TOOLTIP } from '~/admin/users/constants';
import { truncate } from '~/lib/utils/text_utility';
import { users, paths } from '../mock_data';

describe('AdminUserAvatar component', () => {
  let wrapper;
  const user = users[0];
  const adminUserPath = paths.adminUser;

  const findNote = () => wrapper.findComponent(GlIcon);
  const findAvatar = () => wrapper.findComponent(GlAvatarLabeled);
  const findUserLink = () => wrapper.find('.js-user-link');
  const findAllBadges = () => wrapper.findAllComponents(GlBadge);
  const findTooltip = () => getBinding(findNote().element, 'gl-tooltip');

  const initComponent = (props = {}) => {
    wrapper = shallowMount(AdminUserAvatar, {
      propsData: {
        user,
        adminUserPath,
        ...props,
      },
      directives: {
        GlTooltip: createMockDirective(),
      },
      stubs: {
        GlAvatarLabeled,
      },
    });
  };

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

  describe('when initialized', () => {
    beforeEach(() => {
      initComponent();
    });

    it('adds a user link hover card', () => {
      expect(findUserLink().attributes()).toMatchObject({
        'data-user-id': user.id.toString(),
        'data-username': user.username,
      });
    });

    it("renders the user's name with an admin path link", () => {
      const avatar = findAvatar();

      expect(avatar.props('label')).toBe(user.name);
      expect(avatar.props('labelLink')).toBe(adminUserPath.replace('id', user.username));
    });

    it("renders the user's email with a mailto link", () => {
      const avatar = findAvatar();

      expect(avatar.props('subLabel')).toBe(user.email);
      expect(avatar.props('subLabelLink')).toBe(`mailto:${user.email}`);
    });

    it("renders the user's avatar image", () => {
      expect(findAvatar().attributes('src')).toBe(user.avatarUrl);
    });

    it('renders a user note icon', () => {
      expect(findNote().exists()).toBe(true);
      expect(findNote().props('name')).toBe('document');
    });

    it("renders the user's note tooltip", () => {
      const tooltip = findTooltip();

      expect(tooltip).toBeDefined();
      expect(tooltip.value).toBe(user.note);
    });

    it("renders the user's badges", () => {
      findAllBadges().wrappers.forEach((badge, idx) => {
        expect(badge.text()).toBe(user.badges[idx].text);
        expect(badge.props('variant')).toBe(user.badges[idx].variant);
      });
    });

    describe('and the user note is very long', () => {
      const noteText = new Array(LENGTH_OF_USER_NOTE_TOOLTIP + 1).join('a');

      beforeEach(() => {
        initComponent({
          user: {
            ...user,
            note: noteText,
          },
        });
      });

      it("renders a truncated user's note tooltip", () => {
        const tooltip = findTooltip();

        expect(tooltip).toBeDefined();
        expect(tooltip.value).toBe(truncate(noteText, LENGTH_OF_USER_NOTE_TOOLTIP));
      });
    });

    describe('and the user does not have a note', () => {
      beforeEach(() => {
        initComponent({
          user: {
            ...user,
            note: null,
          },
        });
      });

      it('does not render a user note', () => {
        expect(findNote().exists()).toBe(false);
      });
    });
  });
});