Add latest changes from gitlab-org/gitlab@13-2-stable-ee

5 files changed, 265 insertions, 143 deletions

diff --git a/spec/frontend/snippets/components/edit_spec.js b/spec/frontend/snippets/components/edit_spec.js
index 83f46dd347f..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,
@@ -419,5 +374,57 @@ describe('Snippet Edit app', () => {
         expect(resolveMutate).toHaveBeenCalledWith(updateMutationPayload());
       });
     });
+
+    describe('on before unload', () => {
+      let event;
+      let returnValueSetter;
+
+      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 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', () => {
+        bootstrap({
+          blobsActions: {
+            foo: {
+              ...actionWithContent,
+              action: 'update',
+            },
+          },
+        });
+
+        window.dispatchEvent(event);
+
+        expect(returnValueSetter).toHaveBeenCalledWith(
+          'Are you sure you want to lose unsaved changes?',
+        );
+      });
+    });
   });
 });
diff --git a/spec/frontend/snippets/components/show_spec.js b/spec/frontend/snippets/components/show_spec.js
index 33608df8cf2..b5446e70028 100644
--- a/spec/frontend/snippets/components/show_spec.js
+++ b/spec/frontend/snippets/components/show_spec.js
@@ -1,10 +1,13 @@
 import SnippetApp from '~/snippets/components/show.vue';
+import BlobEmbeddable from '~/blob/components/blob_embeddable.vue';
 import SnippetHeader from '~/snippets/components/snippet_header.vue';
 import SnippetTitle from '~/snippets/components/snippet_title.vue';
 import SnippetBlob from '~/snippets/components/snippet_blob_view.vue';
 import { GlLoadingIcon } from '@gitlab/ui';
+import { Blob, BinaryBlob } from 'jest/blob/components/mock_data';
 
 import { shallowMount } from '@vue/test-utils';
+import { SNIPPET_VISIBILITY_PUBLIC } from '~/snippets/constants';
 
 describe('Snippet view app', () => {
   let wrapper;
@@ -12,7 +15,7 @@ describe('Snippet view app', () => {
     snippetGid: 'gid://gitlab/PersonalSnippet/42',
   };
 
-  function createComponent({ props = defaultProps, loading = false } = {}) {
+  function createComponent({ props = defaultProps, data = {}, loading = false } = {}) {
     const $apollo = {
       queries: {
         snippet: {
@@ -26,6 +29,9 @@ describe('Snippet view app', () => {
       propsData: {
         ...props,
       },
+      data() {
+        return data;
+      },
     });
   }
   afterEach(() => {
@@ -37,10 +43,33 @@ describe('Snippet view app', () => {
     expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
   });
 
-  it('renders all components after the query is finished', () => {
+  it('renders all simple components after the query is finished', () => {
     createComponent();
     expect(wrapper.find(SnippetHeader).exists()).toBe(true);
     expect(wrapper.find(SnippetTitle).exists()).toBe(true);
-    expect(wrapper.find(SnippetBlob).exists()).toBe(true);
+  });
+
+  it('renders embeddable component if visibility allows', () => {
+    createComponent({
+      data: {
+        snippet: {
+          visibilityLevel: SNIPPET_VISIBILITY_PUBLIC,
+          webUrl: 'http://foo.bar',
+        },
+      },
+    });
+    expect(wrapper.contains(BlobEmbeddable)).toBe(true);
+  });
+
+  it('renders correct snippet-blob components', () => {
+    createComponent({
+      data: {
+        blobs: [Blob, BinaryBlob],
+      },
+    });
+    const blobs = wrapper.findAll(SnippetBlob);
+    expect(blobs.length).toBe(2);
+    expect(blobs.at(0).props('blob')).toEqual(Blob);
+    expect(blobs.at(1).props('blob')).toEqual(BinaryBlob);
   });
 });
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();
+        });
       });
     });
   });
diff --git a/spec/frontend/snippets/components/snippet_blob_view_spec.js b/spec/frontend/snippets/components/snippet_blob_view_spec.js
index e4d8ee9b7df..c8f1c8fc8a9 100644
--- a/spec/frontend/snippets/components/snippet_blob_view_spec.js
+++ b/spec/frontend/snippets/components/snippet_blob_view_spec.js
@@ -23,13 +23,17 @@ describe('Blob Embeddable', () => {
     id: 'gid://foo.bar/snippet',
     webUrl: 'https://foo.bar',
     visibilityLevel: SNIPPET_VISIBILITY_PUBLIC,
-    blob: BlobMock,
   };
   const dataMock = {
     activeViewerType: SimpleViewerMock.type,
   };
 
-  function createComponent(props = {}, data = dataMock, contentLoading = false) {
+  function createComponent({
+    snippetProps = {},
+    data = dataMock,
+    blob = BlobMock,
+    contentLoading = false,
+  } = {}) {
     const $apollo = {
       queries: {
         blobContent: {
@@ -44,8 +48,9 @@ describe('Blob Embeddable', () => {
       propsData: {
         snippet: {
           ...snippet,
-          ...props,
+          ...snippetProps,
         },
+        blob,
       },
       data() {
         return {
@@ -63,7 +68,6 @@ describe('Blob Embeddable', () => {
   describe('rendering', () => {
     it('renders correct components', () => {
       createComponent();
-      expect(wrapper.find(BlobEmbeddable).exists()).toBe(true);
       expect(wrapper.find(BlobHeader).exists()).toBe(true);
       expect(wrapper.find(BlobContent).exists()).toBe(true);
     });
@@ -72,19 +76,14 @@ describe('Blob Embeddable', () => {
       'does not render blob-embeddable by default',
       visibilityLevel => {
         createComponent({
-          visibilityLevel,
+          snippetProps: {
+            visibilityLevel,
+          },
         });
         expect(wrapper.find(BlobEmbeddable).exists()).toBe(false);
       },
     );
 
-    it('does render blob-embeddable for public snippet', () => {
-      createComponent({
-        visibilityLevel: SNIPPET_VISIBILITY_PUBLIC,
-      });
-      expect(wrapper.find(BlobEmbeddable).exists()).toBe(true);
-    });
-
     it('sets simple viewer correctly', () => {
       createComponent();
       expect(wrapper.find(SimpleViewer).exists()).toBe(true);
@@ -92,7 +91,9 @@ describe('Blob Embeddable', () => {
 
     it('sets rich viewer correctly', () => {
       const data = { ...dataMock, activeViewerType: RichViewerMock.type };
-      createComponent({}, data);
+      createComponent({
+        data,
+      });
       expect(wrapper.find(RichViewer).exists()).toBe(true);
     });
 
@@ -137,7 +138,9 @@ describe('Blob Embeddable', () => {
       });
 
       it('renders simple viewer by default if URL contains hash', () => {
-        createComponent({}, {});
+        createComponent({
+          data: {},
+        });
 
         expect(wrapper.vm.activeViewerType).toBe(SimpleViewerMock.type);
         expect(wrapper.find(SimpleViewer).exists()).toBe(true);
@@ -183,12 +186,11 @@ describe('Blob Embeddable', () => {
       });
 
       it(`sets '${SimpleViewerMock.type}' as active on ${BLOB_RENDER_EVENT_SHOW_SOURCE} event`, () => {
-        createComponent(
-          {},
-          {
+        createComponent({
+          data: {
             activeViewerType: RichViewerMock.type,
           },
-        );
+        });
 
         findContentEl().vm.$emit(BLOB_RENDER_EVENT_SHOW_SOURCE);
         expect(wrapper.vm.activeViewerType).toEqual(SimpleViewerMock.type);
diff --git a/spec/frontend/snippets/components/snippet_header_spec.js b/spec/frontend/snippets/components/snippet_header_spec.js
index 5230910b6f5..0825da92118 100644
--- a/spec/frontend/snippets/components/snippet_header_spec.js
+++ b/spec/frontend/snippets/components/snippet_header_spec.js
@@ -3,6 +3,7 @@ import DeleteSnippetMutation from '~/snippets/mutations/deleteSnippet.mutation.g
 import { ApolloMutation } from 'vue-apollo';
 import { GlButton, GlModal } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { Blob, BinaryBlob } from 'jest/blob/components/mock_data';
 
 describe('Snippet header component', () => {
   let wrapper;
@@ -20,9 +21,7 @@ describe('Snippet header component', () => {
     author: {
       name: 'Thor Odinson',
     },
-    blob: {
-      binary: false,
-    },
+    blobs: [Blob],
   };
   const mutationVariables = {
     mutation: DeleteSnippetMutation,
@@ -49,7 +48,6 @@ describe('Snippet header component', () => {
     mutationRes = mutationTypes.RESOLVE,
     snippetProps = {},
   } = {}) {
-    // const defaultProps = Object.assign({}, snippet, snippetProps);
     const defaultProps = Object.assign(snippet, snippetProps);
     if (permissions) {
       Object.assign(defaultProps.userPermissions, {
@@ -131,15 +129,18 @@ describe('Snippet header component', () => {
     expect(wrapper.find(GlModal).exists()).toBe(true);
   });
 
-  it('renders Edit button as disabled for binary snippets', () => {
+  it.each`
+    blobs                 | isDisabled | condition
+    ${[Blob]}             | ${false}   | ${'no binary'}
+    ${[Blob, BinaryBlob]} | ${true}    | ${'several blobs. incl. a binary'}
+    ${[BinaryBlob]}       | ${true}    | ${'binary'}
+  `('renders Edit button when snippet contains $condition file', ({ blobs, isDisabled }) => {
     createComponent({
       snippetProps: {
-        blob: {
-          binary: true,
-        },
+        blobs,
       },
     });
-    expect(wrapper.find('[href*="edit"]').props('disabled')).toBe(true);
+    expect(wrapper.find('[href*="edit"]').props('disabled')).toBe(isDisabled);
   });
 
   describe('Delete mutation', () => {