Add latest changes from gitlab-org/gitlab@master

4 files changed, 110 insertions, 66 deletions

diff --git a/spec/frontend/snippets/components/__snapshots__/snippet_visibility_edit_spec.js.snap b/spec/frontend/snippets/components/__snapshots__/snippet_visibility_edit_spec.js.snap
index 4f1d46dffef..be75a5bfbdc 100644
--- a/spec/frontend/snippets/components/__snapshots__/snippet_visibility_edit_spec.js.snap
+++ b/spec/frontend/snippets/components/__snapshots__/snippet_visibility_edit_spec.js.snap
@@ -23,7 +23,7 @@ exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] =
     id="visibility-level-setting"
   >
     <gl-form-radio-group-stub
-      checked="0"
+      checked="private"
       disabledfield="disabled"
       htmlfield="html"
       options=""
@@ -33,7 +33,7 @@ exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] =
     >
       <gl-form-radio-stub
         class="mb-3"
-        value="0"
+        value="private"
       >
         <div
           class="d-flex align-items-center"
@@ -44,7 +44,7 @@ exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] =
           />
            
           <span
-            class="font-weight-bold ml-1"
+            class="font-weight-bold ml-1 js-visibility-option"
           >
             Private
           </span>
@@ -52,7 +52,7 @@ exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] =
       </gl-form-radio-stub>
       <gl-form-radio-stub
         class="mb-3"
-        value="1"
+        value="internal"
       >
         <div
           class="d-flex align-items-center"
@@ -63,7 +63,7 @@ exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] =
           />
            
           <span
-            class="font-weight-bold ml-1"
+            class="font-weight-bold ml-1 js-visibility-option"
           >
             Internal
           </span>
@@ -71,7 +71,7 @@ exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] =
       </gl-form-radio-stub>
       <gl-form-radio-stub
         class="mb-3"
-        value="2"
+        value="public"
       >
         <div
           class="d-flex align-items-center"
@@ -82,7 +82,7 @@ exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] =
           />
            
           <span
-            class="font-weight-bold ml-1"
+            class="font-weight-bold ml-1 js-visibility-option"
           >
             Public
           </span>
diff --git a/spec/frontend/snippets/components/snippet_blob_edit_spec.js b/spec/frontend/snippets/components/snippet_blob_edit_spec.js
index 42b49c50c75..334fe7196a4 100644
--- a/spec/frontend/snippets/components/snippet_blob_edit_spec.js
+++ b/spec/frontend/snippets/components/snippet_blob_edit_spec.js
@@ -2,18 +2,21 @@ 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 { nextTick } from 'vue';
 
 jest.mock('~/blob/utils', () => jest.fn());
 
 describe('Snippet Blob Edit component', () => {
   let wrapper;
-  const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+  const value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
   const fileName = 'lorem.txt';
+  const findHeader = () => wrapper.find(BlobHeaderEdit);
+  const findContent = () => wrapper.find(BlobContentEdit);
 
   function createComponent() {
     wrapper = shallowMount(SnippetBlobEdit, {
       propsData: {
-        content,
+        value,
         fileName,
       },
     });
@@ -33,8 +36,20 @@ describe('Snippet Blob Edit component', () => {
     });
 
     it('renders required components', () => {
-      expect(wrapper.contains(BlobHeaderEdit)).toBe(true);
-      expect(wrapper.contains(BlobContentEdit)).toBe(true);
+      expect(findHeader().exists()).toBe(true);
+      expect(findContent().exists()).toBe(true);
+    });
+  });
+
+  describe('functionality', () => {
+    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);
+
+      return nextTick().then(() => {
+        expect(wrapper.emitted('name-change')[0]).toEqual([newFilename]);
+      });
     });
   });
 });
diff --git a/spec/frontend/snippets/components/snippet_description_edit_spec.js b/spec/frontend/snippets/components/snippet_description_edit_spec.js
index 167489dc004..c5e667747c6 100644
--- a/spec/frontend/snippets/components/snippet_description_edit_spec.js
+++ b/spec/frontend/snippets/components/snippet_description_edit_spec.js
@@ -6,11 +6,12 @@ describe('Snippet Description Edit component', () => {
   const defaultDescription = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
   const markdownPreviewPath = 'foo/';
   const markdownDocsPath = 'help/';
+  const findTextarea = () => wrapper.find('textarea');
 
-  function createComponent(description = defaultDescription) {
+  function createComponent(value = defaultDescription) {
     wrapper = shallowMount(SnippetDescriptionEdit, {
       propsData: {
-        description,
+        value,
         markdownPreviewPath,
         markdownDocsPath,
       },
@@ -49,4 +50,14 @@ describe('Snippet Description Edit component', () => {
       expect(isHidden('.js-expanded')).toBe(true);
     });
   });
+
+  describe('functionality', () => {
+    it('emits "input" event when description is changed', () => {
+      expect(wrapper.emitted('input')).toBeUndefined();
+      const newDescription = 'dummy';
+      findTextarea().setValue(newDescription);
+
+      expect(wrapper.emitted('input')[0]).toEqual([newDescription]);
+    });
+  });
 });
diff --git a/spec/frontend/snippets/components/snippet_visibility_edit_spec.js b/spec/frontend/snippets/components/snippet_visibility_edit_spec.js
index 5104d742bb3..0bdef71bc08 100644
--- a/spec/frontend/snippets/components/snippet_visibility_edit_spec.js
+++ b/spec/frontend/snippets/components/snippet_visibility_edit_spec.js
@@ -1,37 +1,42 @@
 import SnippetVisibilityEdit from '~/snippets/components/snippet_visibility_edit.vue';
-import { GlFormRadio } from '@gitlab/ui';
-import { SNIPPET_VISIBILITY } from '~/snippets/constants';
+import { GlFormRadio, GlIcon, GlFormRadioGroup, GlLink } from '@gitlab/ui';
+import {
+  SNIPPET_VISIBILITY,
+  SNIPPET_VISIBILITY_PRIVATE,
+  SNIPPET_VISIBILITY_INTERNAL,
+  SNIPPET_VISIBILITY_PUBLIC,
+} from '~/snippets/constants';
 import { mount, shallowMount } from '@vue/test-utils';
 
 describe('Snippet Visibility Edit component', () => {
   let wrapper;
-  let radios;
   const defaultHelpLink = '/foo/bar';
-  const defaultVisibilityLevel = '0';
+  const defaultVisibilityLevel = 'private';
 
-  function findElements(sel) {
-    return wrapper.findAll(sel);
-  }
-
-  function createComponent(
-    {
-      helpLink = defaultHelpLink,
-      isProjectSnippet = false,
-      visibilityLevel = defaultVisibilityLevel,
-    } = {},
-    deep = false,
-  ) {
+  function createComponent(propsData = {}, deep = false) {
     const method = deep ? mount : shallowMount;
     wrapper = method.call(this, SnippetVisibilityEdit, {
       propsData: {
-        helpLink,
-        isProjectSnippet,
-        visibilityLevel,
+        helpLink: defaultHelpLink,
+        isProjectSnippet: false,
+        value: defaultVisibilityLevel,
+        ...propsData,
       },
     });
-    radios = findElements(GlFormRadio);
   }
 
+  const findLabel = () => wrapper.find('label');
+  const findRadios = () => wrapper.find(GlFormRadioGroup).findAll(GlFormRadio);
+  const findRadiosData = () =>
+    findRadios().wrappers.map(x => {
+      return {
+        value: x.find('input').attributes('value'),
+        icon: x.find(GlIcon).props('name'),
+        description: x.find('.help-text').text(),
+        text: x.find('.js-visibility-option').text(),
+      };
+    });
+
   afterEach(() => {
     wrapper.destroy();
   });
@@ -42,53 +47,66 @@ describe('Snippet Visibility Edit component', () => {
       expect(wrapper.element).toMatchSnapshot();
     });
 
-    it.each`
-      label                                | value
-      ${SNIPPET_VISIBILITY.private.label}  | ${`0`}
-      ${SNIPPET_VISIBILITY.internal.label} | ${`1`}
-      ${SNIPPET_VISIBILITY.public.label}   | ${`2`}
-    `('should render correct $label label', ({ label, value }) => {
-      createComponent();
-      const radio = radios.at(parseInt(value, 10));
+    it('renders visibility options', () => {
+      createComponent({}, true);
 
-      expect(radio.attributes('value')).toBe(value);
-      expect(radio.text()).toContain(label);
+      expect(findRadiosData()).toEqual([
+        {
+          value: SNIPPET_VISIBILITY_PRIVATE,
+          icon: SNIPPET_VISIBILITY.private.icon,
+          text: SNIPPET_VISIBILITY.private.label,
+          description: SNIPPET_VISIBILITY.private.description,
+        },
+        {
+          value: SNIPPET_VISIBILITY_INTERNAL,
+          icon: SNIPPET_VISIBILITY.internal.icon,
+          text: SNIPPET_VISIBILITY.internal.label,
+          description: SNIPPET_VISIBILITY.internal.description,
+        },
+        {
+          value: SNIPPET_VISIBILITY_PUBLIC,
+          icon: SNIPPET_VISIBILITY.public.icon,
+          text: SNIPPET_VISIBILITY.public.label,
+          description: SNIPPET_VISIBILITY.public.description,
+        },
+      ]);
     });
 
-    describe('rendered help-text', () => {
-      it.each`
-        description                                | value  | label
-        ${SNIPPET_VISIBILITY.private.description}  | ${`0`} | ${SNIPPET_VISIBILITY.private.label}
-        ${SNIPPET_VISIBILITY.internal.description} | ${`1`} | ${SNIPPET_VISIBILITY.internal.label}
-        ${SNIPPET_VISIBILITY.public.description}   | ${`2`} | ${SNIPPET_VISIBILITY.public.label}
-      `('should render correct $label description', ({ description, value }) => {
-        createComponent({}, true);
-
-        const help = findElements('.help-text').at(parseInt(value, 10));
+    it('when project snippet, renders special private description', () => {
+      createComponent({ isProjectSnippet: true }, true);
 
-        expect(help.text()).toBe(description);
+      expect(findRadiosData()[0]).toEqual({
+        value: SNIPPET_VISIBILITY_PRIVATE,
+        icon: SNIPPET_VISIBILITY.private.icon,
+        text: SNIPPET_VISIBILITY.private.label,
+        description: SNIPPET_VISIBILITY.private.description_project,
       });
+    });
+
+    it('renders label help link', () => {
+      createComponent();
 
-      it('renders correct Private description for a project snippet', () => {
-        createComponent({ isProjectSnippet: true }, true);
+      expect(
+        findLabel()
+          .find(GlLink)
+          .attributes('href'),
+      ).toBe(defaultHelpLink);
+    });
 
-        const helpText = findElements('.help-text')
-          .at(0)
-          .text();
+    it('when helpLink is not defined, does not render label help link', () => {
+      createComponent({ helpLink: null });
 
-        expect(helpText).not.toContain(SNIPPET_VISIBILITY.private.description);
-        expect(helpText).toBe(SNIPPET_VISIBILITY.private.description_project);
-      });
+      expect(findLabel().contains(GlLink)).toBe(false);
     });
   });
 
   describe('functionality', () => {
     it('pre-selects correct option in the list', () => {
-      const pos = 1;
+      const value = SNIPPET_VISIBILITY_INTERNAL;
+
+      createComponent({ value });
 
-      createComponent({ visibilityLevel: `${pos}` }, true);
-      const radio = radios.at(pos);
-      expect(radio.find('input[type="radio"]').element.checked).toBe(true);
+      expect(wrapper.find(GlFormRadioGroup).attributes('checked')).toBe(value);
     });
   });
 });