text: import Vue from 'vue';
  import store from '~/repo/stores';
  import repoFile from '~/repo/components/repo_file.vue';
  import { file, resetStore } from '../helpers';
  
  describe('RepoFile', () => {
    const updated = 'updated';
    let vm;
  
    function createComponent(propsData) {
      const RepoFile = Vue.extend(repoFile);
  
      return new RepoFile({
        store,
        propsData,
      }).$mount();
    }
  
    afterEach(() => {
      resetStore(vm.$store);
    });
  
    it('renders link, icon, name and last commit details', () => {
      const RepoFile = Vue.extend(repoFile);
      vm = new RepoFile({
        store,
        propsData: {
          file: file(),
        },
      });
      spyOn(vm, 'timeFormated').and.returnValue(updated);
      vm.$mount();
  
      const name = vm.$el.querySelector('.repo-file-name');
      const fileIcon = vm.$el.querySelector('.file-icon');
  
      expect(vm.$el.querySelector(`.${vm.file.icon}`).style.marginLeft).toEqual('0px');
      expect(name.href).toMatch(`/${vm.file.url}`);
      expect(name.textContent.trim()).toEqual(vm.file.name);
      expect(vm.$el.querySelector('.commit-message').textContent.trim()).toBe(vm.file.lastCommit.message);
      expect(vm.$el.querySelector('.commit-update').textContent.trim()).toBe(updated);
      expect(fileIcon.classList.contains(vm.file.icon)).toBeTruthy();
      expect(fileIcon.style.marginLeft).toEqual(`${vm.file.level * 10}px`);
    });
  
    it('does render if hasFiles is true and is loading tree', () => {
      vm = createComponent({
        file: file(),
      });
  
      expect(vm.$el.querySelector('.fa-spin.fa-spinner')).toBeFalsy();
    });
  
    it('renders a spinner if the file is loading', () => {
      const f = file();
      f.loading = true;
      vm = createComponent({
        file: f,
      });
  
      expect(vm.$el.querySelector('.fa-spin.fa-spinner')).not.toBeNull();
      expect(vm.$el.querySelector('.fa-spin.fa-spinner').style.marginLeft).toEqual(`${vm.file.level * 16}px`);
    });
  
    it('does not render commit message and datetime if mini', (done) => {
      vm = createComponent({
        file: file(),
      });
      vm.$store.state.openFiles.push(vm.file);
  
      vm.$nextTick(() => {
        expect(vm.$el.querySelector('.commit-message')).toBeFalsy();
        expect(vm.$el.querySelector('.commit-update')).toBeFalsy();
  
        done();
      });
    });
  
    it('fires clickedTreeRow when the link is clicked', () => {
      vm = createComponent({
        file: file(),
      });
  
      spyOn(vm, 'clickedTreeRow');
  
      vm.$el.click();
  
      expect(vm.clickedTreeRow).toHaveBeenCalledWith(vm.file);
    });
  
    describe('submodule', () => {
      let f;
  
      beforeEach(() => {
        f = file('submodule name', '123456789');
        f.type = 'submodule';
  
        vm = createComponent({
          file: f,
        });
      });
  
      afterEach(() => {
        vm.$destroy();
      });
  
      it('renders submodule short ID', () => {
        expect(vm.$el.querySelector('.commit-sha').textContent.trim()).toBe('12345678');
      });
  
      it('renders ID next to submodule name', () => {
        expect(vm.$el.querySelector('td').textContent.replace(/\s+/g, ' ')).toContain('submodule name @ 12345678');
      });
    });
  });
  