Asembled Snippet Blob Edit component

The component consists of two generic components:
- Blob Header Edit
- Blob Content Edit

app/assets/javascripts/snippets/components/snippet_blob_edit.vue

+<script>
+import BlobHeaderEdit from '~/blob/components/blob_edit_header.vue';
+import BlobContentEdit from '~/blob/components/blob_edit_content.vue';
+
+export default {
+  components: {
+    BlobHeaderEdit,
+    BlobContentEdit,
+  },
+  props: {
+    content: {
+      type: String,
+      required: true,
+    },
+    fileName: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      name: this.fileName,
+      blobContent: this.content,
+    };
+  },
+};
+</script>
+<template>
+  <div class="form-group file-editor">
+    <label>{{ s__('Snippets|File') }}</label>
+    <div class="file-holder snippet">
+      <blob-header-edit v-model="name" />
+      <blob-content-edit v-model="blobContent" :file-name="name" />
+    </div>
+  </div>
+</template>

spec/frontend/snippets/components/__snapshots__/snippet_blob_edit_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snippet Blob Edit component rendering matches the snapshot 1`] = `
+<div
+  class="form-group file-editor"
+>
+  <label>
+    File
+  </label>
+   
+  <div
+    class="file-holder snippet"
+  >
+    <blob-header-edit-stub
+      value="lorem.txt"
+    />
+     
+    <blob-content-edit-stub
+      filename="lorem.txt"
+      value="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+    />
+  </div>
+</div>
+`;

spec/frontend/snippets/components/snippet_blob_edit_spec.js

+/* eslint-disable no-unused-vars */
+import SnippetBlobEdit from '~/snippets/components/snippet_blob_edit.vue';
+import BlobHeaderEdit from '~/blob/components/blob_edit_header.vue';
+import BlobContentEdit from '~/blob/components/blob_edit_content.vue';
+import { shallowMount } from '@vue/test-utils';
+import { initEditorLite } from '~/blob/utils';
+
+jest.mock('~/blob/utils', () => jest.fn());
+
+describe('Snippet Blob Edit component', () => {
+  let wrapper;
+  const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+  const fileName = 'lorem.txt';
+
+  function createComponent() {
+    wrapper = shallowMount(SnippetBlobEdit, {
+      propsData: {
+        content,
+        fileName,
+      },
+    });
+  }
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('rendering', () => {
+    it('matches the snapshot', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('renders required components', () => {
+      expect(wrapper.contains(BlobHeaderEdit)).toBe(true);
+      expect(wrapper.contains(BlobContentEdit)).toBe(true);
+    });
+  });
+});