Adds missing tests for commit component

app/assets/javascripts/vue_common_component/commit.js.es6

@@ -133,7 +133,7 @@
 
         <div v-if="hasRef" class="icon-container">
           <i v-if="tag" class="fa fa-tag"></i>
-          <i v-else class="fa fa-code-fork"></i>
+          <i v-if="!tag" class="fa fa-code-fork"></i>
         </div>
 
         <a v-if="hasRef"

spec/javascripts/vue_common_components/commit_spec.js.es6

-/*= require vue_common_components/commit */
-/* eslint-disable */
+//= require vue_common_component/commit
 
 describe('Commit component', () => {
-  const getRenderedText = (Component, propsData) => {
-    const Constructor = Vue.extend(Component);
-    const vm = new Constructor({propsData}).$mount();    
-    return vm.$el.textContent;
-  };
 
-  const MyComponent = window.gl.commitComponent;
+  let props;
+  let component;
+
+
+  it('should render a code-fork icon if it does not represent a tag', () => {
+    fixture.set('<div class="test-commit-container"></div>');
+    component = new window.gl.CommitComponent({
+      el: document.querySelector('.test-commit-container'),
+      propsData: {
+        tag: false,
+        ref: {
+          name: 'master',
+          ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
+        },
+        commit_url: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067',
+        short_sha: 'b7836edd',
+        title: 'Commit message',
+        author: {
+          avatar_url: 'https://gitlab.com/uploads/user/avatar/300478/avatar.png',
+          web_url: 'https://gitlab.com/jschatz1',
+          username: 'jschatz1',
+        },
+      },
+    });
+
+    expect(component.$el.querySelector('.icon-container i').classList).toContain('fa-code-fork');
+  });
 
-  describe('When `ref` is provided', () => {
-    const props = {
+  describe('Given all the props', () => {
+    beforeEach(() => {
+      fixture.set('<div class="test-commit-container"></div>');
+
+      props = {
         tag: true,
         ref: {
           name: 'master',
-        ref_url: 'http://localhost/namespace2/gitlabhq/tree/master'
+          ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
         },
         commit_url: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067',
         short_sha: 'b7836edd',
@@ -23,67 +46,83 @@ describe('Commit component', () => {
         author: {
           avatar_url: 'https://gitlab.com/uploads/user/avatar/300478/avatar.png',
           web_url: 'https://gitlab.com/jschatz1',
-        username: 'jschatz1'
-      }
+          username: 'jschatz1',
+        },
       };
 
-    it('should render a tag icon if it represents a tag', () => {
-      const renderedText = getRenderedText(MyComponent, props);
-
+      component = new window.gl.CommitComponent({
+        el: document.querySelector('.test-commit-container'),
+        propsData: props,
+      });
     });
 
-    it('should render a code-fork icon if it does not represent a tag', () => {
-
+    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('.branch-name').getAttribute('href')).toEqual(props.ref.ref_url);
     });
 
     it('should render the ref name', () => {
-
+      expect(component.$el.querySelector('.branch-name').textContent).toContain(props.ref.name);
     });
-  });
-});
 
-it('should render the commit icon as an svg', () => {
-
-});
-
-it('should render the commit short sha with a link to the commit url', () => {
-
-});
+    it('should render the commit short sha with a link to the commit url', () => {
+      expect(component.$el.querySelector('.commit-id').getAttribute('href')).toEqual(props.commit_url);
+      expect(component.$el.querySelector('.commit-id').textContent).toContain(props.short_sha);
+    });
 
-describe('Given commit title and author props', () => {
+    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.web_url);
       });
 
       it('Should render the author avatar with title and alt attributes', () => {
-
+        expect(
+          component.$el.querySelector('.commit-title .avatar-image-container img').getAttribute('title')
+        ).toContain(props.author.username);
+        expect(
+          component.$el.querySelector('.commit-title .avatar-image-container img').getAttribute('alt')
+        ).toContain(`${props.author.username}'s avatar`);
       });
-});
-
-describe('When commit title is not provided', () => {
-  it('Should render default message', () => {
-
     });
-});
-
-describe('Given no ref prop', () => {
-  it('Should render without errors', () => {
 
+    it('should render the commit title', () => {
+      expect(
+        component.$el.querySelector('a.commit-row-message').getAttribute('href')
+      ).toEqual(props.commit_url);
+      expect(
+        component.$el.querySelector('a.commit-row-message').textContent
+      ).toContain(props.title);
+    });
   });
-});
 
-describe('Given no title prop', () => {
-  it('Should render without errors', () => {
+  describe('When commit title is not provided', () => {
+    it('Should render default message', () => {
+      fixture.set('<div class="test-commit-container"></div>');
+      props = {
+        tag: false,
+        ref: {
+          name: 'master',
+          ref_url: 'http://localhost/namespace2/gitlabhq/tree/master',
+        },
+        commit_url: 'https://gitlab.com/gitlab-org/gitlab-ce/commit/b7836eddf62d663c665769e1b0960197fd215067',
+        short_sha: 'b7836edd',
+        title: null,
+        author: {},
+      };
 
+      component = new window.gl.CommitComponent({
+        el: document.querySelector('.test-commit-container'),
+        propsData: props,
       });
-});
-
-describe('Given no author prop', () => {
-  it('Should render without errors', () => {
 
+      expect(
+        component.$el.querySelector('.commit-title span').textContent
+      ).toContain('Cant find HEAD commit for this branch');
+    });
   });
 });