import Vue from 'vue';
import projectItemComponent from '~/groups/components/project_item.vue';
import GroupsStore from '~/groups/stores/groups_store';
import { group1 } from './mock_data';

const createComponent = () => {
  const Component = Vue.extend(projectItemComponent);
  const store = new GroupsStore();
  const group = store.decorateGroup(group1);
  const project = group.projects[0];

  return new Component({
    propsData: {
      project,
    },
  }).$mount();
};

describe('ProjectItemComponent', () => {
  const project = group1.projects[0];
  let vm;

  beforeEach(() => {
    vm = createComponent();
  });

  describe('computed', () => {
    describe('projectDomId', () => {
      it('should return ID string using Project ID', () => {
        expect(vm.projectDomId).toBe(`project-${project.id}`);
      });
    });

    describe('rowClass', () => {
      it('should return appropriate classes present in row element classes for project', () => {
        expect(vm.rowClass['no-description']).toBeFalsy(); // Since group1.projects[0].description is defined
      });
    });

    describe('visibilityIcon', () => {
      it('should return correct classes for different project visibility types', () => {
        vm.project.visibility = 'public';
        expect(vm.visibilityIcon).toBe('fa-globe');

        vm.project.visibility = 'internal';
        expect(vm.visibilityIcon).toBeTruthy('fa-shield');

        vm.project.visibility = 'private';
        expect(vm.visibilityIcon).toBeTruthy('fa-lock');
      });
    });

    describe('visibilityTooltip', () => {
      it('should return capitalized visibility type in tooltip string', () => {
        vm.project.visibility = 'public';
        expect(vm.visibilityTooltip).toContain('Public');
      });
    });
  });

  describe('template', () => {
    it('should render project row element correctly', () => {
      expect(vm.$el.querySelector('#project-17')).toBeDefined();
      expect(vm.$el.querySelector('#project-17 .folder-toggle-wrap .folder-icon fa.fa-bookmark')).toBeDefined();
      expect(vm.$el.querySelector('#project-17 .metadata .title a').getAttribute('href')).toBe(project.project_path);
      expect(vm.$el.querySelector('#project-17 .metadata .description').textContent.trim()).toBe(project.description);
      expect(vm.$el.querySelector('#project-17 .stats .project-stars').textContent.trim()).toBe(`${project.star_count}`);
      expect(vm.$el.querySelector('#project-17 .stats .project-visibility').dataset.originalTitle).toContain('Public');
    });
  });
});