Adds frontend support to render test reports on theMR widget

Creates an app to render grouped test reports in the MR widget
Ports CSS from EE into CE
Creates a reusable code component
Adds getters and utils to the existing reports store

1 files changed, 72 insertions, 0 deletions

diff --git a/spec/javascripts/reports/components/test_issue_body_spec.js b/spec/javascripts/reports/components/test_issue_body_spec.js
new file mode 100644
index 00000000000..242eed114d9
--- /dev/null
+++ b/spec/javascripts/reports/components/test_issue_body_spec.js
@@ -0,0 +1,72 @@
+import Vue from 'vue';
+import component from '~/reports/components/test_issue_body.vue';
+import createStore from '~/reports/store';
+import { mountComponentWithStore } from '../../helpers/vue_mount_component_helper';
+import { trimText } from '../../helpers/vue_component_helper';
+import { issue } from '../mock_data/mock_data';
+
+describe('Test Issue body', () => {
+  let vm;
+  const Component = Vue.extend(component);
+  const store = createStore();
+
+  const commonProps = {
+    issue,
+    status: 'failed',
+  };
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('on click', () => {
+    it('calls openModal action', () => {
+      vm = mountComponentWithStore(Component, {
+        store,
+        props: commonProps,
+      });
+
+      spyOn(vm, 'openModal');
+
+      vm.$el.querySelector('button').click();
+      expect(vm.openModal).toHaveBeenCalledWith({
+        issue: commonProps.issue,
+        status: commonProps.status,
+      });
+    });
+  });
+
+  describe('is new', () => {
+    beforeEach(() => {
+      vm = mountComponentWithStore(Component, {
+        store,
+        props: Object.assign({}, commonProps, { isNew: true }),
+      });
+    });
+
+    it('renders issue name', () => {
+      expect(vm.$el.textContent).toContain(commonProps.issue.name);
+    });
+
+    it('renders new badge', () => {
+      expect(trimText(vm.$el.querySelector('.badge').textContent)).toEqual('New');
+    });
+  });
+
+  describe('not new', () => {
+    beforeEach(() => {
+      vm = mountComponentWithStore(Component, {
+        store,
+        props: commonProps,
+      });
+    });
+
+    it('renders issue name', () => {
+      expect(vm.$el.textContent).toContain(commonProps.issue.name);
+    });
+
+    it('does not renders new badge', () => {
+      expect(vm.$el.querySelector('.badge')).toEqual(null);
+    });
+  });
+});