5 files changed, 91 insertions, 11 deletions

diff --git a/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap b/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap
index 53815820bbe..dfa6b99080b 100644
--- a/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap
+++ b/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap
@@ -10,7 +10,7 @@ exports[`Blob Header Filepath rendering matches the snapshot 1`] = `
     cssclasses="mr-2"
     filemode=""
     filename="foo/bar/dummy.md"
-    size="18"
+    size="16"
   />
    
   <strong
diff --git a/spec/frontend/blob/components/blob_edit_content_spec.js b/spec/frontend/blob/components/blob_edit_content_spec.js
index 7de8d9236ed..9fc2356c018 100644
--- a/spec/frontend/blob/components/blob_edit_content_spec.js
+++ b/spec/frontend/blob/components/blob_edit_content_spec.js
@@ -3,7 +3,7 @@ import { nextTick } from 'vue';
 import BlobEditContent from '~/blob/components/blob_edit_content.vue';
 import * as utils from '~/blob/utils';
 
-jest.mock('~/editor/editor_lite');
+jest.mock('~/editor/source_editor');
 
 describe('Blob Header Editing', () => {
   let wrapper;
@@ -26,7 +26,7 @@ describe('Blob Header Editing', () => {
   }
 
   beforeEach(() => {
-    jest.spyOn(utils, 'initEditorLite').mockImplementation(() => ({
+    jest.spyOn(utils, 'initSourceEditor').mockImplementation(() => ({
       onDidChangeModelContent,
       updateModelLanguage,
       getValue,
@@ -68,9 +68,9 @@ describe('Blob Header Editing', () => {
       expect(wrapper.find('#editor').exists()).toBe(true);
     });
 
-    it('initialises Editor Lite', () => {
+    it('initialises Source Editor', () => {
       const el = wrapper.find({ ref: 'editor' }).element;
-      expect(utils.initEditorLite).toHaveBeenCalledWith({
+      expect(utils.initSourceEditor).toHaveBeenCalledWith({
         el,
         blobPath: fileName,
         blobGlobalId: fileGlobalId,
diff --git a/spec/frontend/blob/csv/csv_viewer_spec.js b/spec/frontend/blob/csv/csv_viewer_spec.js
new file mode 100644
index 00000000000..abb914b8f57
--- /dev/null
+++ b/spec/frontend/blob/csv/csv_viewer_spec.js
@@ -0,0 +1,75 @@
+import { GlAlert, GlLoadingIcon, GlTable } from '@gitlab/ui';
+import { getAllByRole } from '@testing-library/dom';
+import { shallowMount, mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import CSVViewer from '~/blob/csv/csv_viewer.vue';
+
+const validCsv = 'one,two,three';
+const brokenCsv = '{\n "json": 1,\n "key": [1, 2, 3]\n}';
+
+describe('app/assets/javascripts/blob/csv/csv_viewer.vue', () => {
+  let wrapper;
+
+  const createComponent = ({ csv = validCsv, mountFunction = shallowMount } = {}) => {
+    wrapper = mountFunction(CSVViewer, {
+      propsData: {
+        csv,
+      },
+    });
+  };
+
+  const findCsvTable = () => wrapper.findComponent(GlTable);
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findAlert = () => wrapper.findComponent(GlAlert);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should render loading spinner', () => {
+    createComponent();
+
+    expect(findLoadingIcon().props()).toMatchObject({
+      size: 'lg',
+    });
+  });
+
+  describe('when the CSV contains errors', () => {
+    it('should render alert', async () => {
+      createComponent({ csv: brokenCsv });
+      await nextTick;
+
+      expect(findAlert().props()).toMatchObject({
+        variant: 'danger',
+      });
+    });
+  });
+
+  describe('when the CSV contains no errors', () => {
+    it('should not render alert', async () => {
+      createComponent();
+      await nextTick;
+
+      expect(findAlert().exists()).toBe(false);
+    });
+
+    it('renders the CSV table with the correct attributes', async () => {
+      createComponent();
+      await nextTick;
+
+      expect(findCsvTable().attributes()).toMatchObject({
+        'empty-text': 'No CSV data to display.',
+        items: validCsv,
+      });
+    });
+
+    it('renders the CSV table with the correct content', async () => {
+      createComponent({ mountFunction: mount });
+      await nextTick;
+
+      expect(getAllByRole(wrapper.element, 'row', { name: /One/i })).toHaveLength(1);
+      expect(getAllByRole(wrapper.element, 'row', { name: /Two/i })).toHaveLength(1);
+      expect(getAllByRole(wrapper.element, 'row', { name: /Three/i })).toHaveLength(1);
+    });
+  });
+});
diff --git a/spec/frontend/blob/utils_spec.js b/spec/frontend/blob/utils_spec.js
index 3ff2e47e0b6..a543c0060cb 100644
--- a/spec/frontend/blob/utils_spec.js
+++ b/spec/frontend/blob/utils_spec.js
@@ -1,10 +1,10 @@
 import * as utils from '~/blob/utils';
-import Editor from '~/editor/editor_lite';
+import Editor from '~/editor/source_editor';
 
-jest.mock('~/editor/editor_lite');
+jest.mock('~/editor/source_editor');
 
 describe('Blob utilities', () => {
-  describe('initEditorLite', () => {
+  describe('initSourceEditor', () => {
     let editorEl;
     const blobPath = 'foo.txt';
     const blobContent = 'Foo bar';
@@ -15,8 +15,8 @@ describe('Blob utilities', () => {
     });
 
     describe('Monaco editor', () => {
-      it('initializes the Editor Lite', () => {
-        utils.initEditorLite({ el: editorEl });
+      it('initializes the Source Editor', () => {
+        utils.initSourceEditor({ el: editorEl });
         expect(Editor).toHaveBeenCalledWith({
           scrollbar: {
             alwaysConsumeMouseWheel: false,
@@ -34,7 +34,7 @@ describe('Blob utilities', () => {
 
           expect(Editor.prototype.createInstance).not.toHaveBeenCalled();
 
-          utils.initEditorLite(params);
+          utils.initSourceEditor(params);
 
           expect(Editor.prototype.createInstance).toHaveBeenCalledWith(params);
         },
diff --git a/spec/frontend/blob/viewer/index_spec.js b/spec/frontend/blob/viewer/index_spec.js
index e4f145ae81b..6a24b76abc8 100644
--- a/spec/frontend/blob/viewer/index_spec.js
+++ b/spec/frontend/blob/viewer/index_spec.js
@@ -6,6 +6,10 @@ import { setTestTimeout } from 'helpers/timeout';
 import BlobViewer from '~/blob/viewer/index';
 import axios from '~/lib/utils/axios_utils';
 
+const execImmediately = (callback) => {
+  callback();
+};
+
 describe('Blob viewer', () => {
   let blob;
   let mock;
@@ -17,6 +21,7 @@ describe('Blob viewer', () => {
   setTestTimeout(2000);
 
   beforeEach(() => {
+    jest.spyOn(window, 'requestIdleCallback').mockImplementation(execImmediately);
     $.fn.extend(jQueryMock);
     mock = new MockAdapter(axios);