summaryrefslogtreecommitdiff
path: root/spec/javascripts/vue_shared/components/commit_spec.js
blob: 97dacec1fce0c73d95d85506a4e7fd9da6898e6b (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
138
139
140
141
142
143
144
145
146
import Vue from 'vue';
import commitComp from '~/vue_shared/components/commit.vue';
import mountComponent from '../../helpers/vue_mount_component_helper';

describe('Commit component', () => {
  let props;
  let component;
  let CommitComponent;

  beforeEach(() => {
    CommitComponent = Vue.extend(commitComp);
  });

  afterEach(() => {
    component.$destroy();
  });

  it('should render a fork icon if it does not represent a tag', () => {
    component = mountComponent(CommitComponent, {
      tag: false,
      commitRef: {
        name: 'master',
        ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
      },
      commitUrl:
        'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067',
      shortSha: 'b7836edd',
      title: 'Commit message',
      author: {
        avatar_url: 'https://gitlab.com/uploads/-/system/user/avatar/300478/avatar.png',
        web_url: 'https://gitlab.com/jschatz1',
        path: '/jschatz1',
        username: 'jschatz1',
      },
    });

    expect(component.$el.querySelector('.icon-container').children).toContain('svg');
  });

  describe('Given all the props', () => {
    beforeEach(() => {
      props = {
        tag: true,
        commitRef: {
          name: 'master',
          ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
        },
        commitUrl:
          'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067',
        shortSha: 'b7836edd',
        title: 'Commit message',
        author: {
          avatar_url: 'https://gitlab.com/uploads/-/system/user/avatar/300478/avatar.png',
          web_url: 'https://gitlab.com/jschatz1',
          path: '/jschatz1',
          username: 'jschatz1',
        },
      };

      component = mountComponent(CommitComponent, props);
    });

    it('should render a tag icon if it represents a tag', () => {
      expect(component.$el.querySelector('.icon-container i').classList).toContain('fa-tag');
    });

    it('should render a link to the ref url', () => {
      expect(component.$el.querySelector('.ref-name').getAttribute('href')).toEqual(
        props.commitRef.ref_url,
      );
    });

    it('should render the ref name', () => {
      expect(component.$el.querySelector('.ref-name').textContent).toContain(props.commitRef.name);
    });

    it('should render the commit short sha with a link to the commit url', () => {
      expect(component.$el.querySelector('.commit-sha').getAttribute('href')).toEqual(
        props.commitUrl,
      );

      expect(component.$el.querySelector('.commit-sha').textContent).toContain(props.shortSha);
    });

    it('should render icon for commit', () => {
      expect(
        component.$el.querySelector('.js-commit-icon use').getAttribute('xlink:href'),
      ).toContain('commit');
    });

    describe('Given commit title and author props', () => {
      it('should render a link to the author profile', () => {
        expect(
          component.$el.querySelector('.commit-title .avatar-image-container').getAttribute('href'),
        ).toEqual(props.author.path);
      });

      it('Should render the author avatar with title and alt attributes', () => {
        expect(
          component.$el
            .querySelector('.commit-title .avatar-image-container img')
            .getAttribute('data-original-title'),
        ).toContain(props.author.username);

        expect(
          component.$el
            .querySelector('.commit-title .avatar-image-container img')
            .getAttribute('alt'),
        ).toContain(`${props.author.username}'s avatar`);
      });
    });

    it('should render the commit title', () => {
      expect(component.$el.querySelector('a.commit-row-message').getAttribute('href')).toEqual(
        props.commitUrl,
      );

      expect(component.$el.querySelector('a.commit-row-message').textContent).toContain(
        props.title,
      );
    });
  });

  describe('When commit title is not provided', () => {
    it('should render default message', () => {
      props = {
        tag: false,
        commitRef: {
          name: 'master',
          ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
        },
        commitUrl:
          'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067',
        shortSha: 'b7836edd',
        title: null,
        author: {},
      };

      component = mountComponent(CommitComponent, props);

      expect(component.$el.querySelector('.commit-title span').textContent).toContain(
        "Can't find HEAD commit for this branch",
      );
    });
  });
});