+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+`;
diff --git a/spec/frontend/blob/components/blob_edit_content_spec.js b/spec/frontend/blob/components/blob_edit_content_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..eff53fe7ce98e29eec9d223f67bbe28043a61399
--- /dev/null
+++ b/spec/frontend/blob/components/blob_edit_content_spec.js
@@ -0,0 +1,81 @@
+import { shallowMount } from '@vue/test-utils';
+import BlobEditContent from '~/blob/components/blob_edit_content.vue';
+import { initEditorLite } from '~/blob/utils';
+import { nextTick } from 'vue';
+
+jest.mock('~/blob/utils', () => ({
+ initEditorLite: jest.fn(),
+}));
+
+describe('Blob Header Editing', () => {
+ let wrapper;
+ const value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+ const fileName = 'lorem.txt';
+
+ function createComponent() {
+ wrapper = shallowMount(BlobEditContent, {
+ propsData: {
+ value,
+ fileName,
+ },
+ });
+ }
+
+ beforeEach(() => {
+ createComponent();
+ });
+
+ afterEach(() => {
+ wrapper.destroy();
+ });
+
+ describe('rendering', () => {
+ it('matches the snapshot', () => {
+ expect(wrapper.element).toMatchSnapshot();
+ });
+
+ it('renders content', () => {
+ expect(wrapper.text()).toContain(value);
+ });
+ });
+
+ describe('functionality', () => {
+ it('initialises Editor Lite', () => {
+ const el = wrapper.find({ ref: 'editor' }).element;
+ expect(initEditorLite).toHaveBeenCalledWith({
+ el,
+ blobPath: fileName,
+ blobContent: value,
+ });
+ });
+
+ it('reacts to the changes in fileName', () => {
+ wrapper.vm.editor = {
+ updateModelLanguage: jest.fn(),
+ };
+
+ const newFileName = 'ipsum.txt';
+
+ wrapper.setProps({
+ fileName: newFileName,
+ });
+
+ return nextTick().then(() => {
+ expect(wrapper.vm.editor.updateModelLanguage).toHaveBeenCalledWith(newFileName);
+ });
+ });
+
+ it('emits input event when the blob content is changed', () => {
+ const editorEl = wrapper.find({ ref: 'editor' });
+ wrapper.vm.editor = {
+ getValue: jest.fn().mockReturnValue(value),
+ };
+
+ editorEl.trigger('focusout');
+
+ return nextTick().then(() => {
+ expect(wrapper.emitted().input[0]).toEqual([value]);
+ });
+ });
+ });
+});
diff --git a/spec/frontend/blob/utils_spec.js b/spec/frontend/blob/utils_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..39a73aae444a2bb7eb247885aa773038d8b78e25
--- /dev/null
+++ b/spec/frontend/blob/utils_spec.js
@@ -0,0 +1,95 @@
+import Editor from '~/editor/editor_lite';
+import * as utils from '~/blob/utils';
+
+const mockCreateMonacoInstance = jest.fn();
+jest.mock('~/editor/editor_lite', () => {
+ return jest.fn().mockImplementation(() => {
+ return { createInstance: mockCreateMonacoInstance };
+ });
+});
+
+const mockCreateAceInstance = jest.fn();
+global.ace = {
+ edit: mockCreateAceInstance,
+};
+
+describe('Blob utilities', () => {
+ beforeEach(() => {
+ Editor.mockClear();
+ });
+
+ describe('initEditorLite', () => {
+ let editorEl;
+ const blobPath = 'foo.txt';
+ const blobContent = 'Foo bar';
+
+ beforeEach(() => {
+ setFixtures('