summaryrefslogtreecommitdiff
path: root/spec/javascripts/repo/components/repo_file_spec.js
blob: 107f6797f8a69cccb2d74c7ec2a9d101167247b3 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
import Vue from 'vue';
import repoFile from '~/repo/components/repo_file.vue';
import RepoStore from '~/repo/stores/repo_store';
import eventHub from '~/repo/event_hub';
import { file } from '../mock_data';

describe('RepoFile', () => {
  const updated = 'updated';
  const otherFile = {
    html: '<p class="file-content">html</p>',
    pageTitle: 'otherpageTitle',
  };

  function createComponent(propsData) {
    const RepoFile = Vue.extend(repoFile);

    return new RepoFile({
      propsData,
    }).$mount();
  }

  beforeEach(() => {
    RepoStore.openedFiles = [];
  });

  it('renders link, icon, name and last commit details', () => {
    const RepoFile = Vue.extend(repoFile);
    const vm = new RepoFile({
      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', () => {
    const vm = createComponent({
      file: file(),
    });

    expect(vm.$el.querySelector('.fa-spin.fa-spinner')).toBeFalsy();
  });

  it('sets the document title correctly', () => {
    RepoStore.setActiveFiles(otherFile);

    expect(document.title.trim()).toEqual(otherFile.pageTitle);
  });

  it('renders a spinner if the file is loading', () => {
    const f = file();
    f.loading = true;
    const 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', () => {
    RepoStore.openedFiles.push(file());

    const vm = createComponent({
      file: file(),
    });

    expect(vm.$el.querySelector('.commit-message')).toBeFalsy();
    expect(vm.$el.querySelector('.commit-update')).toBeFalsy();
  });

  it('fires linkClicked when the link is clicked', () => {
    const vm = createComponent({
      file: file(),
    });

    spyOn(vm, 'linkClicked');

    vm.$el.click();

    expect(vm.linkClicked).toHaveBeenCalledWith(vm.file);
  });

  describe('submodule', () => {
    let f;
    let vm;

    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');
    });
  });

  describe('methods', () => {
    describe('linkClicked', () => {
      it('$emits fileNameClicked with file obj', () => {
        spyOn(eventHub, '$emit');

        const vm = createComponent({
          file: file(),
        });

        vm.linkClicked(vm.file);

        expect(eventHub.$emit).toHaveBeenCalledWith('fileNameClicked', vm.file);
      });
    });
  });
});