2 files changed, 179 insertions, 127 deletions

diff --git a/spec/frontend/snippets/components/edit_spec.js b/spec/frontend/snippets/components/edit_spec.js
index 664fc3733d4..d2265dfd506 100644
--- a/spec/frontend/snippets/components/edit_spec.js
+++ b/spec/frontend/snippets/components/edit_spec.js
@@ -1,9 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
-import axios from '~/lib/utils/axios_utils';
 import Flash from '~/flash';
 
 import { GlLoadingIcon } from '@gitlab/ui';
-import { joinPaths, redirectTo } from '~/lib/utils/url_utility';
+import { redirectTo } from '~/lib/utils/url_utility';
 
 import SnippetEditApp from '~/snippets/components/edit.vue';
 import SnippetDescriptionEdit from '~/snippets/components/snippet_description_edit.vue';
@@ -16,25 +15,17 @@ import { SNIPPET_CREATE_MUTATION_ERROR, SNIPPET_UPDATE_MUTATION_ERROR } from '~/
 import UpdateSnippetMutation from '~/snippets/mutations/updateSnippet.mutation.graphql';
 import CreateSnippetMutation from '~/snippets/mutations/createSnippet.mutation.graphql';
 
-import AxiosMockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
 import { ApolloMutation } from 'vue-apollo';
 
 jest.mock('~/lib/utils/url_utility', () => ({
-  getBaseURL: jest.fn().mockReturnValue('foo/'),
   redirectTo: jest.fn().mockName('redirectTo'),
-  joinPaths: jest
-    .fn()
-    .mockName('joinPaths')
-    .mockReturnValue('contentApiURL'),
 }));
 
 jest.mock('~/flash');
 
 let flashSpy;
 
-const contentMock = 'Foo Bar';
-const rawPathMock = '/foo/bar';
 const rawProjectPathMock = '/project/path';
 const newlyEditedSnippetUrl = 'http://foo.bar';
 const apiError = { message: 'Ufff' };
@@ -43,15 +34,27 @@ const mutationError = 'Bummer';
 const attachedFilePath1 = 'foo/bar';
 const attachedFilePath2 = 'alpha/beta';
 
+const actionWithContent = {
+  content: 'Foo Bar',
+};
+const actionWithoutContent = {
+  content: '',
+};
+
 const defaultProps = {
   snippetGid: 'gid://gitlab/PersonalSnippet/42',
   markdownPreviewPath: 'http://preview.foo.bar',
   markdownDocsPath: 'http://docs.foo.bar',
 };
+const defaultData = {
+  blobsActions: {
+    ...actionWithContent,
+    action: '',
+  },
+};
 
 describe('Snippet Edit app', () => {
   let wrapper;
-  let axiosMock;
 
   const resolveMutate = jest.fn().mockResolvedValue({
     data: {
@@ -156,18 +159,21 @@ describe('Snippet Edit app', () => {
     });
 
     it.each`
-      title    | content  | expectation
-      ${''}    | ${''}    | ${true}
-      ${'foo'} | ${''}    | ${true}
-      ${''}    | ${'foo'} | ${true}
-      ${'foo'} | ${'bar'} | ${false}
+      title    | blobsActions                                   | expectation
+      ${''}    | ${{}}                                          | ${true}
+      ${''}    | ${{ actionWithContent }}                       | ${true}
+      ${''}    | ${{ actionWithoutContent }}                    | ${true}
+      ${'foo'} | ${{}}                                          | ${true}
+      ${'foo'} | ${{ actionWithoutContent }}                    | ${true}
+      ${'foo'} | ${{ actionWithoutContent, actionWithContent }} | ${true}
+      ${'foo'} | ${{ actionWithContent }}                       | ${false}
     `(
-      'disables submit button unless both title and content are present',
-      ({ title, content, expectation }) => {
+      'disables submit button unless both title and content for all blobs are present',
+      ({ title, blobsActions, expectation }) => {
         createComponent({
           data: {
             snippet: { title },
-            content,
+            blobsActions,
           },
         });
         const isBtnDisabled = Boolean(findSubmitButton().attributes('disabled'));
@@ -192,83 +198,31 @@ describe('Snippet Edit app', () => {
   });
 
   describe('functionality', () => {
-    describe('handling of the data from GraphQL response', () => {
-      const snippet = {
-        blob: {
-          rawPath: rawPathMock,
-        },
-      };
-      const getResSchema = newSnippet => {
-        return {
-          data: {
-            snippets: {
-              edges: newSnippet ? [] : [snippet],
-            },
-          },
+    describe('form submission handling', () => {
+      it('does not submit unchanged blobs', () => {
+        const foo = {
+          action: '',
+        };
+        const bar = {
+          action: 'update',
         };
-      };
-
-      const bootstrapForExistingSnippet = resp => {
         createComponent({
           data: {
-            snippet,
+            blobsActions: {
+              foo,
+              bar,
+            },
           },
         });
-
-        if (resp === 500) {
-          axiosMock.onGet('contentApiURL').reply(500);
-        } else {
-          axiosMock.onGet('contentApiURL').reply(200, contentMock);
-        }
-        wrapper.vm.onSnippetFetch(getResSchema());
-      };
-
-      const bootstrapForNewSnippet = () => {
-        createComponent();
-        wrapper.vm.onSnippetFetch(getResSchema(true));
-      };
-
-      beforeEach(() => {
-        axiosMock = new AxiosMockAdapter(axios);
-      });
-
-      afterEach(() => {
-        axiosMock.restore();
-      });
-
-      it('fetches blob content with the additional query', () => {
-        bootstrapForExistingSnippet();
-
-        return waitForPromises().then(() => {
-          expect(joinPaths).toHaveBeenCalledWith('foo/', rawPathMock);
-          expect(wrapper.vm.newSnippet).toBe(false);
-          expect(wrapper.vm.content).toBe(contentMock);
-        });
-      });
-
-      it('flashes the error message if fetching content fails', () => {
-        bootstrapForExistingSnippet(500);
-
-        return waitForPromises().then(() => {
-          expect(flashSpy).toHaveBeenCalled();
-          expect(wrapper.vm.content).toBe('');
-        });
-      });
-
-      it('does not fetch content for new snippet', () => {
-        bootstrapForNewSnippet();
+        clickSubmitBtn();
 
         return waitForPromises().then(() => {
-          // we keep using waitForPromises to make sure we do not run failed test
-          expect(wrapper.vm.newSnippet).toBe(true);
-          expect(wrapper.vm.content).toBe('');
-          expect(joinPaths).not.toHaveBeenCalled();
-          expect(wrapper.vm.snippet).toEqual(wrapper.vm.$options.newSnippetSchema);
+          expect(resolveMutate).toHaveBeenCalledWith(
+            expect.objectContaining({ variables: { input: { files: [bar] } } }),
+          );
         });
       });
-    });
 
-    describe('form submission handling', () => {
       it.each`
         newSnippet | projectPath           | mutation                 | mutationName
         ${true}    | ${rawProjectPathMock} | ${CreateSnippetMutation} | ${'CreateSnippetMutation with projectPath'}
@@ -279,6 +233,7 @@ describe('Snippet Edit app', () => {
         createComponent({
           data: {
             newSnippet,
+            ...defaultData,
           },
           props: {
             ...defaultProps,
@@ -307,16 +262,6 @@ describe('Snippet Edit app', () => {
         });
       });
 
-      it('makes sure there are no unsaved changes in the snippet', () => {
-        createComponent();
-        clickSubmitBtn();
-
-        return waitForPromises().then(() => {
-          expect(wrapper.vm.originalContent).toBe(wrapper.vm.content);
-          expect(wrapper.vm.hasChanges()).toBe(false);
-        });
-      });
-
       it.each`
         newSnippet | projectPath           | mutationName
         ${true}    | ${rawProjectPathMock} | ${'CreateSnippetMutation with projectPath'}
@@ -434,21 +379,45 @@ describe('Snippet Edit app', () => {
       let event;
       let returnValueSetter;
 
-      beforeEach(() => {
-        createComponent();
+      const bootstrap = data => {
+        createComponent({
+          data,
+        });
 
         event = new Event('beforeunload');
         returnValueSetter = jest.spyOn(event, 'returnValue', 'set');
+      };
+
+      it('does not prevent page navigation if there are no blobs', () => {
+        bootstrap();
+        window.dispatchEvent(event);
+
+        expect(returnValueSetter).not.toHaveBeenCalled();
       });
 
-      it('does not prevent page navigation if there are no changes to the snippet content', () => {
+      it('does not prevent page navigation if there are no changes to the blobs content', () => {
+        bootstrap({
+          blobsActions: {
+            foo: {
+              ...actionWithContent,
+              action: '',
+            },
+          },
+        });
         window.dispatchEvent(event);
 
         expect(returnValueSetter).not.toHaveBeenCalled();
       });
 
       it('prevents page navigation if there are some changes in the snippet content', () => {
-        wrapper.setData({ content: 'new content' });
+        bootstrap({
+          blobsActions: {
+            foo: {
+              ...actionWithContent,
+              action: 'update',
+            },
+          },
+        });
 
         window.dispatchEvent(event);
 
diff --git a/spec/frontend/snippets/components/snippet_blob_edit_spec.js b/spec/frontend/snippets/components/snippet_blob_edit_spec.js
index 75688e61892..009074b4558 100644
--- a/spec/frontend/snippets/components/snippet_blob_edit_spec.js
+++ b/spec/frontend/snippets/components/snippet_blob_edit_spec.js
@@ -4,78 +4,161 @@ import BlobContentEdit from '~/blob/components/blob_edit_content.vue';
 import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
+import AxiosMockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import { joinPaths } from '~/lib/utils/url_utility';
+import waitForPromises from 'helpers/wait_for_promises';
 
 jest.mock('~/blob/utils', () => jest.fn());
 
+jest.mock('~/lib/utils/url_utility', () => ({
+  getBaseURL: jest.fn().mockReturnValue('foo/'),
+  joinPaths: jest
+    .fn()
+    .mockName('joinPaths')
+    .mockReturnValue('contentApiURL'),
+}));
+
+jest.mock('~/flash');
+
+let flashSpy;
+
 describe('Snippet Blob Edit component', () => {
   let wrapper;
-  const value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
-  const fileName = 'lorem.txt';
-  const findHeader = () => wrapper.find(BlobHeaderEdit);
-  const findContent = () => wrapper.find(BlobContentEdit);
+  let axiosMock;
+  const contentMock = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+  const pathMock = 'lorem.txt';
+  const rawPathMock = 'foo/bar';
+  const blob = {
+    path: pathMock,
+    content: contentMock,
+    rawPath: rawPathMock,
+  };
+  const findComponent = component => wrapper.find(component);
 
-  function createComponent(props = {}) {
+  function createComponent(props = {}, data = { isContentLoading: false }) {
     wrapper = shallowMount(SnippetBlobEdit, {
       propsData: {
-        value,
-        fileName,
-        isLoading: false,
         ...props,
       },
+      data() {
+        return {
+          ...data,
+        };
+      },
     });
+    flashSpy = jest.spyOn(wrapper.vm, 'flashAPIFailure');
   }
 
   beforeEach(() => {
+    axiosMock = new AxiosMockAdapter(axios);
     createComponent();
   });
 
   afterEach(() => {
+    axiosMock.restore();
     wrapper.destroy();
   });
 
   describe('rendering', () => {
     it('matches the snapshot', () => {
+      createComponent({ blob });
       expect(wrapper.element).toMatchSnapshot();
     });
 
     it('renders required components', () => {
-      expect(findHeader().exists()).toBe(true);
-      expect(findContent().exists()).toBe(true);
+      expect(findComponent(BlobHeaderEdit).exists()).toBe(true);
+      expect(findComponent(BlobContentEdit).exists()).toBe(true);
     });
 
-    it('renders loader if isLoading equals true', () => {
-      createComponent({ isLoading: true });
+    it('renders loader if existing blob is supplied but no content is fetched yet', () => {
+      createComponent({ blob }, { isContentLoading: true });
       expect(wrapper.contains(GlLoadingIcon)).toBe(true);
-      expect(findContent().exists()).toBe(false);
+      expect(findComponent(BlobContentEdit).exists()).toBe(false);
+    });
+
+    it('does not render loader if when blob is not supplied', () => {
+      createComponent();
+      expect(wrapper.contains(GlLoadingIcon)).toBe(false);
+      expect(findComponent(BlobContentEdit).exists()).toBe(true);
     });
   });
 
   describe('functionality', () => {
-    it('does not fail without content', () => {
+    it('does not fail without blob', () => {
       const spy = jest.spyOn(global.console, 'error');
-      createComponent({ value: undefined });
+      createComponent({ blob: undefined });
 
       expect(spy).not.toHaveBeenCalled();
-      expect(findContent().exists()).toBe(true);
+      expect(findComponent(BlobContentEdit).exists()).toBe(true);
     });
 
-    it('emits "name-change" event when the file name gets changed', () => {
-      expect(wrapper.emitted('name-change')).toBeUndefined();
-      const newFilename = 'foo.bar';
-      findHeader().vm.$emit('input', newFilename);
+    it.each`
+      emitter            | prop
+      ${BlobHeaderEdit}  | ${'filePath'}
+      ${BlobContentEdit} | ${'content'}
+    `('emits "blob-updated" event when the $prop gets changed', ({ emitter, prop }) => {
+      expect(wrapper.emitted('blob-updated')).toBeUndefined();
+      const newValue = 'foo.bar';
+      findComponent(emitter).vm.$emit('input', newValue);
 
       return nextTick().then(() => {
-        expect(wrapper.emitted('name-change')[0]).toEqual([newFilename]);
+        expect(wrapper.emitted('blob-updated')[0]).toEqual([
+          expect.objectContaining({
+            [prop]: newValue,
+          }),
+        ]);
       });
     });
 
-    it('emits "input" event when the file content gets changed', () => {
-      expect(wrapper.emitted('input')).toBeUndefined();
-      const newValue = 'foo.bar';
-      findContent().vm.$emit('input', newValue);
+    describe('fetching blob content', () => {
+      const bootstrapForExistingSnippet = resp => {
+        createComponent({
+          blob: {
+            ...blob,
+            content: '',
+          },
+        });
 
-      return nextTick().then(() => {
-        expect(wrapper.emitted('input')[0]).toEqual([newValue]);
+        if (resp === 500) {
+          axiosMock.onGet('contentApiURL').reply(500);
+        } else {
+          axiosMock.onGet('contentApiURL').reply(200, contentMock);
+        }
+      };
+
+      const bootstrapForNewSnippet = () => {
+        createComponent();
+      };
+
+      it('fetches blob content with the additional query', () => {
+        bootstrapForExistingSnippet();
+
+        return waitForPromises().then(() => {
+          expect(joinPaths).toHaveBeenCalledWith('foo/', rawPathMock);
+          expect(findComponent(BlobHeaderEdit).props('value')).toBe(pathMock);
+          expect(findComponent(BlobContentEdit).props('value')).toBe(contentMock);
+        });
+      });
+
+      it('flashes the error message if fetching content fails', () => {
+        bootstrapForExistingSnippet(500);
+
+        return waitForPromises().then(() => {
+          expect(flashSpy).toHaveBeenCalled();
+          expect(findComponent(BlobContentEdit).props('value')).toBe('');
+        });
+      });
+
+      it('does not fetch content for new snippet', () => {
+        bootstrapForNewSnippet();
+
+        return waitForPromises().then(() => {
+          // we keep using waitForPromises to make sure we do not run failed test
+          expect(findComponent(BlobHeaderEdit).props('value')).toBe('');
+          expect(findComponent(BlobContentEdit).props('value')).toBe('');
+          expect(joinPaths).not.toHaveBeenCalled();
+        });
       });
     });
   });