Merge branch '324310-add-audio-blob-viewer' into 'master'

Add audio blob viewer

See merge request gitlab-org/gitlab!81573

app/assets/javascripts/repository/components/blob_viewers/audio_viewer.vue

+<script>
+export default {
+  props: {
+    blob: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      src: this.blob.rawPath,
+    };
+  },
+};
+</script>
+<template>
+  <div class="gl-text-center gl-p-7">
+    <audio :src="src" controls data-testid="audio"></audio>
+  </div>
+</template>

app/assets/javascripts/repository/components/blob_viewers/index.js

@@ -7,6 +7,7 @@ const viewers = {
   text: () => import('~/vue_shared/components/source_viewer/source_viewer.vue'),
   pdf: () => import('./pdf_viewer.vue'),
   lfs: () => import('./lfs_viewer.vue'),
+  audio: () => import('./audio_viewer.vue'),
 };
 
 export const loadViewer = (type, isUsingLfs) => {

spec/frontend/repository/components/blob_viewers/audio_viewer_spec.js

+import { shallowMount } from '@vue/test-utils';
+import AudioViewer from '~/repository/components/blob_viewers/audio_viewer.vue';
+
+describe('Audio Viewer', () => {
+  let wrapper;
+
+  const DEFAULT_BLOB_DATA = {
+    rawPath: 'some/audio.mid',
+  };
+
+  const createComponent = () => {
+    wrapper = shallowMount(AudioViewer, { propsData: { blob: DEFAULT_BLOB_DATA } });
+  };
+
+  const findContent = () => wrapper.find('[data-testid="audio"]');
+
+  it('renders an audio source component', () => {
+    createComponent();
+
+    expect(findContent().exists()).toBe(true);
+    expect(findContent().attributes('src')).toBe(DEFAULT_BLOB_DATA.rawPath);
+  });
+});