Add latest changes from gitlab-org/gitlab@master

4 files changed, 206 insertions, 20 deletions

diff --git a/spec/frontend/snippets/components/__snapshots__/snippet_blob_edit_spec.js.snap b/spec/frontend/snippets/components/__snapshots__/snippet_blob_edit_spec.js.snap
index f60ffd00792..a8019320f15 100644
--- a/spec/frontend/snippets/components/__snapshots__/snippet_blob_edit_spec.js.snap
+++ b/spec/frontend/snippets/components/__snapshots__/snippet_blob_edit_spec.js.snap
@@ -2,25 +2,18 @@
 
 exports[`Snippet Blob Edit component rendering matches the snapshot 1`] = `
 <div
-  class="form-group file-editor"
+  class="file-holder snippet"
 >
-  <label>
-    File
-  </label>
+  <blob-header-edit-stub
+    data-qa-selector="file_name_field"
+    id="snippet_file_path"
+    value="lorem.txt"
+  />
    
-  <div
-    class="file-holder snippet"
-  >
-    <blob-header-edit-stub
-      data-qa-selector="file_name_field"
-      value="lorem.txt"
-    />
-     
-    <blob-content-edit-stub
-      fileglobalid="0a3d"
-      filename="lorem.txt"
-      value="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-    />
-  </div>
+  <blob-content-edit-stub
+    fileglobalid="0a3d"
+    filename="lorem.txt"
+    value="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+  />
 </div>
 `;
diff --git a/spec/frontend/snippets/components/edit_spec.js b/spec/frontend/snippets/components/edit_spec.js
index 4eb624ebf34..8fdaaf3a39b 100644
--- a/spec/frontend/snippets/components/edit_spec.js
+++ b/spec/frontend/snippets/components/edit_spec.js
@@ -7,7 +7,7 @@ import { redirectTo } from '~/lib/utils/url_utility';
 import SnippetEditApp from '~/snippets/components/edit.vue';
 import SnippetDescriptionEdit from '~/snippets/components/snippet_description_edit.vue';
 import SnippetVisibilityEdit from '~/snippets/components/snippet_visibility_edit.vue';
-import SnippetBlobEdit from '~/snippets/components/snippet_blob_edit.vue';
+import SnippetBlobActionsEdit from '~/snippets/components/snippet_blob_actions_edit.vue';
 import TitleField from '~/vue_shared/components/form/title.vue';
 import FormFooterActions from '~/vue_shared/components/form/form_footer_actions.vue';
 import { SNIPPET_CREATE_MUTATION_ERROR, SNIPPET_UPDATE_MUTATION_ERROR } from '~/snippets/constants';
@@ -141,7 +141,7 @@ describe('Snippet Edit app', () => {
 
       expect(wrapper.contains(TitleField)).toBe(true);
       expect(wrapper.contains(SnippetDescriptionEdit)).toBe(true);
-      expect(wrapper.contains(SnippetBlobEdit)).toBe(true);
+      expect(wrapper.contains(SnippetBlobActionsEdit)).toBe(true);
       expect(wrapper.contains(SnippetVisibilityEdit)).toBe(true);
       expect(wrapper.contains(FormFooterActions)).toBe(true);
     });
diff --git a/spec/frontend/snippets/components/snippet_blob_actions_edit_spec.js b/spec/frontend/snippets/components/snippet_blob_actions_edit_spec.js
new file mode 100644
index 00000000000..a7b4f509e50
--- /dev/null
+++ b/spec/frontend/snippets/components/snippet_blob_actions_edit_spec.js
@@ -0,0 +1,59 @@
+import { shallowMount } from '@vue/test-utils';
+import SnippetBlobActionsEdit from '~/snippets/components/snippet_blob_actions_edit.vue';
+import SnippetBlobEdit from '~/snippets/components/snippet_blob_edit.vue';
+
+const TEST_BLOBS = [
+  { name: 'foo', content: 'abc', rawPath: 'test/raw' },
+  { name: 'bar', content: 'def', rawPath: 'test/raw' },
+];
+const TEST_EVENT = 'blob-update';
+
+describe('snippets/components/snippet_blob_actions_edit', () => {
+  let onEvent;
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(SnippetBlobActionsEdit, {
+      propsData: {
+        blobs: [],
+        ...props,
+      },
+      listeners: {
+        [TEST_EVENT]: onEvent,
+      },
+    });
+  };
+  const findBlobEdit = () => wrapper.find(SnippetBlobEdit);
+  const findBlobEditData = () => wrapper.findAll(SnippetBlobEdit).wrappers.map(x => x.props());
+
+  beforeEach(() => {
+    onEvent = jest.fn();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe.each`
+    props                    | expectedData
+    ${{}}                    | ${[{ blob: null }]}
+    ${{ blobs: TEST_BLOBS }} | ${TEST_BLOBS.map(blob => ({ blob }))}
+  `('with $props', ({ props, expectedData }) => {
+    beforeEach(() => {
+      createComponent(props);
+    });
+
+    it('renders blob edit', () => {
+      expect(findBlobEditData()).toEqual(expectedData);
+    });
+
+    it('emits event', () => {
+      expect(onEvent).not.toHaveBeenCalled();
+
+      findBlobEdit().vm.$emit('blob-update', TEST_BLOBS[0]);
+
+      expect(onEvent).toHaveBeenCalledWith(TEST_BLOBS[0]);
+    });
+  });
+});
diff --git a/spec/frontend/snippets/utils/blob_spec.js b/spec/frontend/snippets/utils/blob_spec.js
new file mode 100644
index 00000000000..ba39b9fec36
--- /dev/null
+++ b/spec/frontend/snippets/utils/blob_spec.js
@@ -0,0 +1,134 @@
+import { cloneDeep } from 'lodash';
+import {
+  SNIPPET_BLOB_ACTION_CREATE,
+  SNIPPET_BLOB_ACTION_UPDATE,
+  SNIPPET_BLOB_ACTION_MOVE,
+  SNIPPET_BLOB_ACTION_DELETE,
+} from '~/snippets/constants';
+import { decorateBlob, createBlob, diffAll } from '~/snippets/utils/blob';
+
+jest.mock('lodash/uniqueId', () => arg => `${arg}fakeUniqueId`);
+
+const TEST_RAW_BLOB = {
+  rawPath: '/test/blob/7/raw',
+};
+const CONTENT_1 = 'Lorem ipsum dolar\nSit amit\n\nGoodbye!\n';
+const CONTENT_2 = 'Lorem ipsum dolar sit amit.\n\nGoodbye!\n';
+
+describe('~/snippets/utils/blob', () => {
+  describe('decorateBlob', () => {
+    it('should decorate the given object with local blob properties', () => {
+      const orig = cloneDeep(TEST_RAW_BLOB);
+
+      expect(decorateBlob(orig)).toEqual({
+        ...TEST_RAW_BLOB,
+        id: 'blob_local_fakeUniqueId',
+        isLoaded: false,
+        content: '',
+      });
+    });
+  });
+
+  describe('createBlob', () => {
+    it('should create an empty local blob', () => {
+      expect(createBlob()).toEqual({
+        id: 'blob_local_fakeUniqueId',
+        isLoaded: true,
+        content: '',
+        path: '',
+      });
+    });
+  });
+
+  describe('diffAll', () => {
+    // This object contains entries that contain an expected "diff" and the `id`
+    // or `origContent` that should be used to generate the expected diff.
+    const testEntries = {
+      created: {
+        id: 'blob_1',
+        diff: {
+          action: SNIPPET_BLOB_ACTION_CREATE,
+          filePath: '/new/file',
+          previousPath: '/new/file',
+          content: CONTENT_1,
+        },
+      },
+      deleted: {
+        id: 'blob_2',
+        diff: {
+          action: SNIPPET_BLOB_ACTION_DELETE,
+          filePath: '/src/delete/me',
+          previousPath: '/src/delete/me',
+          content: CONTENT_1,
+        },
+      },
+      updated: {
+        id: 'blob_3',
+        origContent: CONTENT_1,
+        diff: {
+          action: SNIPPET_BLOB_ACTION_UPDATE,
+          filePath: '/lorem.md',
+          previousPath: '/lorem.md',
+          content: CONTENT_2,
+        },
+      },
+      renamed: {
+        id: 'blob_4',
+        diff: {
+          action: SNIPPET_BLOB_ACTION_MOVE,
+          filePath: '/dolar.md',
+          previousPath: '/ipsum.md',
+          content: CONTENT_1,
+        },
+      },
+      renamedAndUpdated: {
+        id: 'blob_5',
+        origContent: CONTENT_1,
+        diff: {
+          action: SNIPPET_BLOB_ACTION_MOVE,
+          filePath: '/sit.md',
+          previousPath: '/sit/amit.md',
+          content: CONTENT_2,
+        },
+      },
+    };
+    const createBlobsFromTestEntries = (entries, isOrig = false) =>
+      entries.reduce(
+        (acc, { id, diff, origContent }) =>
+          Object.assign(acc, {
+            [id]: {
+              id,
+              content: isOrig && origContent ? origContent : diff.content,
+              path: isOrig ? diff.previousPath : diff.filePath,
+            },
+          }),
+        {},
+      );
+
+    it('should create diff from original files', () => {
+      const origBlobs = createBlobsFromTestEntries(
+        [
+          testEntries.deleted,
+          testEntries.updated,
+          testEntries.renamed,
+          testEntries.renamedAndUpdated,
+        ],
+        true,
+      );
+      const blobs = createBlobsFromTestEntries([
+        testEntries.created,
+        testEntries.updated,
+        testEntries.renamed,
+        testEntries.renamedAndUpdated,
+      ]);
+
+      expect(diffAll(blobs, origBlobs)).toEqual([
+        testEntries.deleted.diff,
+        testEntries.created.diff,
+        testEntries.updated.diff,
+        testEntries.renamed.diff,
+        testEntries.renamedAndUpdated.diff,
+      ]);
+    });
+  });
+});