Merge request widget redesign

1 files changed, 61 insertions, 0 deletions

diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_author_time_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_author_time_spec.js
new file mode 100644
index 00000000000..515ddcbb875
--- /dev/null
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_author_time_spec.js
@@ -0,0 +1,61 @@
+import Vue from 'vue';
+import authorTimeComponent from '~/vue_merge_request_widget/components/mr_widget_author_time';
+
+const props = {
+  actionText: 'Merged by',
+  author: {
+    webUrl: 'http://foo.bar',
+    avatarUrl: 'http://gravatar.com/foo',
+    name: 'fatihacet',
+  },
+  dateTitle: '2017-03-23T23:02:00.807Z',
+  dateReadable: '12 hours ago',
+};
+const createComponent = () => {
+  const Component = Vue.extend(authorTimeComponent);
+
+  return new Component({
+    el: document.createElement('div'),
+    propsData: props,
+  });
+};
+
+describe('MRWidgetAuthorTime', () => {
+  describe('props', () => {
+    it('should have props', () => {
+      const { actionText, author, dateTitle, dateReadable } = authorTimeComponent.props;
+      const ActionTextClass = actionText.type;
+      const DateTitleClass = dateTitle.type;
+      const DateReadableClass = dateReadable.type;
+
+      expect(new ActionTextClass() instanceof String).toBeTruthy();
+      expect(actionText.required).toBeTruthy();
+
+      expect(author.type instanceof Object).toBeTruthy();
+      expect(author.required).toBeTruthy();
+
+      expect(new DateTitleClass() instanceof String).toBeTruthy();
+      expect(dateTitle.required).toBeTruthy();
+
+      expect(new DateReadableClass() instanceof String).toBeTruthy();
+      expect(dateReadable.required).toBeTruthy();
+    });
+  });
+
+  describe('components', () => {
+    it('should have components', () => {
+      expect(authorTimeComponent.components['mr-widget-author']).toBeDefined();
+    });
+  });
+
+  describe('template', () => {
+    it('should have correct elements', () => {
+      const el = createComponent().$el;
+
+      expect(el.tagName).toEqual('H4');
+      expect(el.querySelector('a').getAttribute('href')).toEqual(props.author.webUrl);
+      expect(el.querySelector('time').innerText).toContain(props.dateReadable);
+      expect(el.querySelector('time').getAttribute('title')).toEqual(props.dateTitle);
+    });
+  });
+});