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, 33 insertions, 0 deletions

diff --git a/spec/javascripts/vue_shared/components/code_block_spec.js b/spec/javascripts/vue_shared/components/code_block_spec.js
new file mode 100644
index 00000000000..6b91a20ff76
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/code_block_spec.js
@@ -0,0 +1,33 @@
+import Vue from 'vue';
+import component from '~/vue_shared/components/code_block.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('Code Block', () => {
+  const Component = Vue.extend(component);
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders a code block with the provided code', () => {
+    const code =
+      "Failure/Error: is_expected.to eq(3)\n\n  expected: 3\n       got: -1\n\n  (compared using ==)\n./spec/test_spec.rb:12:in `block (4 levels) in \u003ctop (required)\u003e'";
+
+    vm = mountComponent(Component, {
+      code,
+    });
+
+    expect(vm.$el.querySelector('code').textContent).toEqual(code);
+  });
+
+  it('escapes XSS injections', () => {
+    const code = 'CCC<img src=x onerror=alert(document.domain)>';
+
+    vm = mountComponent(Component, {
+      code,
+    });
+
+    expect(vm.$el.querySelector('code').textContent).toEqual(code);
+  });
+});