From 23022a6b00645b893d3d13f7b6bf6749d9b4df11 Mon Sep 17 00:00:00 2001
From: jerasmus <jerasmus@gitlab.com>
Date: Thu, 26 Aug 2021 10:37:38 +0200
Subject: [PATCH] Add image blob viewer

Addede a blob viewer for images as part of the refactor
---
 .../components/blob_viewers/image_viewer.vue  | 19 ++++++++++++++
 .../components/blob_viewers/index.js          |  6 +++++
 .../blob_viewers/image_viewer_spec.js         | 25 +++++++++++++++++++
 3 files changed, 50 insertions(+)
 create mode 100644 app/assets/javascripts/repository/components/blob_viewers/image_viewer.vue
 create mode 100644 spec/frontend/repository/components/blob_viewers/image_viewer_spec.js

diff --git a/app/assets/javascripts/repository/components/blob_viewers/image_viewer.vue b/app/assets/javascripts/repository/components/blob_viewers/image_viewer.vue
new file mode 100644
index 00000000000000..83d36209bb30db
--- /dev/null
+++ b/app/assets/javascripts/repository/components/blob_viewers/image_viewer.vue
@@ -0,0 +1,19 @@
+<script>
+export default {
+  props: {
+    url: {
+      type: String,
+      required: true,
+    },
+    alt: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-text-center gl-p-7 gl-bg-gray-50">
+    <img :src="url" :alt="alt" data-testid="image" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/repository/components/blob_viewers/index.js b/app/assets/javascripts/repository/components/blob_viewers/index.js
index 4e16b16041f42f..3b4f4eb51fe586 100644
--- a/app/assets/javascripts/repository/components/blob_viewers/index.js
+++ b/app/assets/javascripts/repository/components/blob_viewers/index.js
@@ -6,6 +6,8 @@ export const loadViewer = (type) => {
       return () => import(/* webpackChunkName: 'blob_text_viewer' */ './text_viewer.vue');
     case 'download':
       return () => import(/* webpackChunkName: 'blob_download_viewer' */ './download_viewer.vue');
+    case 'image':
+      return () => import(/* webpackChunkName: 'blob_image_viewer' */ './image_viewer.vue');
     default:
       return null;
   }
@@ -23,5 +25,9 @@ export const viewerProps = (type, blob) => {
       filePath: blob.rawPath,
       fileSize: blob.rawSize,
     },
+    image: {
+      url: blob.rawPath,
+      alt: blob.name,
+    },
   }[type];
 };
diff --git a/spec/frontend/repository/components/blob_viewers/image_viewer_spec.js b/spec/frontend/repository/components/blob_viewers/image_viewer_spec.js
new file mode 100644
index 00000000000000..6735dddf51e4b5
--- /dev/null
+++ b/spec/frontend/repository/components/blob_viewers/image_viewer_spec.js
@@ -0,0 +1,25 @@
+import { shallowMount } from '@vue/test-utils';
+import ImageViewer from '~/repository/components/blob_viewers/image_viewer.vue';
+
+describe('Image Viewer', () => {
+  let wrapper;
+
+  const propsData = {
+    url: 'some/image.png',
+    alt: 'image.png',
+  };
+
+  const createComponent = () => {
+    wrapper = shallowMount(ImageViewer, { propsData });
+  };
+
+  const findImage = () => wrapper.find('[data-testid="image"]');
+
+  it('renders a Source Editor component', () => {
+    createComponent();
+
+    expect(findImage().exists()).toBe(true);
+    expect(findImage().attributes('src')).toBe(propsData.url);
+    expect(findImage().attributes('alt')).toBe(propsData.alt);
+  });
+});
-- 
GitLab